/* =========================================================
   Mobile fixes — last stylesheet on every page so it wins
   over magazin.css / styles.css / page-specific sheets.

   Two CSS systems coexist on the site:
     - magazin.css   uses .mag-* classes  (index, breathe, legal pages)
     - styles.css    uses generic classes (chat, topics, billing, etc.)
   Rules below are scoped per-system whenever it matters.
   ========================================================= */

/* ── 0a. Shell slot — reserves the header's height in static HTML
       so the page doesn't jump when js/magazin-shell.js swaps the
       placeholder for the real top bar. The replacement is
       1-for-1 (placeholder.replaceChild), so the slot's height
       must match the rendered .mag-topbar. ─────────────────── */
.mz-shell-slot {
  display: block;
  width: 100%;
  /* Desktop: single-row links bar, ~46-52px including padding */
  min-height: 50px;
}
@media (max-width: 760px) {
  .mz-shell-slot {
    /* Mobile: links wrap to 2 rows + social row → taller */
    min-height: 102px;
  }
}


/* ── 0. Foundations ───────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%; /* stop iOS auto-zooming text */
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

img, video, svg, picture {
  max-width: 100%;
  height: auto;
}

/* Stop overflow nightmares from one rogue element */
html, body { overflow-x: hidden; }


/* ── 1. magazin.css system — top bar & nav ───────────── */
@media (max-width: 760px) {
  .mag-topbar { padding: 6px 0 !important; font-size: 12px !important; letter-spacing: 0.5px !important; }
  .mag-topbar-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    max-width: 100% !important;
  }
  /* All 8 links visible at once — wrap to 2 rows, centered.
     Earlier version used horizontal scroll which users didn't
     discover. Wrap is unmistakable. */
  .mag-topbar-links {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .mag-topbar-links li { flex: 0 0 auto; white-space: nowrap; }
  .mag-topbar-links a { padding: 4px 2px !important; font-size: 12px !important; }

  .mag-topbar-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-bottom: 4px;
  }
  .mag-topbar-social { gap: 12px; font-size: 16px; }
  .mag-topbar-social a { padding: 4px; }
}


/* ── 1b. magazin.css — banner / Beta CTA stacks on mobile ─── */
@media (max-width: 760px) {
  /* The red Beta banner on the homepage was rendering its CTA
     ('Csatlakozz →' / 'Join →') half off-screen on phones because
     the .mag-banner-beta is flex-row and the CTA was flex-shrink:0.
     Stack the contents vertically and let the CTA span full width. */
  .mag-banner,
  .mag-banner-beta {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 18px 16px !important;
    gap: 12px !important;
    min-height: 0 !important;
  }
  .mag-banner-beta .mag-banner-title { font-size: 18px !important; }
  .mag-banner-beta .mag-banner-sub   { font-size: 13px !important; }
  .mag-banner-cta {
    margin: 0 !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    align-self: stretch;
  }
}


/* ── 1c. fade-in articles must be visible on mobile ──── */
/* Topics / breathe / chat etc. wrap their sections in
   <article class="fade-in">.  fade-in is opacity:0 until JS adds
   .visible via IntersectionObserver — but on small phones the
   observer often fires too late (or not at all when the user
   jumps via #breath anchor). Force visibility on mobile so the
   article is always readable, no matter what the observer does. */
@media (max-width: 760px) {
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ── 2. magazin.css system — content layout ──────────── */
@media (max-width: 760px) {
  /* Container side padding */
  .mag-page-inner,
  .mag-section-inner,
  .mag-hero-inner,
  .mag-spotlight-inner,
  .mag-newsbar-inner,
  .mag-about-inner,
  .mag-worldpromo-inner,
  .mag-footer-inner,
  .mag-promo-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero — stack thumbs cleanly, scale title down */
  .mag-hero {
    padding: 24px 0 28px !important;
  }
  .mag-hero-title {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  .mag-hero-sub {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .mag-hero-thumbs {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mag-hero-thumb {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  /* Spotlight grid → single column */
  .mag-spotlight-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .mag-spotlight-img { height: 180px; min-height: 0; }

  /* News list (right column) → flow under the spotlight, full width */
  .mag-magazine-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* Section titles a notch smaller */
  .mag-section-title { font-size: 22px !important; line-height: 1.2 !important; }
  .mag-section-eyebrow { font-size: 11px !important; }
}


/* ── 3. magazin.css system — footer ──────────────────── */
@media (max-width: 760px) {
  .mag-footer { padding: 28px 0 22px !important; }
  .mag-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: center;
  }
  .mag-footer-col { align-items: center; }
  .mag-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ── 4. styles.css system — generic content pages ────── */
@media (max-width: 760px) {
  body { font-size: 15px; }

  .container,
  .page,
  .inner-shell,
  .auth-shell,
  .signup-shell,
  .dashboard-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Generic header H1 */
  h1 { font-size: 26px !important; line-height: 1.2 !important; }
  h2 { font-size: 20px !important; line-height: 1.25 !important; }
  h3 { font-size: 17px !important; }

  /* Make sure form inputs don't trigger the iOS auto-zoom */
  input, textarea, select { font-size: 16px !important; }

  /* Tap targets — anything that looks like a button */
  button,
  .btn,
  .signup-btn,
  .magic-link-btn,
  .auth-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
}


/* ── 5. Topics & breathe page-specific ──────────────── */
@media (max-width: 760px) {
  /* Topics grid → single column on mobile */
  .topics-grid,
  .topic-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .topic-card { padding: 18px !important; }

  /* Breathe — circle + controls stack */
  .breathe-stage { padding: 16px !important; }
}


/* ── 6. Chat (AI Mentor) ─────────────────────────────── */
@media (max-width: 760px) {
  .chat-shell,
  .chat-wrap {
    height: 100dvh;       /* full viewport, accounts for browser UI */
    max-height: 100dvh;
    padding: 8px !important;
  }
  .chat-messages { padding: 8px 4px !important; }
  .chat-bubble { max-width: 92% !important; font-size: 15px !important; }
  .chat-input { font-size: 16px !important; }
}


/* ── 7. Tap-friendly defaults ─────────────────────────── */
@media (max-width: 760px) {
  a, button, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
  /* Cards / clickable rows: a hair more breathing room */
  .mag-newslist-item,
  .mag-spotlight-card {
    padding: 16px 14px !important;
  }
}


/* ── 8. Very small phones (iPhone SE etc) ─────────────── */
@media (max-width: 380px) {
  .mag-hero-title { font-size: 26px !important; }
  .mag-hero-sub   { font-size: 13px !important; }
  .mag-section-title { font-size: 20px !important; }
  h1 { font-size: 22px !important; }
}