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

Space Vanta Theme 1.0

Module:
Bundle Related Brand

File:
public/brand/bundle/related.css

Responsibility:
- Related brand surface
- Related typography
- Media treatment
- Discover signal
- Related interaction

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

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


/* =========================================================
   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. MEDIA FRAME
   ========================================================= */

.sv-bundle-related-card__media {
    background:
        var(--sv-color-bg-secondary, #EBE7DF);

    border:
        1px solid rgba(216, 211, 201, 0.72);

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


/* =========================================================
   05. IMAGE
   ========================================================= */

.sv-bundle-related-card__image {
    transition:
        transform 520ms cubic-bezier(.22, .61, .36, 1),
        opacity 320ms ease;
}


/* =========================================================
   06. DISCOVER SIGNAL
   ========================================================= */

.sv-bundle-related-card__signal {
    position: absolute;

    top: 16px;
    right: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

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

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

    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;
}


/* =========================================================
   07. 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);
}


/* =========================================================
   08. 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;
}


/* =========================================================
   09. MEDIA FRAGMENT
   ========================================================= */

.sv-bundle-related-card__media::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 42px;
    height: 1px;

    background:
        currentColor;

    opacity: 0.14;

    pointer-events: none;
}


/* =========================================================
   10. 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.035);
    }

    .sv-bundle-related-card:hover .sv-bundle-related-card__signal {
        opacity: 1;

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

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

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

    .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;
    }

}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .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);
    }

}


/* =========================================================
   12. FOCUS
   ========================================================= */

.sv-bundle-related-card:focus-visible {
    outline:
        2px solid #465F78;

    outline-offset: 6px;
}


/* =========================================================
   13. 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;
    }

}