/* ==========================================================================
   Iguazu Noticias — Timing bar
   White card lifted onto the hero's bottom edge, holding a proportional strip.
   ========================================================================== */

.ig-timing {
    position: relative;
    z-index: 2;
    /* The overlap: the card climbs onto the photo. */
    margin-top: -56px;
}

.ig-timing__card {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lift);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ig-timing__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ig-timing__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 17px;
}

.ig-timing__note {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   The strip
   -------------------------------------------------------------------------- */

.ig-timing__bar {
    display: flex;
    height: 46px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ig-timing__seg {
    display: grid;
    place-items: center;
    flex-basis: 0;
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
}

/* Colour and share of the bar travel together: a transfer is always the short
   neutral sliver, the park is always the wide pale-leaf block. */
.ig-timing__seg--transfer {
    flex-grow: 6;
    background: var(--neutral-100);
    color: var(--text-muted);
}

.ig-timing__seg--flight {
    flex-grow: 15;
    background: var(--violet-500);
    color: #fff;
}

.ig-timing__seg--park {
    flex-grow: 52;
    background: var(--green-100);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Legend: where the same information lives as text
   -------------------------------------------------------------------------- */

.ig-timing__legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.ig-timing__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ig-timing__dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    border: 1px solid var(--neutral-200);
    flex: none;
}

.ig-timing__dot--transfer { background: var(--neutral-100); }
.ig-timing__dot--flight   { background: var(--violet-500); }
.ig-timing__dot--park     { background: var(--green-100); }

@media (max-width: 700px) {
    /* Below this width the five segments cannot hold legible labels, so the
       strip becomes a plain proportional ribbon and the legend carries the
       durations on its own. */
    .ig-timing__bar {
        height: 14px;
    }

    .ig-timing__seg {
        font-size: 0;
    }
}