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

Space Vanta Theme 1.0

Module:
Bundle Related

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

Responsibility:
- Related section layout
- Related card grid
- Media frame
- Responsive layout

Does NOT handle:
- Brand colors
- Typography styling
- Hover effects
- Discover signal animation
- Bundle-specific visual personality

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


/* =========================================================
   01. RELATED SECTION
   ========================================================= */

.sv-bundle-related {
    position: relative;
    width: 100%;
    display: block;
}


/* =========================================================
   02. RELATED HEADER
   ========================================================= */

.sv-bundle-related__header {
    width: 100%;
    margin: 0 0 48px;
}

.sv-bundle-related__title {
    margin: 0;
}


/* =========================================================
   03. RELATED ITEMS
   ========================================================= */

.sv-bundle-related__items {
    width: 100%;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 48px;
}


/* =========================================================
   04. RELATED CARD
   ========================================================= */

.sv-bundle-related-card {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    text-decoration: none;
}


/* =========================================================
   05. MEDIA
   ========================================================= */

.sv-bundle-related-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.sv-bundle-related-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   06. CONTENT
   ========================================================= */

.sv-bundle-related-card__content {
    width: 100%;
    min-width: 0;
    padding-top: 22px;
}

.sv-bundle-related-card__title {
    margin: 0;
    max-width: 100%;
}


/* =========================================================
   07. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .sv-bundle-related__items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

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

}


/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-bundle-related__header {
        margin-bottom: 36px;
    }

    .sv-bundle-related__items {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }

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

}


/* =========================================================
   09. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sv-bundle-related__header {
        margin-bottom: 30px;
    }

    .sv-bundle-related__items {
        row-gap: 40px;
    }

}