/* ============================================================
   THEME 13 — hero-mobile.css
   Touch-native refinements for the homepage hero on phones/small tablets.
   Loaded AFTER polish.css (see layout.blade.php) so these rules win the
   cascade for the hero; nothing here touches >768px, so desktop is
   untouched. Additive only: the hero already stacks single-column at
   1024px (motion.css/common.css) — this file only tunes spacing and tap
   targets inside that existing stacked layout, plus a swipe-gesture hook
   consumed by script.js. Every colour is a --t13-* token, so it holds for
   every tenant palette (red/gold, navy/crimson, or a light accent).
   ============================================================ */

@media (max-width: 768px) {
  /* ---------- Tighter hero rhythm ----------
     Smaller portrait + smaller grid gap shortens the stacked column so the
     nav/dots sit closer to the fold instead of a full screen-height below it. */
  .t13-hero { padding-bottom: 1.5rem; }
  .t13-hero__grid { gap: 1.5rem; }
  .t13-hero__figure--solo { max-width: 320px; }
  .t13-hero__portrait { width: clamp(200px, 52vw, 320px); }
  .t13-hero__title { margin: .375rem 0 .75rem; }
  /* Long milestone titles must wrap, never push the viewport wider. */
  .t13-hero__title.t13-h1 { overflow-wrap: break-word; word-break: break-word; }
  /* motion.css reserves 7.5rem under the lead paragraph (anti-CLS across the
     6s milestone rotation — a shorter slide must not shrink the deck under
     the nav/dots). That reservation is sized for a worst-case long lead; on
     most milestones it leaves a big dead gap above the arrows. Trim it, but
     keep it ABOVE the desktop 6.25rem floor (mobile still wraps more per
     line than the two-column desktop text width), so short-vs-long slide
     swaps on this tenant's actual content still don't jump the nav/portrait. */
  .t13-hero__slide .t13-lead { min-height: 6.5rem; }

  /* ---------- Comfortable tap targets ----------
     Arrows: bump past the 44px baseline. Dots: keep the small pill/dot look
     (theme signature) but pad the actual hit area toward 44px via a
     transparent ::before, so nothing about the visible size changes. */
  .t13-hero__nav { gap: .875rem; margin-top: 1.5rem; }
  .t13-iconbtn { width: 48px; height: 48px; }
  .t13-hero__dots { gap: 12px; margin-inline-start: .375rem; }
  .t13-hero__dots span { position: relative; width: 8px; height: 8px; }
  .t13-hero__dots span::before {
    content: "";
    position: absolute;
    inset: -18px; /* 8px dot + 2×18px = 44px hit target */
  }
  .t13-hero__dots span.is-active { width: 26px; }
}

@media (max-width: 480px) {
  .t13-hero { padding-bottom: 1.125rem; }
  .t13-hero__grid { gap: 1.125rem; }
  .t13-hero__figure--solo { max-width: 250px; }
  .t13-hero__portrait { width: clamp(170px, 56vw, 250px); }

  /* t13-h1's clamp(2.25rem,5.2vw,3.75rem) already floors at 2.25rem (36px)
     on every phone width (5.2vw only clears that floor above ~690px), so it
     never grows unbounded here — this just trims the floor a little further
     on the narrowest phones (360px) for extra headroom against a long title,
     paired with the word-break guard above. */
  /* Max capped at 2.25rem (=the 481-692px base floor) so the title never grows
     as the screen narrows past 480px — removes a bump-then-drop right at the
     breakpoint edge; scales 36px→32px across 480→~427px, then flat 2rem. */
  .t13-hero__title.t13-h1 { font-size: clamp(2rem, 7.5vw, 2.25rem); }
  .t13-hero__slide .t13-hero__title { min-height: clamp(4rem, 17vw, 7.5rem); }

  .t13-hero__nav { margin-top: 1.125rem; }
}