/* ==========================================================================
   Iguazu Noticias — Callout

   A tinted or outlined aside pulled out of the surrounding copy. Shared: the
   landing uses --cruise and --note, the How to Plan guide uses --tip and --warn.

   Extracted from logistics.css and itinerary.css, which were landing-only, the
   moment a second page needed one.
   ========================================================================== */

.ig-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-radius: var(--radius-xl);
    padding: 20px 24px;
}

/* Callers choose the heading level, because only they know how deep the callout
   sits. Pinning the weight keeps every level rendering at the design's 700
   rather than the 800 that base.css gives h1..h6. */
.ig-callout__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.ig-callout__text {
    font-size: 14.5px;
    color: var(--text-body);
}

/* An outbound link in callout prose. inline-flex because .ig-icon is
   display:block, so a glyph dropped into a text flow would take its own line;
   this keeps the label and the icon as one unbreakable unit. */
.ig-callout__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: var(--weight-semibold);
}

/* The "(in Spanish)" note beside such a link. Quieter than the link, and never
   part of it: it is a fact about the destination, not a piece of the label. */
.ig-callout__aside {
    font-size: 13px;
    color: var(--text-muted);
}

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

/* Landing, Logistics: the cruise-passenger aside. Icon chip beside the text. */
.ig-callout--cruise {
    background: var(--surface-tint-green);
}

/* Landing, Itinerary: the "is one day enough?" note. Stacked, quieter text. */
.ig-callout--note {
    flex-direction: column;
    gap: var(--space-2);
    background: var(--surface-tint-green);
}

.ig-callout--note .ig-callout__text {
    font-size: 14px;
    color: var(--text-muted);
}

/* How to Plan, section 01: a helpful aside on the return flight. */
.ig-callout--tip {
    flex-direction: column;
    gap: var(--space-2);
    background: var(--surface-tint-green);
    border-radius: var(--radius);
    padding: 16px 20px;
}

/* How to Plan: protect your documents (section 02) and the Flybondi warning
   (section 01). Dashed, like every other "pay attention to this" surface in the
   design. Section 01 sits on --surface-tint rather than white, and since this
   tone has no background fill the tint simply shows through. */
.ig-callout--warn {
    flex-direction: column;
    gap: 6px;
    border: 1.5px dashed var(--magenta-700);
    border-radius: var(--radius);
    padding: 16px 20px;
}

.ig-callout--warn .ig-callout__title {
    font-size: 15.5px;
    color: var(--magenta-800);
}

.ig-callout--warn .ig-callout__text {
    font-size: 14px;
    color: var(--text-muted);
}

/* For Cruisers: the golden rule. The page's single loudest statement, so it
   sits a step larger than the other tones. */
.ig-callout--rule {
    flex-direction: column;
    gap: 6px;
    background: var(--surface-tint-green);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
}

.ig-callout--rule .ig-callout__title {
    font-size: var(--text-lg);
}

.ig-callout--rule .ig-callout__text {
    font-size: 15px;
    color: var(--text-muted);
}

.ig-callout--rule .ig-callout__text strong {
    color: var(--ink);
}