/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Related Brand

File:
public/brand/bundle/related.css

Version:
1.0-A

Responsibility:
- Related brand surface
- Related typography
- Spatial media frame
- Frame reflection
- Discover signal
- Related interaction

Does NOT handle:
- Section layout
- Grid structure
- SHOPLINE data
- Navigation logic

Design Direction:
Same Spatial Frame DNA as Bundle Hero
with a quieter discovery expression.

================================================
*/


/* =========================================================
   01. RELATED SURFACE
   ========================================================= */

.sv-bundle-related {

    color:
        var(--sv-color-text-primary, #1C1C1A);
}


/* =========================================================
   02. SECTION TITLE
   ========================================================= */

.sv-bundle-related__title {

    font-family:
        var(--sv-font-bundle, inherit);

    font-size:
        clamp(28px, 3vw, 42px);

    font-weight:
        500;

    line-height:
        0.94;

    letter-spacing:
        0.035em;

    color:
        var(--sv-color-text-primary, #1C1C1A);

    text-rendering:
        geometricPrecision;

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   03. SECTION MARKER
   ========================================================= */

.sv-bundle-related__header {

    position:
        relative;
}


.sv-bundle-related__header::after {

    content:
        "";

    display:
        block;

    width:
        44px;

    height:
        1px;

    margin-top:
        22px;

    background:
        var(--sv-color-border, #D8D3C9);

    opacity:
        0.72;
}


/* =========================================================
   04. RELATED SPATIAL FRAME
   =========================================================

   Hero DNA:
   - metallic surface
   - asymmetric corners
   - soft depth
   - cold spatial reflection

   Related:
   - reduced intensity
   - smaller asymmetric radius
   - quieter reflection
   - secondary visual hierarchy

========================================================= */

.sv-bundle-related-card__media {

    border-radius:
        20px 8px 20px 8px;

    background:
        linear-gradient(
            135deg,
            #f7f8f9 0%,
            #e2e5e8 42%,
            #f2f4f5 72%,
            #d0d4d9 100%
        );

    border:
        1px solid rgba(143, 149, 157, 0.44);

    box-shadow:
        0 13px 28px rgba(25, 30, 36, 0.075),

        0 3px 7px rgba(25, 30, 36, 0.045),

        inset 0 1px 0 rgba(255, 255, 255, 0.82),

        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}


/* =========================================================
   05. RELATED INNER REFLECTION
   ========================================================= */

.sv-bundle-related-card__media::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    border-radius:
        20px 8px 20px 8px;

    background:
        linear-gradient(
            132deg,
            rgba(255, 255, 255, 0.20),
            transparent 30%,
            transparent 70%,
            rgba(76, 101, 128, 0.045)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}


/* =========================================================
   06. RELATED COLD REFLECTION
   ========================================================= */

.sv-bundle-related-card__media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

    border-radius:
        20px 8px 20px 8px;

    background:
        linear-gradient(
            116deg,
            transparent 0%,
            transparent 58%,
            rgba(74, 104, 138, 0.035) 78%,
            rgba(67, 92, 122, 0.055) 100%
        );

    mix-blend-mode:
        multiply;

    opacity:
        0.72;
}


/* =========================================================
   07. RELATED IMAGE
   =========================================================

   The image remains subordinate to the Frame.

   The Frame establishes:
   - dimensions
   - background
   - corners
   - spatial surface

   The image adapts within that field.

========================================================= */

.sv-bundle-related-card__image {

    position:
        relative;

    z-index:
        1;

    opacity:
        1;

    transform:
        scale(1);

    transition:
        transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 320ms ease;
}


/* =========================================================
   08. DISCOVER SIGNAL
   ========================================================= */

.sv-bundle-related-card__signal {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid rgba(28, 28, 26, 0.16);

    background:
        rgba(245, 243, 238, 0.74);

    color:
        var(--sv-color-text-primary, #1C1C1A);

    font-family:
        var(--sv-font-bundle, inherit);

    font-size:
        16px;

    line-height:
        1;

    backdrop-filter:
        blur(8px);

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

    opacity:
        0.72;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform 320ms cubic-bezier(.22, .61, .36, 1),
        opacity 220ms ease,
        background 220ms ease,
        border-color 220ms ease;
}


/* =========================================================
   09. TITLE
   ========================================================= */

.sv-bundle-related-card__title {

    position:
        relative;

    display:
        inline-block;

    color:
        var(--sv-color-text-primary, #1C1C1A);

    font-size:
        clamp(20px, 1.8vw, 28px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.04em;

    transition:
        letter-spacing 320ms cubic-bezier(.22, .61, .36, 1),
        transform 320ms cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   10. TITLE STRUCTURAL LINE
   ========================================================= */

.sv-bundle-related-card__title::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -9px;

    width:
        24px;

    height:
        1px;

    background:
        currentColor;

    opacity:
        0.24;

    transform-origin:
        left center;

    transition:
        width 320ms cubic-bezier(.22, .61, .36, 1),
        opacity 220ms ease;
}


/* =========================================================
   11. MEDIA FRAGMENT
   ========================================================= */

.sv-bundle-related-card__media {

    isolation:
        isolate;
}


.sv-bundle-related-card__media > img {

    position:
        relative;

    z-index:
        1;
}


.sv-bundle-related-card__media::marker {
    display:
        none;
}


/* =========================================================
   12. DESKTOP DISCOVERY
   ========================================================= */

@media (min-width: 768px) {

    .sv-bundle-related-card {

        cursor:
            pointer;
    }


    .sv-bundle-related-card:hover .sv-bundle-related-card__image {

        transform:
            scale(1.025);
    }


    .sv-bundle-related-card:hover .sv-bundle-related-card__signal {

        opacity:
            1;

        transform:
            translate3d(3px, -3px, 0);

        border-color:
            rgba(70, 95, 120, 0.34);

        background:
            rgba(235, 239, 243, 0.84);
    }


    .sv-bundle-related-card:hover .sv-bundle-related-card__title {

        letter-spacing:
            0.055em;

        transform:
            translateX(2px);
    }


    .sv-bundle-related-card:hover .sv-bundle-related-card__title::after {

        width:
            38px;

        opacity:
            0.42;
    }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-bundle-related-card__media {

        border-radius:
            18px 7px 18px 7px;
    }


    .sv-bundle-related-card__media::before,
    .sv-bundle-related-card__media::after {

        border-radius:
            18px 7px 18px 7px;
    }


    .sv-bundle-related-card__signal {

        top:
            12px;

        right:
            12px;

        width:
            32px;

        height:
            32px;

        opacity:
            0.82;
    }


    .sv-bundle-related-card__title {

        font-size:
            clamp(19px, 5vw, 24px);
    }

}


/* =========================================================
   14. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sv-bundle-related-card__media {

        border-radius:
            16px 6px 16px 6px;
    }


    .sv-bundle-related-card__media::before,
    .sv-bundle-related-card__media::after {

        border-radius:
            16px 6px 16px 6px;
    }

}


/* =========================================================
   15. FOCUS
   ========================================================= */

.sv-bundle-related-card:focus-visible {

    outline:
        2px solid #465F78;

    outline-offset:
        6px;
}


/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

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

    .sv-bundle-related-card__image,
    .sv-bundle-related-card__signal,
    .sv-bundle-related-card__title,
    .sv-bundle-related-card__title::after {

        transition:
            none;
    }

}