/* ═══════════════════════════════════════════════════════════════════════════
   FLIGHTS PAGE

   What is left of hub.html once the collaboration ecosystem is gone. The hero
   is in the homepage's language; the search card below it is the flight
   module's own markup, which flights.js drives by id — restyled here rather
   than rebuilt, because 4113 lines of working search, comparison, ancillaries
   and booking hang off those ids.
   ══════════════════════════════════════════════════════════════════════════ */

.fp-hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(170deg,
        var(--hub-bg-deep) 0%, var(--hub-bg) 60%, var(--hub-elev) 100%);
}

.fp-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--hub-ink);
    margin: 0 0 0.85rem;
}

.fp-sub {
    font-size: clamp(0.98rem, 1.5vw, 1.12rem);
    line-height: 1.6;
    color: var(--hub-ink-muted);
    max-width: 66ch;
    margin: 0;
}

.fp-sub a { color: var(--hub-accent); font-weight: 600; }

/* ── The flight module, brought into line ────────────────────────────────── */

/* Its own hero band sat under the Hub's; with the Hub gone it is just the tab
   strip, and it should read as part of the page rather than a second header. */
.flights-hero {
    padding: 0 0 1.25rem !important;
    background: var(--hub-bg);
}

.flights-page-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgb(var(--hub-overlay-rgb) / 0.05);
    border-radius: 100px;
}

.flights-page-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1.1rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
    transition: background var(--hub-transition), color var(--hub-transition);
}

.flights-page-tab:hover { color: var(--hub-ink); }

.flights-page-tab.active {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-weight: 700;
}

.flights-page-tab:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

.search-section { background: var(--hub-bg); padding-top: 0; }

.search-card {
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
}

/* Same pill as every other segmented control on the site. */
.trip-type-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgb(var(--hub-overlay-rgb) / 0.05);
    border-radius: 100px;
}

.trip-type-btn {
    padding: 0.4rem 1.1rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
}

.trip-type-btn.active {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-weight: 700;
}

.trip-type-btn:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .flights-page-tab { transition: none; }
}

/* ── Primary actions ─────────────────────────────────────────────────────────
 * The module was built around its own sky-blue accent (#38BDF8). Tokenising it
 * moved every one of those to the brand accent, which is right for text and
 * borders; the two filled buttons also want the sweep the rest of the site uses
 * for a primary action.
 * ────────────────────────────────────────────────────────────────────────── */

.search-card .search-btn,
.search-card button[type="submit"] {
    background: var(--hub-fill) !important;
    color: var(--hub-on-fill) !important;
    border: 0 !important;
    font-weight: 700;
}

.search-card .search-btn:hover,
.search-card button[type="submit"]:hover { filter: brightness(1.06); }