/* LDCL — shared mobile overrides
 * Loaded by every mockup. Fills gaps in per-page <style> blocks so events
 * subpages + comics-en (which lacked the 2026-05-24 inline patch) render
 * cleanly on phones. Where a page already has stronger mobile styles, those
 * win — these are baseline guarantees.
 */

/* ---------- universal: prevent horizontal slop ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, iframe { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- topbar: 2-row layout on phones ---------- */
@media (max-width: 760px) {
  .topbar {
    /* breathing room above the brand row — respects iOS safe-area on notched phones */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  .topbar-inner {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "brand lang" "nav nav" !important;
    gap: 10px 12px !important;
    padding: 14px 16px 10px !important;
    align-items: center;
  }
  .brand { grid-area: brand; min-width: 0; gap: 10px; }
  .brand img { width: 38px !important; height: 38px !important; }
  .brand-words { font-size: 14px !important; line-height: 1.15; }
  .brand-words .sub { font-size: 9px !important; letter-spacing: 0.18em !important; }
  .lang-switch { grid-area: lang; align-self: center; }
  nav.primary {
    display: flex !important;
    grid-area: nav;
    gap: 20px !important;
    overflow-x: auto;
    padding: 6px 0 4px;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap !important;
  }
  nav.primary::-webkit-scrollbar { display: none; }
  nav.primary a {
    padding: 10px 0 !important;
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* lang switcher tap target */
  .lang-switch a, .lang-switch button, .lang-btn {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
  }
}

/* ---------- hero: tighter, cleaner, stronger contrast ---------- */
@media (max-width: 760px) {
  /* Push hero content below the 2-row topbar with extra breathing room — the
     eyebrow line was kissing the navbar at 120px. 156px gives it air. */
  .hero, section.hero, .hero-wrap {
    padding-top: 156px !important;
    padding-bottom: 36px !important;
    min-height: auto !important;
  }
  .hero .container, .hero-content .container {
    padding-top: 0;
  }

  /* Stronger overlay on mobile — body copy (paragraph + en-whisper) loses
     contrast on bright photo areas. A darker middle band keeps text legible
     without making the photo too gloomy. */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(26,18,8,0.78) 0%,
      rgba(26,18,8,0.55) 22%,
      rgba(26,18,8,0.50) 50%,
      rgba(26,18,8,0.85) 85%,
      rgba(26,18,8,0.98) 100%) !important;
  }

  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.22em;
    margin-bottom: 18px !important;
  }
  .hero h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
    word-break: keep-all;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  }

  /* The italic EN-whisper duplicates the VN headline. On mobile, the second
     read is dead weight — hide it in the hero only (keep elsewhere). */
  .hero .en-whisper,
  .hero-content .en-whisper { display: none !important; }

  .hero p, .hero-sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-top: 18px !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }

  /* Stack CTAs vertically — on a 390px viewport, two pill buttons side-by-side
     cramp the photo. Stacked, each gets full breathing room. */
  .hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-cta .btn.ghost {
    background: rgba(26,18,8,0.45) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: rgba(251,246,233,0.95) !important;
  }
}

/* ---------- countdown card — lighter on mobile ---------- */
@media (max-width: 760px) {
  .countdown-card {
    background: rgba(26,18,8,0.42) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12) !important;
    margin-top: 32px;
  }
  .countdown-card .cd-label {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }
  .countdown-card .cd-title {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  .countdown-card .cd-cell .n { font-size: 28px !important; }
  .countdown-card .cd-cell .u { font-size: 9px !important; letter-spacing: 0.2em !important; }
  .countdown-card .cd-meta { font-size: 12px !important; line-height: 1.4 !important; }
}

/* ---------- container gutters ---------- */
@media (max-width: 760px) {
  .container { padding: 0 18px !important; }
  section.std, section { padding-left: 0; padding-right: 0; }
}

/* ---------- generic tap targets ---------- */
@media (max-width: 760px) {
  .btn, button.btn, a.btn, .cta, a.cta {
    min-height: 44px;
    padding: 14px 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
  }
  .pill { font-size: 11px !important; padding: 8px 14px !important; }
}

/* ---------- issue/library cards ---------- */
@media (max-width: 760px) {
  .issues-stack { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  .issue-card { aspect-ratio: 4/5 !important; padding: 16px 12px !important; }
  .issue-card .num { font-size: 40px !important; }
  .issue-card .ttl { font-size: 14px !important; }
}
@media (max-width: 460px) {
  .issues-stack { grid-template-columns: 1fr 1fr !important; }
  .ph-stats { grid-template-columns: 1fr 1fr !important; }
  .lib-rail, .resources-rail {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ---------- library 3-col archive-rail collapse ---------- */
@media (max-width: 760px) {
  .resources-rail, .archive-rail, .lib-three-col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ---------- event subpages (no inline mobile mqs) ---------- */
@media (max-width: 760px) {
  .event-hero, .ev-hero {
    padding: 140px 18px 56px !important;
    min-height: auto !important;
  }
  .event-hero h1, .ev-hero h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.05;
    max-width: 100%;
  }
  .ev-meta, .event-meta {
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 13px;
  }
  .ev-grid, .event-grid, .two-col, .info-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .info-card, .ev-info-card { padding: 22px !important; }
}

/* ---------- comics page (sparser inline mobile styles) ---------- */
@media (max-width: 760px) {
  .comics-grid, .comic-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .comic-panel img, .comic-img img { width: 100% !important; height: auto !important; }
  .comic h2, .comics h2 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.05; }
}

/* ---------- footer ---------- */
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: left !important; }
  .footer-addr, .footer-brand-word { font-size: 14px !important; }
}

/* ---------- marquee edge bleed ---------- */
@media (max-width: 760px) {
  .marquee, .marquee-track { width: 100%; }
  .marquee { padding: 16px 0 !important; overflow: hidden; }
  .marquee-item { font-size: 18px !important; gap: 16px !important; }
}

/* ---------- forms (contact, registration) ---------- */
@media (max-width: 760px) {
  form input, form textarea, form select {
    font-size: 16px !important; /* iOS no-zoom */
    min-height: 44px;
    padding: 12px 14px !important;
    width: 100%;
    box-sizing: border-box;
  }
  form textarea { min-height: 120px; }
  form label { font-size: 13px; }
  .form-row, .form-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---------- anchor-target offset (sticky topbar) ---------- */
/* Without this, jumping to #contact-form (or any anchor) lands behind the
   fixed topbar. scroll-margin-top tells the browser to leave this many px
   of headroom when scrolling to the element. */
#contact-form, [id^="colau"], section[id] {
  scroll-margin-top: 80px;
}
@media (max-width: 760px) {
  #contact-form, [id^="colau"], section[id] {
    scroll-margin-top: 130px; /* 2-row topbar is taller on mobile */
  }
}

/* ---------- safe area for notched phones ---------- */
@media (max-width: 760px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  footer { padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
}