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

Space Vanta Theme 1.0

Module:
Bundle Story Layout

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

Responsibility:
Layout / Grid / Spacing / Responsive

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


/* =========================================================
   01. Story Container
   ========================================================= */

.sv-bundle-story {

    position: relative;

    width: 100%;

    display: block;
}


/* =========================================================
   02. Story Items
   ========================================================= */

.sv-bundle-story__items {

    width: 100%;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   03. Story Item
   ========================================================= */

.sv-bundle-story-item {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(96px, 0.28fr) minmax(0, 1fr) minmax(140px, 0.42fr);

    align-items: center;

    column-gap: 56px;
}


/* =========================================================
   04. Symbol Column
   ========================================================= */

.sv-bundle-story__symbol {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-start;
}


/* =========================================================
   05. Content Column
   ========================================================= */

.sv-bundle-story__content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* =========================================================
   06. Title
   ========================================================= */

.sv-bundle-story__title {

    margin: 0;

    max-width: 100%;
}


/* =========================================================
   07. Description
   ========================================================= */

.sv-bundle-story__text {

    margin-top: 20px;

    max-width: 620px;
}


/* =========================================================
   08. Media
   ========================================================= */

.sv-bundle-story__media {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


.sv-bundle-story__image {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;
}


/* =========================================================
   09. Desktop Editorial Rhythm
   ========================================================= */

@media (min-width: 768px) {

    .sv-bundle-story__items {

        row-gap: 0;
    }


    /* -------------------------------------------------------
     Curation
  ------------------------------------------------------- */

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

        min-height: 196px;

        padding:
            42px 0 34px;
    }


    /* -------------------------------------------------------
     Balance
  ------------------------------------------------------- */

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

        min-height: 214px;

        padding:
            54px 0 48px;
    }


    /* -------------------------------------------------------
     Rhythm
  ------------------------------------------------------- */

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

        min-height: 226px;

        padding:
            58px 0 52px;
    }


    /* -------------------------------------------------------
     Living
  ------------------------------------------------------- */

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

        min-height: 244px;

        padding:
            64px 0 76px;
    }


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

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

        max-width:
            760px;
    }


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

        max-width:
            720px;
    }


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

        max-width:
            780px;
    }


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

        max-width:
            700px;
    }


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

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

        transform:
            translateY(-4px);
    }


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

        transform:
            translateY(2px);
    }


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

        transform:
            translateY(-3px);
    }


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

        transform:
            translateY(6px);
    }


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

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

        transform:
            translateY(-6px);
    }


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

        transform:
            translateY(4px);
    }


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

        transform:
            translateY(-5px);
    }


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

        transform:
            translateY(8px);
    }

}


/* =========================================================
   10. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .sv-bundle-story__items {

        row-gap: 0;
    }


    .sv-bundle-story-item {

        grid-template-columns:
            1fr;

        row-gap:
            24px;
    }


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

        padding:
            38px 0 34px;
    }


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

        padding:
            44px 0 40px;
    }


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

        padding:
            48px 0 44px;
    }


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

        padding:
            52px 0 64px;
    }


    .sv-bundle-story__symbol {

        justify-content:
            flex-start;
    }


    .sv-bundle-story__content {

        width: 100%;
    }


    .sv-bundle-story__text {

        max-width:
            none;

        margin-top:
            16px;
    }


    .sv-bundle-story__media {

        width: 100%;

        justify-content:
            flex-start;
    }


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

        transform:
            translateY(0);
    }


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

        transform:
            translateY(0);
    }


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

        transform:
            translateY(0);
    }


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

        transform:
            translateY(0);
    }

}


/* =========================================================
   11. Small Mobile
   ========================================================= */

@media (max-width: 480px) {

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

        padding:
            32px 0 30px;
    }


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

        padding:
            38px 0 36px;
    }


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

        padding:
            42px 0 40px;
    }


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

        padding:
            46px 0 56px;
    }

}

/* =========================================================
   12. BUNDLE PAGE COMPOSITION
   Hero → Story Breathing Space
   ========================================================= */

@media (min-width: 768px) {

    .sv-bundle-story {

        padding-top:
            72px;

        padding-bottom:
            24px;
    }

}


@media (max-width: 767px) {

    .sv-bundle-story {

        padding-top:
            48px;

        padding-bottom:
            16px;
    }

}


@media (max-width: 480px) {

    .sv-bundle-story {

        padding-top:
            40px;

        padding-bottom:
            12px;
    }

}

/* =========================================================
   13. SYMBOL / CONTENT OPTICAL OFFSET
   ========================================================= */

@media (min-width: 768px) {

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

        transform:
            translateX(0);
    }


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

        transform:
            translateX(10px);
    }


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

        transform:
            translateX(4px);
    }


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

        transform:
            translateX(14px);
    }

}


@media (max-width: 767px) {

    .sv-bundle-story-item--curation .sv-bundle-story__content,

    .sv-bundle-story-item--balance .sv-bundle-story__content,

    .sv-bundle-story-item--rhythm .sv-bundle-story__content,

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

        transform:
            none;
    }

}