/* =========================================================
   SPACE VANTA
   BUYING GUIDE — HERO

   File:
   public/buying-guide/cs/hero.css

   Responsibility:
   - Hero typography
   - Hero content composition
   - Hero CTA
   - Hero visual interaction

   Visual Direction:
   - Accessible Premium
   - Editorial
   - Discovery
   - Restrained spatial motion
   ========================================================= */


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

.sv-buying-guide-hero {
    position: relative;

    width: 100%;

    box-sizing: border-box;
}


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

.sv-buying-guide-hero__container {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr) minmax(0, 1.08fr);

    gap:
        clamp(40px, 5.5vw, 88px);

    align-items: center;

    width: 100%;

    box-sizing: border-box;

    padding:
        clamp(54px, 7vw, 96px) 0 clamp(60px, 8vw, 108px);
}


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

.sv-buying-guide-hero__content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 620px;
}


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

.sv-buying-guide-hero__eyebrow {
    margin:
        0 0 18px;

    font-size:
        9px;

    line-height:
        1;

    letter-spacing:
        0.2em;

    font-weight:
        500;

    text-transform:
        uppercase;

    opacity:
        0.48;
}


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

.sv-buying-guide-hero__title {
    max-width:
        620px;

    margin:
        0;

    font-size:
        clamp(44px, 5.7vw, 84px);

    line-height:
        0.93;

    letter-spacing:
        -0.058em;

    font-weight:
        600;

    text-wrap:
        balance;

    opacity:
        0.96;
}


/* =========================================================
   TITLE EDITORIAL ACCENT
   ========================================================= */

.sv-buying-guide-hero__title::after {
    content:
        "";

    display:
        block;

    width:
        44px;

    height:
        1px;

    margin-top:
        27px;

    background:
        currentColor;

    opacity:
        0.26;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.sv-buying-guide-hero__description {
    max-width:
        470px;

    margin-top:
        23px;

    font-size:
        clamp(13px, 1.15vw, 16px);

    line-height:
        1.65;

    letter-spacing:
        -0.008em;

    opacity:
        0.58;
}


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

.sv-buying-guide-hero__button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        32px;

    min-height:
        43px;

    padding:
        0 16px;

    border:
        1px solid rgba(0, 0, 0, 0.22);

    border-radius:
        999px;

    color:
        inherit;

    background:
        rgba(255, 255, 255, 0.26);

    text-decoration:
        none;

    font-size:
        9px;

    line-height:
        1;

    letter-spacing:
        0.16em;

    font-weight:
        500;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(8px);

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

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.4s ease,
        background 0.35s ease;
}


/* =========================================================
   BUTTON ARROW
   ========================================================= */

.sv-buying-guide-hero__button-arrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        15px;

    line-height:
        1;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.sv-buying-guide-hero__button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(72, 126, 177, 0.58);

    background:
        rgba(255, 255, 255, 0.58);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.055);
}


.sv-buying-guide-hero__button:hover .sv-buying-guide-hero__button-arrow {
    transform:
        translateX(3px) translateY(-2px);
}


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

.sv-buying-guide-hero__visual {
    position:
        relative;

    width:
        100%;

    min-width:
        0;
}


/* =========================================================
   HERO IMAGE FRAME
   ========================================================= */

.sv-buying-guide-hero__visual-frame {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    border:
        1px solid rgba(0, 0, 0, 0.08);

    border-radius:
        20px;

    background:
        rgba(0, 0, 0, 0.025);

    isolation:
        isolate;

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s ease,
        box-shadow 0.7s ease;
}


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

.sv-buying-guide-hero__image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.001);

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


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

.sv-buying-guide-hero__light {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.18) 48%,
            transparent 72%);

    opacity:
        0;

    transform:
        translateX(-35%);

    transition:
        opacity 0.45s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HERO VISUAL HOVER
   ========================================================= */

.sv-buying-guide-hero__visual-frame:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(72, 126, 177, 0.28);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.07),
        0 0 0 3px rgba(72, 126, 177, 0.025);
}


.sv-buying-guide-hero__visual-frame:hover .sv-buying-guide-hero__image {
    transform:
        scale(1.025);
}


.sv-buying-guide-hero__visual-frame:hover .sv-buying-guide-hero__light {
    opacity:
        1;

    transform:
        translateX(35%);
}


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

@media (max-width: 767px) {

    .sv-buying-guide-hero__container {
        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            46px 0 54px;
    }


    .sv-buying-guide-hero__content {
        max-width:
            none;
    }


    .sv-buying-guide-hero__eyebrow {
        margin-bottom:
            15px;

        font-size:
            8px;
    }


    .sv-buying-guide-hero__title {
        max-width:
            100%;

        font-size:
            clamp(40px, 12vw, 58px);

        line-height:
            0.95;

        letter-spacing:
            -0.052em;
    }


    .sv-buying-guide-hero__title::after {
        width:
            36px;

        margin-top:
            21px;
    }


    .sv-buying-guide-hero__description {
        margin-top:
            19px;

        font-size:
            13px;

        line-height:
            1.6;
    }


    .sv-buying-guide-hero__button {
        margin-top:
            25px;

        min-height:
            41px;
    }


    .sv-buying-guide-hero__visual-frame {
        aspect-ratio:
            4 / 3;

        border-radius:
            16px;
    }


    .sv-buying-guide-hero__visual-frame:hover {
        transform:
            none;

        box-shadow:
            none;
    }


    .sv-buying-guide-hero__visual-frame:hover .sv-buying-guide-hero__image {
        transform:
            none;
    }


    .sv-buying-guide-hero__visual-frame:hover .sv-buying-guide-hero__light {
        opacity:
            0;

        transform:
            none;
    }

}


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

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

    .sv-buying-guide-hero *,
    .sv-buying-guide-hero *::before,
    .sv-buying-guide-hero *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}