/* Phone polish. Loaded after every other sheet (see index.html), so it only refines what they set up.
   Everything here is scoped to phone widths; desktop and tablet are untouched. */

/* taps: no grey flash on iOS/Android, and no double-tap zoom delay on controls */
@media (hover: none) {
  a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

@media (max-width: 760px) {

  /* ───────── rhythm: 180px between two sections is a lot of empty phone ───────── */
  .section { padding: 68px 0; }
  .stories { padding-bottom: 0; }

  /* ───────── nav: thumb-sized controls (were 38px) ───────── */
  .lang, .menu-btn { width: 42px; height: 42px; }
  .lang-hit { border-radius: 50%; }

  /* ───────── story cards: balanced headlines, no orphaned last words ───────── */
  .story h3 { text-wrap: balance; }
  .story p { text-wrap: pretty; }
  .section h2 { text-wrap: balance; }

  /* ───────── guide: the country chips scroll sideways, so give their shadow room instead of clipping it ───────── */
  .g-pick { scroll-padding: 0 24px; } /* the shadow room (padding) lives in guide.css so it can't be lost if this sheet isn't loaded */
  .g-pick .g-pill { height: 44px; }

  /* ───────── holidays: let the name wrap to two lines instead of "Coming of A…" ───────── */
  .h-list .tx b { white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .h-list .tx span { white-space: normal; }
  .h-list li { gap: 14px; }

  /* ───────── footer: brand on its own row, links in a tidy two-column grid ───────── */
  .foot-bottom { flex-direction: column; align-items: stretch; gap: 22px; padding: 28px 24px calc(30px + env(safe-area-inset-bottom)); }
  .foot-bottom nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-bottom: 1px solid var(--border); }
  .foot-bottom nav a { display: flex; align-items: center; min-height: 46px; border-top: 1px solid var(--border); font-size: 16px; }
  .foot-bottom nav a:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd link out takes the whole row */
  .foot-bottom > span { font-size: 13.5px; opacity: 0.75; }
}

/* ───────── short phones (iPhone SE, small Androids): the headline, copy and both buttons have to clear the globe ───────── */
@media (max-width: 760px) and (max-height: 780px) {
  .hero-copy { padding-top: 92px; }
  .hero h1 { margin-top: 18px; font-size: clamp(36px, 10.4vw, 42px); }
  .hero .lead { margin-top: 18px; font-size: 16px; line-height: 1.45; }
  .cta-row { margin-top: 22px; gap: 10px; }
  .cta-row .btn { height: 48px; }
}