/* Every breakpoint in the system, in one place: 1080 / 900 / 720.
   Load last so these override the component and page layers. */

@media (max-width: 1080px) {
.hero { min-height: 770px; }
  .search-form { grid-template-columns: 1.1fr 1.3fr .95fr .8fr; }
  .search-submit { grid-column: 1 / -1; margin: var(--space-2) 0 0; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .category-card:nth-child(1) { grid-row: span 1; }
  .category-card:nth-child(6) { grid-column: span 1; }
}

@media (max-width: 900px) {
.route-hero { min-height: 350px; padding: 35px; }
  .route-search-form { grid-template-columns: 1fr 1fr; }
  .route-search-form .dark-button { grid-column: 1 / -1; }
  .category-intro, .location-intro, .how-book, .location-service-grid, .editorial-content, .contact-layout, .faq-section, .transfer-intro { grid-template-columns: 1fr; gap: 30px; }
  .transfer-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .transfer-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .transfer-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transfer-search-form { grid-template-columns: 1fr 1fr; }
  .transfer-search-form .dark-button { grid-column: 1 / -1; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .article-page { grid-template-columns: 1fr; gap: 30px; }
  .article-aside { order: -1; }
  .portal-layout { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; }
  .portal-sidebar nav { display: flex; flex-wrap: wrap; }
  .portal-sidebar nav a { flex: 0 0 auto; }
}

@media (max-width: 720px) {
.nav-shell, .hero-shell, .trust-strip, .section, .concierge-banner, .footer-main, .footer-bottom { width: min(100% - 32px, 560px); }
  .hero { min-height: 780px; align-items: flex-start; }
  .hero-shell { margin-top: 140px; }
  .hero-copy { width: auto; margin-bottom: 27px; }
  h1 { font-size: 3.25rem; }
  .hero-lede { font-size: 14px; }
  .hero-proof { gap: 12px; margin-top: 19px; }
  .hero-proof strong { font-size: 10px; }
  .hero-proof small { font-size: 8px; }
  .hero-quicklinks { gap: 7px 12px; margin-top: 18px; }
  .hero-quicklinks a { font-size: 9px; }
  .search-card { padding: 0 var(--space-4) var(--space-4); }
  .search-card-intro { padding-top: var(--space-3); padding-bottom: 0; }
  .search-card-intro strong { font-size: var(--text-md); }
  .search-tabs { gap: var(--space-4); height: 46px; overflow-x: auto; scrollbar-width: none; }
  .search-tabs::-webkit-scrollbar { display: none; }
  .search-tab { flex: 0 0 auto; font-size: 10px; }
  /* Stacked rows, each a full-width target. The old layout squeezed 20px-tall
     controls into 75px boxes and pushed the card below the fold. */
  /* Stacked, still one connected card: rows divided by rules rather than floating
     as separate boxes. 68px leaves a comfortable target without a very tall card. */
  .search-form { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--space-3) 0; }
  .search-field, .search-field:first-child {
    min-height: 68px;
    padding: 9px var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .search-field:first-child { border-radius: 13px 13px 0 0; }
  .search-field:hover { background: transparent; }
  .search-field:focus-within { border-radius: 0; }
  .search-submit { display: flex; width: 100%; min-height: 54px; margin: 0; border-radius: 0 0 13px 13px; }
  .search-suggestions { flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .search-suggestions span { width: 100%; }
  .search-note { line-height: 1.35; }
  .guest-popover { top: auto; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); width: auto; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 22px 10px; padding: 25px 0; }
  .trust-rate { justify-content: flex-start; }
  .explore-section { padding: 70px 0 70px; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .section-heading.compact { flex-direction: row; align-items: end; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .category-card, .category-card:nth-child(1), .category-card:nth-child(6) { min-height: 158px; grid-column: span 1; }
  .category-card { padding: 15px; }
  .category-card h3 { font-size: 13px; }
  .category-card p { font-size: 9px; }
  .split-section { grid-template-columns: 1fr; gap: 10px; padding-bottom: 70px; }
  .editorial-card { min-height: 330px; padding: 35px 29px; }
  .concierge-banner { align-items: flex-start; flex-direction: column; margin-bottom: 76px; padding: 30px 25px; }
  .concierge-banner h2 { font-size: 2.2rem; }
  .concierge-banner .light-button { margin-top: 6px; }
  .steps-section { padding-bottom: 76px; }
  .steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .steps-grid article { padding-top: 24px; }
  .vendor-cta { align-items: flex-start; flex-direction: column; gap: 26px; padding: 60px 16px; }
  .vendor-cta h2 { font-size: 2.65rem; }
  .modal-padding { padding: 42px 24px 28px; }
  .modal h2 { font-size: 2.45rem; }
  .listing-detail-hero { height: 230px; }
  .detail-body { padding: 24px 20px; }
  .detail-columns { grid-template-columns: 1fr; gap: 22px; }
.page-container { width: calc(100% - 32px); }
  .breadcrumbs { padding-top: 18px; }
  .route-hero { min-height: 390px; padding: 27px 23px; border-radius: 11px; }
  .route-hero-copy, .transfer-intro-copy, .transfer-intro-panel { width: 100%; min-width: 0; }
  .route-hero-copy h1 { font-size: 3rem; }
  .route-hero-copy p:last-child { font-size: 12px; }
  .route-section { padding: 60px 0; }
  .route-section-heading { align-items: start; flex-direction: column; }
  .inventory-note { text-align: left; }
  .route-search-form, .location-search { display: grid; grid-template-columns: 1fr; }
  .route-search-form .dark-button, .location-search .dark-button { grid-column: auto; width: 100%; }
  .transfer-search-heading { align-items: start; flex-direction: column; }
  .transfer-search-form { grid-template-columns: 1fr; }
  .transfer-search-form .dark-button { grid-column: auto; width: 100%; }
  .transfer-benefits-grid, .transfer-package-grid { grid-template-columns: 1fr; }
  .transfer-trust-grid, .transfer-detail-grid { grid-template-columns: 1fr; }
  .transfer-section-lede { text-align: left; }
  .transfer-intro-panel { padding: 23px; }
  .route-listing-grid, .service-pill-grid, .related-grid, .nearby-grid, .three-up, .safety-list, .help-grid { grid-template-columns: 1fr; }
  .route-cta { align-items: start; flex-direction: column; margin-right: calc((100% - 100vw) / 2); margin-left: calc((100% - 100vw) / 2); padding: 40px 24px; }
  .route-cta h2 { font-size: 2.2rem; }
  .location-service-list { grid-template-columns: 1fr; }
  .listing-page-wrap { padding-top: 26px; }
  .listing-gallery { height: 250px; grid-template-columns: 1fr; }
  .listing-gallery > div { display: none; }
  .listing-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 32px; }
  .listing-copy h2 { font-size: 2.45rem; }
  .booking-panel { position: static; }
  .listing-title-row { display: block; }
  .listing-actions { margin: 10px 0 0; }
  .detail-list, .info-columns { grid-template-columns: 1fr; }
  .help-search { max-width: 100%; }
  .help-search button { padding-inline: 12px; }
  .contact-form { padding: 17px; }
  .footer-brand img { max-width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .portal-container { width: calc(100% - 32px); padding-top: 25px; }
  .portal-topbar { align-items: start; flex-direction: column; }
  .portal-topbar h1 { font-size: 2.5rem; }
  .portal-metrics { grid-template-columns: 1fr 1fr; }
  .portal-alert { flex-direction: column; }
  .demo-record-list a { align-items: start; flex-direction: column; gap: 8px; }
  .mobile-booking-bar { position: sticky; z-index: 8; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin: 0 -4px 22px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
  .mobile-booking-bar strong { color: var(--green-dark); font-size: 16px; }
  .mobile-booking-bar .dark-button { min-height: 40px; padding: 0 13px; }
}

@media (max-width: 240px) {
  .route-search-form .dark-button {
    gap: 8px;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
  }
}

/* Below 320px the display clamps stop helping: their *minimum* is 36px, and a long
   word like "unforgettable." is 261px at that size, so sections cannot shrink and
   the page overflows. Step the display sizes down and allow long words to break. */
@media (max-width: 320px) {
  /* The three-across step indicator is nowrap and cannot fit; stack it instead. */
  .booking-steps { grid-template-columns: 1fr; gap: 8px; }
  .booking-steps i { display: none; }

  h1, .route-hero-copy h1, .portal-topbar h1 { font-size: 1.95rem; }
  h2,
  .concierge-banner h2,
  .vendor-cta h2,
  .modal h2,
  .route-cta h2,
  .listing-copy h2 { font-size: 1.7rem; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .hero-copy, .section-heading, .vendor-cta, .concierge-banner { min-width: 0; }
}