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

Space Vanta Theme 1.0

Module:
Bundle Story Layout

Path:
public/bundle-template/bundle-story/story/layout.css

Version:
2.0-A.2

Responsibility:
Story Spatial Layout
Lens Surface
Responsive Spacing

Design Direction:
Soft Lens / Spatial Glass Field

Does NOT control:
- Typography
- Icon Geometry
- Icon Color
- Motion

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


/* =========================================================
   01. STORY OPENING
   ========================================================= */

.sv-bundle-story__opening {

    position:
        relative;

    width:
        min(100%, 820px);

    margin-left:
        auto;

    margin-right:
        auto;

    padding:
        0 0 56px;

    transform:
        translateX(-3%);
}


/* =========================================================
   02. STORY ITEMS FIELD
   ========================================================= */

.sv-bundle-story__items {

    width:
        min(100%, 1040px);

    margin-left:
        auto;

    margin-right:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;

    align-items:
        stretch;
}


/* =========================================================
   03. STORY ITEM — LENS FIELD
   ========================================================= */

/*
 * The Story Part is not treated as a card.
 *
 * It behaves more like a transparent optical surface
 * placed above the page.
 */

.sv-bundle-story-item {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    width:
        100%;

    min-height:
        300px;

    padding:
        34px 34px 38px;

    /*
     * Almost transparent surface.
     *
     * The page remains visible underneath.
     */

    background:
        rgba(232, 238, 237, 0.075);

    /*
     * Optical separation.
     *
     * This is intentionally soft rather than
     * producing a visible card boundary.
     */

    backdrop-filter:
        blur(18px) saturate(108%);

    -webkit-backdrop-filter:
        blur(18px) saturate(108%);

    /*
     * No conventional border.
     *
     * Separation is created by light,
     * depth and shadow instead.
     */

    box-shadow:
        0 24px 64px rgba(38, 48, 56, 0.055),
        0 8px 24px rgba(38, 48, 56, 0.025),
        inset 0 0 42px rgba(255, 255, 255, 0.075),
        inset 0 -22px 44px rgba(62, 76, 82, 0.025);

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

    overflow:
        hidden;

    isolation:
        isolate;
}


/* =========================================================
   04. LENS LIGHT FIELD
   ========================================================= */

/*
 * Instead of a white box, the surface receives
 * a very soft optical light gradient.
 */

.sv-bundle-story-item::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        radial-gradient(circle at 12% 8%,
            rgba(255, 255, 255, 0.16),
            transparent 34%),
        radial-gradient(circle at 92% 88%,
            rgba(180, 194, 194, 0.055),
            transparent 42%);

    opacity:
        0.72;

    pointer-events:
        none;
}


/* =========================================================
   05. LENS DEPTH
   ========================================================= */

/*
 * A subtle inner depth prevents the surface from
 * disappearing completely while avoiding a visible border.
 */

.sv-bundle-story-item {

    box-shadow:
        0 24px 64px rgba(38, 48, 56, 0.055),
        0 8px 24px rgba(38, 48, 56, 0.025),
        inset 0 18px 42px rgba(255, 255, 255, 0.055),
        inset 0 -24px 48px rgba(62, 76, 82, 0.022);
}


/* =========================================================
   06. INDIVIDUAL SPATIAL CHARACTER
   ========================================================= */

/*
 * Very small vertical differences keep the four
 * Story Parts from becoming a rigid component grid.
 */

.sv-bundle-story-item--curation {

    transform:
        translateY(0);
}


.sv-bundle-story-item--balance {

    transform:
        translateY(18px);
}


.sv-bundle-story-item--rhythm {

    transform:
        translateY(4px);
}


.sv-bundle-story-item--living {

    transform:
        translateY(22px);
}


/* =========================================================
   07. STORY SYMBOL
   ========================================================= */

.sv-bundle-story__symbol {

    position:
        relative;

    z-index:
        1;

    flex:
        0 0 auto;

    margin:
        0 0 24px;
}


/* =========================================================
   08. STORY CONTENT
   ========================================================= */

.sv-bundle-story__content {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-width:
        0;

    padding:
        0;
}


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

.sv-bundle-story__title {

    display:
        inline-block;

    max-width:
        100%;
}


/* =========================================================
   10. STORY DESCRIPTION
   ========================================================= */

.sv-bundle-story__text {

    width:
        100%;

    max-width:
        520px;
}


/* =========================================================
   11. OPTIONAL STORY IMAGE
   ========================================================= */

.sv-bundle-story__media {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    margin-top:
        28px;
}


/* =========================================================
   12. OLD HORIZONTAL OFFSET RESET
   ========================================================= */

.sv-bundle-story-item--curation,
.sv-bundle-story-item--balance,
.sv-bundle-story-item--rhythm,
.sv-bundle-story-item--living {

    margin-left:
        0;
}


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

@media (max-width: 767px) {

    .sv-bundle-story {

        padding-left:
            20px;

        padding-right:
            20px;
    }


    /* -----------------------------------------------------
       Opening
    ----------------------------------------------------- */

    .sv-bundle-story__opening {

        width:
            100%;

        margin:
            0;

        padding-bottom:
            46px;

        transform:
            none;
    }


    /* -----------------------------------------------------
       Items
    ----------------------------------------------------- */

    .sv-bundle-story__items {

        width:
            100%;

        margin:
            0;

        display:
            flex;

        flex-direction:
            column;

        gap:
            16px;
    }


    /* -----------------------------------------------------
       Lens Surface
    ----------------------------------------------------- */

    .sv-bundle-story-item {

        min-height:
            0;

        padding:
            28px 24px 32px;

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

        transform:
            none;

        backdrop-filter:
            blur(16px) saturate(106%);

        -webkit-backdrop-filter:
            blur(16px) saturate(106%);

        box-shadow:
            0 18px 44px rgba(38, 48, 56, 0.045),
            inset 0 16px 34px rgba(255, 255, 255, 0.05),
            inset 0 -18px 36px rgba(62, 76, 82, 0.018);
    }


    /* -----------------------------------------------------
       Symbol
    ----------------------------------------------------- */

    .sv-bundle-story__symbol {

        margin-bottom:
            20px;
    }


    /* -----------------------------------------------------
       Content
    ----------------------------------------------------- */

    .sv-bundle-story__content {

        width:
            100%;
    }


    /* -----------------------------------------------------
       Media
    ----------------------------------------------------- */

    .sv-bundle-story__media {

        margin-top:
            24px;
    }

}


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

@media (max-width: 480px) {

    .sv-bundle-story {

        padding-left:
            18px;

        padding-right:
            18px;
    }


    .sv-bundle-story__items {

        gap:
            14px;
    }


    .sv-bundle-story-item {

        padding:
            26px 20px 30px;

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

}


/* =========================================================
   15. REDUCED MOTION
   ========================================================= */

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

    .sv-bundle-story-item {

        transform:
            none;
    }

}