/* Breakpoints: 1180 nav wraps · 1100 capsule drops "From" · 860 capsule wraps · 760 phone · 560 small phone. */

@media (max-width: 1180px) {
  .topnav-inner { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-3); }
  .topnav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; overflow-x: auto; scrollbar-width: none; }
  .topnav-links a { flex: none; }
}

@media (max-width: 1100px) {
  .sw-fields { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; }
  .sw-from { display: none; }
}

@media (max-width: 860px) {
  .hero { --capsule-half: 70px; }
  .sw-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sw-submit { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .hero { --capsule-half: 102px; }
  .topnav-links { justify-content: flex-start; margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); }
  .hero-kicker { padding: 8px 16px; border-radius: 18px; font-size: var(--fs-lg); }
  /* Portrait frame: keep the plane (right of centre in the photo) in view, and lift it clear of the headline. */
  .hero-photo { inset: -12% 0 auto; height: 112%; object-position: 70% 50%; }
  .sw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-field.sw-to { grid-column: 1 / -1; }
  .sw-submit { grid-column: auto; padding-inline: var(--space-5); }
  .sw-options { gap: var(--space-3) var(--space-6); padding: 0 var(--space-2); }
  .sw-note { margin-left: 0; }
  .ask-block,
  .ask-meta { justify-items: stretch; }
  .ask-engine { justify-self: center; }
  /* Full-bleed swipe row: stretched, then pulled out to the screen edges. */
  .ask-examples { flex-wrap: nowrap; justify-content: flex-start; min-width: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .ask-chip { flex: none; }
  .ask-submit { padding-inline: var(--space-5); }
  .hero-stats { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: var(--space-2) var(--space-6); }
  .hero-stats li + li::before { content: none; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body[data-view='search'] .sw-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    height: 56px;
    padding: 0 6px 0 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tile);
    box-shadow: var(--shadow-float);
    text-align: left;
  }
  .sw-summary-text { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  body[data-view='search'] .hero-search:not(.is-expanded) :is(.sw-fields, .sw-options, .ask-block) { display: none; }
  body[data-view='search'] .hero-search.is-expanded .sw-fields { margin-top: var(--space-3); }
}

@media (max-width: 560px) {
  .nav-status { display: none; }
}

/* Below 390px the token's 3.5rem floor would push the wordmark past the frame. */
@media (max-width: 389px) {
  .hero-wordmark { font-size: 14vw; }
}

/* ---------- Home ---------- */

@media (max-width: 1100px) {
  #popular-grid.is-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-tile,
  .months-tile { grid-column: span 6; }
  .how-tile { grid-column: 1 / -1; }
  .how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); }
}

@media (max-width: 980px) {
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  #popular-grid.is-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-tile,
  .months-tile { grid-column: 1 / -1; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
}

@media (max-width: 760px) {
  /* The bento becomes a swipe carousel with pagination dashes. */
  #popular-grid.is-bento {
    grid-template-columns: none;
    grid-template-rows: 420px;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #popular-grid.is-bento > * { grid-column: auto; grid-row: auto; scroll-snap-align: start; }
  #popular-grid .is-featured .dc-name { font-size: var(--fs-h2); }
  #popular-grid .is-featured .dc-body { padding: 20px 76px 20px 20px; }
  #popular-grid .is-featured .dc-stats { min-height: 30px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
  #popular-grid .is-featured .dc-stats > span + span { margin-left: var(--space-2); padding-left: var(--space-2); }
  #popular-dashes { display: flex; }
  .dest-grid { grid-template-columns: minmax(0, 1fr); }
  .how-list { grid-template-columns: minmax(0, 1fr); }
  /* The map keeps a readable size and scrolls sideways. */
  .map-canvas { min-width: 640px; }
  .faq-list summary { font-size: var(--fs-base); }
  .faq-list details p { padding-right: 0; }
}

/* ---------- Results ---------- */

@media (max-width: 1180px) {
  .leg { grid-template-columns: 10rem 4.5rem minmax(4rem, 1fr) 4.5rem; }
}

@media (max-width: 980px) {
  .results-head > *,
  .results-head > .rh-months { grid-column: 1 / -1; }
  .results-main { grid-column: 1 / -1; }
  .filters-toggle { display: inline-flex; }
  /* Filters become a bottom sheet opened from the "Filters" pill. */
  .results-layout > .filters {
    position: fixed;
    z-index: 85;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    padding-top: var(--space-8);
    border-radius: var(--r-tile) var(--r-tile) 0 0;
    box-shadow: var(--shadow-float);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform var(--t-base) var(--ease), visibility var(--t-base);
  }
  /* Visible at once when opening (so focus can move in); hidden only after the slide-out. */
  .results-layout > .filters.is-open { visibility: visible; transform: none; transition: transform var(--t-base) var(--ease); }
  .filters::before { content: ''; position: absolute; top: 10px; left: 50%; width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--ink-4); translate: -50% 0; }
  .filters-close { display: grid; }
  body.has-sheet { overflow: hidden; }
  .rc { grid-template-columns: minmax(0, 1fr); }
  .rc-side { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: center; padding: var(--space-4) 28px var(--space-5); border-left: 0; border-top: 1px solid var(--line); }
  .rc-side > * { grid-column: 1; }
  .rc-side .btn-select { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}

@media (max-width: 760px) {
  .results-page { padding-top: var(--space-4); }
  .rh-banner { min-height: 180px; }
  /* The Depart popover's "Whole month" tab covers this on phones, and the list comes first. */
  .results-head > .rh-months { display: none; }
  .rh-body { padding: 16px; }
  .rh-title { font-size: var(--fs-h2); }
  .rh-banner .rh-title { padding: 4px 14px 6px; border-radius: var(--r-inner); }
  .rh-facts { min-height: 30px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
  .rh-facts > span + span { margin-left: var(--space-2); padding-left: var(--space-2); }
  .rh-country { top: 14px; left: 14px; }
  .rh-months .months-chart { min-height: 150px; }
  .results-count { display: none; }
  .sort-tabs.segmented { flex: 1; }
  .strip-nav { display: none; }
  .strip { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .strip-day { min-width: 92px; }
  .rc-legs { padding: var(--space-5); }
  .rc-side { padding: var(--space-4) var(--space-5); }
  .leg { grid-template-columns: 4.5rem minmax(3rem, 1fr) 4.5rem; row-gap: var(--space-2); }
  .leg-airline { grid-column: 1 / -1; }
}

/* ---------- Popovers + details dialog ---------- */

@media (max-width: 980px) {
  .dlg-body { grid-template-columns: minmax(0, 1fr); }
  .dlg-side { position: static; order: -1; }
}

@media (max-width: 760px) {
  /* Popovers and the dialog become bottom sheets with a drag handle. */
  .sw-pop { position: fixed; z-index: 80; inset: auto 0 0 0; width: auto; max-height: 85vh; overflow-y: auto; padding-top: 10px; border-radius: var(--r-tile) var(--r-tile) 0 0; }
  .sw-pop::before { content: ''; display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: var(--r-pill); background: var(--ink-4); }
  .pc-months { grid-template-columns: minmax(0, 1fr); }
  .details { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-tile) var(--r-tile) 0 0; }
  .dlg-handle { display: block; width: 36px; height: 4px; margin: 10px auto 0; border-radius: var(--r-pill); background: var(--ink-4); }
  .dlg-head { padding: var(--space-3) var(--space-4); }
  .dlg-title { font-size: var(--fs-h2); }
  .dlg-body { padding: var(--space-1) var(--space-4) var(--space-6); }
  .dlg-photo { height: 200px; }
  .dlg-facts { min-height: 30px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
  .dlg-facts > span + span { margin-left: var(--space-2); padding-left: var(--space-2); }
  .it-leg,
  .info-card,
  .history-card { padding: var(--space-5); }
  .it-stop { grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-3); }
  .it-flight { padding-left: calc(3.75rem + var(--space-3)); }
}