/* ─────────────────────────────────────────────────────────────────
   css/wave7-mobile.css

   Wave 7 (2026-05-09) — mobile-responsive hardening + reduced-motion
   respect. Bundles 5 NN/g-flagged fixes from the 2026-05-08 audit:

     1. Tap-target 44px floor on every interactive control —
        WCAG 2.5.5 / Apple HIG. Many pills shrink to 12-14px tall
        on phone; users mis-tap adjacent controls.
     2. Image picker grid responsive columns — was a fixed 4-col
        grid on phone, thumbnails became un-scannable. Switches to
        auto-fill min(80px, 1fr).
     3. Smart Template cards stack icon-above-text on ≤480px so
        the blurb doesn't truncate mid-word.
     4. Home hero free-strip 2-column on phone instead of wrap,
        so the CTA stays above the fold.
     5. prefers-reduced-motion gate on transitions / transforms /
        animations site-wide. Critical for vestibular-disorder
        users who are also a key vulnerable-user persona.

   Loaded LAST in the cascade so these rules win over per-page CSS
   without each page having to re-author the override. Pure CSS,
   no JS, no functional impact if absent (graceful degrade).

   LABEL: PILOT-READY. Live test on iOS Safari + Android Chrome
   recommended before PRODUCTION-READY (mobile media queries can
   break on browsers that report wrong viewport widths in Firefox
   private windows / WebView shells).
───────────────────────────────────────────────────────────────── */

/* ── 1. Tap-target floor — WCAG 2.5.5 ───────────────────────── */
/* Apply to phone + tablet (≤1024px). Desktop pointer-fine input
   doesn't need 44px floors and forcing them on desktop bloats
   compact toolbars. The mobile-tokens.css var is the single
   source of truth — change it there to lift this. */
@media (max-width: 1024px) {
  /* Builder topbar pills (5 outline buttons + ghost + primary) */
  .topbar-btn {
    min-height: var(--tap-target-min, 44px);
    min-width: var(--tap-target-min, 44px);
  }
  /* Smart Template cards in the sidebar accordion */
  .smart-tpl-card {
    min-height: var(--tap-target-min, 44px);
  }
  /* Image picker thumbnails */
  .image-picker-item {
    min-height: var(--tap-target-min, 44px);
    min-width: var(--tap-target-min, 44px);
  }
  /* Saved Boards / Use Board switcher rows */
  .library-row,
  .use-board-row {
    min-height: var(--tap-target-min, 44px);
  }
  /* Use.html topbar back / mode / install / lang pill */
  .topbar-back,
  .topbar-mode,
  .topbar-install,
  .topbar-lang-btn {
    min-height: var(--tap-target-min, 44px);
  }
  /* Use.html language menu rows */
  .use-lang-item {
    min-height: var(--tap-target-min, 44px);
  }
  /* Smart Template modal Go / Cancel buttons */
  .smart-tpl-go,
  .smart-tpl-cancel {
    min-height: var(--tap-target-min, 44px);
  }
}

/* ── 2. Image picker grid — responsive columns ──────────────── */
/* Default (no media gate) — never hardcode the column count, let
   the grid pack thumbnails based on available width. Min 80px
   means a 360px viewport still gets ≥3 cols readable. */
.image-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  /* Smaller min-cell on the smallest viewports so we still get
     3 columns at 320px (oldest iPhone SE etc.). */
  .image-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
  }
}

/* ── 3. Smart Template cards — phone layout ─────────────────── */
@media (max-width: 480px) {
  .smart-tpl-card {
    /* Icon above text reads cleaner at narrow widths than
       icon-left + truncated blurb. Centered alignment matches
       the cards' visual weight. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.7rem 0.75rem;
  }
  .smart-tpl-card .smart-tpl-icon {
    font-size: 1.7rem;
  }
  .smart-tpl-card .smart-tpl-blurb {
    /* Slightly larger to compensate for less-scanned icon-row mode */
    font-size: 0.78rem;
    line-height: 1.35;
    /* Allow up to 2 lines instead of 1; was ellipsis-truncating
       past 1 line on phone before this fix. */
    white-space: normal;
  }
}

/* ── 4. Home hero free-strip — phone layout ─────────────────── */
@media (max-width: 480px) {
  .hero-free-strip {
    /* 2-column grid keeps the strip from sprawling 6 rows on a
       narrow viewport, which was pushing the primary CTA
       below-the-fold per the audit. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin: 1rem 0 0;
  }
  .hero-free-strip li {
    /* Tighter padding so 2 columns fit. The strip is supportive
       proof, not the primary action — visual weight should
       reflect that on phone. */
    padding: 0.3rem 0.55rem;
    font-size: 0.74rem;
    line-height: 1.3;
  }
}

/* ── 5. prefers-reduced-motion ──────────────────────────────── */
/* Strip transition/transform/animation effects when the user has
   set the OS-level reduced-motion preference. This is non-
   negotiable for vestibular-disorder users (they get nauseated
   by smooth scrolling / parallax / spring-bounce animations) and
   is a stated WCAG 2.3.3 success criterion at AAA.
   Targeted: keep animations the user EXPLICITLY requested
   (loading spinners that signal in-flight work) but kill the
   decorative ones (pill hover lifts, modal slide-ins, transform
   scale on hover, etc.). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Functional spinners — the user NEEDS to know something is
     loading. Override the duration override above to keep them
     animating. Selector list mirrors the spinner classes
     across surfaces (builder image-picker, smart-templates Go
     button, signup loading, etc.). */
  .spinner,
  .image-picker-loading .spinner,
  .smart-tpl-go[disabled]::after {
    animation-duration: 0.6s !important;
    animation-iteration-count: infinite !important;
  }
}