/* All media queries in one place */

/* ── Tablet and below (≤ 991px) — mobile nav ─────────────────────────────── */

@media (max-width: 991px) {
  .nav-toggle { display: block; }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--c-white);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    padding: 10px;
    margin-top: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    gap: 0;
  }

  .nav-menu.open { display: flex; }

  .nav-menu a {
    font-size: 1.1rem;
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #000;
  }

  .nav-menu a:hover { color: var(--c-navy); }

  .nav-menu li:last-child a { border-bottom: none; }

  .nav-menu a::after { left: 0; transform: none; }
  .nav-menu a:hover::after,
  .nav-menu a.active::after { width: 100%; }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Grid columns go full-width */
  .col-3, .col-4, .col-5 { flex: 0 0 100%; }

  /* Navbar */
  .navbar-brand img { height: 32px; }

  /* Hero — scales with viewport height but stays within sane bounds: never so
     short it looks collapsed, never so tall it buries the rest of the page on
     a tall phone. Slightly reduced for taller search card. */
  .hero {
    height: clamp(320px, 50vh, 420px);
  }



  .hero-copy { padding-bottom: 40px; }

  /* Search card overlaps less on a short hero, and fields stack full-width —
     side-by-side selects are too cramped once the card is this narrow. */
  .search-shell { margin-top: -40px; }

  .search-card { 
    flex-direction: column; 
    align-items: stretch; 
    padding: 16px; /* Reduced from sp-md (16px) or sp-lg (24px) for more room */
    gap: var(--sp-md);
  }

  /* Reset the desktop row's pixel flex-basis (480px / 160px) — once the
     container is column, those bases apply to height instead of width and
     leave each field padded with ~90px of dead space below it. */
  .search-fields { flex-direction: column; gap: var(--sp-md); flex: 1 1 auto; align-items: stretch; }
  .search-field  { flex: 1 1 auto; }

  /* Group From & To vertically, float Swap button on the right */
  .location-group {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: var(--sp-md);
  }

  .search-swap-container {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    margin: 0;
    z-index: 2;
    background: var(--c-white);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--c-white);
  }

  .btn-swap {
    transform: rotate(90deg); /* Make arrows point up/down on mobile */
  }
  .btn-swap:hover {
    transform: rotate(270deg);
  }

  .search-submit { width: 100%; }

  /* Route chips scroll rather than wrap — wrapping pushes the card taller
     and pushes the fold further down on a phone. Snap + a right-edge fade
     make the horizontal scroll discoverable and settle cleanly on a chip. */
  .quick-routes {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-routes::-webkit-scrollbar { display: none; }

  .quick-routes::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--c-bg));
    pointer-events: none;
  }

  .route-chip {
    white-space: nowrap;
    scroll-snap-align: start;
    padding: 10px 16px;
  }

  /* Explore cards become tappable list rows — icon left, title/desc stacked
     right, arrow always visible (no :hover affordance exists on touch). */
  .explore-grid { grid-template-columns: 1fr; gap: var(--sp-sm); }

  .explore-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--sp-md);
    align-items: center;
    padding: var(--sp-md);
  }
  .explore-icon  { grid-column: 1; grid-row: 1 / 3; }
  .explore-title { grid-column: 2; grid-row: 1; }
  .explore-desc  { grid-column: 2; grid-row: 2; }
  .explore-arrow {
    grid-column: 3; grid-row: 1 / 3;
    position: static;
    opacity: 1;
    transform: none;
  }

  /* Email / WhatsApp / Facebook — more gap so adjacent links aren't mis-tapped */
  .note-social { gap: var(--sp-lg); }

  /* Next-bus box */
  .next-bus-box    { padding: 16px 14px; border-radius: var(--r-md); }
  .next-header     { margin-bottom: 4px; }
  .next-label      { font-size: 11px !important; letter-spacing: 1px !important; }
  .next-bus-name   { font-size: 19px !important; margin-top: 6px; }
  .next-bus-number { font-size: 13px; margin-top: 2px; }
  .next-bus-type   { font-size: 11px; padding: 3px 10px; }
  .next-bus-time   { font-size: 18px !important; margin-top: 6px; }
  .next-countdown  { font-size: 13px !important; margin-top: 8px; }

  /* Schedule table — stay 4 columns wide, just compact */
  .schedule-table { border-radius: var(--r-sm); }
  .schedule-table th { padding: 10px 6px; font-size: 12px; white-space: nowrap; }
  .schedule-table td { padding: 8px 6px; font-size: 12px; }
  .bus-name   { font-size: 13px; }
  .bus-number { font-size: 11px; }
  .departure-time { font-size: 12px; white-space: nowrap; }
  .status-badge { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
  .type-badge { padding: 3px 8px; font-size: 11px; white-space: nowrap; }

  /* Availability cell — mobile: two-line colored text, no pill background */
  .avail-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: none;
    padding: 2px 0 2px 8px;
    border-radius: 0;
    border-left: 2px solid currentColor;
    max-width: none;
    white-space: normal;
  }
  .avail-content.avail-green     { background: none; }
  .avail-content.avail-orange    { background: none; color: var(--c-avail-mid-text-mobile); }
  .avail-content.avail-red       { background: none; }
  .avail-content.avail-departed  { background: none; }
  .avail-content.avail-scheduled { background: none; }

  .avail-text-group { flex-direction: column; gap: var(--sp-xs); }
  .avail-percent  { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .avail-status   { font-size: 11px; font-weight: 600; line-height: 1.2; }

  /* No middot needed once percent/label are stacked instead of inline — a small
     gap (--sp-xs) between the two lines takes its place. Selector mirrors the
     desktop one in components.css so the specificity matches and this wins. */
  .avail-content:not(.avail-departed):not(.avail-scheduled) .avail-status::before {
    content: none;
  }

  /* Availability Header Info */
  .route-header-row { gap: 8px; margin: 16px 0 8px; }
  .availability-info { padding: 4px 10px; font-size: 11px; }
  .availability-info svg { width: 12px; height: 12px; }

  /* Book Your Seat table — shrink the action button/links so the Departure
     and Online Booking columns don't overflow their compact mobile cells */
  .booking-action-btn { padding: 5px 8px; font-size: 11px; width: 100px; }
  .booking-action-btn--call { width: 70px; }
  .booking-action-btn--book { width: 85px; }
  .booking-action-btn svg { width: 12px; height: 12px; }
  .booking-action-btn--book svg { display: none; }
  .booking-schedule-link { font-size: 12px; }

  /* Results toolbar — stack pills above the Jump-to-Now button */
  .results-toolbar { flex-direction: column; align-items: stretch; }
  .type-filter-btn { padding: 5px 12px; font-size: 12px; }
  .jump-now-btn    { align-self: flex-start; padding: 5px 12px; font-size: 12px; }

  /* Footer */
  .site-footer     { padding: 40px 0 20px; text-align: center; }
  .footer-grid     { flex-direction: column; gap: var(--sp-lg); }
  .footer-brand    { flex: none; }
  .footer-links-col{ display: none; } /* hide quick links on mobile */
  .footer-partners { flex: none; }
  .partner-logos   { justify-content: center; }
  .site-footer h5::after { left: 50%; transform: translateX(-50%); }
  .footer-nav a:hover { transform: none; }
  .footer-bottom   { margin-top: var(--sp-md); padding-top: var(--sp-md); }

  /* Contact cards */
  .contact-card { max-width: 100%; }

  /* Toast */
  .custom-toast { min-width: unset; width: calc(100vw - 32px); }

  /* Static/results section spacing — desktop values (60–80px) leave huge dead
     zones stacked between adjacent sections on a small screen; scale down. */
  .static-section { padding: 32px 12px; }
  .about-section  { padding: 36px 12px; }
  #badullaSection, #colomboSection,
  #welimadaSection, #welimadaReturnSection { margin-top: 32px; margin-bottom: 32px; }

  /* About intro reads raggedly center-aligned once it wraps to several lines */
  .about-text { text-align: left; }

  /* Landing notes — single column */
  .notes-grid { grid-template-columns: 1fr; gap: var(--sp-md); }

  /* Notice popup — shrink so the bilingual message fits without overflowing */
  .notice-modal-title { font-size: 1.05rem; }
  .notice-modal-text   { font-size: 0.9rem; }
  .notice-modal .btn-search { padding: 8px 24px; font-size: 14px; }

  /* Ticket prices page header band */
  .page-hero { padding: var(--sp-xl) 0; }
  .page-hero-icon-wrap { width: 64px; height: 64px; margin-bottom: var(--sp-sm); }
  .page-hero-icon-wrap .page-hero-icon { width: 32px; height: 32px; }
  .page-hero-title { font-size: 1.5rem; }
  .page-hero-sub { font-size: 0.9rem; }

  /* Ticket-price selector */
  .fare-card { padding: var(--sp-md); }

  /* Service-type tabs — horizontal scroll so all three fit without wrapping */
  .fare-card .type-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fare-card .type-filter::-webkit-scrollbar { display: none; }
  .fare-card .type-filter-btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; }

  /* Stack From / Swap / To vertically on mobile */
  .fare-inputs-row { flex-direction: column; gap: var(--sp-md); }
  .fare-input-wrap { width: 100%; }
  .fare-swap-btn { align-self: center; }

  /* Suggestions dropdown — full width, larger tap targets */
  .fare-suggestion { padding: 11px 14px 11px 34px; font-size: 15px; }

  /* Search button — full width on mobile */
  .fare-search-btn { max-width: 100%; }

  /* Result card — Mobile adjustments (98% of users) */
  .fare-result-card {
    flex-direction: column;
    margin: var(--sp-sm) auto;
    max-width: 100%;
    border-radius: 16px;
  }
  .ticket-accent-bar {
    width: 100%;
    height: 48px;
    flex-direction: row;
    padding: 0 24px;
    justify-content: center;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid #1d4ed8;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .ticket-accent-text {
    writing-mode: horizontal-tb;
    transform: none;
    margin-top: 0;
    letter-spacing: 2px;
  }
  .ticket-main {
    padding: 24px 20px;
  }
  .fare-route-heading {
    font-size: 1.45rem;
  }
  .ticket-stops-grid {
    gap: 16px;
  }
  .ticket-meta-divider,
  .ticket-meta-row { display: none; }
  /* On mobile, the divider becomes horizontal with left/right notches */
  .ticket-divider {
    width: 100%;
    height: 2px;
    flex-direction: row;
  }
  .ticket-perforation {
    top: 0;
    left: 14px;
    right: 14px;
    bottom: auto;
    width: auto;
    height: 2px;
    border-left: none;
    border-top: 2px dashed #cbd5e1;
  }
  .ticket-notch {
    width: 14px;
    height: 28px;
    top: -13px;
  }
  .ticket-notch-top {
    left: 0;
    border-radius: 0 28px 28px 0;
    border-left: none;
    border-top: 1px solid var(--c-border);
  }
  .ticket-notch-bottom {
    right: 0;
    left: auto;
    border-radius: 28px 0 0 28px;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .ticket-stub {
    width: 100%;
    padding: 24px 20px;
  }

  /* Fare service-type guide - Mobile Optimized */
  .fare-guide-grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-md);
    padding: 0 16px;
  }
  .fare-guide-card {
    max-width: 100%;
    flex: 1 1 auto;
    padding: 20px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fare-guide-card .type-badge {
    margin-bottom: 8px;
    font-size: 0.95rem;
  }
  .fare-guide-card p {
    margin-top: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Fare cross-link CTA button — the long label overflows the viewport at
     the desktop padding/font, since an unconstrained inline-block button
     never wraps or shrinks on its own. */
  .fare-cta .btn-search {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 12px 20px;
    font-size: 15px;
    white-space: normal;
  }

  /* All Buses / bus profile pages */
  .bus-list-row {
    flex-wrap: wrap;
  }
  .bus-thumb {
    flex: 0 0 auto;
    width: 100%;
  }
  .bus-list-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .bus-list-chevron {
    display: none;
  }
  /* No hover on touch — swap the chevron for an explicit pill so it's
     clear the whole card is tappable, and flash the theme blue on press
     for tactile feedback. */
  .bus-tap-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--c-blue-soft);
    color: var(--c-blue);
    font-size: 12px;
    font-weight: 700;
  }
  .bus-tap-hint::after {
    content: '\2192';
  }
  .bus-list-row:active {
    background: var(--c-blue-soft);
    transform: scale(0.98);
  }
  .bus-card-grid {
    grid-template-columns: 1fr;
  }
  /* Spec table — label on its own line, value on the line below, so every
     value starts at the same left edge regardless of how long its label is
     (an inline label+value pair drifts out of alignment row to row). The
     value's padding-left matches icon width + label gap below, so it lines
     up directly under the label text rather than the icon. */
  .bus-spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
  }
  .bus-spec-label {
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    gap: 6px;
  }
  .bus-spec-icon {
    width: 20px;
    height: 20px;
  }
  .bus-spec-icon svg {
    width: 11px;
    height: 11px;
  }
  .bus-spec-value {
    font-size: 13px;
    padding-left: 26px; /* 20px icon + 6px label gap */
  }
  .bus-spec-value--highlight {
    font-size: 16px;
  }
  .bus-route-chain {
    font-size: 13px;
  }
  .bus-card p {
    font-size: 0.85rem;
  }
}

/* ── Smallest phones (≤ 360px) ───────────────────────────────────────────── */
/* Narrower than 400px on purpose — 375/390px covers most modern phones (iPhone
   SE/12/13/14, etc.) and should keep the more spacious ≤768px table values above.
   This tier is only for genuinely small/older screens. */

@media (max-width: 360px) {
  .schedule-table th,
  .schedule-table td { padding: 6px 4px; }
  .schedule-table th { font-size: 10px; }
  .bus-name { font-size: 11px; }
  .bus-number, .departure-time,
  .type-badge, .status-badge { font-size: 10px; }
  .type-badge, .status-badge { padding: 2px 6px; }
  
  .avail-percent { font-size: 12px; }
  .avail-status { font-size: 10px; }
  .availability-info span { display: none; } /* Hide text, just show icon on ultra small */
  .availability-info::after { content: 'Availability'; }

  /* Fare service-type guide - Ultra Small Mobile */
  .fare-guide-grid { gap: 12px; padding: 0 8px; }
  .fare-guide-card { padding: 16px 20px; }
  .fare-guide-card p { font-size: 0.88rem; }

  /* Hero — keeps the title to ~2 lines so the fold isn't all headline on the
     smallest phones (iPhone SE class and older/budget Android). */
  .hero-title { font-size: 1.7rem; line-height: 1.15; }

  .explore-card,
  .note-card { padding: var(--sp-md); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .explore-card,
  .explore-arrow,
  .route-chip,
  .btn-search,
  .fare-search-btn {
    transition: none;
  }
  .explore-card:hover { transform: none; }
  .btn-search:hover,
  .fare-search-btn:hover { transform: none; }
}