/* ==========================================================================
   Iguazu Noticias — Resources index, term archives and article

   One sheet for all four views: the index, a category and a tag are the same
   card grid, and the article reuses that card in its closing strip.

   STANDING RULE: this sheet must never contain a bare .ig-card, .ig-grid3,
   .ig-grid4, .ig-badge, .ig-eyebrow, .ig-prose, .ig-dateline, .ig-authorbox,
   .ig-article-body or .ig-pager selector. Those are shared primitives and
   components and this page reuses them as they are; anything page-specific goes
   on an .ig-rs-*, .ig-resources-* or .ig-resource-page__* class, or a
   descendant of one. That way "we reused the primitives" is something grep can
   check rather than a promise.
   ========================================================================== */

/* ==========================================================================
   Listing views: index, category, tag
   ========================================================================== */

.ig-resources-index {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block: var(--space-10) 88px;
}

.ig-resources-head {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ig-resources-head__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ig-resources-head__title {
    font-size: clamp(32px, 4.4vw, 44px);
}

.ig-resources-head__lead {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 56ch;
}

.ig-resources-list__item {
    display: flex;
}

/* ==========================================================================
   The card

   .ig-card supplies the surface, the border, the radius, the clipping and the
   hover lift. Everything below is the part that is specific to an article
   card: a photo band on top, and a footer pinned to the bottom of the body so
   dates line up across a row.
   ========================================================================== */

.ig-rs-card {
    flex: 1;
}

.ig-rs-card__media {
    display: block;
    height: 180px;
    background: var(--neutral-100);
}

.ig-rs-card__body {
    padding: var(--space-5) 22px 22px;
    gap: var(--space-2);
}

.ig-rs-card__title {
    font-size: 19px;
    line-height: 1.3;
}

.ig-rs-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.ig-rs-card__title a:hover {
    color: var(--green-700);
}

.ig-rs-card__text {
    font-size: 14.5px;
    color: var(--text-muted);
}

.ig-rs-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    /* Pins the row to the bottom of a stretched card. The design has no rule
       above it, which is why this is not .ig-card__foot. */
    margin-top: auto;
    padding-top: var(--space-2);
}

/* ==========================================================================
   The article
   ========================================================================== */

.ig-resource-page {
    display: block;
}

.ig-resource-page__main {
    padding-block: 56px var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ig-resource-page__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ig-resource-page__title {
    font-size: clamp(28px, 3.6vw, 40px);
}

.ig-resource-page__meta {
    font-size: 13px;
    color: var(--text-muted);
}

.ig-resource-page__figure {
    margin-top: var(--space-3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* Reserved before the file arrives, and it keeps a portrait upload from
       taking over the article. The crop is 16:9, so this only matters when an
       editor picks a size that is not. */
    aspect-ratio: 16 / 9;
}

.ig-resource-page__figure .ig-img {
    height: 100%;
}

.ig-resource-page__caption {
    font-size: 13px;
    color: var(--text-muted);
    padding-top: var(--space-2);
}

/* Typography is the shared .ig-article-body component; only the gap below the
   header belongs to this page. */
.ig-resource-page__content {
    margin-top: 12px;
}

.ig-resource-page__tail {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-block: 56px 88px;
}

.ig-resources-latest {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ig-resources-latest__title {
    font-size: var(--text-2xl);
}

/* ==========================================================================
   Breakpoints

   The grids collapse at 960px with every other card grid on the site, rather
   than at the design's 820/900. One tablet breakpoint is worth more than an
   exact match on two.
   ========================================================================== */

@media (max-width: 700px) {
    .ig-resources-index {
        padding-block: var(--space-8) 56px;
    }

    .ig-resource-page__main {
        padding-block: var(--space-8) var(--space-2);
    }

    .ig-resource-page__tail {
        padding-block: var(--space-8) 56px;
        gap: var(--space-10);
    }

    .ig-rs-card__media {
        height: 200px;
    }
}