/*
 * hero-c-s-grid.css
 * Grid variant of the community standard hero.
 * Loaded after hero-c-s.css. Only overrides what differs.
 */

/* ── Media: same absolute model as original, grid inside ─────────────────── */

.hero-community--grid .hero-community__media--grid {
    position: absolute;
    top: 0;
    right: 0;
    width: 57%;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50% 50%;

    background-color: #423F76;
}

/* Each <picture> fills its cell */
.hero-community--grid .hero-community__media--grid > picture {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Override hero-c-s.css .hero-image absolute/opacity rules */
.hero-community--grid .hero-image--grid {
    position: static;
    opacity: 1;
    z-index: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.8s ease-in-out;
}

.hero-community--grid .hero-image--grid.is-swapping {
    opacity: 0;
}

/* ── Mobile: below 960px — mirror original, single image ─────────────────── */

@media (max-width: 960px) {
    .hero-community--grid .hero-community__media--grid {
        /* Mirror original __media mobile behavior exactly */
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 60vh;

        /* Single column, single row — only first cell visible */
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    /* Hide cells 2–6 on mobile */
    .hero-community--grid .hero-community__media--grid > picture:nth-child(n+2) {
        display: none;
    }
}