/* ============================================================
   mobile-home.css
   Plan A: lightweight card-list home for phones (≤768px).
   The full d3 interactive map is too cramped on small screens,
   so phones get a clean section-based browse instead.
   ============================================================ */

/* By default this view is hidden everywhere. JS un-hides it only when
   matchMedia("(max-width: 768px)") matches. We also use a CSS guard so the
   visual state matches even if JS is slow. */
.mobile-home { display: none; }

@media (max-width: 768px) {
  /* Show the mobile home and hide the desktop map UI on phones. */
  .mobile-home:not([hidden]) { display: block; }
  #map-container             { display: none !important; }
  /* Hide ONLY the map-coupled sections — keep the hero (logo + spinning
     vinyl + theme music + avatar) since users expect those to be the first
     thing they see on the homepage. The journey polaroid strip and
     timeline scrubber depend on the d3 map layers we skip on mobile, so
     they go. */
  #journey-strip,
  #timeline-bar,
  #site-footer .timeline-bar { display: none !important; }
  /* The big SVG map and route/mountain layers reside inside #map-container
     so they're already hidden — no need to disable their JS. We only skip
     their init in main.js to avoid the GeoJSON fetch + d3 render cost. */

  /* Compact the header CTAs on mobile — the desktop inline styles set a
     14px+ padding which pushes "What fans can do" to 3 lines on iPhone.
     !important overrides the inline styles in index.html. */
  .btn-fans-guide,
  .btn-vote {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    max-width: 96px !important;
    box-sizing: border-box !important;
  }
}

/* ─── Region / Country chip strip (drill-down level 0) ────── */
.mh-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.mh-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid rgba(28,28,28,0.14);
  color: #1c1c1c;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(13, 59, 101, 0.08);
  transition: background .12s ease, transform .1s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.mh-chip:active { transform: scale(0.96); }
.mh-chip:hover  { background: #FFF8E6; }
.mh-chip-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6a8b66;
  background: rgba(139, 232, 156, 0.28);
  padding: 1px 7px;
  border-radius: 999px;
}
.mh-chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Back-button + breadcrumb above the level-1/level-2 view */
.mh-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  font-size: 0.82rem;
  color: rgba(28,28,28,0.7);
}
.mh-crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 107, 53, 0.12);
  border: none;
  color: #FF6B35;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.mh-crumb-back:active { transform: scale(0.95); }
.mh-crumb-current {
  font-weight: 800;
  color: #1c1c1c;
}

/* ─── Section frame ────────────────────────────────────────── */
.mh-section {
  position: relative;
  padding: 24px 14px 28px;
  isolation: isolate;            /* contain ::before background */
}
.mh-section + .mh-section { border-top: 1px solid rgba(28,28,28,0.06); }

/* Faint map silhouette as background — only on Japan + World sections.
   Uses public-domain SVG silhouettes from data: URIs so no extra fetch. */
.mh-section.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 86% auto;
  opacity: 0.07;
  pointer-events: none;
  z-index: -1;
  filter: saturate(0);
}
.mh-section--japan::before {
  /* Real prefecture outlines (generated from data/geo/japan.topojson at
     build time → assets/japan-silhouette.svg). 90 sub-paths, ~58KB. */
  background-image: url("../assets/japan-silhouette.svg");
}
.mh-section--world::before {
  /* Real country outlines (generated from data/geo/countries-110m.json).
     260 sub-paths, ~110KB. */
  background-image: url("../assets/world-silhouette.svg");
}

/* ─── Section header ──────────────────────────────────────── */
.mh-h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--color-ink, #1c1c1c);
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mh-h2-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6a8b66;
  background: rgba(139, 232, 156, 0.22);
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.mh-section-sub {
  font-size: 0.82rem;
  color: rgba(28,28,28,0.62);
  margin: 0 0 14px;
  font-weight: 500;
}

/* ─── Card grid ───────────────────────────────────────────── */
.mh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mh-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(13, 59, 101, 0.10), 0 0 0 1px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  text-align: left;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  position: relative;
}
.mh-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(13, 59, 101, 0.20);
}
.mh-card:focus-visible {
  outline: 2px solid #FF6B35;
  outline-offset: 2px;
}

.mh-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #A7E8EA, #8BE89C); /* mint fallback */
  overflow: hidden;
}
.mh-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.mh-card:hover .mh-card-photo img { transform: scale(1.04); }

/* Photo-count badge for cluster pins (multi-photo places) */
.mh-card-count {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(28,28,28,0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  pointer-events: none;
}

.mh-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mh-card-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #1c1c1c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-card-meta {
  font-size: 0.7rem;
  color: rgba(28,28,28,0.55);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.mh-card-meta .pin {
  color: #FF6B35;
  margin-right: 3px;
}
.mh-card-desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(28,28,28,0.72);
  margin: 6px 0 0;
  font-weight: 500;
}

/* Video sections (cycling/mountain/silly/pilgrimage) get a single-column
   layout so the long-form description is readable. Photo grid (Japan/
   World drill-down) stays 2-col since cards there have no description. */
.mh-section--videos .mh-grid {
  grid-template-columns: 1fr;
}
.mh-section--videos .mh-card {
  flex-direction: row;
  align-items: stretch;
}
.mh-section--videos .mh-card-photo {
  flex: 0 0 38%;
  aspect-ratio: 4 / 3;
}
.mh-section--videos .mh-card-body {
  flex: 1;
  padding: 10px 12px;
}
.mh-card--video .mh-card-yt {
  background: rgba(255, 0, 0, 0.92) !important;
}

/* ─── Overseas videos: horizontal chip-strip ──────────────────────────
   The user asked for the world-trip videos to render as a single
   horizontal row of small text+▶ chips, not photo cards. Scrolls
   horizontally if it doesn't fit the screen width. */
.mh-overseas-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mh-overseas-row::-webkit-scrollbar { height: 6px; }
.mh-overseas-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }

.mh-overseas-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 7px 11px 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid rgba(28,28,28,0.14);
  color: #1c1c1c;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(13, 59, 101, 0.08);
  transition: background .12s ease, transform .1s ease;
}
.mh-overseas-chip:active { transform: scale(0.96); }
.mh-overseas-chip:hover  { background: #FFF8E6; }
.mh-overseas-label { line-height: 1.1; }
.mh-overseas-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF3B30, #CC0000);
  color: #fff;
  font-size: 0.6rem;
  flex: 0 0 auto;
}

/* ─── "More" load-more button ─────────────────────────────── */
.mh-more {
  display: block;
  margin: 14px auto 0;
  padding: 10px 22px;
  background: #fff;
  color: #1c1c1c;
  border: 1.5px solid rgba(28,28,28,0.18);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 59, 101, 0.08);
  transition: background .15s ease, transform .12s ease;
}
.mh-more:hover { background: #FFF8E6; }
.mh-more:active { transform: scale(0.97); }
.mh-more[hidden] { display: none; }

/* ─── Hero quick-actions strip (above first section) ──────── */
.mh-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 14px 4px;
}
.mh-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform .12s ease, filter .12s ease;
}
.mh-quick:active { transform: scale(0.96); }
.mh-quick--yt {
  background: linear-gradient(135deg, #FF0000, #CC0000);
  color: #fff;
}
.mh-quick--fans {
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
}

/* ─── PC-banner footer ────────────────────────────────────── */
.mh-pc-banner {
  margin: 18px 14px 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(167, 232, 234, 0.4), rgba(139, 232, 156, 0.4));
  border: 1px dashed rgba(13, 59, 101, 0.3);
  text-align: center;
  color: #0d3b65;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}
.mh-pc-banner strong { font-weight: 800; }

/* ─── Empty / coming-soon block (used by Silly section) ───── */
.mh-empty {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255, 248, 230, 0.6);
  border: 2px dashed rgba(255, 107, 53, 0.35);
  border-radius: 14px;
  color: rgba(28, 28, 28, 0.62);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}
.mh-empty .emoji { font-size: 1.8rem; display: block; margin-bottom: 6px; }