/* ============================================================
   LAVENDER COUNSELING CENTER
   MENTAL HEALTH RESOURCES
============================================================ */

.lavHealthResources{

    position:relative;

    overflow:hidden;

    padding:
        clamp(100px,11vw,160px)
        0;

    background:
        linear-gradient(
            180deg,
            #f7f3f5 0%,
            #fbf9f8 42%,
            #f4eff4 100%
        );

    isolation:isolate;

}


.lavHealthResources::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    left:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(118,82,134,.18),
            transparent
        );

}


.lavHealthResources::after{

    content:"";

    position:absolute;

    right:-220px;

    bottom:-280px;

    width:620px;

    height:620px;

    border:
        1px solid
        rgba(143,106,160,.08);

    border-radius:50%;

    box-shadow:
        0 0 0 80px
        rgba(143,106,160,.025),
        0 0 0 160px
        rgba(143,106,160,.018);

    pointer-events:none;

}


.lavHealthResources .container{

    position:relative;

    z-index:3;

    width:min(
        calc(100% - 40px),
        1200px
    );

    margin-inline:auto;

}


/* ============================================================
   BACKGROUND GLOWS
============================================================ */

.lavHealthResourcesGlow{

    position:absolute;

    border-radius:50%;

    filter:
        blur(20px);

    pointer-events:none;

}


.lavHealthResourcesGlowOne{

    top:40px;

    left:-160px;

    width:420px;

    height:420px;

    background:
        radial-gradient(
            circle,
            rgba(181,153,194,.22),
            rgba(181,153,194,0) 70%
        );

}


.lavHealthResourcesGlowTwo{

    top:180px;

    right:-180px;

    width:500px;

    height:500px;

    background:
        radial-gradient(
            circle,
            rgba(189,203,174,.18),
            rgba(189,203,174,0) 70%
        );

}


/* ============================================================
   BOTANICAL DETAIL
============================================================ */

.lavHealthResourcesBotanical{

    position:absolute;

    top:90px;

    right:
        max(3vw,30px);

    z-index:1;

    width:100px;

    height:210px;

    opacity:.14;

    transform:
        rotate(9deg);

    transform-origin:
        bottom center;

    pointer-events:none;

}


.lavHealthResourcesStem{

    position:absolute;

    bottom:8px;

    left:49px;

    width:2px;

    height:176px;

    border-radius:999px;

    background:
        linear-gradient(
            to top,
            #6f835e,
            #9bab8d
        );

    transform:
        rotate(5deg);

}


.lavHealthResourcesLeaf{

    position:absolute;

    width:38px;

    height:12px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #849474,
            #6c805c
        );

}


.lavHealthResourcesLeafOne{

    bottom:45px;

    left:16px;

    transform:
        rotate(20deg);

}


.lavHealthResourcesLeafTwo{

    bottom:83px;

    left:48px;

    transform:
        scaleX(-1)
        rotate(17deg);

}


.lavHealthResourcesLeafThree{

    bottom:118px;

    left:18px;

    transform:
        rotate(23deg)
        scale(.84);

}


.lavHealthResourcesBud{

    position:absolute;

    width:18px;

    height:31px;

    border-radius:
        65% 65% 47% 47%;

    background:
        linear-gradient(
            145deg,
            #b99fc5,
            #745181
        );

    box-shadow:
        0 5px 12px
        rgba(118,82,134,.12);

}


.lavHealthResourcesBudOne{

    top:5px;

    left:41px;

}


.lavHealthResourcesBudTwo{

    top:27px;

    left:27px;

    transform:
        rotate(-19deg)
        scale(.86);

}


.lavHealthResourcesBudThree{

    top:34px;

    left:54px;

    transform:
        rotate(18deg)
        scale(.82);

}


.lavHealthResourcesBudFour{

    top:57px;

    left:34px;

    transform:
        rotate(-15deg)
        scale(.74);

}


.lavHealthResourcesBudFive{

    top:66px;

    left:55px;

    transform:
        rotate(15deg)
        scale(.68);

}


/* ============================================================
   SECTION HEADER
============================================================ */

.lavHealthResourcesHeader{

    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(300px,.65fr);

    align-items:end;

    gap:
        clamp(40px,7vw,90px);

    margin-bottom:
        clamp(52px,6vw,82px);

}


.lavHealthResourcesEyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#856391;

}


.lavHealthResourcesEyebrow > span{

    display:block;

    width:34px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #856391,
            rgba(133,99,145,.12)
        );

}


.lavHealthResourcesEyebrow small{

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.lavHealthResourcesHeading h2{

    max-width:720px;

    margin:0;

    color:#3f3643;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(2.65rem,5vw,4.85rem);

    font-weight:500;

    line-height:.97;

    letter-spacing:
        -.045em;

}


.lavHealthResourcesHeading h2 span{

    display:block;

    color:#80608d;

    font-style:italic;

}


.lavHealthResourcesIntroduction{

    display:grid;

    gap:24px;

    padding-bottom:7px;

}


.lavHealthResourcesIntroduction p{

    max-width:440px;

    margin:0;

    color:#716875;

    font-size:
        clamp(.98rem,1.15vw,1.08rem);

    line-height:1.8;

}


.lavHealthResourcesViewAll{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    color:#765286;

    font-size:.86rem;

    font-weight:800;

    text-decoration:none;

    transition:
        color .25s ease;

}


.lavHealthResourcesViewAll svg{

    transition:
        transform .25s ease;

}


.lavHealthResourcesViewAll:hover{

    color:#5f3d6b;

}


.lavHealthResourcesViewAll:hover svg{

    transform:
        translateX(5px);

}


.lavHealthResourcesViewAll:focus-visible{

    outline:
        3px solid
        rgba(143,106,160,.28);

    outline-offset:5px;

    border-radius:6px;

}


/* ============================================================
   EDITORIAL GRID
============================================================ */

.lavHealthResourcesGrid{

    display:grid;

    grid-template-columns:
        minmax(0,1.42fr)
        minmax(330px,.72fr);

    gap:
        clamp(24px,3vw,38px);

    align-items:stretch;

}


/* ============================================================
   FEATURED RESOURCE
============================================================ */

.lavHealthResourceFeatured{

    min-width:0;

    margin:0;

}


.lavHealthResourceFeaturedLink{

    display:grid;

    grid-template-rows:
        minmax(360px,1fr)
        auto;

    height:100%;

    overflow:hidden;

    border:
        1px solid
        rgba(95,74,103,.10);

    border-radius:
        clamp(24px,3vw,36px);

    color:inherit;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 34px 80px
        rgba(69,51,76,.10);

    text-decoration:none;

    transform:
        translateY(30px);

    opacity:0;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1),
        opacity .8s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.lavHealthResources.is-visible
.lavHealthResourceFeaturedLink{

    transform:
        translateY(0);

    opacity:1;

}


.lavHealthResourceFeaturedLink:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(118,82,134,.22);

    box-shadow:
        0 44px 100px
        rgba(69,51,76,.16);

}


.lavHealthResourceFeaturedMedia{

    position:relative;

    min-height:420px;

    overflow:hidden;

    background:#d8cfd8;

}


.lavHealthResourceFeaturedMedia img{

    position:absolute;

    inset:-7%;

    width:114%;

    height:114%;

    object-fit:cover;

    transform:
        translate3d(
            var(--resource-x,0),
            var(--resource-y,0),
            0
        )
        scale(1.02);

    transition:
        transform .25s ease-out,
        filter .35s ease;

    will-change:transform;

}


.lavHealthResourceFeaturedLink:hover
.lavHealthResourceFeaturedMedia img{

    filter:
        saturate(1.04)
        contrast(1.02);

}


.lavHealthResourceFeaturedOverlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(37,27,40,.04) 30%,
            rgba(37,27,40,.30) 100%
        );

}


.lavHealthResourceFeaturedLabel{

    position:absolute;

    top:24px;

    left:24px;

    display:inline-flex;

    align-items:center;

    min-height:36px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(255,255,255,.32);

    border-radius:999px;

    color:#ffffff;

    background:
        rgba(54,41,58,.30);

    backdrop-filter:
        blur(12px);

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

    font-size:.67rem;

    font-weight:800;

    letter-spacing:.10em;

    text-transform:uppercase;

}


.lavHealthResourceFeaturedDecoration{

    position:absolute;

    right:25px;

    bottom:24px;

    display:flex;

    align-items:flex-end;

    gap:5px;

    height:44px;

    opacity:.78;

}


.lavHealthResourceFeaturedDecoration span{

    display:block;

    width:4px;

    border-radius:999px;

    background:
        rgba(255,255,255,.86);

}


.lavHealthResourceFeaturedDecoration span:nth-child(1){

    height:19px;

}


.lavHealthResourceFeaturedDecoration span:nth-child(2){

    height:34px;

}


.lavHealthResourceFeaturedDecoration span:nth-child(3){

    height:25px;

}


.lavHealthResourceFeaturedContent{

    display:grid;

    align-content:start;

    padding:
        clamp(28px,4vw,48px);

}


.lavHealthResourceMeta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    color:#927d99;

    font-size:.68rem;

    font-weight:750;

    letter-spacing:.055em;

    text-transform:uppercase;

}


.lavHealthResourceFeaturedContent h3{

    max-width:680px;

    margin:
        17px 0 15px;

    color:#403744;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(2rem,3.3vw,3.3rem);

    font-weight:500;

    line-height:1.02;

    letter-spacing:
        -.035em;

}


.lavHealthResourceFeaturedContent p{

    max-width:680px;

    margin:0;

    color:#756c78;

    font-size:
        clamp(.95rem,1.05vw,1.04rem);

    line-height:1.78;

}


.lavHealthResourceReadMore{

    display:inline-flex;

    align-items:center;

    gap:9px;

    width:max-content;

    margin-top:25px;

    color:#765286;

    font-size:.82rem;

    font-weight:800;

}


.lavHealthResourceReadMore svg{

    transition:
        transform .25s ease;

}


.lavHealthResourceFeaturedLink:hover
.lavHealthResourceReadMore svg,
.lavHealthResourceCardLink:hover
.lavHealthResourceReadMore svg{

    transform:
        translateX(5px);

}


/* ============================================================
   SECONDARY RESOURCES
============================================================ */

.lavHealthResourcesSecondary{

    display:grid;

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

    gap:
        clamp(22px,2.5vw,30px);

}


.lavHealthResourceCard{

    min-width:0;

    margin:0;

}


.lavHealthResourceCardLink{

    display:grid;

    grid-template-columns:
        minmax(135px,.76fr)
        minmax(0,1.24fr);

    height:100%;

    overflow:hidden;

    border:
        1px solid
        rgba(95,74,103,.09);

    border-radius:
        clamp(21px,2vw,28px);

    color:inherit;

    background:
        rgba(255,255,255,.80);

    box-shadow:
        0 22px 55px
        rgba(69,51,76,.07);

    text-decoration:none;

    transform:
        translateX(32px);

    opacity:0;

    transition:
        transform .75s
        cubic-bezier(.2,.8,.2,1),
        opacity .75s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.lavHealthResources.is-visible
.lavHealthResourceCard:nth-child(1)
.lavHealthResourceCardLink{

    transform:
        translateX(0);

    opacity:1;

    transition-delay:.12s;

}


.lavHealthResources.is-visible
.lavHealthResourceCard:nth-child(2)
.lavHealthResourceCardLink{

    transform:
        translateX(0);

    opacity:1;

    transition-delay:.22s;

}


.lavHealthResourceCardLink:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(118,82,134,.20);

    box-shadow:
        0 30px 68px
        rgba(69,51,76,.13);

}


.lavHealthResourceCardMedia{

    position:relative;

    min-height:100%;

    overflow:hidden;

    background:#d8cfd8;

}


.lavHealthResourceCardMedia img{

    position:absolute;

    inset:-8%;

    width:116%;

    height:116%;

    object-fit:cover;

    transform:
        translate3d(
            var(--resource-x,0),
            var(--resource-y,0),
            0
        )
        scale(1.02);

    transition:
        transform .25s ease-out;

    will-change:transform;

}


.lavHealthResourceCardOverlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(44,34,47,.02),
            rgba(44,34,47,.18)
        );

}


.lavHealthResourceCardNumber{

    position:absolute;

    top:14px;

    left:14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:35px;

    height:35px;

    border:
        1px solid
        rgba(255,255,255,.30);

    border-radius:50%;

    color:#ffffff;

    background:
        rgba(49,37,52,.30);

    backdrop-filter:
        blur(10px);

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

    font-size:.65rem;

    font-weight:800;

    letter-spacing:.06em;

}


.lavHealthResourceCardContent{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

    padding:
        clamp(22px,2.6vw,32px);

}


.lavHealthResourceCardContent h3{

    margin:
        13px 0 11px;

    color:#433a47;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(1.45rem,2vw,2rem);

    font-weight:550;

    line-height:1.04;

    letter-spacing:
        -.025em;

}


.lavHealthResourceCardContent p{

    display:-webkit-box;

    overflow:hidden;

    margin:0;

    color:#796f7c;

    font-size:.86rem;

    line-height:1.65;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

}


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

.lavHealthResourcesMobileAction{

    display:none;

    margin-top:28px;

}


.lavHealthResourcesMobileButton{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:
        0 20px;

    border:
        1px solid
        rgba(118,82,134,.18);

    border-radius:999px;

    color:#765286;

    background:
        rgba(255,255,255,.82);

    font-size:.84rem;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 12px 30px
        rgba(69,51,76,.07);

}


/* ============================================================
   FOCUS
============================================================ */

.lavHealthResourceFeaturedLink:focus-visible,
.lavHealthResourceCardLink:focus-visible,
.lavHealthResourcesMobileButton:focus-visible{

    outline:
        3px solid
        rgba(143,106,160,.28);

    outline-offset:5px;

}


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

@media (max-width:1020px){

    .lavHealthResourcesHeader{

        grid-template-columns:
            1fr;

        align-items:start;

        gap:25px;

    }


    .lavHealthResourcesIntroduction{

        max-width:620px;

    }


    .lavHealthResourcesGrid{

        grid-template-columns:
            1fr;

    }


    .lavHealthResourcesSecondary{

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

        grid-template-rows:auto;

    }


    .lavHealthResourceCardLink{

        grid-template-columns:
            1fr;

    }


    .lavHealthResourceCardMedia{

        min-height:260px;

    }

}


@media (max-width:720px){

    .lavHealthResources{

        padding:
            88px 0;

    }


    .lavHealthResources .container{

        width:
            calc(100% - 28px);

    }


    .lavHealthResourcesBotanical{

        top:60px;

        right:-20px;

        transform:
            rotate(9deg)
            scale(.72);

    }


    .lavHealthResourcesHeader{

        margin-bottom:42px;

    }


    .lavHealthResourcesIntroduction{

        gap:0;

    }


    .lavHealthResourcesViewAll{

        display:none;

    }


    .lavHealthResourcesGrid{

        display:block;

    }


    .lavHealthResourceFeaturedLink{

        grid-template-rows:
            310px auto;

        border-radius:26px;

    }


    .lavHealthResourceFeaturedMedia{

        min-height:310px;

    }


    .lavHealthResourceFeaturedContent{

        padding:
            27px 24px 31px;

    }


    .lavHealthResourcesSecondary{

        display:flex;

        gap:18px;

        margin:
            20px -14px 0;

        padding:
            0 14px 18px;

        overflow-x:auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:none;

        overscroll-behavior-inline:
            contain;

    }


    .lavHealthResourcesSecondary::-webkit-scrollbar{

        display:none;

    }


    .lavHealthResourceCard{

        flex:
            0 0 min(82vw,350px);

        scroll-snap-align:start;

    }


    .lavHealthResourceCardLink{

        display:grid;

        grid-template-columns:1fr;

        min-height:100%;

    }


    .lavHealthResourceCardMedia{

        min-height:220px;

    }


    .lavHealthResourceCardContent{

        justify-content:flex-start;

        padding:
            24px;

    }


    .lavHealthResourceCardContent p{

        -webkit-line-clamp:4;

    }


    .lavHealthResourcesMobileAction{

        display:block;

    }

}


@media (max-width:480px){

    .lavHealthResourcesHeading h2{

        font-size:
            clamp(2.45rem,12vw,3.35rem);

    }


    .lavHealthResourceFeaturedLink{

        grid-template-rows:
            260px auto;

    }


    .lavHealthResourceFeaturedMedia{

        min-height:260px;

    }


    .lavHealthResourceFeaturedLabel{

        top:17px;

        left:17px;

    }


    .lavHealthResourceFeaturedDecoration{

        right:18px;

        bottom:17px;

    }


    .lavHealthResourceFeaturedContent h3{

        font-size:
            clamp(2rem,10vw,2.65rem);

    }

}


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

@media (prefers-reduced-motion:reduce){

    .lavHealthResourceFeaturedLink,
    .lavHealthResourceCardLink,
    .lavHealthResourceFeaturedMedia img,
    .lavHealthResourceCardMedia img,
    .lavHealthResourceReadMore svg,
    .lavHealthResourcesViewAll svg{

        transition:none;

    }


    .lavHealthResourceFeaturedLink,
    .lavHealthResourceCardLink{

        transform:none;

        opacity:1;

    }


    .lavHealthResourceFeaturedMedia img,
    .lavHealthResourceCardMedia img{

        transform:
            scale(1.02);

    }

}

.lavHealthResourceFeaturedMedia img{

    position:absolute;

    inset:0;

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:
        var(--resource-position,50% 50%);

    transform:
        translate3d(
            var(--resource-x,0px),
            calc(
                var(--resource-y,0px) +
                var(--resource-scroll-y,0px)
            ),
            0
        )
        scale(1.055);

    transform-origin:center;

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1),
        filter .35s ease;

    will-change:transform;

}

.lavHealthResourceCardMedia img{

    position:absolute;

    inset:0;

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:
        var(--resource-position,50% 50%);

    transform:
        translate3d(
            var(--resource-x,0px),
            calc(
                var(--resource-y,0px) +
                var(--resource-scroll-y,0px)
            ),
            0
        )
        scale(1.055);

    transform-origin:center;

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1),
        filter .35s ease;

    will-change:transform;

}

@media (max-width:720px){

    .lavHealthResourceFeaturedMedia img,
    .lavHealthResourceCardMedia img{

        object-position:
            var(--resource-position,50% 50%);

        transform:
            scale(1.025);

    }

}

.lavHealthResources{

    max-width:100%;

    overflow:hidden;

}


.lavHealthResourcesGrid,
.lavHealthResourcesSecondary,
.lavHealthResourceFeatured,
.lavHealthResourceCard{

    min-width:0;

}

@media (max-width:720px){

    .lavHealthResourcesSecondary{

        display:flex;

        width:auto;

        max-width:
            calc(100vw - 14px);

        gap:18px;

        margin:
            20px -14px 0 0;

        padding:
            0 14px 18px 0;

        overflow-x:auto;

        overflow-y:hidden;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:none;

        overscroll-behavior-x:contain;

        -webkit-overflow-scrolling:touch;

    }


    .lavHealthResourceCard{

        flex:
            0 0 min(
                82vw,
                350px
            );

        max-width:
            min(
                82vw,
                350px
            );

        scroll-snap-align:start;

    }

}