/* ==========================================================================
   Iguazu Noticias — Site footer
   Deep purple surface with rounded top corners, mint headings, pale-leaf text.
   ========================================================================== */

.ig-footer {
    background: var(--surface-dark);
    color: #fff;
    padding: var(--space-16) var(--space-10) var(--space-8);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ig-footer__grid {
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-12);
}

/* With no footer menus assigned the two link columns never render, so the brand
   column should not be left stretched across the whole width. */
.ig-footer__grid:not(:has(.ig-footer__col)) {
    grid-template-columns: minmax(0, var(--container-narrow));
}

.ig-footer__brand {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
}

.ig-footer__blurb {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--green-100);
    max-width: 340px;
    line-height: var(--leading-normal);
}

.ig-footer__col {
    display: flex;
    flex-direction: column;
}

.ig-footer__h {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--green-400);
    margin-bottom: 14px;
}

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

.ig-footer__link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
    transition: color var(--dur), opacity var(--dur);
}

.ig-footer__link:hover,
.ig-footer__link:focus-visible {
    color: var(--green-400);
    opacity: 1;
}

.ig-footer__link--active {
    color: var(--green-400);
    opacity: 1;
}

.ig-footer__legal {
    max-width: var(--container);
    margin: var(--space-12) auto 0;
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: var(--text-xs);
    color: var(--green-100);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    .ig-footer {
        padding-inline: var(--space-5);
    }

    .ig-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}