/* =====================================================================
   Mobile foundation — Phase B (week 1-2)
   ---------------------------------------------------------------------
   Drie pijlers, geen ingrijpende layout-wijzigingen:
     1. Touch-targets ≥44×44px op alles wat klikbaar is (WCAG/iOS-spec)
     2. Sticky-bottom-bar component (zie template-parts/mobile-sticky-bar.php)
     3. Performance: lazy-load defaults + safe-area + smooth-scroll + tap-highlight

   Wordt LAATST geladen zodat overrides werken zonder !important te misbruiken.
   ===================================================================== */

/* Universele tap-feedback — vervangt browser-default grijze flash */
* { -webkit-tap-highlight-color: rgba(47, 107, 255, 0.18); }

/* iOS safe-area: respecteer notch + home-indicator */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* iOS zoom-bij-input fix: alle text-inputs minimum 16px font-size */
@media (max-width: 767px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="search"], input[type="password"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* =====================================================================
   1. TOUCH-TARGETS — minimum 44×44px op mobile
   ===================================================================== */
@media (max-width: 767px) {
  /* Primary buttons */
  .btn {
    padding: 11px 18px;
    font-size: 13px;
    min-height: 44px;
    border-radius: 8px;
  }
  .btn--sm {
    padding: 9px 14px;
    font-size: 12px;
    min-height: 40px;
  }
  .btn--lg {
    padding: 13px 24px;
    font-size: 15px;
    min-height: 48px;
  }

  /* Nav-links + dropdowns + footer-links */
  .nav__link,
  .nav__mobile-toggle,
  .nav__mobile-menu a,
  .footer-grid a,
  .filter-tabs a,
  .filter-pill,
  .lang-bar__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
  }
  .lang-bar__btn { padding: 11px 14px; font-size: 13px; }

  /* Pagination + sorting buttons */
  .pagination a, .pagination span,
  .sort-btn, .filter-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Card-links: hele kaart klikbaar maken op mobiel (extra surface) */
  .biz-card a, .story a, .event-card a {
    display: block;
  }

  /* Star-rating widget tappable */
  .stars { font-size: 18px; line-height: 1.4; }

  /* Accordion/details summaries */
  details > summary {
    padding: 14px 12px;
    min-height: 44px;
    cursor: pointer;
  }
}

/* =====================================================================
   2. STICKY-BOTTOM-BAR — primary actions altijd zichtbaar onderaan
   ---------------------------------------------------------------------
   Gebruik via <?php get_template_part('template-parts/mobile-sticky-bar'); ?>
   op single-business templates. Verbergt op desktop.
   ===================================================================== */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--border, #e5e5e5);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.mobile-sticky-bar__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.mobile-sticky-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 10px;
  background: var(--bg, #f5f5f5);
  color: var(--text, #1a1a1a);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transition: background 0.15s;
}
.mobile-sticky-bar__btn:active { background: var(--border, #e5e5e5); transform: scale(0.97); }
.mobile-sticky-bar__btn--primary {
  background: var(--accent, #2f6bff);
  color: #fff;
}
.mobile-sticky-bar__btn--primary:active { background: var(--accent-dark, #1f4cd8); }
.mobile-sticky-bar__icon { font-size: 18px; line-height: 1; }

@media (max-width: 767px) {
  .mobile-sticky-bar { display: block; }
  /* Reserveer ruimte zodat content niet onder de bar verdwijnt */
  body.has-mobile-sticky-bar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   3. PERFORMANCE — lazy-load defaults + aspect-ratio + content-visibility
   ===================================================================== */

/* Lazy-loaded images krijgen een aspect-ratio placeholder om CLS te voorkomen */
img[loading="lazy"] {
  background: linear-gradient(135deg, #f5f5f5 0%, #ececec 100%);
}

/* Off-screen content rendering uitstellen — saves ~30-50% rendering-cost
   op lange pagina's (bedrijven-archive, agenda, halte-list).
   Browsers met support (Chrome 85+, Edge, Safari 18+) renderen alleen near-viewport. */
.r010-vis-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Smooth scroll voor anchor-links (ToC, sectie-jumps) */
html { scroll-behavior: smooth; }

/* Wider scroll-padding op mobile zodat sticky-bottom-bar niet over content slaat */
@media (max-width: 767px) {
  html { scroll-padding-bottom: 80px; }
}

/* Beperk overflow-X netwerk-breed (vaak vergeten op mobile, geeft horizontale scroll-bug) */
body, html { overflow-x: hidden; max-width: 100vw; }

/* Card-images op mobiel: max 100% breedte + auto height, geen vaste pixels */
@media (max-width: 767px) {
  .biz-hero__img,
  .story__thumb--hero,
  .event-card__img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
  }
}

/* Hover-states op touch-devices uitschakelen (voorkomt sticky-hover na tap) */
@media (hover: none) {
  .btn:hover, a:hover { background-color: inherit; }
}


/* =====================================================================
   Phase B high-impact — pagina-specifieke mobile-overrides
   ---------------------------------------------------------------------
   Triggers via body-class (zie body_class-filter in functions.php):
     - body.r010-page-halte        → /halte/{slug}/ departure-board
     - body.r010-page-halte-index  → /halte/ list met "vind dichtbij"
     - body.r010-page-verkeer      → /verkeer/ files-board
     - body.r010-page-tourist      → /toerist/ swipe-cards
   ===================================================================== */

/* === HALTE: departure-board (single-transit-stop) =================== */
@media (max-width: 767px) {
  body.r010-page-halte main.site-wrap {
    padding: 16px 12px 80px !important;
  }
  /* Live-vertrektijden block → departure-board zwart-met-groene-cijfers */
  body.r010-page-halte table {
    font-size: 16px !important;          /* boost van 13px */
    font-variant-numeric: tabular-nums;
  }
  body.r010-page-halte table tr {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  body.r010-page-halte table td:first-child {
    font-size: 22px !important;          /* tijd-cijfers extra groot */
    font-weight: 700 !important;
    width: 56px !important;
    padding: 12px 4px !important;
  }
  body.r010-page-halte table td {
    padding: 12px 6px !important;
    vertical-align: middle;
  }
  /* Live-pulse-dot prominenter */
  body.r010-page-halte h3 span[style*="background:#22c55e"] {
    width: 12px !important;
    height: 12px !important;
  }
  /* H1 halte-naam — kleiner zodat tijden meer focus krijgen */
  body.r010-page-halte h1 {
    font-size: 22px !important;
    line-height: 1.25;
  }
  /* Verkeer-template main padding zelfde behandeling */
  body.r010-page-verkeer main.site-wrap { padding: 16px 12px 80px !important; }
}

/* === HALTE-INDEX: vind-dichtbij prompt ============================== */
.r010-nearest-halte-bar {
  display: none;
  position: sticky;
  top: 60px;
  z-index: 50;
  background: var(--accent, #2f6bff);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 14px rgba(47,107,255,0.3);
  cursor: pointer;
  border: 0;
  width: 100%;
}
.r010-nearest-halte-bar:active { background: var(--accent-dark, #1f4cd8); transform: scale(0.99); }
.r010-nearest-halte-bar[disabled] { opacity: 0.6; }
@media (max-width: 767px) {
  body.r010-page-halte-index .r010-nearest-halte-bar { display: block; }
}

/* === TOURIST: swipe-cards via CSS scroll-snap ======================= */
@media (max-width: 767px) {
  body.r010-page-tourist .tourist-grid__inner {
    /* van grid → horizontale scroll-snap-strip */
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 20px;
    gap: 12px;
    padding: 4px 4px 16px;
    margin: 0 -12px;
  }
  body.r010-page-tourist .tourist-card {
    flex: 0 0 80vw;                       /* peek next card */
    max-width: 340px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body.r010-page-tourist .tourist-card__img {
    height: 180px !important;
    object-fit: cover;
  }
  /* Scroll-progress hint onder de strip */
  body.r010-page-tourist .tourist-grid__inner::after {
    content: '';
    flex: 0 0 8px;
  }
  /* Categorie-tegels in hub → 2-kolom grid op mobile (was 4-kolom desktop) */
  body.r010-page-tourist .tourist-hero__cta {
    flex-direction: column;
    gap: 8px;
  }
  body.r010-page-tourist .tourist-btn {
    min-height: 48px;
    font-size: 15px;
  }
}

/* === BOTTOM-SHEET filter (tourist + halte index) ==================== */
.r010-bottom-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  max-height: 70vh;
  overflow-y: auto;
}
.r010-bottom-sheet[open], .r010-bottom-sheet.is-open {
  transform: translateY(0);
}
.r010-bottom-sheet::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--border, #e5e5e5);
  border-radius: 2px;
  margin: -4px auto 12px;
}
@media (min-width: 768px) { .r010-bottom-sheet { display: none; } }