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

Space Vanta Theme 1.0

Module:
Bundle Preview Brand Surface

File:
public/bundle-template/bundle-hero/preview/preview.css

Version:
3.0

Responsibility:
Preview Brand Surface / Typography / Spatial Language

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


/* =================================================
   1. Preview Variables
================================================= */

.sv-bundle-hero-preview {

    --sv-preview-bg:
        #f7f4ee;

    --sv-preview-surface:
        #fbf9f5;

    --sv-preview-surface-soft:
        #eee8de;

    --sv-preview-metal-light:
        #f8f6f1;

    --sv-preview-metal:
        #d8d1c7;

    --sv-preview-metal-dark:
        #b8afa3;

    --sv-preview-text:
        #24221f;

    --sv-preview-text-soft:
        #756e65;

    --sv-preview-earth:
        #6b5848;

    --sv-preview-line:
        rgba(117, 106, 94, 0.18);

}


/* =================================================
   2. Panel
================================================= */

.sv-bundle-hero-preview__panel {

    background:
        linear-gradient(145deg,
            #fbf9f5 0%,
            #f7f4ee 46%,
            #eee8de 100%);

    color:
        var(--sv-preview-text);

    box-shadow:
        -18px 0 48px rgba(40, 35, 30, 0.12),

        inset 1px 0 0 rgba(255, 255, 255, 0.78);

}


/* =================================================
   3. Panel Reflection
================================================= */

.sv-bundle-hero-preview__panel::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(118deg,
            rgba(255, 255, 255, 0.30),
            transparent 26%,
            transparent 72%,
            rgba(94, 78, 63, 0.045));

    z-index: 0;

}


/* =================================================
   4. Header
================================================= */

.sv-bundle-hero-preview__header {

    position: relative;

    z-index: 1;

    border-bottom:
        1px solid var(--sv-preview-line);

}


/* =================================================
   5. Eyebrow
================================================= */

.sv-bundle-hero-preview__eyebrow {

    margin: 0 0 10px;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color:
        var(--sv-preview-earth);

}


/* =================================================
   6. Preview Title
================================================= */

.sv-bundle-hero-preview__title {

    margin: 0;

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

    font-size: 30px;

    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -0.03em;

    color:
        var(--sv-preview-text);

}


/* =================================================
   7. Close
================================================= */

.sv-bundle-hero-preview__close {

    width: 34px;
    height: 34px;

    padding: 0;

    border: 1px solid rgba(117, 106, 94, 0.22);

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #faf8f3,
            #d8d1c7);

    color:
        var(--sv-preview-text);

    font-size: 20px;

    line-height: 1;

    box-shadow:
        0 4px 12px rgba(40, 35, 30, 0.08),

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

}


/* =================================================
   8. Option Rail
================================================= */

.sv-bundle-hero-preview__content {

    position: relative;

    z-index: 1;

}


/* =================================================
   9. Section
================================================= */

.sv-bundle-hero-preview__section {

    position: relative;

}


/* =================================================
   10. Section Number
================================================= */

.sv-bundle-preview-option::before {

    content:
        counter(sv-bundle-option, decimal-leading-zero);

    display: block;

    margin:
        0 0 11px;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.18em;

    color:
        rgba(107, 88, 72, 0.72);

}


/* =================================================
   11. Single Option Number
================================================= */

.sv-bundle-hero-preview__content>.sv-bundle-hero-preview__section:only-child .sv-bundle-preview-option::before {

    display: none;

}


/* =================================================
   12. Generic Section Heading
================================================= */

.sv-bundle-hero-preview__section-heading {

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color:
        var(--sv-preview-earth);

}


/* =================================================
   13. Section Heading Line
================================================= */

.sv-bundle-hero-preview__section-heading::after {

    content: "";

    display: block;

    flex: 1;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(117, 106, 94, 0.26),
            transparent);

}


/* =================================================
   14. Mobile
================================================= */

@media (max-width: 768px) {

    .sv-bundle-hero-preview__title {

        font-size: 32px;

    }


    .sv-bundle-hero-preview__panel {

        box-shadow:
            0 -18px 48px rgba(40, 35, 30, 0.14),

            inset 0 1px 0 rgba(255, 255, 255, 0.78);

    }

}


/* =================================================
   15. Reduced Motion
================================================= */

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

    .sv-bundle-hero-preview__content {

        scroll-behavior: auto;

    }

}