/*==================================================
WORKSHOPS & SPEAKING
Jessica Feldman
==================================================*/


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

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

.workshop-hero-image{
    position:relative;

    width:min(1100px,92%);
    height:560px;

    margin:auto;

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow);
}

.workshop-hero-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.workshop-hero-panel{

    position:absolute;

    left:50%;
    bottom:10px;

    transform:translateX(-50%);

    width:min(920px,86%);

    padding:18px 30px;

    border-radius:18px;

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

    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);

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

}

.workshop-eyebrow{
    margin:0 0 10px;

    color:var(--magenta);

    font-size:.82rem;
    font-weight:700;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.workshop-hero-panel h1{

    margin:0 0 8px;

    color:var(--deep-teal);

    font-size:clamp(1.7rem,2.7vw,2.45rem);

    line-height:1.15;

}

.workshop-hero-panel p:last-child{

    max-width:820px;

    margin:0;

    color:var(--brown);

    font-size:.95rem;

    line-height:1.55;

}

.workshop-hero-panel .workshop-eyebrow{

    margin-bottom:5px;

    font-size:.75rem;

}


/*==================================================
INTRO
==================================================*/

.workshop-intro{
    padding:105px 0;

    text-align:center;
}

.workshop-intro p{
    max-width:730px;

    margin:0 auto 22px;

    color:var(--brown);

    font-size:1.12rem;

    line-height:1.9;
}

.intro-highlight{
    margin-top:38px !important;

    padding:24px 28px;

    border-left:6px solid var(--teal);

    background:rgba(22,207,191,.08);

    color:var(--deep-teal) !important;

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

    font-size:1.3rem !important;

    text-align:left;
}


/*==================================================
EXPERIENCE
==================================================*/

.workshop-experience{
    padding:105px 0;

    background:var(--deep-teal);
}

.workshop-experience .section-heading h2,
.workshop-experience .section-heading p{
    color:var(--cream);
}

.experience-grid{
    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:24px;

    margin-top:60px;
}

.experience-card{
    min-height:255px;

    padding:32px 28px;

    border-radius:22px;

    background:var(--cream);

    box-shadow:0 15px 34px rgba(0,0,0,.14);

    border-bottom:6px solid var(--teal);
}

.experience-card:nth-child(2){
    border-bottom-color:var(--magenta);
}

.experience-card:nth-child(3){
    border-bottom-color:var(--deep-teal);
}

.experience-card:nth-child(4){
    border-bottom-color:var(--teal);
}

.experience-number{
    display:block;

    margin-bottom:26px;

    color:var(--magenta);

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

    font-size:1.8rem;

    opacity:.55;
}

.experience-card h3{
    margin-bottom:12px;

    color:var(--deep-teal);
}

.experience-card p{
    margin:0;

    color:var(--brown);

    line-height:1.75;
}


/*==================================================
TOPICS
==================================================*/

.workshop-topics{
    padding:110px 0;

    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.08),
            rgba(162,34,130,.05)
        ),
        var(--cream);
}

.topic-wall{
    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:28px;

    margin-top:60px;
}

.workshop-topic{
    min-height:235px;

    padding:34px;

    border-radius:22px;

    background:var(--cream);

    box-shadow:var(--shadow);
}

.workshop-topic > span{
    display:inline-block;

    margin-bottom:20px;

    padding:7px 13px;

    border-radius:999px;

    font-size:.75rem;
    font-weight:700;

    letter-spacing:.07em;

    text-transform:uppercase;
}

.topic-teal{
    border-top:6px solid var(--teal);
}

.topic-teal > span{
    background:var(--teal);

    color:var(--deep-teal);
}

.topic-magenta{
    border-top:6px solid var(--magenta);
}

.topic-magenta > span{
    background:var(--magenta);

    color:var(--cream);
}

.topic-deep{
    border-top:6px solid var(--deep-teal);
}

.topic-deep > span{
    background:var(--deep-teal);

    color:var(--cream);
}

.workshop-topic h3{
    margin-bottom:12px;

    color:var(--deep-teal);
}

.workshop-topic p{
    margin:0;

    color:var(--brown);

    line-height:1.8;
}


/*==================================================
AUDIENCES
==================================================*/

.workshop-audiences{
    padding:110px 0;

    background:var(--cream);
}

.audience-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:26px;

    margin-top:60px;
}

.audience-card{
    min-height:220px;

    padding:32px;

    border-radius:22px;

    background:rgba(22,207,191,.08);

    border:1px solid rgba(19,96,94,.08);
}

.audience-card:nth-child(2),
.audience-card:nth-child(5){
    background:rgba(162,34,130,.07);
}

.audience-card:nth-child(3),
.audience-card:nth-child(6){
    background:rgba(19,96,94,.09);
}

.audience-card h3{
    margin-bottom:14px;

    color:var(--deep-teal);
}

.audience-card p{
    margin:0;

    color:var(--brown);

    line-height:1.8;
}


/*==================================================
IN THE ROOM
==================================================*/

.in-the-room{
    padding:110px 0;

    background:var(--magenta);
}

.in-room-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.in-room-content .workshop-eyebrow{
    color:var(--teal);
}

.in-room-content h2{
    margin-bottom:25px;

    color:var(--cream);

    text-align:left;
}

.in-room-content p{
    color:var(--cream);

    line-height:1.8;
}

.room-highlight{
    margin-top:28px;

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

    font-size:1.25rem;
}

.interaction-board{
    position:relative;

    min-height:450px;

    border-radius:24px;

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

    border:1px solid rgba(248,248,238,.18);
}

.interaction-note{
    position:absolute;

    padding:17px 23px;

    border-radius:14px;

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

    box-shadow:0 12px 25px rgba(0,0,0,.14);
}

.note-one{
    top:30px;
    left:30px;

    background:var(--teal);

    color:var(--deep-teal);

    transform:rotate(-4deg);
}

.note-two{
    top:70px;
    right:30px;

    background:var(--cream);

    color:var(--magenta);

    transform:rotate(3deg);
}

.note-three{
    top:175px;
    left:85px;

    background:var(--deep-teal);

    color:var(--cream);

    transform:rotate(2deg);
}

.note-four{
    top:245px;
    right:35px;

    background:var(--teal);

    color:var(--deep-teal);

    transform:rotate(-4deg);
}

.note-five{
    bottom:65px;
    left:35px;

    background:var(--cream);

    color:var(--deep-teal);

    transform:rotate(4deg);
}

.note-six{
    bottom:20px;
    right:70px;

    background:var(--deep-teal);

    color:var(--cream);

    transform:rotate(-2deg);
}


/*==================================================
FORMATS
==================================================*/

.workshop-formats{
    padding:110px 0;

    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.09),
            rgba(19,96,94,.05)
        ),
        var(--cream);
}

.format-grid{
    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:28px;

    margin-top:60px;
}

.format-card{
    padding:36px;

    border-radius:22px;

    background:var(--cream);

    box-shadow:var(--shadow);

    border-left:6px solid var(--teal);
}

.format-card:nth-child(2){
    border-left-color:var(--magenta);
}

.format-card:nth-child(3){
    border-left-color:var(--deep-teal);
}

.format-card:nth-child(4){
    border-left-color:var(--teal);
}

.format-label{
    margin:0 0 14px;

    color:var(--magenta);

    font-size:.73rem;
    font-weight:700;

    letter-spacing:.1em;
}

.format-card h3{
    margin-bottom:12px;

    color:var(--deep-teal);
}

.format-card p:last-child{
    margin-bottom:0;

    color:var(--brown);

    line-height:1.8;
}


/*==================================================
CUSTOM
==================================================*/

.workshop-custom{
    padding:105px 0;

    background:var(--deep-teal);
}

.custom-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:80px;

    align-items:center;
}

.custom-heading .workshop-eyebrow{
    color:var(--teal);
}

.custom-heading h2{
    margin:0;

    color:var(--cream);

    text-align:left;
}

.custom-copy p{
    color:var(--cream);

    line-height:1.85;
}

.custom-emphasis{
    margin-top:30px;

    color:var(--teal) !important;

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

    font-size:1.35rem;
}


/*==================================================
APPROACH
==================================================*/

.workshop-approach{
    padding:105px 0;

    text-align:center;

    background:var(--cream);
}

.workshop-approach p{
    max-width:720px;

    margin:0 auto 22px;

    color:var(--brown);

    line-height:1.85;
}

.approach-ending{
    margin-top:36px !important;

    color:var(--deep-teal) !important;

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

    font-size:1.4rem;
}


/*==================================================
ENDING
==================================================*/

.workshop-ending{
    padding:105px 0;

    text-align:center;

    background:var(--magenta);
}

.workshop-ending .workshop-eyebrow{
    color:var(--teal);
}

.workshop-ending h2{
    margin-bottom:20px;

    color:var(--cream);
}

.workshop-ending p{
    max-width:650px;

    margin:0 auto 30px;

    color:var(--cream);

    font-size:1.08rem;

    line-height:1.8;
}

.workshop-ending .button{
    background:var(--teal);

    color:var(--deep-teal);
}


/*==================================================
CONTINUE
==================================================*/

.continue-section{
    padding:90px 0;

    background:var(--cream);
}

.continue-section .section-title h2{
    margin-bottom:50px;

    color:var(--deep-teal);

    text-align:center;
}


/*==================================================
TABLET
==================================================*/

@media(max-width:900px){

    .experience-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .audience-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .in-room-grid,
    .custom-grid{
        grid-template-columns:1fr;

        gap:50px;
    }

}


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

@media(max-width:700px){

    .workshop-hero{
        padding:0;
    }

    .workshop-hero-image{
        width:100%;
        height:auto;

        border-radius:0;
    }

    .workshop-hero-image img{
        height:420px;
    }

    
@media(max-width:700px){
.workshop-hero-panel{


        position:relative;

        left:auto;
        bottom:auto;

        transform:none;

        width:auto;

        padding:28px 22px;

        border-radius:0;

        background:var(--cream);

        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        box-shadow:none;

    }

}

    .workshop-intro,
    .workshop-experience,
    .workshop-topics,
    .workshop-audiences,
    .in-the-room,
    .workshop-formats,
    .workshop-custom,
    .workshop-approach,
    .workshop-ending,
    .continue-section{
        padding:70px 0;
    }

    .experience-grid,
    .topic-wall,
    .audience-grid,
    .format-grid{
        grid-template-columns:1fr;
    }

    .interaction-board{
        min-height:390px;
    }

}


/*==================================================
SMALL MOBILE
==================================================*/

@media(max-width:450px){

    .workshop-hero-image img{
        height:350px;
    }

    .experience-card,
    .workshop-topic,
    .audience-card,
    .format-card{
        padding:26px 22px;
    }

    .interaction-note{
        padding:14px 17px;

        font-size:.95rem;
    }

}