/* ==========================================================================
   📰 FIMED - LAYOUT
   Container & Grid Systems
   ========================================================================== */

/* ========================================
   📦 CONTAINER
   ======================================== */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ========================================
   📊 GRIDS
   ======================================== */

.hero__grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 0;
    min-height: 440px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.reports__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.mr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.op-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

/* On large screens these highlight sections show 3 across (the 4th card,
   shown at the tablet ~990px width, is hidden here). */
@media (min-width: 1025px) {
    .voice-grid,
    .op-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .voice-grid > .voice-card:nth-child(n + 4),
    .op-grid > .op-card:nth-child(n + 4) {
        display: none;
    }
}

/* ========================================
   📱 RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .hero__grid {
        grid-template-columns: 1fr 1.4fr 1fr;
        min-height: 400px;
    }

    .mr-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .reports__grid {
        grid-template-columns: 1fr;
    }

    .mr-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .nc-item {
        grid-template-columns: 240px 1fr;
    }
}

/* Card grids: 4 across down to ~900px, then 2, then 1 */
@media (max-width: 900px) {
    .cat-grid,
    .op-grid,
    .voice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Mosaic: featured spans the full width, smalls below in 2 columns */
    .mz-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
    }

    .mz-card--featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    .mz-card--featured .mz-card__title {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .mr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-card {
        grid-template-columns: 1fr;
    }

    .nc-item {
        grid-template-columns: 1fr;
    }

    .nc-item__img {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 560px) {
    .cat-grid,
    .op-grid,
    .voice-grid,
    .mr-grid,
    .mz-grid {
        grid-template-columns: 1fr;
    }

    .mz-card--featured {
        grid-column: span 1;
    }

    .mz-grid {
        grid-auto-rows: 200px;
    }
}