/* ===========================================================================
   FLY-TLV HOMEPAGE — hero, filter toolbar, destination index
   ---------------------------------------------------------------------------
   Loaded by templates/index.html, after theme.css.

   Direction — "the index". The page is a reference list of every direct route
   out of Israel, so it is set like one: an editorial hero, a single quiet
   toolbar, then a dense grid of entries where the IATA code is the
   typographic anchor and every number is tabular, so distances and durations
   line up down the column the way a timetable does.

   Type: Space Grotesk (already loaded) carries the display voice — headline,
   city names, IATA codes, figures. Inter carries everything you read as
   interface. No third face.

   Colour: theme.css tokens only. The accent blue is spent on exactly three
   things — the active filter, the Details action, and focus. The airline
   type colours (low-cost / codeshare / legacy) are left alone: they are the
   one piece of information design unique to this site.
   =========================================================================== */

:root {
  --h-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --h-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --h-control: 38px;
}

/* --- page shell ------------------------------------------------------------
   The homepage was wrapped in a Bootstrap card, which put a boxed white band
   above the hero and framed the whole page in a border. The hero is the top
   of the page; it sits on the page ground. */
#destinations-section {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* a badge that said "no filters active" above the headline — the toolbar
   below already shows the filter state, and it read as a stray selection */
#active-filters {
  display: none;
}

#destinations-section > .card-header {
  background: transparent;
  border: 0;
  padding: 4px 4px 0;
}

/* the last-update badge starts where the headline starts — left in English,
   right in Hebrew. app.css centres it under 768px with a 50% width and auto
   margins, which left it floating in the middle of the page. */
#destinations-section > .card-header > .d-flex {
  justify-content: flex-start !important;
}

#destinations-section #export-buttons-desktop {
  margin-inline: 0 !important;
}

@media (max-width: 768px) {
  #destinations-section .last-update-badge {
    display: inline-flex !important;
    width: auto !important;
    margin-inline: 0 !important;
    text-align: start;
  }
}

/* Owner call (2026-09-01): no "Last update" chip on phones. This must carry
   the same #id + !important weight as the rule above, or that rule wins. */
@media (max-width: 576px) {
  #destinations-section .last-update-badge { display: none !important; }
}

/* --- hero ------------------------------------------------------------------
   Two lines of information: what this is, and how big it is. Nothing else. */
/* 42rem capped the headline at 664px when it needs 778px to sit on one line,
   so it broke in two on every desktop. The paragraph keeps its own, narrower
   measure below — a heading and body copy do not want the same line length. */
.home-hero {
  padding: 22px 4px 20px;
  max-width: 52rem;
  font-family: var(--h-ui);
}

.home-title {
  margin: 0 0 12px;
  font-family: var(--h-display);
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--t-ink);
}

.home-sub {
  margin: 0;
  /* Bootswatch Litera's serif was landing here and nowhere else */
  font-family: var(--h-ui);
  /* The sentence measures 762px, so 50rem (800px) fits it on one line — but
     only just, and only while the column is that wide. Under ~1100px viewport
     the column shrinks and it has to wrap; during FOUT the system-ui fallback
     is wider and it wraps too. Both cases used to orphan "air." on its own
     line. balance splits a forced wrap evenly instead, and does nothing at all
     when the sentence still fits. Don't tighten max-width back to the exact
     text width — that is what made this brittle. */
  max-width: 50rem;
  text-wrap: balance;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--t-ink2);
}

/* the count is a datum, not a badge — a hairline sets it apart from the prose */
.home-stat-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--t-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-stat {
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--t-ink3);
}

.home-stat strong {
  font-family: var(--h-display);
  color: var(--t-ink);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-inline-end: 4px;
}

/* --- filter toolbar --------------------------------------------------------
   Was four stacked strips built for a phone. On anything wider it is one
   row: search, the two chips, direction, airport, country, clear. Every
   control is the same height, hairline-bordered, on the card surface. */
.mobile-explore-portal {
  padding-top: 2px;
}

/* one white bar holding every filter, the way the board's original desktop
   bar did: label above value, hairline dividers, search and clear at the end */
.explore-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid var(--t-line);
  border-radius: 14px;
  background: var(--t-surface);
  box-shadow: var(--t-e1);
}

.explore-bar .mobile-filter-unit {
  flex: 1 1 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  /* fixed, so the bar does not resize when Select2 replaces the raw select */
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* theme.css strips borders off every filter container with !important, so
   the dividers have to say it louder */
.explore-bar .mobile-filter-unit + .mobile-filter-unit,
.explore-bar .mobile-search-wrapper {
  border-inline-start: 1px solid var(--t-line) !important;
}

.explore-bar .mobile-filter-unit > * {
  align-self: stretch;
}

.explore-bar .mobile-filter-unit:focus-within {
  background: var(--t-well);
  box-shadow: none;
}

.explore-bar .mobile-unit-label {
  margin: 0;
  font-family: var(--h-ui);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--t-ink3);
}

.explore-bar .mobile-unit-label i {
  color: var(--t-ink3) !important;
  font-size: .7rem;
}

.explore-bar .mobile-unit-select {
  font-family: var(--h-ui);
  font-size: .84rem;
  font-weight: 400;
  color: var(--t-ink);
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  /* long values shorten rather than clip mid-letter */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* country, city and airline hold the longest values, so they get the room */
.explore-bar .mobile-filter-unit:has(#mobile-country-filter),
.explore-bar .mobile-filter-unit:has(#mobile-city-filter),
.explore-bar .mobile-filter-unit:has(#mobile-airline-filter) {
  flex: 1.4 1 10rem;
}

.explore-bar .mobile-filter-unit-type {
  flex: 0 0 auto;
}

/* Select2 sits inside the unit as plain text, same as the site's other
   filter bars — the .mobile-unit-s2 skin in app.css does the borderless
   part; this only matches it to the type scale here. */
.explore-bar .mobile-unit-s2.select2-container--default .select2-selection--single .select2-selection__rendered {
  text-align: start !important;
  padding-inline: 0 18px !important;
  font-family: var(--h-ui);
  font-size: .84rem !important;
  font-weight: 400 !important;
  color: var(--t-ink) !important;
  line-height: 1.4 !important;
}

.explore-bar .select2-container {
  width: 100% !important;
  align-self: stretch;
  text-align: start;
}

.explore-bar .mobile-unit-s2.select2-container--default .select2-selection--single {
  display: block;
  text-align: start;
}

.explore-bar .mobile-unit-s2.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--t-ink3);
}

/* the type filter doubles as the legend for the dots inside every card */
.explore-bar .portal-type-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.portal-type-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-family: var(--h-ui);
  font-size: .72rem;
  font-weight: 400;
  color: var(--t-ink3);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.portal-type-dot:hover {
  background: var(--t-well);
}

.portal-type-dot.active {
  border-color: var(--t-accent-line);
  background: var(--t-accent-soft);
  color: var(--t-ink);
}

.portal-type-dot .lowcost-dot,
.portal-type-dot .codeshare-dot,
.portal-type-dot .legacy-dot {
  margin: 0;
  width: 9px;
  height: 9px;
}

.explore-bar .mobile-search-wrapper {
  flex: 1 1 12rem;
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline-start: 12px;
}

.explore-bar .mobile-search-wrapper i {
  position: static;
  transform: none;
  margin-inline-end: 8px;
}

.explore-bar .mobile-search-input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto;
  font-size: .86rem;
}

.portal-clear-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 34px;
  height: 34px;
  margin-inline-start: 4px;
  border: 1px solid var(--t-line);
  border-radius: 9px;
  background: var(--t-surface);
  color: var(--t-ink3);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.portal-clear-btn:hover {
  color: var(--t-bad);
  border-color: var(--t-bad);
  background: var(--t-bad-bg);
}


@media (min-width: 992px) {
  /* the scroll box was a phone affordance — the page scrolls here */
  .mobile-explore-portal .mobile-cards-scroll-container {
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-top: 0;
  }

  /* one line, packed from the left: each filter takes the room its value
     needs and no more, and the search takes whatever is left */
  .explore-bar {
    flex-wrap: nowrap;
  }

  .explore-bar .mobile-filter-unit,
  .explore-bar .mobile-filter-unit:has(#mobile-country-filter),
  .explore-bar .mobile-filter-unit:has(#mobile-city-filter),
  .explore-bar .mobile-filter-unit:has(#mobile-airline-filter) {
    flex: 0 1 8.5rem;
  }

  .explore-bar .mobile-search-wrapper {
    flex: 1 1 8rem;
    min-width: 0;
  }

  /* "All Countries" is 87px of text and was given 79px, so it rendered as
     "All Count..." on every desktop. Country alone gets 8px more basis; flex
     still shrinks it on narrow desktops, and the search box absorbs the rest.
     Measured: no overflow 992-1920px, phones unaffected (this is >=992px). */
  .explore-bar .mobile-filter-unit:has(#mobile-country-filter) {
    flex-basis: 9rem;
  }
}

/* On a phone the same six filters read as a two-column card: squeezing them
   into one row turned "Ben Gurion" into "B.". Search spans the full width
   underneath, with clear pinned to its end. */
@media (max-width: 991.98px) {
  .explore-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    padding: 4px;
  }

  .explore-bar .mobile-filter-unit {
    min-width: 0;
    border-inline-start: 0 !important;
  }

  .explore-bar .mobile-filter-unit:nth-of-type(even) {
    border-inline-start: 1px solid var(--t-line) !important;
  }

  .explore-bar .mobile-filter-unit:nth-of-type(n+3) {
    border-top: 1px solid var(--t-line);
  }

  .explore-bar .mobile-search-wrapper {
    grid-column: 1 / -1;
    border-inline-start: 0 !important;
    border-top: 1px solid var(--t-line);
    margin-top: 2px;
    padding: 8px 44px 4px 12px;
  }

  [dir="rtl"] .explore-bar .mobile-search-wrapper {
    padding: 8px 12px 4px 44px;
  }

  .portal-clear-btn {
    position: absolute;
    inset-inline-end: 8px;
    bottom: 8px;
  }
}

/* --- the index -------------------------------------------------------------
   Entries, not tiles. Every airline used to be its own bordered box, so a
   ten-carrier destination was a 400px wall of chrome. The carriers are a
   list — set them as one, clamped to two lines, with the low-cost /
   codeshare / legacy dot kept because that colour is real information.
   Nothing on this card is bold; hierarchy comes from size and ink.

   theme.css sets these same properties with !important, so the rules that
   have to beat it carry !important too. Everything else stays inherited. */
#mobile-cards-grid {
  --bs-gutter-y: .6rem;
}

/* every entry is the same size: one line of city, one of country, exactly
   two lines of carriers, one footer. The card no longer grows with its
   content, so the grid is a grid at any filter. */
.mobile-card-wrapper {
  display: flex;
}

.mobile-card-wrapper > .mobile-destination-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-explore-portal .mobile-card-footer {
  margin-top: auto;
}

.mobile-explore-portal .mobile-destination-card {
  padding: 12px 14px;
  margin-bottom: 0;
  border-radius: 12px !important;
  box-shadow: var(--t-e1) !important;
}

.mobile-explore-portal .mobile-card-header {
  margin-bottom: 8px;
  gap: 10px;
  align-items: flex-start;
}

.mobile-explore-portal .mobile-card-title {
  font-family: var(--h-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  /* one line, always — "Frankfurt am Main" must not make its card taller */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-explore-portal .mobile-card-subtitle {
  font-family: var(--h-ui);
  font-size: .75rem;
  font-weight: 400;
  color: var(--t-ink3) !important;
  margin-top: 1px;
}

/* the signature: aviation's own three letters, the entry's anchor */
.mobile-explore-portal .mobile-iata-badge {
  font-family: var(--h-display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .09em;
  padding: 3px 7px;
  border-radius: 5px;
  flex: 0 0 auto;
}

/* every carrier keeps its own chip. The block is exactly two rows tall on
   every card, whether the destination has one airline or ten — the template
   shows the first four and counts the rest into a +N chip. */
.mobile-explore-portal .mobile-card-airlines {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 5px;
  height: 51px;
  overflow: hidden;
  flex: 0 0 auto;
  margin-bottom: 10px;
}

.mobile-explore-portal .mobile-airline-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 7px;
  font-family: var(--h-ui);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-explore-portal .mobile-airline-tag img {
  height: 13px;
  width: auto;
}

/* the overflow count — quieter than a carrier, and it is not clickable */
.mobile-airline-more {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px dashed var(--t-line-strong);
  font-family: var(--h-ui);
  font-size: .72rem;
  line-height: 1.3;
  color: var(--t-ink3);
  white-space: nowrap;
}

.mobile-explore-portal .mobile-card-airlines .lowcost-dot,
.mobile-explore-portal .mobile-card-airlines .codeshare-dot,
.mobile-explore-portal .mobile-card-airlines .legacy-dot {
  width: 5px;
  height: 5px;
  margin-inline-end: 4px;
  vertical-align: middle;
}

/* metrics read as data, not as more chrome: no boxes, tabular figures */
.mobile-explore-portal .mobile-card-footer {
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 12px;
  padding-top: 9px;
  background: transparent !important;
}

.mobile-explore-portal .mobile-pill {
  background: none !important;
  border: 0 !important;
  padding: 0;
  font-family: var(--h-display);
  font-size: .75rem;
  font-weight: 400;
  color: var(--t-ink3) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mobile-explore-portal .mobile-pill i {
  color: var(--t-ink3);
  margin-inline-end: 3px;
}

.mobile-explore-portal .mobile-card-action {
  font-family: var(--h-ui);
  font-size: .74rem;
  font-weight: 500 !important;
  padding: 5px 10px;
  border-radius: 8px;
  border: 0;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* The deal button must be the same control as Details — identical metrics,
   only the amber fill differs. Keep these two rules in lockstep. */
.mobile-explore-portal .mobile-deal-btn {
  font-family: var(--h-ui);
  font-size: .74rem;
  font-weight: 500 !important;
  padding: 5px 10px;
  border-radius: 8px;
  border: 0;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* nothing on this page needs 700 — the markup's .fw-bold included */
.mobile-explore-portal .fw-bold,
.mobile-explore-portal .mobile-chip,
.mobile-explore-portal .dir-toggle-btn,
.mobile-explore-portal .mobile-unit-select,
#mobile-load-more-btn {
  font-weight: 500 !important;
}

/* hover lift, and only on devices that actually hover */
@media (hover: hover) {
  .mobile-destination-card {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .mobile-explore-portal .mobile-destination-card:hover {
    transform: translateY(-2px);
    border-color: var(--t-accent-line);
    box-shadow: var(--t-e2);
  }

  .mobile-explore-portal .mobile-destination-card:hover .mobile-card-action {
    background: var(--t-accent);
    box-shadow: none;
  }
}

.mobile-explore-portal .mobile-destination-card:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-destination-card { transition: none; }
  .mobile-destination-card:hover { transform: none; }
}

/* --- narrow screens --------------------------------------------------------
   The hero is the first thing on a phone, so it loses the padding that only
   makes sense under a desktop navbar, and the title tightens up. */
@media (max-width: 575.98px) {
  .home-hero {
    padding: 16px 2px 16px;
  }

  .home-title {
    letter-spacing: -.022em;
  }

  .mobile-explore-portal .mobile-filter-unit {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Legibility on phones. Measured at 390px, 103 of 276 visible text nodes sat
     under 12px and the smallest was 8.8px, which is below what iOS and Android
     both treat as a floor. Sizes below lift the card content and the filter
     labels while keeping the existing hierarchy (title still largest, labels
     still smallest). Phone widths only -- home.css is loaded by index.html
     alone, so nothing outside the homepage is touched. */
  .mobile-explore-portal .mobile-card-title {
    font-size: 1.25rem;         /* 20px, was 16px */
  }

  .mobile-explore-portal .mobile-card-subtitle,
  .mobile-explore-portal .mobile-pill {
    font-size: .95rem;          /* 15.2px, was 12px */
  }

  .mobile-explore-portal .mobile-iata-badge,
  .mobile-explore-portal .mobile-airline-tag,
  .mobile-airline-more {
    font-size: .875rem;         /* 14px, was 11px */
  }

  .mobile-explore-portal .mobile-card-action,
  .mobile-explore-portal .mobile-deal-btn {
    font-size: .95rem;          /* 15.2px tap targets, were 11px */
  }

  .explore-bar .mobile-unit-label,
  .explore-bar .unit-label {
    font-size: .75rem;          /* 12px, was 9px */
  }

  .home-stat {
    font-size: .95rem;          /* 15.2px, was 12px */
  }

  /* The delay and cancellation widgets are injected as Bootstrap utility
     classes, so they are floored by container rather than by class. */
  #delay-stats-container .text-muted,
  #delay-stats-container .badge,
  #cancellation-stats-container .text-muted,
  #cancellation-stats-container .badge {
    font-size: .7rem !important;   /* were 8.8px - 9.6px */
  }

  /* The sidebar promo badges carry an inline font-size, so lifting them off
     9.6px needs !important rather than a more specific selector. */
  .extra-small {
    font-size: .72rem !important;  /* was .6rem / 9.6px */
  }
}