/* ==========================================================
   LAVENDER COUNSELING CENTER
   RESOURCES HERO
========================================================== */

.lavResourcesHero{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:flex;
    align-items:center;

    min-height:360px;
    max-height:80vh;

    padding:
        clamp(5.8rem,8vw,7rem)
        0
        clamp(3.2rem,6vw,4.5rem);

    background:
        linear-gradient(
            135deg,
            #fcfbfd 0%,
            #f8f4fa 52%,
            #efe8f4 100%
        );

    border-bottom:
        1px solid
        rgba(119,89,137,.10);

}


/* ==========================================================
   CONTAINER
========================================================== */

.lavResourcesHero .container{

    position:relative;
    z-index:5;

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

    margin-inline:auto;

}


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

.lavResourcesHeroGrid{

    display:grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(300px,.55fr);

    align-items:center;

    gap:
        clamp(
            2.5rem,
            6vw,
            5rem
        );

}


/* ==========================================================
   CONTENT
========================================================== */

.lavResourcesHeroContent{

    max-width:720px;

}


/* ==========================================================
   EYEBROW
========================================================== */

.lavResourcesHeroEyebrow{

    display:inline-flex;
    align-items:center;
    gap:.75rem;

    margin-bottom:1rem;

}

.lavResourcesHeroEyebrow span{

    width:2.25rem;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #7c5d92,
            #b69ac8
        );

}

.lavResourcesHeroEyebrow p{

    margin:0;

    color:#785b8c;

    font-size:.76rem;
    font-weight:700;
    line-height:1.2;

    letter-spacing:.16em;
    text-transform:uppercase;

}


/* ==========================================================
   TITLE
========================================================== */

.lavResourcesHero h1{

    margin:0;

    color:#32273a;

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

    font-size:
        clamp(
            2.7rem,
            5vw,
            4.6rem
        );

    font-weight:500;
    line-height:.96;

    letter-spacing:-.045em;

}

.lavResourcesHero h1 span{

    color:#87659d;

}


/* ==========================================================
   LEAD
========================================================== */

.lavResourcesHeroLead{

    max-width:650px;

    margin:
        1.3rem
        0
        0;

    color:#675f6f;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.08rem
        );

    line-height:1.75;

}


/* ==========================================================
   META
========================================================== */

.lavResourcesHeroMeta{

    display:inline-flex;
    align-items:center;
    gap:1.25rem;

    flex-wrap:wrap;

    margin-top:2rem;

}

.lavResourcesHeroMetaItem{

    display:flex;
    flex-direction:column;
    gap:.25rem;

}

.lavResourcesHeroMetaItem strong{

    color:#493956;

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

    letter-spacing:.08em;
    text-transform:uppercase;

}

.lavResourcesHeroMetaItem span{

    color:#7c727f;

    font-size:.94rem;

}

.lavResourcesHeroDivider{

    width:1px;
    height:34px;

    background:
        rgba(
            122,
            91,
            141,
            .18
        );

}


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

.lavResourcesHeroCard{

    position:relative;

    padding:
        clamp(
            1.7rem,
            3vw,
            2.3rem
        );

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.56)
        );

    border:
        1px solid
        rgba(120,90,140,.14);

    border-radius:30px;

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

    box-shadow:
        0 28px 60px
        rgba(73,50,88,.10);

}

.lavResourcesHeroCard::before{

    content:"";

    position:absolute;

    top:1rem;
    right:1rem;

    width:58px;
    height:58px;

    border:
        1px solid
        rgba(136,102,157,.15);

    border-radius:
        61% 39% 63% 37% /
        45% 58% 42% 55%;

    transform:rotate(18deg);

}

.lavResourcesHeroCardIcon{

    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin-bottom:1rem;

    color:#7b5d91;

    background:
        rgba(
            138,
            103,
            160,
            .10
        );

    border:
        1px solid
        rgba(
            138,
            103,
            160,
            .15
        );

    border-radius:16px;

}

.lavResourcesHeroCardIcon svg{

    width:26px;
    height:26px;

}

.lavResourcesHeroCard h2{

    margin:0;

    color:#382d41;

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

    font-size:
        clamp(
            1.8rem,
            2.4vw,
            2.2rem
        );

    font-weight:600;
    line-height:1.08;

}

.lavResourcesHeroCard p{

    margin:
        .9rem
        0
        0;

    color:#736979;

    font-size:.93rem;
    line-height:1.75;

}

.lavResourcesHeroEmergency{

    margin-top:1.6rem;

    padding:
        1rem
        1.2rem;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;

    background:
        linear-gradient(
            135deg,
            rgba(135,99,156,.08),
            rgba(186,162,201,.05)
        );

    border:
        1px solid
        rgba(133,98,154,.15);

    border-radius:18px;

}

.lavResourcesHeroEmergency strong{

    color:#6b4f7f;

    font-size:2rem;
    font-weight:700;

    line-height:1;

}

.lavResourcesHeroEmergency span{

    text-align:right;

    color:#6f6674;

    font-size:.84rem;
    line-height:1.5;

}


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

.lavResourcesHeroGlow{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(12px);

    z-index:0;

}

.lavResourcesHeroGlowOne{

    top:-150px;
    left:-90px;

    width:390px;
    height:390px;

    background:
        radial-gradient(
            circle,
            rgba(184,154,203,.22),
            rgba(184,154,203,0)
            70%
        );

}

.lavResourcesHeroGlowTwo{

    right:-130px;
    bottom:-180px;

    width:470px;
    height:470px;

    background:
        radial-gradient(
            circle,
            rgba(152,117,174,.18),
            rgba(152,117,174,0)
            72%
        );

}


/* ==========================================================
   TEXTURE
========================================================== */

.lavResourcesHeroTexture{

    position:absolute;
    inset:0;

    opacity:.28;

    pointer-events:none;

    background-image:
        radial-gradient(
            rgba(86,61,101,.12)
            .7px,
            transparent
            .7px
        );

    background-size:18px 18px;

    mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.75),
            transparent 92%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.75),
            transparent 92%
        );

}


/* ==========================================================
   REVEAL
========================================================== */

.lavResourcesHero .reveal-soft{

    opacity:0;

    transform:
        translateY(20px);

    transition:
        opacity .85s ease,
        transform .85s cubic-bezier(.22,1,.36,1);

}

.lavResourcesHero.is-visible .reveal-soft{

    opacity:1;
    transform:none;

}

.lavResourcesHero .delay-1{
    transition-delay:.08s;
}

.lavResourcesHero .delay-2{
    transition-delay:.16s;
}

.lavResourcesHero .delay-3{
    transition-delay:.24s;
}

.lavResourcesHero .delay-4{
    transition-delay:.32s;
}


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

@media (max-width:900px){

    .lavResourcesHero{

        min-height:auto;
        max-height:none;

        padding:
            7rem
            0
            4rem;

    }

    .lavResourcesHeroGrid{

        grid-template-columns:1fr;

    }

    .lavResourcesHeroCard{

        max-width:520px;

    }

}


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

@media (max-width:640px){

    .lavResourcesHero{

        padding:
            6.5rem
            0
            3rem;

    }

    .lavResourcesHero .container{

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

    }

    .lavResourcesHero h1{

        font-size:
            clamp(
                2.3rem,
                12vw,
                3.5rem
            );

    }

    .lavResourcesHeroMeta{

        flex-direction:column;
        align-items:flex-start;

        gap:.9rem;

    }

    .lavResourcesHeroDivider{

        display:none;

    }

    .lavResourcesHeroEmergency{

        flex-direction:column;
        align-items:flex-start;

    }

    .lavResourcesHeroEmergency span{

        text-align:left;

    }

}


/* ==========================================================
   SHORT SCREENS
========================================================== */

@media (min-width:901px) and (max-height:760px){

    .lavResourcesHero{

        min-height:320px;

        padding:
            5.2rem
            0
            2.6rem;

    }

}


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

.lavResourcesHero a:focus-visible,
.lavResourcesHero button:focus-visible{

    outline:
        3px solid
        rgba(
            110,
            82,
            130,
            .35
        );

    outline-offset:4px;

}


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

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

    .lavResourcesHero *,
    .lavResourcesHero *::before,
    .lavResourcesHero *::after{

        animation-duration:.01ms!important;
        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

    }

    .lavResourcesHero .reveal-soft{

        opacity:1;
        transform:none;

    }

}