/* Hotel and train Wi-Fi: the /hotel-wifi and /train-wifi hubs (components/travel/TravelHub.astro) and each chain's or
   operator's guide (components/travel/TravelGuide.astro), on top of marketing.css and in-flight-wifi.css, whose fl-*
   pieces they share. Hotels take a warm accent and a room-key card; trains a teal one and a ticket. */
.uc.tw-hotel { --uc: #f2c48d; --uc-soft: color-mix(in srgb, var(--uc) 16%, transparent); }
.uc.tw-train { --uc: #7fdcef; --uc-soft: color-mix(in srgb, var(--uc) 16%, transparent); }
.tw-page .fl-note a, .tw-page .fl-section-head p a, .tw-page .fl-panel p a, .tw-page .fl-missing a, .tw-page .tw-route a, .tw-page .uc-intro a { color: color-mix(in srgb, var(--uc) 70%, #fff); text-decoration-color: color-mix(in srgb, var(--uc) 40%, transparent); }
.tw-page code { color: color-mix(in srgb, var(--uc) 45%, #fff); }
.tw-muted { color: var(--text-3) !important; font-weight: 500 !important; }

/* Hero lines: hotel towers with lit windows, or two rails sweeping to the horizon */
.tw-hero-lines path { stroke-dasharray: none; stroke-opacity: .14; }
.tw-hotel .tw-hero-lines circle { fill-opacity: .55; }

/* The hero card: a room key or a ticket */
.tw-card { overflow: hidden; }
.tw-card-icon { display: inline-grid; color: var(--uc); }
.tw-card--hotel { background: linear-gradient(150deg, color-mix(in srgb, var(--uc) 14%, #1a1b22) 0%, #111218 55%, #0d0e13 100%); }
.tw-card--hotel::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--uc) 22%, transparent), transparent 70%); transform: translate(40%, -40%); pointer-events: none; }
.tw-card-chip { display: block; width: 40px; height: 30px; margin-top: 18px; border-radius: 7px; background: linear-gradient(135deg, #e9d3a7, #b9975b); box-shadow: inset 0 0 0 1px #0003; position: relative; }
.tw-card-chip::before, .tw-card-chip::after { content: ""; position: absolute; inset: 9px 0 auto; height: 1px; background: #0004; }
.tw-card-chip::after { inset: auto 0 9px; }
.tw-card--train { background: linear-gradient(170deg, #161b20f2, #0e0f15f2); }
.tw-card--train::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: repeating-linear-gradient(180deg, var(--uc) 0 10px, transparent 10px 18px); opacity: .5; }
.tw-card .fl-pass-network { gap: 4px; }
.tw-card .fl-pass-network code + code { font-size: clamp(16px, 1.6vw, 19px) !important; color: var(--text-2) !important; }
.site .tw-card-signin { margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text); }
.tw-card .fl-pass-cta { margin-top: 18px; }

/* Tiles: values can be phrases, so they're a little smaller than the airline prices */
.tw-glance .fl-tile-value { font-size: clamp(19px, 1.8vw, 23px); }

/* Panels */
.tw-wide { grid-column: 1 / -1; }
.tw-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.tw-rules--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-rules:not(.tw-rules--two):has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Coverage: stops on a line */
.tw-route { position: relative; display: grid; gap: 18px; margin: 32px 0 0; padding: 0 0 0 34px; list-style: none; max-width: 78ch; }
.tw-route::before { content: ""; position: absolute; inset: 10px auto 10px 9px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--uc), color-mix(in srgb, var(--uc) 20%, transparent)); }
.tw-route li { position: relative; }
.tw-stop { position: absolute; left: -31px; top: .45em; width: 15px; height: 15px; border-radius: 50%; background: var(--bg, #0a0b0f); border: 3px solid var(--uc); }
.site .tw-route p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.tw-route strong { color: var(--text); }

/* Tips */
.tw-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.site .tw-tips p { margin-top: 0; }

/* Hub */
.tw-hub .tw-dir-hero h1 { max-width: 14ch; }
.tw-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 10px 32px; margin: 26px 0 0; padding: 0; list-style: none; }
.tw-hero-stats li { display: grid; gap: 2px; }
.tw-hero-stats b { font: 650 clamp(28px, 3vw, 38px)/1 var(--mono); letter-spacing: -.04em; color: var(--uc); }
.tw-hero-stats span { font-size: 14px; color: var(--text-3); }
.flight-search.is-searching ~ .fl-logo-strip { display: none; }
.tw-group[hidden], .tw-hub-card[hidden] { display: none !important; }
.tw-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.tw-hub-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #ffffff07, #ffffff02); color: inherit; transition: border-color .15s, transform .15s; overflow-wrap: anywhere; }
.tw-hub-card:hover { border-color: color-mix(in srgb, var(--uc) 45%, transparent); transform: translateY(-2px); color: inherit !important; }
.tw-hub-card .fl-airline-card-head { display: flex; align-items: center; gap: 12px; }
.tw-hub-card .fl-airline-card-head > span { display: grid; gap: 2px; min-width: 0; }
.tw-hub-card strong { font-size: 18px; font-weight: 650; color: var(--text); }
.tw-hub-card small { font-size: 13px; color: var(--text-3); }
.tw-hub-net code { font-size: 13px; }
.tw-hub-net em { font-style: normal; font-size: 13px; color: var(--text-3); }
.tw-hub-card .flight-result-facts { margin: 0; }
.tw-hub-more { margin-top: auto; font-style: normal; font-size: 14px; color: var(--uc); }
@media (min-width: 641px) { .tw-table { min-width: 900px; } }
.tw-table td:nth-child(3) { font-family: inherit; font-size: 14px; white-space: normal; }
.tw-more { margin-top: 28px; }

@media (max-width: 1100px) {
  .tw-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tw-rules, .tw-rules--two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tw-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
  .tw-hero-stats span { font-size: 12px; }
  .tw-card-grid { grid-template-columns: minmax(0, 1fr); }
  .tw-route { padding-left: 28px; }
  .tw-stop { left: -25px; }
}
/* Several-word verdicts read better as a dot and coloured text than as a wrapping pill, as in the airline cards. */
.tw-hub-card .fl-chip, .fl-airline-card .fl-chip { align-items: flex-start; padding: 0; border: 0; border-radius: 0; background: none; line-height: 1.4; text-wrap: pretty; font-size: 14px; }
.tw-hub-card .fl-dot { margin-top: .45em; width: 7px; height: 7px; }