/* ==========================================================================
   Iguazu Noticias — Flight finder

   Shared: the landing page and the How to Plan guide both render the finder.
   Split out of flights.css, which keeps the route map that only the landing has.

   The form primitives (.ig-field / .ig-label / .ig-input) used to live here and
   now live in components/form.css, which the contact form triggered. That sheet
   loads immediately before this one in the shared tier, so the date picker
   still gets them in the same cascade position it always did.
   ========================================================================== */

.ig-finder {
    background: #fff;
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

.ig-finder__title {
    font-size: var(--text-lg);
}

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

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

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

.ig-finder__disclaimer {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   One flight row
   -------------------------------------------------------------------------- */

/* Two blocks, not four inline pieces. The finder column is about 443px wide, and
   the times, the airline, the return time and the verdict pill together need
   nearly 490px, so laying them out in one flat row always wrapped the pill onto
   a second line. Stacking the three text lines and keeping the verdict beside
   them fits comfortably and puts the verdict where the eye looks for it. */
.ig-flight {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border: 1.5px solid var(--neutral-100);
    border-radius: var(--radius-xl);
    padding: 12px 16px;
}

.ig-flight__when {
    flex: 1 1 auto;
    min-width: 118px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ig-flight__hours {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 17px;
}

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

.ig-flight__meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Search states

   The results wrapper carries `hidden` until the first search, so it costs no
   flex gap while the card is only a date picker.
   -------------------------------------------------------------------------- */

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

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

.ig-flight-skeleton {
    display: block;
    height: 62px;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(90deg, var(--neutral-100) 25%, var(--tint) 50%, var(--neutral-100) 75%)
        0 0 / 300% 100%;
    animation: ig-flight-shimmer 1.4s linear infinite;
}

@keyframes ig-flight-shimmer {
    to {
        background-position: -300% 0;
    }
}

.ig-finder__badge {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--green-700);
    font-weight: var(--weight-semibold);
}

.ig-finder__badge::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--green-400);
    box-shadow: 0 0 0 3px var(--green-100);
}

.ig-finder__note {
    font-size: 12.5px;
    color: var(--text-muted);
}

.ig-finder__status--error {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Verdict chips

   Also used outside the finder: the How to Plan guide reuses the three TIME
   tones for its "departure windows, honestly rated" cards, which is exactly the
   same judgement rendered at a different size.

   --carrier is not one of them. It judges the airline rather than the clock and
   replaces whichever time tone the row would otherwise carry, so it has no card
   in that trio. Do not add a fourth one.
   -------------------------------------------------------------------------- */

.ig-flight__verdict {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    /* One line always: the verdict is the row's whole point, and a two-line pill
       reads as a broken chip. It wraps to its own row before it wraps its text. */
    white-space: nowrap;
}

.ig-flight__verdict--good {
    background: var(--green-100);
    color: var(--green-700);
}

.ig-flight__verdict--ok {
    background: var(--violet-100);
    color: var(--violet-700);
}

.ig-flight__verdict--bad {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Amber rather than the red of --bad: "this airline cancels" and "this flight
   leaves too late" are different problems, and painting them the same tone
   would say a 06:10 departure and an 11:05 one are equally hopeless. */
.ig-flight__verdict--carrier {
    background: var(--warning-bg);
    color: var(--warning);
}

@media (max-width: 620px) {
    /* Stack the row: a time range and a verdict pill never fit side by side on
       a phone, and wrapping alone leaves the airline line orphaned. */
    .ig-flight {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ig-flight__verdict {
        margin: 6px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* base.css clamps every animation to 0.01ms, which would freeze the shimmer
       wherever its first frame landed and leave a bar looking half-painted. The
       gradient has to go too, not just the movement. */
    .ig-flight-skeleton {
        animation: none;
        background: var(--neutral-100);
    }
}