/*------------------------------------------------------------------*\
    4. COMPONENTS - Portfolio Grid (Aerial variant)
    Overrides only layout; cards reuse the default .miv-portfolio-card
    styles from portfolio-grid.css.

    Desktop/tablet layout (image ratios):
      Row 1 — 960×540 | 482×540 | 482×540
      Row 2 — 629×540 | 812×540 | 482×540 (has header overlay)
    Shared columns: 629fr 331fr 482fr 482fr
      · 629+331 = 960 (row 1, cell a)
      · 331+482 = 813 ≈ 812 (row 2, cell e)

    Mobile: inherits the default .miv-portfolio-grid 2-column layout.
\*------------------------------------------------------------------*/

.miv-portfolio-grid--aerial {
    display: grid;
}

/* ── Desktop / tablet — aerial 4-column grid with named areas ── */

@media screen and (min-width: 769px) {
    .miv-portfolio-grid--aerial {
        grid-template-columns: 629fr 331fr 482fr 482fr;
        grid-template-areas:
            "a a b c"
            "d e e f";
    }

    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell:nth-child(1) { grid-area: a; }
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell:nth-child(2) { grid-area: b; }
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell:nth-child(3) { grid-area: c; }
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell:nth-child(4) { grid-area: d; }
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell:nth-child(5) { grid-area: e; }
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell:nth-child(6) { grid-area: f; }

    /* Header-box overlays the image (aerial-only) */
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell--has-header .miv-portfolio-grid__header-box {
        position: absolute;
        top: 0;
    }

    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell--has-header .miv-portfolio-grid__image {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell--has-header .miv-portfolio-grid__image,
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell--has-header .miv-portfolio-grid__image .miv-portfolio-card,
    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell--has-header .miv-portfolio-grid__image .miv-portfolio-card img {
        height: 100%;
    }
}

/* ── Mobile — inherit default .miv-portfolio-grid (2 columns) ── */

@media screen and (max-width: 768px) {
    .miv-portfolio-grid--aerial {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    .miv-portfolio-grid--aerial .miv-portfolio-grid__cell--has-header .miv-portfolio-grid__image .miv-portfolio-card {
        height: calc(var(--fluid-portfolio-grid-h) - var(--fluid-portfolio-headerbox-h));
    }
}