/*====================================================
CONVERSATION DECK
====================================================*/

.conversation-deck-section{
    padding:110px 0;
    text-align:center;
}

.deck-header{
    max-width:760px;
    margin:0 auto 60px;
}

.deck-header h2{
    font-family:var(--heading-font);
    color:var(--deep-teal);
    font-size:2.5rem;
    margin-bottom:20px;
}

.deck-header p{
    font-size:1.15rem;
    line-height:1.8;
}

/*====================================================
TABLE
====================================================*/

.conversation-table{

    position:relative;

    width:min(980px,92vw);

    height:620px;

    margin:0 auto;

    border-radius:28px;

    overflow:hidden;

    background-image:url("../images/conversationdeck/table.jpg");
    background-size:cover;
    background-position:center;

    box-shadow:
        0 35px 70px rgba(0,0,0,.18);

}

/*====================================================
DECORATIONS
====================================================*/

.table-notebook{

    position:absolute;

    width:230px;

    left:50px;

    top:70px;

    transform:rotate(-14deg);

    z-index:1;

}

.table-coffee{

    position:absolute;

    width:110px;

    right:70px;

    top:55px;

    z-index:2;

}

/*====================================================
DECK POSITION
====================================================*/

.deck{

    position:absolute;

    left:50%;

    top:52%;

    transform:translate(-50%,-50%);

    width:235px;

    height:335px;

    perspective:1800px;

}

/*====================================================
STACK
====================================================*/

.deck-shadow{

    background-image:url("../images/conversationdeck/card-back.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

    box-shadow:
        0 14px 35px rgba(0,0,0,.18);

}

.shadow1{

    transform:
        translateY(20px)
        rotate(-5deg);

}

.shadow2{

    transform:
        translateY(14px)
        rotate(4deg);

}

.shadow3{

    transform:
        translateY(8px)
        rotate(-2deg);

}

.shadow4{

    transform:
        translateY(3px);

}

/*====================================================
CARD
====================================================*/

.card{

    position:absolute;

    inset:0;

    z-index:20;

    cursor:pointer;

    transform-style:preserve-3d;

    transition:
        transform .8s cubic-bezier(.22,.8,.2,1);

    transition:
        transform .55s ease,
        box-shadow .3s ease;

}

.card.drawn{

    transform:
        translateX(120px)
        translateY(-35px)
        rotate(10deg);

}

.card-inner{

    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;

    transition:
        transform .8s cubic-bezier(.22,.8,.2,1);

}

.card.flipped .card-inner{

    transform:rotateY(180deg);

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 30px 55px rgba(0,0,0,.28);

}

/*====================================================
CARD SIDES
====================================================*/

.card-front,
.card-back{

    position:absolute;

    inset:0;

    border-radius:18px;

    overflow:hidden;

    backface-visibility:hidden;

    box-shadow:
        0 25px 50px rgba(0,0,0,.28);

}

.card-front{

    background:#f8f8ee;

}

.card-back{

    background:#f8f8ee;

    transform:rotateY(180deg);

    display:flex;

    flex-direction:column;

    padding:24px 26px;

    justify-content:flex-start;

    align-items:center;

    padding:45px;

    text-align:center;

}

/*====================================================
BACK IMAGE
====================================================*/

.card-back-image{

    width:100%;

    height:auto;

    object-fit:cover;

}

/*====================================================
QUESTION SIDE
====================================================*/

.topic-strip{

    width:100%;

    height:12px;

    border-radius:8px;

    margin:0 0 22px;

}

/* Brand colours */

.topic-strip.communication{
    background:var(--deep-teal);
}

.topic-strip.money{
    background:var(--magenta);
}

.topic-strip.family{
    background:rgba(22,207,191,.45);
}

.topic-strip.household{
    background:rgba(19,96,94,.35);
}

.topic-strip.dreams{
    background:rgba(162,34,130,.45);
}

#cardTopic{

    font-family:var(--heading-font);

    font-size:1.45rem;

    margin:8px 0 12px;

    color:var(--deep-teal);

}

#cardQuestion{

    font-size:.96rem;

    line-height:1.55;

    margin:0 0 24px;

    color:var(--brown);

    flex:unset;

    overflow:visible;

}

.deck-button{

    margin-top:0;

}

/*====================================================
BUTTONS
====================================================*/

.draw-button-wrapper{

    margin:45px auto 35px;

    text-align:center;

}

.draw-button,
.deck-button{

    padding:15px 34px;

    border:none;

    border-radius:999px;

    background:var(--magenta);

    color:white;

    font-size:1rem;

    cursor:pointer;

    transition:.25s;

}

.draw-button:hover,
.deck-button:hover{

    transform:translateY(-3px);

    background:var(--deep-teal);

}


/*====================================================
INSTRUCTIONS
====================================================*/

.instruction-card{

    width:min(760px,92vw);

    margin:40px auto 0;

    padding:34px 40px;

    background:rgba(248,248,238,.92);

    border:2px solid rgba(19,96,94,.12);

    border-radius:22px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);

    text-align:left;

}

.instruction-card h3{

    margin:0 0 22px;

    font-family:var(--heading-font);

    color:var(--deep-teal);

    font-size:1.6rem;

}

.instruction-card ul{

    margin:0;

    padding-left:22px;

}

.instruction-card li{

    margin-bottom:14px;

    color:var(--brown);

    line-height:1.8;

    font-size:1.02rem;

}

.instruction-card li:last-child{

    margin-bottom:0;

}

/*====================================================
RESPONSIVE
====================================================*/

@media (max-width:900px){

    .conversation-table{

        height:500px;

    }

    .deck{

        width:250px;

        height:355px;

    }

    .table-notebook{

        width:170px;

        left:20px;

        top:30px;

    }

    .table-coffee{

        width:80px;

        right:20px;

        top:25px;

    }

}

@media (max-width:600px){

    .conversation-table{

        height:420px;

    }

    .deck{

        width:190px;

        height:270px;

    }

    .table-notebook{

        display:none;

    }

    .table-coffee{

        width:60px;

        right:15px;

        top:15px;

    }

    #cardTopic{

        font-size:1.35rem;

    }

    #cardQuestion{

        font-size:.95rem;

        line-height:1.5;

    }

    .instruction-card{

        padding:26px;

    }

}
/*==================================================
MOBILE
==================================================*/

@media (max-width:900px){

    .conversation-table{

        min-height:720px;

    }

    .deck{

        width:260px;

        height:370px;

    }

    .table-notebook{

        width:160px;

        left:25px;

        top:35px;

    }

    .table-coffee{

        width:90px;

        right:20px;

        bottom:25px;

    }

    #cardQuestion{

        font-size:1.45rem;

    }

}

@media (max-width:650px){

    .conversation-table{

        min-height:620px;

    }

    .deck{

        width:220px;

        height:315px;

    }

    .draw-button{

        bottom:22px;

        font-size:.95rem;

        padding:14px 28px;

    }

    .instruction-card{

        padding:28px;

    }

}