/* ============================================================
   TRAVEL HUB (templates/travel/*): the Airpaz page order drawn in
   Elite Trip tokens. Layout only; colours, radii and shadows come
   from elite.css. Classes are prefixed tv-. Phone first (390px).
   ============================================================ */

.tv-page { overflow-x: clip; }

/* 1. Hero + search card */
.tv-hero {
    position: relative;
    background: linear-gradient(180deg, var(--c-primary-soft) 0%, var(--c-bg) 100%);
    color: var(--c-ink);
    padding: clamp(28px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
}
.tv-hero__in { position: relative; }
.tv-hero__title {
    font-size: var(--t-title);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 8px;
    max-width: 14ch;
}
.tv-hero__lead {
    font-size: var(--t-lead);
    color: var(--c-muted);
    margin: 0 0 clamp(16px, 3vw, 28px);
    max-width: 52ch;
}
.tv-hero__note { margin: 0 0 16px; max-width: 52ch; }
.tv-hero__card { position: relative; }

/* Headings */
.tv-h2 {
    font-size: var(--t-sub);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(14px, 2vw, 22px);
}
.tv-h2--center { text-align: center; }
.tv-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tv-row-head .tv-h2 { margin-bottom: 0; }
.tv-row-head { margin-bottom: clamp(14px, 2vw, 22px); }

/* Grids */
.tv-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
    .tv-grid--2, .tv-grid--3, .tv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .tv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 2. Manage your booking */
.tv-manage__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tv-manage__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tv-manage__card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; text-decoration: none; color: inherit;
    min-height: 44px;
}
.tv-manage__copy { display: flex; flex-direction: column; gap: 2px; }
.tv-manage__copy strong { font-size: var(--t-body); font-weight: 600; }
.tv-manage__copy small { font-size: var(--t-small); color: var(--c-muted); }

/* 3. Promo rail */
.tv-rail__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 6px; }
.tv-rail__track > .tv-tile { flex: none; width: auto; min-width: 0; }
.tv-tile {
    position: relative; flex: 0 0 min(78vw, 300px); scroll-snap-align: start;
    border-radius: var(--r-lg); overflow: hidden; background: var(--c-espresso-2); color: var(--c-on-dark);
    text-decoration: none; aspect-ratio: 4 / 3; display: block;
}
.tv-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-tile__copy {
    position: absolute; inset: auto 0 0 0; padding: 40px 16px 16px;
    background: linear-gradient(to top, rgba(15, 26, 44, 0.9), rgba(15, 26, 44, 0));
    display: flex; flex-direction: column; gap: 2px;
}
.tv-tile__copy strong { font-size: var(--t-body); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tv-tile__copy small { font-size: var(--t-small); color: var(--c-on-dark-2); }
@media (min-width: 900px) { .tv-tile { flex-basis: calc(25% - 11px); } }

/* Route / mode / destination cards */
.tv-route { display: flex; flex-direction: column; gap: 6px; padding: 18px; text-decoration: none; color: inherit; }
.tv-route__pair { display: flex; align-items: center; gap: 8px; font-size: var(--t-lead); font-weight: 600; letter-spacing: 0.02em; }
.tv-route__name { color: var(--c-muted); font-size: var(--t-small); }
.tv-mode { display: flex; flex-direction: column; gap: 8px; padding: 18px; text-decoration: none; color: inherit; }
.tv-mode strong { font-weight: 600; }
.tv-mode small { color: var(--c-muted); font-size: var(--t-small); }

.tv-dest {
    position: relative; display: block; border-radius: var(--r-md); overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--c-espresso-2); color: var(--c-on-dark); text-decoration: none;
    box-shadow: var(--sh-1);
}
.tv-dest img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-dest__name, .tv-dest__sub, .tv-dest__actions { position: absolute; left: 14px; right: 14px; }
.tv-dest__name { bottom: 34px; font-size: var(--t-lead); font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 6px; }
.tv-dest__sub { bottom: 14px; font-size: var(--t-small); color: var(--c-gold-light); }
.tv-dest::after {
    content: ""; position: absolute; inset: 40% 0 0 0; pointer-events: none;
    background: linear-gradient(to top, rgba(15, 26, 44, 0.85), rgba(15, 26, 44, 0));
}
/* Name and buttons stack from the bottom, so buttons that wrap to a second
   row push the name up instead of covering it. */
.tv-dest--card { box-sizing: border-box; min-width: 0; aspect-ratio: 16 / 10; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; }
.tv-dest--card img { position: absolute; inset: 0; }
.tv-dest--card::after { inset: 20% 0 0 0; }
.tv-dest--card .tv-dest__name, .tv-dest--card .tv-dest__actions { position: relative; left: auto; right: auto; bottom: auto; }
.tv-dest__actions { bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.tv-dest__actions .et-btn { background: rgba(255, 255, 255, 0.92); color: var(--c-ink); box-shadow: none; border: 0; }
.tv-dest__name, .tv-dest__sub, .tv-dest__actions { z-index: 1; }

/* Wide banner */
.tv-banner { display: grid; grid-template-columns: 1fr; overflow: hidden; text-decoration: none; color: inherit; }
.tv-banner img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 7; }
.tv-banner__copy { padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tv-banner__copy h2, .tv-banner__copy h3 { font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.tv-banner__copy h3 { font-size: var(--t-lead); display: flex; align-items: center; gap: 8px; }
.tv-banner__copy p { margin: 0; color: var(--c-muted); }
@media (min-width: 800px) {
    .tv-banner { grid-template-columns: 1.1fr 1fr; align-items: center; }
    .tv-banner--half { grid-template-columns: 1fr; }
    .tv-banner__copy { padding: 28px; }
}

/* 5. Why */
.tv-why__grid { display: grid; gap: 22px 28px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tv-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tv-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.et-feature h3 { font-size: var(--t-body); font-weight: 600; margin: 0 0 4px; }
.et-feature p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }

/* 6. Partners */
.tv-partners__in { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.tv-partners__label { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
.tv-partners__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* 7. FAQ */
.tv-faq__item { border-top: 1px solid var(--c-line); padding: 14px 0; }
.tv-faq__item:last-of-type { border-bottom: 1px solid var(--c-line); }
.tv-faq__item summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tv-faq__item p { margin: 8px 0 0; color: var(--c-muted); }

/* Steps, fine print, calls to action */
.tv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 800px) { .tv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tv-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--c-bg); border-radius: var(--r-md); padding: 18px; box-shadow: var(--sh-1); }
.tv-steps li > b { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--c-gold); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.tv-steps li > span { display: flex; flex-direction: column; gap: 2px; }
.tv-steps li strong { font-weight: 600; }
.tv-steps li small { color: var(--c-muted); font-size: var(--t-small); }
.tv-fine { margin: 16px 0 0; color: var(--c-muted); font-size: var(--t-small); max-width: 70ch; }
.tv-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }

/* Tabs (promo filter, route tabs) */
.tv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tv-tab {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
    background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; font-size: var(--t-small); font-weight: 600; cursor: pointer;
}
.tv-tab.is-active { background: var(--c-ink); color: #fff; }
.tv-offer h3 { font-size: var(--t-lead); font-weight: 600; margin: 10px 0 6px; }
.tv-offer p { margin: 0 0 12px; color: var(--c-muted); }
.tv-offer__dates { margin: 0 0 12px; font-size: var(--t-small); }
.tv-offer__dates dt { color: var(--c-muted); display: inline; }
.tv-offer__dates dd { display: inline; margin: 0 0 0 6px; }

.tv-routetabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tv-routelist { list-style: none; margin: 0; padding: 0; display: none; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .tv-routelist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.tv-routelist li a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; min-height: 44px; align-items: center; }
.tv-routelist li a span { color: var(--c-muted); font-size: var(--t-small); display: inline-flex; align-items: center; gap: 4px; }
#tvRouteSgn:checked ~ #tvRouteListSgn, #tvRouteHan:checked ~ #tvRouteListHan { display: grid; }
#tvRouteSgn:checked ~ .tv-tabs label[for="tvRouteSgn"], #tvRouteHan:checked ~ .tv-tabs label[for="tvRouteHan"] { background: var(--c-ink); color: #fff; }
.tv-routetabs input:focus-visible + input ~ .tv-tabs label, .tv-routetabs input:focus-visible ~ .tv-tabs label[for] { outline: 2px solid var(--c-gold); outline-offset: 2px; }


/* ==========================================================================
   TRIP ARRANGEMENT (2026-10-20). Trip.com's landing page: the four reasons
   right under the search, white deal cards with a blue tag, compact promises,
   FAQ accordions with a turning chevron, and a blue closing band. Cards lift
   on hover in 300ms. Appended so the earlier rules stay the base.
   ========================================================================== */
.tv-ico { background: var(--c-primary-soft); color: var(--c-primary); }
.tv-ico .et-i { color: var(--c-primary); }

.tv-reasons { padding: 18px 0 6px; background: var(--c-bg); }
.tv-reasons__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tv-reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tv-reasons__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tv-reasons .et-feature { margin: 0; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); align-items: center; }
.tv-reasons .et-feature h2 { font-size: var(--t-small); font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; }
.tv-reasons .et-feature p { margin: 0; font-size: var(--t-micro); color: var(--c-muted); }

.tv-manage__card, .tv-tile, .tv-route, .tv-mode, .tv-dest, .tv-banner, .tv-offer {
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.tv-manage__card:hover, .tv-tile:hover, .tv-route:hover, .tv-mode:hover, .tv-dest:hover, .tv-banner:hover, .tv-offer:hover {
    transform: translateY(-3px); box-shadow: var(--sh-2);
}

/* Deal cards: white, the photo on top, a blue tag, the title, one line. */
.tv-tile { aspect-ratio: auto; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: none; display: flex; flex-direction: column; }
.tv-tile img { position: static; aspect-ratio: 16 / 10; height: auto; }
.tv-tile__copy { position: static; background: none; padding: 12px 14px 14px; gap: 6px; }
.tv-tile__tag { align-self: flex-start; font-style: normal; font-size: var(--t-micro); font-weight: 600; color: var(--c-link); background: var(--c-primary-soft); border-radius: var(--r-pill); padding: 3px 9px; }
.tv-tile__copy strong { color: var(--c-ink); }
.tv-tile__copy strong .et-i { color: var(--c-primary); }
.tv-tile__copy small { color: var(--c-muted); }

.tv-why__grid--compact { gap: 14px 24px; }
@media (min-width: 900px) { .tv-why__grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tv-why__grid--compact .et-feature { align-items: center; }
.tv-why__grid--compact .et-feature p { font-size: var(--t-micro); }

/* FAQ accordions: a chevron at the right that turns when open. */
.tv-faq__item summary { list-style: none; justify-content: space-between; gap: 12px; }
.tv-faq__item summary::-webkit-details-marker { display: none; }
.tv-faq__item summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
    border-right: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary);
    transform: rotate(45deg); transition: transform 250ms var(--ease);
}
.tv-faq__item[open] summary::after { transform: rotate(225deg); }
.tv-faq__item summary:hover { color: var(--c-link); }
.tv-faq__item summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
    .tv-faq__item summary::after, .tv-manage__card, .tv-tile, .tv-route, .tv-mode, .tv-dest, .tv-banner, .tv-offer { transition: none; }
}

/* The close: a blue band with the page's own action. */
.tv-close { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-gold-hover) 100%); color: #fff; padding: clamp(28px, 4vw, 48px) 0; }
.tv-close__in { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.tv-close__title { margin: 0 0 6px; font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.tv-close__text { margin: 0; max-width: 60ch; color: rgba(255, 255, 255, 0.9); }
.tv-close__btn { background: #fff; color: var(--c-link); border: 0; }
.tv-close__btn:hover { background: var(--c-primary-soft); color: var(--c-link); }

/* THE APPLE PASS, 2026-10-20: the same even beat and type scale as the
   homepage. Chapters after the hero turn white and grey by turn. */
main section[class^="tv-"]:not(.tv-hero):not(.tv-close) { padding-block: clamp(40px, 5.5vw, 76px); }
main section[class^="tv-"]:not(.tv-hero):not(.tv-close):nth-of-type(even) { background: var(--c-bg-alt); }
main section[class^="tv-"]:not(.tv-hero):not(.tv-close):nth-of-type(odd) { background: var(--c-bg); }
.tv-reasons { padding-block: clamp(28px, 3.5vw, 44px) !important; }
main section[class^="tv-"] h2 { font-size: var(--t-section); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
main section[class^="tv-"] h3 { font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.01em; }
.tv-hero h1 { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; }
.tv-hero p { font-size: var(--t-lead); }
.tv-faq__item summary { font-size: var(--t-body); font-weight: 600; }
.tv-faq__item p { font-size: var(--t-body); color: var(--c-muted); }
.tv-route, .tv-mode, .tv-tile, .tv-banner { border-radius: var(--r-md); }
@media (max-width: 734px) {
    main section[class^="tv-"]:not(.tv-hero):not(.tv-close) { padding-block: 36px; }
    main section[class^="tv-"] h2 { font-size: var(--t-title); }
}
/* Words in the middle, as on the homepage. */
.tv-hero__in, .tv-hero .tv-hero__copy { text-align: center; margin-left: auto; margin-right: auto; max-width: 820px; }
.tv-hero h1, .tv-hero p { margin-left: auto; margin-right: auto; }
main section[class^="tv-"] > .ap-wrap > h2, main section[class^="tv-"] h2.tv-h, .tv-why h2, .tv-faq h2, .tv-partners h2, .tv-promo h2, .tv-manage h2 { text-align: center; }
main section[class^="tv-"] > .ap-wrap > h2 + p, .tv-lead { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.tv-close { text-align: center; }
.tv-h2, .tv-row-head { text-align: center; }
.tv-row-head { flex-direction: column; align-items: center; gap: 6px; }
.tv-row-head .et-horizon::after, .tv-h2.et-horizon::after { margin-left: auto; margin-right: auto; }
/* Only the words take the narrow measure; the search card keeps the page width. */
.tv-hero__in, .tv-hero .tv-hero__copy { max-width: none; }
.tv-hero h1, .tv-hero p, .tv-hero__copy { max-width: 820px; margin-left: auto; margin-right: auto; }
.tv-hero .tsc { max-width: 1180px; }


/* THE PLANNER'S HERO (2026-10-20): a slow aurora of sand and a little gold
   behind the title and the form, so the page feels alive; still under
   reduced motion. */
.tv-hero {
    background:
        radial-gradient(60% 90% at 8% 0%, rgba(37, 99, 235, 0.26), rgba(37, 99, 235, 0) 60%),
        radial-gradient(50% 70% at 95% 10%, rgba(15, 26, 44, 0.12), rgba(15, 26, 44, 0) 60%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    background-size: 180% 180%, 180% 180%, 100% 100%;
    animation: tv-aurora 16s ease-in-out infinite alternate;
}
@keyframes tv-aurora { from { background-position: 0% 0%, 100% 0%, 0 0; } to { background-position: 100% 60%, 0% 80%, 0 0; } }
.tv-hero__title { max-width: none; font-size: var(--t-display); font-weight: 700; letter-spacing: -0.02em; }
.tv-hero__card { animation: tv-rise 620ms var(--ease) both; }
@keyframes tv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tv-hero, .tv-hero__card { animation: none; } }