/*
 * mobile.css — Shared mobile responsiveness
 *
 * Add this link tag to each page that needs it, AFTER the closing </style>
 * tag, before </head>:
 *
 *   <link rel="stylesheet" href="/mobile.css">
 *
 * Pages to update:
 *   spot.html
 *   destinations/amalfi-coast.html
 *   destinations/bali.html
 *   destinations/costa-rica.html
 *   destinations/italy.html
 *   destinations/maldives.html
 *   destinations/new-york.html
 *   destinations/nicaragua.html
 *   destinations/portugal.html
 *   destinations/santorini.html
 *   destinations/south-of-france.html
 *   destinations/switzerland.html
 *   destinations/tulum.html
 *
 * Do NOT add to destinations/index.html.
 */

/* ─────────────────────────────────────
   Spots grid: 3 col → 2 col → 1 col
───────────────────────────────────── */
@media (max-width: 768px) {
  .spots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .spots-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────
   Filter topbar on mobile: pills wrap onto multiple rows so every pill
   stays reachable without horizontal scroll. Panels are fixed full-width
   below the bar, with internal scroll so tags never fall off-screen.
───────────────────────────────────── */
@media (max-width: 768px) {
  .results-topbar {
    padding: 12px 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    /* Remove backdrop-filter on mobile — WebKit traps position:fixed children
       inside backdrop-filter stacking contexts, breaking panel dropdowns on iOS */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(244,241,235,0.99);
  }

  .results-topbar-left {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
  }

  .results-filter-pill {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
  }

  .results-filter-pill > span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .results-clear {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Inline filter panels: full width on mobile, appear below sticky filter bar.
     max-height + overflow scroll so the panel never extends past the viewport
     and every tag stays reachable regardless of how many filters exist. */
  .results-inline-panel {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 160px;
    min-width: unset;
    width: auto;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 700;
  }
}

/* ─────────────────────────────────────
   Budget table: scale down at very small screens
───────────────────────────────────── */
@media (max-width: 480px) {
  .budget-row {
    font-size: 12px;
    padding: 12px 16px;
    gap: 8px;
  }

  .budget-dest-range-badge {
    font-size: 14px;
    padding: 6px 16px;
  }

  .dest-landing-budget {
    margin-top: 48px;
  }
}

/* ─────────────────────────────────────
   Ensure images never overflow their containers
───────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────
   Filter pill tap targets
───────────────────────────────────── */
@media (max-width: 768px) {
  .filter-tag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
  }
  .results-filter-pill,
  .results-clear {
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPOT DETAIL PAGE (spot.html)
   These rules apply when mobile.css is linked from spot.html
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Two-column body: sidebar flows full-width below content ── */
  .sdp-body {
    grid-template-columns: 1fr;
  }

  .sdp-sidebar {
    width: 100%;
  }

  /* Remove sticky from booking card — sidebar flows in the document */
  .sdp-concierge-card {
    position: relative;
    top: auto;
  }

  /* ── Gallery dots: expand tap target without changing appearance ── */
  .sdp-gallery-dot {
    width: 10px;
    height: 10px;
    padding: 10px;
    box-sizing: content-box;
  }

  /* ── CTA button: full width and minimum 52px height ── */
  .sdp-btn-primary {
    min-height: 52px;
  }

  /* Bottom sticky CTA bar: ensure it's visible on mobile ── */
  .sdp-bar-btn {
    min-height: 52px;
    padding: 14px 20px;
  }

  /* ── Back button and heart button: 44px minimum tap targets ── */
  .sdp-back {
    min-height: 44px;
  }

  .sdp-heart-btn {
    width: 44px;
    height: 44px;
  }

  /* ── Hero summary line: min 14px on dark background ── */
  .sdp-line-summary {
    font-size: 14px;
  }

  /* ── Getting There: stack transport-mode label above description ── */
  .sdp-access-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .sdp-access-row-tag {
    min-width: unset;
  }

  .sdp-access-row-dash {
    display: none;
  }

  /* ── Add-on rows: 44px minimum tap target ── */
  .sdp-tier-addon-row {
    min-height: 44px;
    padding: 10px 0;
    align-items: center;
  }

  .enq-addon-check {
    min-height: 44px;
    padding: 8px 0;
  }

  /* ── Key body text: 14px minimum on mobile ── */
  .sdp-incl-text,
  .sdp-access-row-desc,
  .sdp-access-row-full {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  /* ── Tier rows: stack left name/price panel above right items list ── */
  .sdp-tier-row {
    grid-template-columns: 1fr;
  }

  .sdp-tier-left {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }

  /* ── Enquiry modal: tighter padding ── */
  .enq-modal {
    padding: 28px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESTINATION LANDING PAGES
   These rules apply when mobile.css is linked from destination pages
   (destinations/bali.html, destinations/santorini.html, etc.)
═══════════════════════════════════════════════════════════ */

/* Prevent browser scroll-anchor adjustments when grid content changes on filter */
.dest-landing-spots-wrap {
  overflow-anchor: none;
}

@media (max-width: 768px) {
  /* ── Hero content: reduce padding to prevent text crowding image edges ── */
  .dest-landing-hero-content {
    padding: 60px 24px;
  }

  /* ── Body wrapper: 20px horizontal padding across full mobile range ── */
  .dest-landing-body {
    padding: 0 20px;
  }

  /* ── Budget section: reduce horizontal padding for mobile ── */
  .dest-landing-budget {
    padding: 0 20px 60px;
    margin-top: 48px;
  }

  /* ── Back button: ensure 44px minimum tap target ── */
  .story-back-btn {
    min-height: 44px;
  }

  /* ── Highlight body text: enforce 14px minimum ── */
  .dest-hl-body {
    font-size: 14px;
  }

  /* ── FAQ answers: enforce 14px minimum ── */
  .dest-faq-answer {
    font-size: 14px;
  }

  /* ── Expert take body: comfortable long-form reading size ── */
  .dest-expert-body {
    font-size: 15px;
    line-height: 1.9;
  }

  /* ── Spot card strip text: readable on two-column card grid ── */
  .spot-card-strip-text {
    font-size: 12px;
  }

  /* ── Destination sub text on hero: ensure min 14px ── */
  .dest-landing-sub {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  /* ── Hero: allow shorter min-height on very small screens ── */
  .dest-landing-hero {
    min-height: 50vh;
  }

  /* ── Hero content: tighter padding on smallest screens ── */
  .dest-landing-hero-content {
    padding: 48px 20px;
  }

  /* ── Body wrapper: tightest padding at narrow viewports ── */
  .dest-landing-body {
    padding: 0 16px;
  }

  /* ── Spot cards: unified card so strip feels attached to image ── */
  .spot-card {
    background: #FDFCFA;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(28,28,28,0.07);
    border: 1px solid rgba(26,22,18,0.1);
  }
  .spot-card-img { border-radius: 0; }
  .spot-card-body {
    background: #FDFCFA;
    padding: 0 12px;
    border-top: 1px solid rgba(26,22,18,0.08);
  }
}