/* ==========================================================================
   Iguazu Noticias — FAQ archive and single

   One sheet for both views: they share the numbered circle, the card, the date
   line and the author box.

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

   The date line, the author box and the article typography used to live here.
   They moved to assets/css/components/ when Resources needed the same three.
   ========================================================================== */

/* ==========================================================================
   Archive
   ========================================================================== */

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

.ig-faq-header {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

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

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

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

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

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

.ig-faq-card__body {
    flex-direction: row;
    gap: var(--space-5);
}

.ig-faq-card__num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--green-100);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 17px;
}

.ig-faq-card__copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ig-faq-card__title {
    font-size: var(--text-xl);
    line-height: 1.3;
}

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

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

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

.ig-faq-card__foot {
    justify-content: space-between;
}

/* ==========================================================================
   Single
   ========================================================================== */

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

.ig-faq-page__grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a 1fr track's min is auto, so one long
       unbreakable URL in an answer would push the column past the container. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}

.ig-faq-page__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

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

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

.ig-faq-page__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.ig-faq-page__sep {
    color: var(--neutral-400);
}

/* --------------------------------------------------------------------------
   The answer body

   Typography comes from the shared .ig-article-body component; the element
   carries both classes. All that is page-specific is how far the body sits
   below the meta line.
   -------------------------------------------------------------------------- */

.ig-faq-page__content {
    margin-top: 12px;
}

.ig-faq-page__cta {
    /* The panel spans both columns, below the grid. */
    margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Reading-order sidebar
   -------------------------------------------------------------------------- */

.ig-faq-page__aside {
    position: sticky;
    top: var(--scroll-offset);
    /* Required. A grid item defaults to stretch, which makes the aside as tall
       as the row and leaves sticky with nowhere to travel. */
    align-self: start;
}

.ig-faq-nav {
    background: #fff;
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-press);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ig-faq-nav__title {
    font-family: var(--font-display);
    font-size: 16px;
    padding: 0 12px 8px;
}

.ig-faq-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ig-faq-nav__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 12px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    transition: background var(--dur);
}

a.ig-faq-nav__row:hover {
    background: var(--neutral-100);
}

.ig-faq-nav__item--current .ig-faq-nav__row {
    background: var(--green-100);
}

.ig-faq-nav__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--neutral-100);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 12.5px;
}

.ig-faq-nav__item--current .ig-faq-nav__num {
    background: #fff;
}

.ig-faq-nav__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
}

.ig-faq-nav__label {
    font-size: 14px;
    font-weight: var(--weight-semibold);
    line-height: 1.35;
}

.ig-faq-nav__here {
    font-size: 11.5px;
    font-weight: var(--weight-bold);
    color: var(--green-700);
}

.ig-faq-nav__foot {
    padding: 10px 12px 2px;
    font-size: 13.5px;
}

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

@media (max-width: 960px) {
    .ig-faq-page__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .ig-faq-page__aside {
        position: static;
    }

    .ig-faq-page {
        padding-block: var(--space-8) 56px;
    }
}

@media (max-width: 700px) {
    /* The circle beside a two-line question wastes the width a phone needs. */
    .ig-faq-card__body {
        flex-direction: column;
        gap: var(--space-3);
    }

    .ig-faq-index {
        padding-block: var(--space-8) 56px;
    }
}