/*
 * Mobile / responsive overrides.
 *
 * `style.css` is a frozen, pre-built Tailwind v3 output — there is no build
 * step to regenerate it, and it ships exactly one responsive utility
 * (`sm:grid-cols-4`), unused correctly anywhere. Every adaptive rule for the
 * whole site lives here instead, loaded after `style.css` in Layout.astro so
 * plain-class selectors of equal specificity (e.g. `.grid-cols-3` vs.
 * `.stat-grid`) resolve in this file's favour purely by source order — no
 * `!important` needed anywhere below.
 *
 * Breakpoints (kept to three, reused across every section rather than one
 * per component):
 *   - 1024px  desktop/tablet boundary. Every rule in this file sits under a
 *             `max-width` at or below this, which is also what keeps the
 *             ≥1280px desktop pixel-identical to before this pass — nothing
 *             here can ever match at 1280px+.
 *   - 640px   tablet/phone boundary. Portrait phones in the brief (320–430px)
 *             all fall under it; portrait tablets (768px+) sit over it.
 *   - 380px   a second, tighter step for the handful of rules that are still
 *             cramped at 360–390px after the 640px pass (old/small Android,
 *             iPhone SE).
 * Short-viewport landscape phones (844×390) are handled with a height query,
 * not a width one — `(max-height: 500px) and (orientation: landscape)` — it's
 * a "not enough vertical room" problem, not a narrow one.
 */

/* Fixed-to-the-edge elements (`.back-to-top` in MarkdownPost.astro,
   `.lang-toast` in LanguageToast.astro) apply safe-area to their own
   `bottom`/`right` offsets directly in their own files — a `bottom` value
   is what has to change to clear a home-indicator, and `env()` only helps
   there, not as generic padding here. */

/* ---------------------------------------------------------------------- *
 * Header / navigation
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-mobile-menu] { display: inline-flex; }
  [data-nav-links] { display: none; }
}

@media (min-width: 1025px) {
  [data-mobile-menu] { display: none; }
}

@media (max-width: 640px) {
  [data-site-header] { padding-left: 1rem; padding-right: 1rem; }
}

.mobile-menu-button {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  color: #374151;
  background: #fff;
}
.mobile-menu-button::-webkit-details-marker { display: none; }
.mobile-menu-button:hover { background: #f9fafb; }
[data-mobile-menu][open] .mobile-menu-button { background: #f3f4f6; border-color: #9ca3af; }
.mobile-menu-icon { width: 20px; height: 20px; }

[data-mobile-menu] { position: relative; }
[data-mobile-menu-panel] {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1200; /* above Leaflet's own controls/panes, same reasoning as .lang-switch-menu */
  min-width: 11rem;
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  box-shadow: 0 10px 26px -12px rgba(17, 24, 39, 0.35);
}
/* Nav links reuse Layout.astro's own `navClass()` output (border/bg/text
   utilities already in style.css) — only size and layout are overridden
   here, and the attribute+type selector below outranks the single-class
   `px-4`/`py-2` utilities on the same element without needing !important. */
[data-mobile-menu-panel] a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-site-footer] { padding-left: 1.25rem; padding-right: 1.25rem; }
  [data-site-footer] .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  [data-site-footer] { padding-left: 1rem; padding-right: 1rem; }
  [data-site-footer] .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  [data-site-footer] .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* Footer links are list items in a tight `space-y-2 text-sm` column —
   comfortably legible but well under a 44px tap target. Widen the hit area
   with an invisible `::before`, not `min-height`: `min-height` inflates the
   link's own box, which — since each link is a block-level `<li>` — pushes
   every row below it down too, turning the tight desktop list into a
   visibly sparse one on mobile. A `::before` sized to the tap target and
   centered over the row via `position: absolute` gets the same 44px hit
   area without adding a single pixel to the row's own layout height. */
@media (max-width: 1024px) {
  [data-site-footer] .footer-grid a,
  [data-site-footer] .footer-bottom-row a {
    position: relative;
    display: inline-block;
  }
  [data-site-footer] .footer-grid a::before,
  [data-site-footer] .footer-bottom-row a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ---------------------------------------------------------------------- *
 * Shared stat-grid hook
 *
 * `GuidesIndex`, `CitySpotsPage`, `TaitoPage` and `AboutPage` each hardcode
 * `grid grid-cols-3` for a row of small stat boxes; `SpotPage` hardcodes
 * `grid-cols-2` plus the dead `sm:grid-cols-4`. One class instead of five
 * copies of the same media query.
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* 3-stat rows: 3 columns is too tight once labels wrap in de/ru/th. */
  .stat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .stat-grid-3 { grid-template-columns: 1fr; }
  /* SpotPage's 4-stat row (hours/days/type/fee) was already always 2 columns
     — `sm:grid-cols-4` never existed in style.css, so it never fired at any
     width, including desktop. Keeping it at 2 columns everywhere except the
     very smallest phones (where it drops to 1) is a deliberate, working
     replacement for the dead class, not a partial fix: reinstating the
     original "4 columns from 640px up" intent would change the ≥1280px
     desktop render, which the brief requires to stay pixel-identical. */
  .stat-grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- *
 * Homepage / Taito "all spots" list
 *
 * Both pages hardcode `grid sm:grid-cols-2` — dead, so it has always
 * rendered as a single column, at every width including desktop. Turning it
 * into a real 2-column grid up to (but not including) the 1280px desktop
 * breakpoint gives tablets a working fix without touching the pixel-perfect
 * desktop baseline.
 * ---------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 1024px) {
  .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 480px, some locales' hours strings ("8:00–21:00 · Weekends and
   holidays...") don't fit next to the name even alone in a single column —
   the un-shrinkable, non-wrapping hours span was overflowing the viewport
   on its own at 320px. Stacking name-over-hours removes the side-by-side
   width competition entirely, instead of trying to chase every locale's
   string length with narrower and narrower font sizes. */
@media (max-width: 480px) {
  .spot-card-link { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .spot-hours { white-space: normal; }
}

/* ---------------------------------------------------------------------- *
 * Guides / cities card list -> square cards on mobile
 *
 * `GuidesIndex.astro` and `CitiesIndexPage.astro` share this markup: a
 * `.card-list` of `.card-list-item` rows (thumbnail + text side by side,
 * trailing chevron). Below 640px there isn't room for that row to breathe,
 * so it becomes a 2-column grid of stacked cards instead — thumbnail on
 * top, then title/description/tags underneath, which is already their
 * order in the markup, so flipping the item to a column is all that's
 * needed. The chevron only reads as "next" at the end of a horizontal row,
 * so it's dropped here.
 *
 * The thumbnail's pixel size is set inline on the element (see the
 * components' own comments on why — `style.css` is a frozen bundle missing
 * the `w-*`/`h-*` utilities it would otherwise use), so a plain class here
 * can't override it at equal specificity. It reads `var(--card-thumb-w/h/ar,
 * <default>)` instead, so redeclaring those custom properties on the class
 * changes what the inline `width`/`height`/`aspect-ratio` resolve to,
 * without `!important`.
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
  .card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .card-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.75rem;
  }
  .card-list-thumb {
    --card-thumb-w: 100%;
    --card-thumb-h: auto;
    --card-thumb-ar: 1 / 1;
  }
  .card-list-arrow {
    display: none;
  }
}

/* ---------------------------------------------------------------------- *
 * Touch targets — nav/footer covered above; this catches the rest.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .faq-question { min-height: 44px; }
  .sources-link { min-height: 44px; }
  .toc-table a { min-height: 44px; display: flex; align-items: center; }
}

/* ---------------------------------------------------------------------- *
 * Landscape phones (e.g. 844×390) — short viewport, not narrow.
 * ---------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
  [data-site-header] { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  [data-site-footer] { padding-top: 1.5rem; }
}