/* ==========================================================================
   Iguazu Noticias — Layout
   Container, section rhythm and the grid helpers the landing sections share.
   ========================================================================== */

.ig-main {
    display: block;
}

.ig-container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.ig-container--mid {
    max-width: var(--container-mid);
}

.ig-container--article {
    max-width: var(--container-article);
}

.ig-container--narrow {
    max-width: var(--container-narrow);
}

/* Section rhythm: 88px desktop, 56px below the tablet break. */
.ig-section {
    padding-block: 88px;
}

.ig-section--tint {
    background: var(--surface-tint);
}

.ig-section--tint-green {
    background: var(--surface-tint-green);
}

/* Vertical stack used inside most sections. */
.ig-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ig-stack--tight {
    gap: var(--space-3);
}

/* Section intro: heading plus one or two paragraphs, capped for readability. */
.ig-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 640px;
}

.ig-section-head__title {
    font-size: var(--text-3xl);
}

.ig-section-head__lead {
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

/* Asymmetric two-column: copy on the wider side, a panel on the other. */
.ig-grid2 {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.ig-grid2--top {
    align-items: start;
}

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

/* Three cards rather than three sections: the Resources strip wants the same
   20px gutter its two-up sibling uses. */
.ig-grid3--tight {
    gap: var(--space-5);
}

/* Two-up card grid (the design calls it grid4 because it holds four cards). */
.ig-grid4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .ig-grid2,
    .ig-grid3,
    .ig-grid4 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .ig-section {
        padding-block: 56px;
    }
}