/* ==========================================================================
   Iguazu Noticias — For Cruisers

   One sheet for the page. Narrower than the rest of the site: the width comes
   from .ig-container--mid on <main>, so .ig-container keeps meaning exactly one
   thing everywhere else.
   ========================================================================== */

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

/* ==========================================================================
   Header
   ========================================================================== */

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

.ig-cru-header__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.ig-cru-header__title {
    font-size: clamp(30px, 3.8vw, 42px);
}

.ig-cru-header__lead {
    font-size: 17px;
    color: var(--text-muted);
}

/* ==========================================================================
   Section shell

   24px inside a section against 40px between them reads as a hierarchy; the
   global .ig-stack (32px) does not, which is why this is page-local.
   ========================================================================== */

.ig-cru-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ig-cru-section__title {
    font-size: var(--text-2xl);
}

/* ==========================================================================
   Port-time timelines
   ========================================================================== */

.ig-cru-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
}

.ig-cru-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ig-cru-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex: none;
}

.ig-cru-legend__swatch--tour { background: var(--green-400); }
.ig-cru-legend__swatch--port { background: var(--violet-200); }

.ig-cru-scenario {
    background: #fff;
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    box-shadow: var(--shadow-press);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ig-cru-scenario__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ig-cru-scenario__title {
    font-family: var(--font-display);
    font-size: 17px;
}

.ig-cru-scenario__text {
    font-size: 14px;
    color: var(--text-muted);
}

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

/* --------------------------------------------------------------------------
   One track

   Grid areas rather than a display toggle, so the note can never become
   display:none: the rail is decorative and the note is the only place the
   meaning exists. The narrow layout moves it, it does not hide it.
   -------------------------------------------------------------------------- */

.ig-cru-track {
    display: grid;
    grid-template-columns: 52px 1fr 170px;
    grid-template-areas: 'day rail note';
    align-items: center;
    gap: 12px;
}

.ig-cru-track__day {
    grid-area: day;
    font-size: 12.5px;
    font-weight: var(--weight-bold);
    color: var(--text-muted);
}

.ig-cru-track__rail {
    grid-area: rail;
    position: relative;
    display: block;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    overflow: hidden;
}

/* The two numbers inc/Components/TrackBar.php hands over. The fallbacks decide
   what a band with no attribute looks like: nothing, rather than full width. */
.ig-cru-track__band {
    position: absolute;
    inset-block: 0;
    left: var(--ig-track-from, 0%);
    width: var(--ig-track-span, 0%);
}

.ig-cru-track__band--port {
    background: var(--violet-200);
}

/* Paints over the port band because it comes later in the DOM and both are
   positioned, so no z-index is needed. */
.ig-cru-track__band--tour {
    background: var(--green-400);
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ig-cru-track__label {
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: var(--ink);
    white-space: nowrap;
}

.ig-cru-track__note {
    grid-area: note;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ==========================================================================
   Numbered tips
   ========================================================================== */

.ig-cru-tips {
    align-items: stretch;
}

.ig-cru-tip {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    box-shadow: var(--shadow-press);
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out);
}

.ig-cru-tip:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

/* Deliberately not .ig-chip (52px) or .ig-hop-head__num (46px): this one is
   42px, and it is not .ig-step, which belongs to the landing's dark panel and
   would render white on white here. */
.ig-cru-tip__num {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 16px;
}

.ig-cru-tip__num--mint {
    background: var(--green-400);
    color: var(--ink);
}

.ig-cru-tip__num--violet {
    background: var(--violet-100);
    color: var(--violet-700);
}

.ig-cru-tip__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ig-cru-tip__title {
    font-family: var(--font-display);
    font-size: 16.5px;
}

.ig-cru-tip__text {
    font-size: 14px;
    color: var(--text-muted);
}

/* ==========================================================================
   On the day
   ========================================================================== */

.ig-cru-handoff {
    background: var(--surface-tint-green);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.ig-cru-handoff__copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 460px;
    min-width: 0;
}

.ig-cru-handoff__title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-xl);
}

.ig-cru-handoff__features {
    display: flex;
    gap: 6px 18px;
    flex-wrap: wrap;
}

.ig-cru-handoff__feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--text-muted);
}

.ig-cru-handoff__tick {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--green-700);
}

.ig-cru-handoff__actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

/* A destination whose page does not exist yet renders as text, not a link. It
   keeps the design complete and turns into a real link on its own the day the
   page is published. */
.ig-cru-handoff__pending {
    cursor: default;
    opacity: 0.55;
}

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

@media (max-width: 860px) {
    /* The design hides the note here. It carries the whole meaning of the rail,
       so it moves under it instead. The empty cell keeps it aligned with the
       rail rather than with the day label. */
    .ig-cru-track {
        grid-template-columns: 52px 1fr;
        grid-template-areas:
            'day rail'
            '.   note';
        row-gap: 6px;
    }
}

@media (max-width: 560px) {
    /* Below this the green block is too narrow to hold a legible label. Safe to
       drop: the rail is decorative and the note states the same fact in words,
       the same trade the hero timing bar makes at 700px. */
    .ig-cru-track__label {
        display: none;
    }

    .ig-cru-track__rail {
        height: 22px;
    }

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

    .ig-cru-handoff {
        padding: var(--space-6);
    }
}