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

Space Vanta Theme 1.0

Module:
Bundle Related Layout

File:
public/bundle-template/bundle-related.css

Version:
1.0-B

Purpose:
Bundle Related section layout,
responsive structure,
section separation from Bundle Story,
and Bundle Related Card media framing.

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


/* =================================================
   RELATED SECTION
================================================= */

.sv-bundle-related {
    position: relative;

    width: 100%;
    display: block;

    /*
     * Section separation:
     * Creates a clear visual break between
     * Bundle Story and Explore More Bundles.
     */
    margin-top: 96px;
    padding-top: 64px;
}


/* =================================================
   SECTION DIVIDER
================================================= */

.sv-bundle-related::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(143, 149, 157, 0.10) 12%,
            rgba(143, 149, 157, 0.30) 50%,
            rgba(143, 149, 157, 0.10) 88%,
            transparent 100%
        );

    pointer-events: none;
}


/* =================================================
   RELATED HEADER
================================================= */

.sv-bundle-related__header {
    width: min(100%, 1040px);

    margin-right: auto;
    margin-bottom: 48px;
    margin-left: auto;

    padding-left: 2%;
}


/* =================================================
   RELATED ITEMS GRID
================================================= */

.sv-bundle-related__items {
    width: min(100%, 1040px);

    margin-right: auto;
    margin-left: auto;

    display: grid;

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

    column-gap: 28px;
    row-gap: 48px;
}


/* =================================================
   RELATED CARD
================================================= */

.sv-bundle-related-card {
    width: 100%;
    min-width: 0;

    display: block;
}


/* =================================================
   RELATED MEDIA FRAME
================================================= */

.sv-bundle-related-card__media {
    position: relative;

    width: 100%;

    /*
     * The frame remains fixed at 4:3.
     * Uploaded image ratio must not determine
     * the frame size.
     */
    aspect-ratio: 4 / 3;

    overflow: hidden;

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


/* =================================================
   RELATED IMAGE
================================================= */

.sv-bundle-related-card__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    /*
     * Keep the image inside the fixed frame.
     * No cropping and no frame resizing.
     */
    object-fit: contain;
    object-position: center;
}


/* =================================================
   RELATED CARD CONTENT
================================================= */

.sv-bundle-related-card__content {
    width: 100%;

    padding-top: 22px;
}


/* =================================================
   TABLET
================================================= */

@media (max-width: 1024px) {

    .sv-bundle-related__header {
        width: min(100%, 980px);

        padding-left: 2%;
        padding-right: 2%;
    }

    .sv-bundle-related__items {
        width: min(100%, 980px);

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

        column-gap: 24px;
        row-gap: 44px;

        padding-left: 2%;
        padding-right: 2%;
    }

}


/* =================================================
   MOBILE
================================================= */

@media (max-width: 767px) {

    .sv-bundle-related {
        /*
         * Reduced separation on mobile while
         * preserving a clear section transition.
         */
        margin-top: 64px;
        padding-top: 42px;
    }


    /* ---------------------------------------------
       Divider
    --------------------------------------------- */

    .sv-bundle-related::before {
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(143, 149, 157, 0.11) 14%,
                rgba(143, 149, 157, 0.26) 50%,
                rgba(143, 149, 157, 0.11) 86%,
                transparent 100%
            );
    }


    /* ---------------------------------------------
       Header
    --------------------------------------------- */

    .sv-bundle-related__header {
        width: 100%;

        margin-bottom: 40px;

        padding-left: 20px;
        padding-right: 20px;
    }


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

    .sv-bundle-related__items {
        width: 100%;

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

        column-gap: 0;
        row-gap: 40px;

        padding-left: 20px;
        padding-right: 20px;
    }


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

    .sv-bundle-related-card__media {
        aspect-ratio: 4 / 3;

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


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

    .sv-bundle-related-card__content {
        padding-top: 18px;
    }

}


/* =================================================
   SMALL MOBILE
================================================= */

@media (max-width: 480px) {

    .sv-bundle-related {
        margin-top: 52px;
        padding-top: 36px;
    }


    /* ---------------------------------------------
       Divider
    --------------------------------------------- */

    .sv-bundle-related::before {
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(143, 149, 157, 0.12) 16%,
                rgba(143, 149, 157, 0.26) 50%,
                rgba(143, 149, 157, 0.12) 84%,
                transparent 100%
            );
    }


    /* ---------------------------------------------
       Section Horizontal Padding
    --------------------------------------------- */

    .sv-bundle-related__header {
        padding-left: 18px;
        padding-right: 18px;
    }


    .sv-bundle-related__items {
        padding-left: 18px;
        padding-right: 18px;

        row-gap: 40px;
    }


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

    .sv-bundle-related-card__media {
        border-radius: 16px 6px 16px 6px;
    }


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

    .sv-bundle-related-card__content {
        padding-top: 18px;
    }

}


/* =================================================
   REDUCED MOTION
================================================= */

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

    .sv-bundle-related-card__image {
        transition: none;
    }

}