/* ════════════════════════════════════════════════════════════════════
   Mobile fixes — applied across home / gallery / blog / register.
   Driven by the Playwright audit at iPhone 14 viewport.
   Goals:
     1. All interactive elements ≥44px tall (a11y standard, easier tapping)
     2. No body-relevant text under 12px (10-11px feels broken on retina)
     3. Image weight already addressed by JPG→WEBP swaps
   Mobile-only via @media so desktop layouts are untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─── Tap targets ─────────────────────────────────────── */
  /* Back-home pill (gallery + blog use .back-home; register uses .register-back-home) */
  .back-home,
  .register-back-home {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    align-items: center !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
  }

  /* Sticky "⚽ Join Now" CTA on gallery / blog / home */
  a.sticky-join,
  .sticky-join {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    align-items: center !important;
    line-height: 1.2 !important;
  }

  /* Tab buttons — homepage FAQ uses .hfaq-tab, gallery FAQ uses .faq-tab */
  .hfaq-tab,
  .faq-tab,
  .blog-tab {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Subscribe button — homepage uses .footer-subscribe-btn, blog inline */
  .footer-subscribe-btn,
  button.footer-subscribe-btn,
  .subscribe-btn,
  button[type="submit"]:has-text("Subscribe") {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* Blog inline subscribe button — :has-text isn't broadly supported, also force on bare <button> in subscribe form */
  form.subscribe-form button,
  .subscribe-form button[type="submit"] {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* "Back to MYFC" footer link on gallery + blog */
  a.bottom-back,
  .bottom-back {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Auto-Fill dev button in register — bump but keep visually minimal */
  #devSkipBtn {
    min-height: 44px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  /* ─── Tiny text (10-11px → 12px) ─────────────────────── */
  /* Eyebrows, meta tags, breadcrumb labels — readable on retina */
  .breadcrumb,
  .breadcrumb span,
  .blog-meta,
  .blog-meta span,
  .post-meta,
  .post-meta span,
  .registration-eyebrow,
  .nav-mobile-cta-eyebrow,
  .sub-row .sub-item,
  .header-eyebrow,
  .footer-eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.06em;
  }

  /* "X photos" labels under each gallery folder */
  .folder-count,
  .folder-label .folder-count {
    font-size: 11px !important;
    letter-spacing: 0.08em;
  }

  /* Blog post-card meta row (category · date · readtime) */
  .post-card-meta,
  .post-card-meta span {
    font-size: 12px !important;
    letter-spacing: 0.06em;
  }

  /* Register page: top eyebrow + stepper meta labels */
  .msb-eyebrow,
  .stub-meta-label {
    font-size: 12px !important;
    letter-spacing: 0.08em;
  }

  /* "Tap to open" pills inside folder cards — already small but should be readable */
  .folder-hint {
    font-size: 10px !important;  /* keep punchy but tighten letter-spacing */
    letter-spacing: 0.14em;
    padding: 6px 11px;
  }

  /* "Sent via myfc-eight.vercel.app" type footnotes — explicitly DON'T bump
     these (they're meant to be quiet meta). Match by .footnote/.tiny if needed. */

}

/* ─── iPhone notch / safe area on bottom-pinned CTAs ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .sticky-join,
    a.sticky-join,
    .join-sticky {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}