/* ============================================================
   HUB HERO (templates/travel/_page.html): a full-width photo band that
   follows the open search tab, the search card floating over its bottom
   edge, and the eight tabs drawn as app tiles (Booking.com / Trip.com).
   Every rule starts at #tvPage so it wins over search-card.css, which the
   card links later in the page. Text sizes stay with font-size.css.
   ============================================================ */

#tvPage .tv-hero--photo {
    --hub-h: 420px;
    --hub-lap: 96px;            /* how far the card sits over the photo */
    position: relative;
    padding: 0 0 clamp(24px, 4vw, 44px);
    background: var(--c-bg, #fff);
    color: #fff;
    animation: none;
    isolation: isolate;
}

/* The photo band */
#tvPage .tv-hero__band {
    position: relative;
    min-height: var(--hub-h);
    display: flex;
    align-items: flex-end;
    padding: 40px 0 calc(var(--hub-lap) + 26px);
    box-sizing: border-box;
    overflow: hidden;
    background: #0f1a2c;
}
#tvPage .tv-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#tvPage .tv-hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 45%;
    opacity: 0; transform: scale(1.04);
    transition: opacity 650ms var(--ease, ease), transform 6s var(--ease, ease);
}
#tvPage .tv-hero__img.is-on { opacity: 1; transform: scale(1); }
#tvPage .tv-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 26, 44, 0.30) 0%, rgba(15, 26, 44, 0.42) 32%, rgba(15, 26, 44, 0.70) 62%, rgba(15, 26, 44, 0.84) 100%);
}

#tvPage .tv-hero__copy { position: relative; z-index: 1; text-align: center; }
#tvPage .tv-hero--photo .tv-hero__title {
    color: #fff; margin: 0 auto 8px; max-width: 28ch;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
#tvPage .tv-hero--photo .tv-hero__lead {
    color: rgba(255, 255, 255, 0.92); margin: 0 auto 16px; max-width: 56ch;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
#tvPage .tv-hero__chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
#tvPage .tv-hero__chips li {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 34px; padding: 0 14px 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.30);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; font-weight: 600; line-height: 1.2;
}
#tvPage .tv-hero__chips .et-i { width: 16px; height: 16px; color: #fff; flex: none; }

/* The card floats over the bottom edge of the photo */
#tvPage .tv-hero--photo .tv-hero__in { position: relative; z-index: 2; margin-top: calc(var(--hub-lap) * -1); }
#tvPage .tv-hero--photo .tv-hero__note { position: relative; margin: 0 auto 12px; }
#tvPage .tv-hero--photo .tsc {
    background: #fff;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 30px 70px -24px rgba(15, 26, 44, 0.38), 0 10px 26px rgba(15, 26, 44, 0.10);
}

/* The eight tabs as app tiles: one row on desktop, 4 x 2 on phones */
#tvPage .tv-hero .tsc__tabs {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    padding: 20px 16px 14px;
    overflow: visible;
    border-bottom: 1px solid var(--c-line, #e5e5e7);
}
#tvPage .tv-hero .tsc__ind { display: none; }
#tvPage .tv-hero .tsc__tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px;
    min-width: 0; min-height: 96px;
    padding: 12px 4px 10px;
    border: 0; border-radius: 16px;
    background: var(--c-bg-alt, #f5f7fa);
    color: var(--c-ink, #0f1a2c);
    font-weight: 600; line-height: 1.2; text-align: center; white-space: normal;
}
#tvPage .tv-hero .tsc__tab:hover { background: var(--tb, #eef4ff); color: var(--c-ink, #0f1a2c); }
/* The chosen door: its own tint as the card, a white circle, its ink for the
   glyph and the word (design 1, 2026-10-30). */
#tvPage .tv-hero .tsc__tab[aria-selected="true"],
#tvPage .tv-hero .tsc:not(.tsc--ready) .tsc__tab[aria-selected="true"] {
    background: var(--tb, #eef4ff); color: var(--ti, #1d4ed8); border: 0;
    box-shadow: inset 0 0 0 1.5px var(--ti, #1d4ed8);
}
#tvPage .tv-hero .tsc__tab:focus-visible { border-radius: 16px; }
#tvPage .tv-hero .tsc__tab > span[data-i18n] { display: block; max-width: 100%; }
/* The door icon: the same navy monoline glyph as the home grid, no circle,
   no shadow, white when the tile is selected (2026-10-30). */
#tvPage .tv-hero .tsc__ico {
    display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--tb, #eef4ff); color: var(--ti, #0f1a2c);
}
#tvPage .tv-hero .tsc__tab .tsc__ico .et-i { width: 22px; height: 22px; color: currentColor; }
#tvPage .tv-hero .tsc__tab[aria-selected="true"] .tsc__ico { background: #fff; color: var(--ti, #1d4ed8); }
/* Door colours: the same map as home.css; change both together. */
#tvPage [data-door="hosts"] { --tb: #e4f4f1; --ti: #0f766e; }
#tvPage [data-door="hotels"] { --tb: #e6eefc; --ti: #1d4ed8; }
#tvPage [data-door="flights"] { --tb: #e3f1fa; --ti: #0369a1; }
#tvPage [data-door="activities"] { --tb: #fbf0e0; --ti: #b45309; }
#tvPage [data-door="transport"] { --tb: #e6f4e8; --ti: #15803d; }
#tvPage [data-door="car"] { --tb: #eaedf2; --ti: #334155; }
#tvPage [data-door="visa"] { --tb: #ece8f8; --ti: #6d28d9; }
#tvPage [data-door="fasttrack"] { --tb: #fbefd3; --ti: #a16207; }

@media (max-width: 899px) {
    #tvPage .tv-hero .tsc__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
}
@media (max-width: 734px) {
    #tvPage .tv-hero--photo { --hub-h: 40vh; --hub-lap: 60px; }
    #tvPage .tv-hero__band { min-height: max(40vh, 300px); padding: 28px 0 calc(var(--hub-lap) + 20px); }
    #tvPage .tv-hero__chips { gap: 6px; }
    #tvPage .tv-hero__chips li { min-height: 30px; padding: 0 11px 0 8px; }
    #tvPage .tv-hero--photo .tsc { border-radius: 20px; }
    #tvPage .tv-hero .tsc__tabs { gap: 12px 6px; padding: 16px 10px 12px; }
    #tvPage .tv-hero .tsc__tab { min-height: 82px; padding: 9px 2px 8px; gap: 5px; border-radius: 14px; }
    #tvPage .tv-hero .tsc__ico { width: 40px; height: 40px; }
    #tvPage .tv-hero .tsc__tab .tsc__ico .et-i { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    #tvPage .tv-hero__img { transition: opacity 200ms linear; transform: none; }
    #tvPage .tv-hero__img.is-on { transform: none; }
}

/* ============================================================
   FLIGHTS HOME (2026-10-29, templates/travel/flights.html). Item codes
   A1-A21 in reports/Flight booking flow vs Trip.com.md. Blue and white,
   the site's tokens; text sizes stay under font-size.css except prices
   (.fb-price, at the end).
   ============================================================ */

/* A1 + A2: the city line and the credit badge under the hero title */
#tvPage .tv-hero--flights .tv-hero__lead {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
    max-width: none;
}
#tvPage .fh-city { display: inline-flex; align-items: center; gap: 6px; }
#tvPage .fh-city .et-i { width: 14px; height: 14px; color: #fff; }
#tvPage .fh-city a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#tvPage .fh-credit {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 0 12px 0 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.36);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
}
#tvPage .fh-credit:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
#tvPage .fh-credit .et-i { width: 15px; height: 15px; color: #fff; }

/* The stack: tight chapters, headings on the left like a list page */
.fh { --fh-ink: var(--c-ink, #0f1a2c); --fh-muted: var(--c-muted, #4f5a6b); --fh-line: var(--c-line, #e5e5e7);
      --fh-blue: var(--c-primary, #2563eb); --fh-soft: var(--c-bg-alt, #f5f7fa); --fh-ok: var(--eb-ok, #1f7a4d); --fh-navy: #0f2557; }
#tvPage .fh > .tv-section { padding-block: 14px; }
#tvPage .fh > .tv-section:first-child { padding-top: 18px; }
#tvPage .fh .tv-h2 { text-align: left; margin-bottom: 10px; }
#tvPage .fh .tv-row-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; text-align: left; }
#tvPage .fh .tv-row-head .ap-link { font-weight: 600; white-space: nowrap; }
#tvPage .fh .tv-fine { margin-top: 8px; }

/* A11-A14 quick links */
.fh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fh-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    min-height: 84px; padding: 12px 6px 10px; border: 1px solid var(--fh-line); border-radius: 14px;
    background: #fff; color: var(--fh-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(15, 26, 44, 0.05);
    transition: border-color 160ms ease, transform 160ms ease;
}
.fh-tile .et-i { width: 22px; height: 22px; color: var(--fh-blue); }
.fh-tile span { font-weight: 700; line-height: 1.2; }
.fh-tile small { color: var(--fh-muted); line-height: 1.25; }
.fh-tile:hover, .fh-tile:focus-visible { border-color: var(--fh-blue); color: var(--fh-ink); transform: translateY(-1px); }

/* A15 explore map */
.fh-map { position: relative; height: 280px; border-radius: 16px; overflow: hidden; background: var(--fh-navy);
          background-image: radial-gradient(ellipse at 50% 120%, rgba(37, 99, 235, 0.55), transparent 60%); }
.fh-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh-map__pin {
    position: absolute; transform: translate(-50%, -125%);
    display: inline-flex; align-items: center; gap: 5px; max-width: 46%;
    padding: 4px 8px; border-radius: 8px; background: #fff; color: var(--fh-ink);
    font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); text-decoration: none; font-variant-numeric: tabular-nums;
}
.fh-map__pin b { color: var(--fh-blue); flex: none; }
.fh-map__pin--origin { background: var(--fh-blue); color: #fff; transform: translate(-50%, 35%); letter-spacing: 0.04em; }
a.fh-map__pin:hover, a.fh-map__pin:focus-visible { background: var(--fh-blue); color: #fff; }
a.fh-map__pin:hover b, a.fh-map__pin:focus-visible b { color: #fff; }

/* A16 + A17 lists */
.fh-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fh-line); border-radius: 16px; background: #fff; overflow: hidden; }
.fh-list li + li { border-top: 1px solid var(--fh-line); }
.fh-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: inherit; text-decoration: none; }
.fh-row:hover, .fh-row:focus-visible { background: var(--fh-soft); color: inherit; }
.fh-row img, .fh-row__code { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.fh-row__code { display: grid; place-items: center; background: var(--eb-blue-soft, #eef4ff); color: var(--fh-blue); font-weight: 800; letter-spacing: 0.04em; }
.fh-row__txt { flex: 1; min-width: 0; display: block; line-height: 1.3; }
.fh-row__txt small { display: block; color: var(--fh-muted); margin-top: 1px; }
.fh-visa { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--fh-line); border-radius: 999px;
           font-style: normal; font-weight: 600; color: var(--fh-muted); vertical-align: 2px; line-height: 1.4; }
.fh-visa--free { color: var(--fh-ok); border-color: #cfe8d8; background: #f0f8f3; }
.fh-below { color: var(--fh-ok); font-weight: 700; }
.fh-row__price { color: var(--fh-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fh-row__view { color: var(--fh-blue); font-weight: 700; white-space: nowrap; }

/* A18-A20 rails: sideways on every screen, snapping */
#tvPage .fh .fh-rail__track {
    display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 10px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#tvPage .fh .fh-rail__track::-webkit-scrollbar { display: none; }
.fh-story { flex: 0 0 min(240px, 78vw); scroll-snap-align: start; border: 1px solid var(--fh-line); border-radius: 16px; overflow: hidden;
            background: #fff; color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.fh-story img { width: 100%; height: 120px; object-fit: cover; display: block; }
.fh-story__txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.fh-story__txt b { line-height: 1.3; white-space: normal; }
.fh-story__txt small { color: var(--fh-muted); }
.fh-story:hover, .fh-story:focus-visible { border-color: var(--fh-blue); color: inherit; }
.fh-biz { flex: 0 0 200px; scroll-snap-align: start; padding: 12px 14px; border: 1px solid var(--fh-line); border-radius: 16px;
          background: #fff; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 3px; }
.fh-biz > b { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.02em; }
.fh-biz .et-i { width: 12px; height: 12px; color: var(--fh-blue); }
.fh-biz small { color: var(--fh-muted); line-height: 1.3; white-space: normal; }
.fh-biz > span { color: var(--fh-blue); font-weight: 700; margin-top: 2px; }
.fh-biz:hover, .fh-biz:focus-visible { border-color: var(--fh-blue); color: inherit; }
.fh-deal { flex: 0 0 240px; scroll-snap-align: start; min-height: 96px; padding: 14px; border-radius: 16px; color: #fff;
           text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.fh-deal .et-i { width: 20px; height: 20px; margin-bottom: 6px; color: #fff; }
.fh-deal small { opacity: 0.9; }
.fh-deal:hover, .fh-deal:focus-visible { color: #fff; filter: brightness(1.08); }
.fh-deal--navy { background: var(--fh-navy); }
.fh-deal--blue { background: var(--fh-blue); }
.fh-deal--green { background: var(--fh-ok); }

/* A13 frequent flyer programmes */
#tvPage .fh .fh-ff__note { margin: 0 0 10px; }
.fh-ff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.fh-ff li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--fh-line); border-radius: 12px; background: #fff; }
.fh-ff li .et-i { width: 18px; height: 18px; color: var(--fh-blue); flex: none; }
.fh-ff li span { display: flex; flex-direction: column; min-width: 0; }
.fh-ff li small { color: var(--fh-muted); }

/* A21 trust row */
.fh-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fh-trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 8px;
               border: 1px solid var(--fh-line); border-radius: 14px; background: #fff; font-weight: 600; line-height: 1.25; }
.fh-trust .et-i { width: 20px; height: 20px; color: var(--fh-blue); }

@media (max-width: 734px) {
    .fh-tile { min-height: 76px; padding: 10px 4px 8px; gap: 3px; }
    .fh-tile small { display: none; }
    .fh-map { height: 210px; }
    .fh-map__pin { padding: 3px 7px; }
    .fh-story { flex-basis: 210px; }
    .fh-story img { height: 104px; }
    .fh-biz { flex-basis: 176px; }
    .fh-deal { flex-basis: 220px; }
    .fh-trust li { padding: 10px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .fh-tile { transition: none; }
}

/* Prices are the one thing allowed above the site's text cap. */
html:not(#et):not(#et) body #tvPage .fb-price { font-size: 16px !important; }
@media (min-width: 768px) {
    html:not(#et):not(#et) body #tvPage .fb-price { font-size: 18px !important; }
}
.fh-map__pin--left { transform: translate(-92%, -125%); }
.fh-map__pin--right { transform: translate(-8%, -125%); }
/* Narrow phones and Safari Page Zoom (268-360): two quick links per row. */
@media (max-width: 360px) { .fh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fh-quick .ap-wrap { container-type: inline-size; }
@container (max-width: 449px) { .fh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#tvPage .fh { overflow-wrap: anywhere; }