/* ==========================================================================
   Iguazu Noticias — Site alert

   The page's one interruption: a filled band between the timing card and the
   sticky nav, carrying a fact that changes what the rest of the page means.

   A full-bleed band rather than a card, and that is the whole design decision.
   The timing card above it is already a white card floating on the hero; a
   second card 32px below it reads as a second feature, not as a warning. A band
   that runs edge to edge reads as the page itself speaking.

   No icon. The theme's other "pay attention to this" surface, .ig-callout--warn
   in components/callout.css, carries none either, and there is no alert glyph in
   assets/icons/. Vendoring one from Lucide would also need a new .ig-chip
   variant in the GLOBAL tier to hold it, which is two new dependencies for a
   decoration the coloured surface already provides.

   Landing-only, so it lives in the landing's page map rather than in
   callout.css. It moves up to the shared tier the day a second page needs it,
   which is exactly how callout.css got there.
   ========================================================================== */

.ig-alert {
    /* Symmetric padding, on purpose: the gap down to the sticky nav is margin,
       set in pages/landing.css, so that it stays OUTSIDE the colour. Padding
       there would put the space inside the fill and leave the band visibly
       bottom-heavy. */
    padding-block: var(--space-5);
}

.ig-alert__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

/* base.css gives h1..h6 weight 800; the design wants 700 here. Same note as
   .ig-callout__title: the caller picks the level, the component pins the look. */
.ig-alert__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

/* Capped measure so a long closure notice cannot run the width of a desktop. */
.ig-alert__text {
    font-size: 14.5px;
    max-width: 68ch;
}

.ig-alert__link {
    color: var(--text-link);
}

/* --------------------------------------------------------------------------
   Tones

   Two, not five. The split that earns its keep is "this interrupts the trip"
   against "this does not"; a third colour would be a preference, not a meaning.
   The suffixes are the values the plugin stores, so renaming one here needs the
   matching key in iguazu_core_alert_tones().
   -------------------------------------------------------------------------- */

/* Something is disrupted and it affects the trip. --warning on --warning-bg is
   the one pairing tokens.css has actually contrast-checked, at 4.59:1. That is
   above the 4.5:1 bar but not by much, and 18px bold is NOT WCAG "large text"
   (the threshold is 18.66px), so the bar really is 4.5. Do not lighten
   --warning without rechecking this callsite. */
.ig-alert--warn {
    background: var(--warning-bg);
}

.ig-alert--warn .ig-alert__title {
    color: var(--warning);
}

/* A general announcement that interrupts nothing. Reuses the tint every helpful
   aside on this site already wears. */
.ig-alert--info {
    background: var(--surface-tint-green);
}

.ig-alert--info .ig-alert__title {
    color: var(--green-700);
}

@media (max-width: 960px) {
    .ig-alert {
        padding-block: var(--space-4);
    }
}