/*==================================================
PREPARING PAGE
Jessica Feldman
==================================================*/

/*==================================================
GENERAL
==================================================*/

.preparing-hero,
.reflection,
.conversation-deck-section,
.why,
.transition,
.framework-banner,
.preparing-continue,
.dating-continue{
    padding:90px 0;
}

/*==================================================
HERO
==================================================*/

.preparing-hero{
    padding:70px 0;
}

.preparing-hero .room-hero-image{
    position:relative;
    width:min(1100px,92%);
    margin:auto;
    overflow:hidden;
    border-radius:28px;
    box-shadow:var(--shadow);
}

.preparing-hero .room-hero-image img{
    width:100%;
    height:460px;
    object-fit:cover;
    object-position:center;
}

.preparing-hero .hero-overlay{
    position:absolute;
    left:50px;
    bottom:40px;
    width:min(390px,85%);
    padding:30px;
    border-radius:22px;
    background:rgba(248,248,238,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.preparing-hero .hero-content{
    color:var(--brown);
}

.preparing-hero .hero-content h1,
.preparing-hero .hero-content h2{
    margin:0 0 18px;
    color:var(--magenta);
    font-family:var(--heading-font);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
}

.preparing-hero .hero-content p{
    margin:0;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
REFLECTION
==================================================*/

.reflection{
    text-align:center;
    background:
        linear-gradient(
            180deg,
            var(--cream) 0%,
            rgba(162,34,130,.08) 100%
        );
}

.reflection h2{
    margin-bottom:35px;
    color:var(--magenta);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.3;
}

.reflection p{
    max-width:680px;
    margin:auto;
    color:var(--brown);
    font-size:1.2rem;
    line-height:1.9;
}

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

.conversation-deck-section{
    padding:100px 0;
    background:var(--cream);
}

.deck-header{
    max-width:760px;
    margin:0 auto 50px;
    text-align:center;
}

.deck-header h2{
    color:var(--magenta);
}

.deck-header p{
    color:var(--brown);
    line-height:1.8;
}

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

.conversation-table{
    width:min(900px,92%);
    height:520px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:25px;
    background:
        url("../images/conversationdeck/table.jpg")
        center/cover no-repeat;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

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

.deck{
    position:relative;
    width:300px;
    height:420px;
}

/*
IMPORTANT:
These selectors deliberately stay inside the
conversation deck. There is no global .card rule
in style.css anymore.
*/

.deck .deck-shadow,
.deck .card{
    position:absolute;
    inset:0;
    width:300px;
    height:420px;
    overflow:hidden;
    border-radius:22px;
}

.deck-shadow{
    background:
        url("../images/conversationdeck/card-back.jpg")
        center/cover;
    box-shadow:0 10px 20px rgba(0,0,0,.25);
}

.shadow5{
    transform:rotate(-8deg) translate(-12px,18px);
}

.shadow4{
    transform:rotate(7deg) translate(10px,14px);
}

.shadow3{
    transform:rotate(-5deg) translate(-8px,10px);
}

.shadow2{
    transform:rotate(3deg) translate(5px,6px);
}

.shadow1{
    transform:rotate(-2deg) translate(2px,3px);
}

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

.deck .card{
    z-index:10;
    perspective:1200px;
}

.deck .card.drawn{
    transform:translateY(-35px);
    transition:transform .4s ease;
}

.card-inner{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform .8s ease;
}

.deck .card.flipped .card-inner{
    transform:rotateY(180deg);
}

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

.card-front,
.card-back{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:22px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.card-front img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.card-back{
    padding:35px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#faf8f2;
    text-align:center;
    transform:rotateY(180deg);
}

.card-back h3{
    margin-bottom:20px;
    color:var(--magenta);
    font-size:1.5rem;
}

.card-back p{
    color:var(--brown);
    font-size:1.05rem;
    line-height:1.8;
}

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

.draw-button-wrapper{
    margin-top:45px;
    text-align:center;
}

.deck-button,
.draw-button{
    cursor:pointer;
}

#nextButton{
    width:100%;
    margin-top:30px;
}

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

.instruction-card{
    max-width:760px;
    margin:60px auto 0;
    padding:35px;
    border:2px solid rgba(162,34,130,.14);
    border-radius:22px;
    background:var(--cream);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.instruction-card h3{
    color:var(--magenta);
}

.instruction-card li{
    color:var(--brown);
    line-height:2;
}

/*==================================================
WHY IT MATTERS
==================================================*/

.why{
    background:var(--magenta);
    color:var(--cream);
}

.why h2{
    margin-bottom:10px;
    color:var(--cream);
    text-align:center;
    font-size:clamp(2rem,4vw,2.8rem);
}

.why h3{
    margin-bottom:40px;
    color:var(--teal);
    text-align:center;
    font-size:1.6rem;
}

.why p{
    margin-bottom:28px;
    color:var(--cream);
    font-size:1.15rem;
    line-height:1.9;
}

/*==================================================
TRANSITION
==================================================*/

.transition{
    text-align:center;
    background:
        linear-gradient(
            135deg,
            rgba(162,34,130,.10),
            rgba(22,207,191,.07)
        ),
        var(--cream);
}

.transition h2{
    margin-bottom:28px;
    color:var(--magenta);
    font-size:clamp(2rem,4vw,2.8rem);
}

.transition p{
    max-width:700px;
    margin:auto;
    color:var(--brown);
    font-size:1.2rem;
    line-height:2;
}

/*==================================================
FRAMEWORK BANNER
==================================================*/

.framework-banner{
    margin:90px 0;
    padding:0;
}

.framework-background{
    position:relative;
    max-width:1200px;
    margin:auto;
    overflow:hidden;
    border-radius:30px;
    box-shadow:var(--shadow);
}

.framework-background > img{
    width:100%;
    height:650px;
    object-fit:cover;
}

.framework-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    padding:60px 0;
    background:linear-gradient(
        rgba(248,248,238,.18),
        rgba(248,248,238,.84)
    );
}

.framework-heading{
    margin-bottom:60px;
    text-align:center;
}

.framework-heading h2{
    margin-bottom:20px;
    color:var(--magenta);
    font-size:2.6rem;
}

.framework-heading h3{
    max-width:700px;
    margin:auto;
    color:var(--brown);
    font-size:1.5rem;
}

.framework-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
    margin-bottom:50px;
}

.framework-panel{
    padding:34px;
    border-top:6px solid var(--teal);
    border-radius:22px;
    background:rgba(248,248,238,.96);
    box-shadow:0 16px 40px rgba(0,0,0,.12);
    transition:var(--transition);
}

.framework-panel:nth-child(2){
    border-top-color:var(--magenta);
}

.framework-panel:nth-child(3){
    border-top-color:var(--deep-teal);
}

.framework-panel:hover{
    transform:translateY(-8px);
}

.framework-panel h3{
    margin-bottom:14px;
    color:var(--deep-teal);
}

.framework-panel p{
    color:var(--brown);
    line-height:1.7;
}

/*==================================================
CONTINUE / NEXT STEPS
Supports either class name while old HTML is cleaned.
==================================================*/

.preparing-continue,
.dating-continue{
    position:relative;
    background:rgba(162,34,130,.08);
}

.preparing-continue::before,
.dating-continue::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:8px;
    background:var(--magenta);
}

.preparing-continue h2,
.dating-continue h2{
    color:var(--magenta);
    text-align:center;
}

/*
The grid/card sizing comes from style.css.
Preparing only adds its page color.
*/

.preparing-continue .continue-card,
.dating-continue .continue-card{
    border:2px solid rgba(162,34,130,.20);
}

.preparing-continue .continue-card:hover,
.dating-continue .continue-card:hover{
    border-color:var(--magenta);
}

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

@media(max-width:900px){
    .framework-grid{
        grid-template-columns:1fr;
    }

    .framework-background > img{
        height:760px;
    }
}

@media(max-width:700px){
    .preparing-hero,
    .reflection,
    .conversation-deck-section,
    .why,
    .transition,
    .preparing-continue,
    .dating-continue{
        padding:65px 0;
    }

    .preparing-hero .room-hero-image img{
        height:430px;
    }

    .preparing-hero .hero-overlay{
        left:18px;
        right:18px;
        bottom:18px;
        width:auto;
        padding:22px;
    }

    .preparing-hero .hero-content h1,
    .preparing-hero .hero-content h2{
        font-size:1.6rem;
    }

    .reflection p,
    .transition p{
        font-size:1rem;
    }

    .conversation-table{
        width:min(94%,900px);
        height:470px;
    }

    .deck{
        width:250px;
        height:350px;
    }

    .deck .deck-shadow,
    .deck .card{
        width:250px;
        height:350px;
    }

    .card-back{
        padding:25px;
    }

    .card-back h3{
        font-size:1.3rem;
    }

    .card-back p{
        font-size:.95rem;
        line-height:1.65;
    }

    .instruction-card{
        padding:28px;
    }

    .framework-background > img{
        height:900px;
    }

    .framework-overlay{
        align-items:flex-start;
        overflow-y:auto;
        padding:45px 0;
    }

    .framework-heading{
        margin-bottom:35px;
    }

    .framework-heading h2{
        font-size:2rem;
    }

    .framework-heading h3{
        font-size:1.15rem;
    }
}

@media(max-width:500px){
    .conversation-table{
        height:410px;
    }

    .deck{
        width:220px;
        height:308px;
    }

    .deck .deck-shadow,
    .deck .card{
        width:220px;
        height:308px;
    }

    .card-back{
        padding:20px;
    }

    .card-back h3{
        margin-bottom:12px;
        font-size:1.15rem;
    }

    .card-back p{
        font-size:.88rem;
        line-height:1.5;
    }

    #nextButton{
        font-size:0;
    }

    #nextButton::after{
        content:"Next Card";
        font-size:.78rem;
    }
}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){
    .card-inner,
    .deck .card,
    .framework-panel{
        transition:none;
    }

    .framework-panel:hover{
        transform:none;
    }
}

/* ==================================================
   PREPARING - MOBILE + DECK FINAL FIXES
   ================================================== */

/* The start control belongs physically on the table with the deck. */
.conversation-table{
    height:auto;
    min-height:590px;
    flex-direction:column;
    gap:24px;
    padding:34px 20px;
    box-sizing:border-box;
}

.conversation-table .draw-button-wrapper{
    margin:0;
    position:relative;
    z-index:30;
}

#nextButton,
.draw-button{
    border:0;
    border-radius:999px;
    padding:13px 22px;
    background:var(--deep-teal);
    color:var(--cream);
    font:600 .92rem/1.2 var(--body-font);
    box-shadow:0 8px 18px rgba(0,0,0,.14);
}

#nextButton:hover,
.draw-button:hover{
    background:var(--magenta);
}

/* Mobile hero: photograph first, words underneath. */
@media(max-width:700px){
    .preparing-hero .room-hero-image{
        overflow:visible;
        border-radius:0;
        box-shadow:none;
        background:transparent;
    }

    .preparing-hero .room-hero-image img{
        display:block;
        width:100%;
        height:350px;
        border-radius:20px;
        box-shadow:var(--shadow);
    }

    .preparing-hero .hero-overlay{
        position:static;
        width:100%;
        margin:24px 0 0;
        padding:0 6px;
        background:transparent;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        border-radius:0;
        box-shadow:none;
    }

    /* Framework banner becomes normal-flow content so no cards can be clipped. */
    .framework-background{
        overflow:visible;
        border-radius:22px;
        background:var(--cream);
    }

    .framework-background > img{
        display:block;
        height:280px;
        border-radius:22px 22px 0 0;
    }

    .framework-overlay{
        position:static;
        display:block;
        padding:36px 20px 40px;
        background:var(--cream);
        border-radius:0 0 22px 22px;
    }

    .framework-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
    }

    .framework-panel{
        width:100%;
        box-sizing:border-box;
    }

    .conversation-table{
        width:94%;
        min-height:470px;
        height:auto;
        padding:28px 14px 22px;
        gap:24px;
    }

    .deck .card.drawn{
        transform:none;
    }

    #nextButton{
        display:block;
        width:100%;
        margin-top:18px;
        font-size:.78rem;
    }

    #nextButton::after{
        content:none;
    }

    .continue-grid{
        grid-template-columns:1fr;
    }

    .continue-card{
        overflow:hidden;
    }

    .continue-card img{
        display:block;
        width:100%;
        height:210px;
        object-fit:cover;
    }
}

@media(max-width:500px){
    .conversation-table{
        min-height:430px;
    }
}


/* FINAL SMALL FIX */
@media(max-width:700px){
.deck .card-back{padding:24px 22px 20px;box-sizing:border-box}
.deck .card-back h3{font-size:1.25rem;line-height:1.2;margin:0 0 12px}
.deck .card-back p{font-size:.98rem;line-height:1.45;margin:0 0 14px}
#nextButton{margin-top:10px;padding:11px 16px;font-size:.76rem;line-height:1.2}
}
@media(max-width:420px){
.deck .card-back h3{font-size:1.12rem}
.deck .card-back p{font-size:.9rem;line-height:1.38}
}


/* FINAL PREPARING CARD FIT
   Reserve room for the button by making the question copy more compact. */
@media(max-width:700px){
    .deck .card-back{
        justify-content:center;
        padding:18px 18px 16px;
    }

    .deck .card-back h3{
        flex:0 0 auto;
        margin:0 0 8px;
        font-size:1.05rem;
        line-height:1.15;
    }

    .deck .card-back p{
        flex:0 1 auto;
        margin:0 0 8px;
        font-size:.82rem;
        line-height:1.28;
    }

    #nextButton{
        flex:0 0 auto;
        width:100%;
        margin-top:6px;
        padding:9px 12px;
        font-size:.72rem;
        line-height:1.1;
    }
}

@media(max-width:500px){
    .deck .card-back{
        padding:15px 16px 14px;
    }

    .deck .card-back h3{
        font-size:.98rem;
    }

    .deck .card-back p{
        font-size:.78rem;
        line-height:1.24;
    }

    #nextButton{
        margin-top:5px;
        padding:8px 10px;
    }
}


/* ==================================================
   PREPARING - INSTRUCTIONS FIRST + START BUTTON ON TABLE
   ================================================== */

.instruction-card{
    margin:0 auto 42px;
}

/* Keep the start control visibly on the wooden tabletop,
   but separate from the physical stack of cards. */
.conversation-table{
    position:relative;
}

.conversation-table .draw-button-wrapper{
    position:absolute;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100% - 40px);
    margin:0;
    z-index:40;
}

.conversation-table .deck{
    margin-bottom:72px;
}

@media(max-width:700px){
    .instruction-card{
        margin:0 auto 30px;
    }

    .conversation-table{
        padding-bottom:88px;
    }

    .conversation-table .deck{
        margin-bottom:0;
    }

    .conversation-table .draw-button-wrapper{
        left:50%;
        bottom:22px;
        transform:translateX(-50%);
    }
}


/* ==================================================
   PREPARING - TOPIC STRIP ON EACH CONVERSATION CARD
   Uses the existing card heading, so no JS changes are needed.
   ================================================== */
.deck .card-back h3{
    position:relative;
    width:calc(100% + 36px);
    margin-left:-18px;
    margin-right:-18px;
    padding:8px 14px;
    box-sizing:border-box;
    background:rgba(162,34,130,.10);
    border-top:1px solid rgba(162,34,130,.10);
    border-bottom:1px solid rgba(162,34,130,.14);
    color:var(--magenta);
    text-align:center;
}

@media(max-width:700px){
    .deck .card-back h3{
        width:calc(100% + 30px);
        margin-left:-15px;
        margin-right:-15px;
        padding:6px 10px;
    }
}


/* FINAL TOPIC STRIP COLOR */
.deck .card-back h3{
    background:rgba(22,207,191,.13);
    border-top-color:rgba(19,96,94,.10);
    border-bottom-color:rgba(19,96,94,.15);
    color:var(--deep-teal);
}