/*
 * Forkroads — mobile.css
 * Session 19: Mobile optimization pass
 * Responsive fixes only — no design/aesthetic changes.
 * Link this on ALL pages, just before </body>:
 *   <link rel="stylesheet" href="/css/mobile.css">
 *
 * Breakpoints used:
 *   ≤768px  — tablets and large phones
 *   ≤480px  — phones (primary mobile target)
 *   ≤375px  — small phones (iPhone SE, etc.)
 */


/* ============================================================
   1. GLOBAL — applies to every page
   ============================================================ */

/* Prevent iOS auto-zoom on input focus (requires font-size ≥ 16px) */
@media (max-width: 768px) {
  input,
  textarea,
  select,
  #urlInput,
  .auth-input,
  [type="text"],
  [type="email"],
  [type="password"],
  [type="url"],
  [type="search"] {
    font-size: 16px !important;
  }
}

/* Touch targets — every tappable element ≥ 44×44px */
@media (max-width: 768px) {
  button,
  [role="button"],
  .btn,
  .nav-link,
  .dropdown-item,
  .fr-nav-item,
  #extractBtn,
  .auth-btn,
  .card-bookmark,
  .close-btn,
  .modal-close,
  [class*="close"],
  [class*="-btn"],
  [class*="toggle"],
  .theme-toggle,
  .logout-btn,
  .tab-btn,
  .filter-pill,
  .cuisine-tile,
  .city-tile,
  .avatar-swatch,
  .check-in-btn,
  .remove-btn,
  .save-btn,
  .unsave-btn,
  .undo-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon-only buttons: ensure tap area without visual change */
  .card-bookmark,
  .theme-toggle,
  [class*="icon-btn"] {
    padding: 10px;
    box-sizing: border-box;
  }
}

/* Prevent horizontal overflow on all pages */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  /* Constrain any element that might overflow */
  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100%;
  }
}


/* ============================================================
   2. NAV + DROPDOWN
   ============================================================ */

/* Hide the text nav links on mobile — they overflow into the logo at 375px.
   `.nav-links` is the <ul> of text links on every page (logged-out `.nav-out`
   = "How it works"; logged-in `.nav-in` = Home/Saved/Map/etc.). The logo,
   the avatar/initials dropdown + Log in / Start free trial badges (in
   #navAuthArea), the theme toggle, and the bottom nav on /map are all
   siblings/separate, so they stay. Navigation on mobile = avatar dropdown
   (+ bottom nav on the map). */
@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Full-width dropdown on small screens */
  .nav-dropdown,
  .profile-dropdown,
  [class*="dropdown-menu"],
  [class*="nav-dropdown"] {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: var(--radius, 14px) !important;
  }

  /* Trial banner: wrap text instead of clipping */
  #trialBanner,
  .trial-banner {
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
  }
}


/* ============================================================
   3. INDEX.HTML — homepage (logged-out + logged-in)
   ============================================================ */

/* --- Extraction URL input area --- */
@media (max-width: 480px) {
  #inputWrap,
  .input-wrap,
  .extractor-wrap {
    flex-direction: column;
    gap: 10px;
  }

  #urlInput,
  .url-input {
    width: 100%;
    border-radius: var(--radius, 14px) !important;
  }

  #extractBtn,
  .extract-btn {
    width: 100%;
    border-radius: var(--radius, 14px) !important;
  }
}

/* --- Restaurant result cards — single column on mobile --- */
@media (max-width: 480px) {
  #restaurantGrid,
  .restaurant-grid,
  [class*="restaurant-grid"],
  [class*="results-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Make each card photo taller on single-column (more cinematic) */
  #restaurantGrid .card-photo,
  .restaurant-grid .card-photo,
  [class*="restaurant-grid"] .card-photo,
  .result-card .card-img,
  .result-card img {
    height: 220px !important;
    object-fit: cover;
  }
}

/* --- Logged-in homepage strips (for-you row, dream cities) ---
   Horizontal scroll with snap. Selector variations cover likely class names. */
@media (max-width: 768px) {
  .for-you-row,
  .foryou-row,
  #forYouRow,
  #forYouSection .cards-row,
  .home-row,
  .dream-cities-strip,
  .dreamcities-row,
  #dreamCitiesSection .cities-row,
  .passport-strip,
  [class*="foryou"] .scroll-row,
  [class*="dream-cities"] .scroll-row {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 16px;
    padding-bottom: 12px; /* space for scrollbar on some Android */
    /* Hide scrollbar visually (still scrollable) */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .for-you-row::-webkit-scrollbar,
  .dream-cities-strip::-webkit-scrollbar,
  [class*="foryou"] .scroll-row::-webkit-scrollbar,
  [class*="dream-cities"] .scroll-row::-webkit-scrollbar {
    display: none;
  }

  /* Cards inside horizontal strips: fixed width, snap point */
  .for-you-row > *,
  .foryou-row > *,
  .dream-cities-strip > *,
  .dreamcities-row > *,
  [class*="foryou"] .scroll-row > *,
  [class*="dream-cities"] .scroll-row > * {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }

  /* Stats strip: wrap to 2-col grid on tablet, 1-col on phone */
  .stats-strip,
  .momentum-strip,
  #statsStrip,
  [class*="stats-strip"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .stats-strip,
  .momentum-strip,
  #statsStrip,
  [class*="stats-strip"] {
    grid-template-columns: 1fr 1fr; /* keep 2-col on small phones — stats are short */
  }
}

/* --- Auth modal — full-screen on mobile --- */
@media (max-width: 480px) {
  #authModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal backdrop.
     Session 19 audit: REMOVED the `.modal-overlay` selector that was here.
     In this codebase #authModal / #restaurantModal ARE class="modal-overlay"
     (the overlay IS the modal wrapper, shown via `.modal-overlay.open`), so
     `display:none` would have hidden BOTH modals on mobile. There is no
     separate `.modal-backdrop` element — these selectors are inert/kept. */
  #authModal + .modal-backdrop,
  .auth-modal + .modal-backdrop {
    display: none !important;
  }
}

/* --- Restaurant detail modal — full-screen on mobile --- */
@media (max-width: 480px) {
  #restaurantModal,
  #detailModal,
  .restaurant-modal,
  .detail-modal,
  [class*="restaurant-modal"],
  [id*="restaurantModal"],
  [id*="detailModal"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Session 19 audit: REMOVED `display:flex; flex-direction:column` here.
       #restaurantModal IS class="modal-overlay" (display:none when closed,
       flex when .open). An id-level `display:flex` outranks
       `.modal-overlay{display:none}` and would force the modal permanently
       visible on mobile. Display is left to the existing .open class. */
  }

  /* Session 19 audit: REMOVED the `.modal-close { position:sticky }` and
     `.modal-photo` sub-rules that were here. index.html already ships a
     polished, verified bottom-sheet modal at <=640px; its `.modal-close` is
     an absolute floating circle (top/right:14px) over the photo. Forcing it
     to position:sticky pulled it into flow and regressed the working modal.
     The card keeps its existing responsive treatment. */
}

/* --- Onboarding overlay (cuisine picker, dream cities, avatar) ---
   Already full-screen by design, but ensure it's truly viewport-sized on mobile */
@media (max-width: 480px) {
  .onboarding-overlay,
  [class*="onboarding"],
  [id*="onboarding"] {
    padding: 16px !important;
  }

  /* Cuisine + city tiles: 3-col → 2-col on small phones */
  .cuisine-grid,
  .city-grid,
  [class*="cuisine-grid"],
  [class*="city-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* --- Loading / discovery section --- */
@media (max-width: 480px) {
  #discReveal,
  .disc-reveal,
  [class*="disc-reveal"] {
    padding: 16px;
  }

  /* Discovery counter: slightly smaller on very small screens */
  #discCount,
  .disc-count,
  [class*="disc-count"] {
    font-size: 44px !important;
  }

  /* Name pills: wrap instead of overflow */
  .pill-row,
  [class*="pill-row"],
  [class*="name-pills"] {
    flex-wrap: wrap;
    gap: 6px;
  }
}


/* ============================================================
   4. MAP.HTML — full-screen Leaflet + sidebar → bottom drawer
   ============================================================ */

/* --- Map: ensure it fills the screen behind the drawer --- */
@media (max-width: 768px) {
  /* The map container should be full viewport */
  #mapWrap #map,
  #mapWrap .leaflet-container,
  #mapWrap #mapContainer,
  #mapWrap .map-container {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh !important;
    width: 100vw !important;
    z-index: 1;
  }

  /* The layout wrapper: position context for the drawer */
  .map-layout,
  #mapLayout,
  [class*="map-layout"] {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
}

/* --- Sidebar → bottom drawer --- */
@media (max-width: 768px) {
  .fr-sidebar,
  .map-sidebar,
  #mapSidebar,
  [class*="map-sidebar"] {
    /* Detach from layout flow.
       Session 19: the real sidebar class on map.html is `.fr-sidebar`.
       map.html keeps its fixed bottom nav (~64px tall, z-index 1100). The
       drawer's collapsed peek floats ABOVE that nav, and the open drawer
       stops above it too (bottom offset = nav height), so they never overlap.
       --fr-navh = nav height incl. iOS safe-area inset. */
    --fr-navh: calc(64px + env(safe-area-inset-bottom, 0px));
    position: fixed !important;
    bottom: var(--fr-navh) !important;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(68vh - var(--fr-navh)) !important;
    max-height: calc(68vh - var(--fr-navh)) !important;
    z-index: 500;

    /* Collapsed: only the 52px handle peeks above the nav. 100% = drawer height */
    transform: translateY(calc(100% - 52px));
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);

    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;

    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Box shadow to lift it off the map visually */
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.6);
  }

  /* Open state — toggled by JS adding .drawer-open */
  .fr-sidebar.drawer-open,
  .map-sidebar.drawer-open,
  #mapSidebar.drawer-open {
    transform: translateY(0);
  }

  /* Drag handle pill — prepended by JS or ::before */
  .map-drawer-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .map-drawer-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
  }

  /* Peek label shown inside the handle bar */
  .map-drawer-peek-label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--text-dim, #9e8e72);
    margin-left: 12px;
    letter-spacing: 0.02em;
  }

  /* Sidebar content area: scrollable below the handle */
  .map-sidebar-content,
  .fr-sidebar > *:not(.map-drawer-handle),
  .map-sidebar > *:not(.map-drawer-handle) {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Backdrop overlay (shown when drawer is open).
     Session 19: stops at the nav height so the fixed bottom nav stays visible
     and tappable above the dim. */
  .map-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.45);
    z-index: 499;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .map-drawer-backdrop.active {
    display: block;
    opacity: 1;
  }
}

/* --- Map filter pills — horizontal scroll strip on mobile --- */
@media (max-width: 768px) {
  .map-filters,
  .filter-bar,
  #filterBar,
  [class*="filter-bar"],
  [class*="map-filter"] {
    position: fixed !important;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 100;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius, 14px);
    background: rgba(12, 11, 9, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .map-filters::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* --- Map stats overlay — move to top-left on mobile, above filter bar --- */
@media (max-width: 768px) {
  .map-stats-overlay,
  .stats-overlay,
  #mapStats,
  [class*="map-stats"] {
    position: fixed !important;
    top: 72px; /* below filter bar */
    left: 12px;
    right: auto;
    z-index: 100;
    max-width: calc(100vw - 24px);
    font-size: 12px;
  }
}


/* ============================================================
   5. TROPHIES.HTML — grid reflow
   ============================================================ */

/* Trophy grid: 3-col → 2-col → 1-col */
@media (max-width: 900px) {
  .trophy-grid,
  .tc-grid,
  [class*="trophy-grid"],
  [id*="trophyGrid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .trophy-grid,
  .tc-grid,
  [class*="trophy-grid"],
  [id*="trophyGrid"] {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Trophy tier section headers: tighten on mobile */
@media (max-width: 480px) {
  .trophy-tier-header,
  .tc-tier-heading,
  [class*="tier-header"],
  [class*="tier-heading"] {
    font-size: 18px !important;
    margin-bottom: 12px;
  }

  .trophy-tier-summary,
  .tier-summary-bar,
  [class*="tier-summary"] {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Trophy cards: full-width inner layout on single-column */
@media (max-width: 480px) {
  .trophy-card,
  .tc-card,
  [class*="trophy-card"] {
    padding: 16px !important;
  }

  .tc-name,
  .trophy-name,
  [class*="tc-name"] {
    font-size: 15px;
  }

  .tc-desc,
  .trophy-desc,
  [class*="tc-desc"] {
    font-size: 13px;
  }
}

/* Trophy toast: full-width on mobile.
   Session 19 audit: the real container is `#fr-trophy-toast-layer` (created by
   public/js/trophy-toast.js) — added below. It already has
   `max-width: calc(100vw - 40px)` so it does NOT actually clip at 375px, but
   spanning it full-width (left/right:12px) reads better on a phone. */
@media (max-width: 480px) {
  #fr-trophy-toast-layer,
  #trophyToastContainer,
  .trophy-toast-container,
  [id*="toastContainer"],
  [class*="toast-container"] {
    right: 12px !important;
    left: 12px !important;
    top: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .trophy-toast,
  [class*="trophy-toast"] {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ============================================================
   6. SAVED.HTML + VISITED.HTML + HISTORY.HTML
   ============================================================ */

/* Restaurant card grids: 2-col → 1-col on mobile */
@media (max-width: 640px) {
  .saved-grid,
  .visited-grid,
  .history-grid,
  [class*="saved-grid"],
  [class*="visited-grid"],
  [class*="recent-grid"],
  #savedGrid,
  #visitedGrid,
  #recentGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .saved-grid,
  .visited-grid,
  .history-grid,
  [class*="saved-grid"],
  [class*="visited-grid"],
  [class*="recent-grid"],
  #savedGrid,
  #visitedGrid,
  #recentGrid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Saved page city section headers: don't clip on narrow screens */
@media (max-width: 480px) {
  .city-section-header,
  .city-header,
  [class*="city-header"],
  [class*="city-section"] {
    flex-wrap: wrap;
    gap: 6px;
  }

  .city-header-name,
  [class*="city-name"] {
    font-size: 20px !important;
  }

  .city-spot-count,
  [class*="spot-count"] {
    font-size: 13px;
  }
}

/* Check-in button + remove button: comfortable tap targets */
@media (max-width: 768px) {
  .checkin-btn,
  .remove-saved-btn,
  .visited-badge,
  [class*="checkin"],
  [class*="remove-btn"] {
    min-height: 44px;
    padding: 0 16px;
  }
}

/* Visited page: date badges should be tappable */
@media (max-width: 768px) {
  .visited-date-badge,
  [class*="date-badge"] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
  }
}

/* History cards: tighten for mobile */
@media (max-width: 480px) {
  .recent-card,
  [class*="recent-card"] {
    padding: 12px;
  }
}


/* ============================================================
   7. PRICING.HTML — tier card stack
   ============================================================ */

@media (max-width: 768px) {
  .pricing-grid,
  .tier-grid,
  [class*="pricing-grid"],
  [class*="tier-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
}

@media (max-width: 540px) {
  .pricing-grid,
  .tier-grid,
  [class*="pricing-grid"],
  [class*="tier-grid"] {
    grid-template-columns: 1fr !important;
    max-width: 360px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .pricing-cta-btn,
  [class*="pricing-cta"],
  [class*="tier-cta"] {
    width: 100%;
    min-height: 52px;
  }

  .tier-card,
  [class*="tier-card"] {
    padding: 20px !important;
  }

  .tier-price,
  [class*="tier-price"] {
    font-size: 32px !important;
  }
}


/* ============================================================
   8. PRIVACY.HTML + TERMS.HTML — Termly embed fixes
   ============================================================ */

@media (max-width: 480px) {
  /* Termly widget container */
  [name="termly-embed"],
  .termly-embed,
  [data-id],
  #termly-code-snippet-support {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    padding: 0 !important;
  }

  /* Session 19 audit: REMOVED the blanket
     `.legal-page, [class*="legal/terms/privacy"] { padding:16px !important }`
     rule. privacy.html / terms.html are real, already-responsive pages whose
     wrappers (.legal-wrap / .legal-card / .legal-nav / .legal-footer) all
     match `[class*="legal"]` — the override clobbered their own ≤640px
     padding and made the cards cramped. They handle their own spacing. The
     Termly selectors above are kept (inert here, harmless if ever embedded). */
}


/* ============================================================
   9. LANDING PAGE (logged-out index.html) — Session 18 sections
   ============================================================ */

@media (max-width: 768px) {
  /* Pain-point cards: stack vertically */
  .pain-cards,
  [class*="pain-cards"],
  [class*="pain-point"] {
    flex-direction: column !important;
    gap: 16px;
  }

  /* Concierge split: photo | text → stack */
  .concierge-split,
  [class*="concierge-split"],
  [class*="concierge"] {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .concierge-photo,
  [class*="concierge-photo"] {
    border-radius: var(--radius, 14px);
    max-height: 280px;
    object-fit: cover;
  }

  /* 2×2 features grid → 2-col on tablet, 1-col on phone */
  .features-grid,
  [class*="features-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }

  /* Persona cards: 2-col on tablet */
  .persona-cards,
  [class*="persona-cards"],
  [class*="persona-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }

  /* Timeline: vertical on mobile (it's likely already a column) */
  .how-timeline,
  [class*="timeline"] {
    flex-direction: column !important;
    gap: 24px;
  }

  /* Connector lines between timeline steps: hide on mobile */
  .timeline-connector,
  [class*="timeline-connector"],
  [class*="step-connector"] {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Features grid → 1-col on phone */
  .features-grid,
  [class*="features-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Persona cards → 1-col on phone */
  .persona-cards,
  [class*="persona-cards"],
  [class*="persona-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Section padding: tighten on mobile */
  section,
  .section,
  [class*="-section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero heading: scale down */
  .hero-headline,
  .hero h1,
  [class*="hero-head"] {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.2;
  }

  /* CTA passport section: single column */
  .passport-cta,
  [class*="passport-cta"] {
    text-align: center;
    flex-direction: column !important;
    align-items: center;
  }
}