/* ================================================================
   mobile.css — Agenda Antártica
   Mobile-only responsive overrides.
   Desktop (≥768px) is never touched here.
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   0.  OVERFLOW GUARD — prevent horizontal blowout on all pages
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  main        { max-width: 100%;  overflow-x: hidden; }
}


/* ═══════════════════════════════════════════════════════════════
   1.  FOOTER — layout (shared across all pages)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 1a. Top strip: logo + newsletter → stack vertically */
  footer [style*="justify-content:space-between;gap:4rem"] {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2rem 1.5rem !important;
  }

  /* 1b. Newsletter column: full width */
  footer [style*="flex:1;max-width:420px"] {
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
  }

  /* 1c. Email + subscribe button → vertical stack */
  footer [style*="display:flex;gap:0"] {
    flex-direction: column !important;
  }
  footer [style*="display:flex;gap:0"] input[type="email"] {
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: none !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }
  footer [style*="display:flex;gap:0"] button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* 1d. Nav links grid: 3-col → 1-col */
  footer [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 2rem 1.5rem !important;
  }

  /* 1e. Legal / copyright bar */
  footer [style*="padding:1.5rem 4rem"] {
    padding: 1.25rem 1.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  footer [style*="padding:1.5rem 4rem"] > div[style*="display:flex;gap:2rem"] {
    flex-wrap: wrap !important;
    gap: 1rem 1.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   2.  GRID COLLAPSES — global catch-all for pages missing rules
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 4-col → 2-col  (journal facts band, partner grids, etc.) */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* 3-col → 1-col  (covers section, footer nav, covers grid) */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* 2-col equal → 1-col (only large-gap layouts; tight-gap photo/feature grids excluded) */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:6rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:5rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:4rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:3rem"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap:5rem"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap:4rem"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap:3rem"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:5rem"],
  [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:4rem"],
  [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:3rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Asymmetric 2-col layouts → always collapse to 1-col */
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1fr 400px"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* 4-col asymmetric */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Tablet: 3-col → 2-col */
@media (min-width: 768px) and (max-width: 1199px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   3.  SECTION PADDING — global catch for 4rem side padding
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  section[style*="padding:7rem 4rem"],
  section[style*="padding:6rem 4rem"],
  section[style*="padding:5.5rem 4rem"],
  section[style*="padding:5rem 4rem"],
  section[style*="padding:4.5rem 4rem"],
  section[style*="padding:4rem 4rem"] {
    padding-top:    3rem !important;
    padding-bottom: 3rem !important;
    padding-left:   1.5rem !important;
    padding-right:  1.5rem !important;
  }
  /* Inner content divs with large side padding */
  div[style*="padding:3rem 4rem"] {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4.  HERO TYPOGRAPHY — pages without an explicit font-size rule
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  h1[style*="font-size:6rem"] {
    font-size: 3rem !important;
    line-height: 1.05 !important;
  }
  h1[style*="font-size:5.5rem"],
  h1[style*="font-size:5rem"] {
    font-size: 2.75rem !important;
    line-height: 1.08 !important;
  }
  /* Hero inner padding where not covered per-page */
  [style*="padding:0 4rem 5.5rem"],
  [style*="padding:0 4rem 5.5rem 4rem"] {
    padding: 0 1.5rem 3rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   5.  FORMS — iOS zoom prevention + touch targets
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Prevent iOS from zooming in on focus (requires font-size >= 16px) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

  /* Contact form inputs: adequate touch target height */
  .contact-input {
    min-height: 48px !important;
    padding-top:    0.875rem !important;
    padding-bottom: 0.875rem !important;
  }
  textarea.contact-input {
    min-height: 128px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   6.  JOURNAL — facts band (4-col → 2-col) border clean-up
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Remove inline right-borders that become orphaned in 2-col layout */
  [style*="grid-template-columns:repeat(4,1fr)"] > div[style*="border-right"] {
    border-right: none !important;
  }
  /* Add row separator between first and second row */
  [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(1),
  [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  /* Tighten cell padding on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"] > div {
    padding: 1.5rem 1.25rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   7.  TOUCH TARGETS — minimum 44–48 px for interactive elements
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Primary / outline CTA buttons */
  a[style*="padding:1rem 2.25rem"],
  a[style*="padding:0.875rem 2rem"],
  a[style*="padding:1rem 1.75rem"] {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Compact buttons (social, small) */
  button[style*="padding:0.4rem"],
  a[style*="padding:0.4rem"] {
    min-height: 36px !important;
    min-width: 36px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   8.  IMAGES — prevent blowout; safe object-position fallback
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  img {
    max-width: 100% !important;
    height: auto;
  }

  /* Footer logo: 3x enlargement with responsive cap on narrow screens */
  footer img[alt="Agenda Antártica"] {
    height: 110px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   9.  FLEX ROW → COLUMN helpers
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Flex rows with large gaps that need vertical stacking */
  [style*="display:flex;align-items:flex-start;gap:5rem"],
  [style*="display:flex;align-items:flex-start;gap:6rem"],
  [style*="display:flex;align-items:center;gap:5rem"] {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  /* Flex rows with large side padding */
  [style*="padding:4rem 4rem"],
  [style*="padding:4.5rem 4rem"] {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. PEACEBOOK READER — additional mobile polish
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #reader-bar {
    gap: 0.4rem !important;
    padding: 0 0.75rem !important;
  }
  /* Hide verbose labels in reader bar on very small screens */
  .hide-xs { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   11. TABLET (768–1199 px) — sidebar-aware refinements
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Reduce 4rem side-padding on mid-size screens */
  section[style*="padding:7rem 4rem"],
  section[style*="padding:6rem 4rem"],
  section[style*="padding:5rem 4rem"] {
    padding-left:  2.5rem !important;
    padding-right: 2.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   12. MOBILE DRAWER — dark theme for readability
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Dark background */
  #sb-drawer {
    background: #06101c !important;
  }

  /* Close button X icon */
  #sb-drawer > div:first-child button svg line {
    stroke: rgba(245,250,255,0.65) !important;
  }

  /* Logo — normal blend so cream background is visible on dark */
  #sb-drawer img[alt="Agenda Antártica"] {
    mix-blend-mode: normal !important;
  }

  /* Tagline */
  #sb-drawer p[data-i18n="tagline"] {
    color: rgba(245,250,255,0.38) !important;
  }

  /* Logo section bottom border */
  #sb-drawer [style*="border-bottom:1px solid rgba(11,42,68,0.1)"] {
    border-bottom-color: rgba(255,255,255,0.08) !important;
  }

  /* Language switcher border */
  #sb-drawer [style*="border:1px solid rgba(11,42,68,0.14)"] {
    border-color: rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.06) !important;
  }

  /* Language buttons */
  #sb-drawer [data-lang-btn] {
    color: rgba(245,250,255,0.62) !important;
  }
  #sb-drawer [data-lang-btn][style*="border-right"] {
    border-right-color: rgba(255,255,255,0.1) !important;
  }

  /* Globe icon in lang switcher */
  #sb-drawer svg[stroke="rgba(11,42,68,0.35)"] {
    stroke: rgba(245,250,255,0.3) !important;
  }

  /* Top-level nav links (inactive) */
  #sb-drawer .nav-link:not(.nav-active) {
    color: rgba(245,250,255,0.82) !important;
  }
  #sb-drawer .nav-link:hover:not(.nav-active) {
    background: rgba(79,163,255,0.1) !important;
  }

  /* Section group separators */
  #sb-drawer li[style*="border-top:1px solid rgba(11,42,68,0.08)"] {
    border-top-color: rgba(255,255,255,0.08) !important;
  }

  /* Section header labels: OUR WORK, PUBLICATIONS, CONNECT, PROGRAMS */
  #sb-drawer a[style*="rgba(11,42,68,0.35)"] {
    color: rgba(245,250,255,0.3) !important;
  }

  /* Sub-nav links (inactive) — the primary fix */
  #sb-drawer .nav-sub:not(.nav-active) {
    color: rgba(245,250,255,0.72) !important;
    border-left-color: rgba(255,255,255,0.12) !important;
  }
  #sb-drawer .nav-sub:hover {
    color: #F5FAFF !important;
    border-left-color: #4FA3FF !important;
    background: rgba(79,163,255,0.1) !important;
  }

  /* Donate button */
  #sb-drawer .donate-btn {
    background: rgba(79,163,255,0.9) !important;
    color: #0B2A44 !important;
  }
  #sb-drawer .donate-btn:hover {
    background: #4FA3FF !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   14. HEADING WORD-BREAK — prevent translated text from overflowing
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  main h1, main h2, main h3 {
    overflow-wrap: break-word;
    word-break:    break-word;
  }
}


/* ═══════════════════════════════════════════════════════════════
   15. PEACEBOOK §3 — stats grid scaling (2-col stays, cells shrink)
   ═══════════════════════════════════════════════════════════════ */
/* Problem: .why-grid keeps grid-template-columns:1fr 1fr on mobile,
   but each cell's padding:2.5rem 2rem leaves only ~98 px of content
   width — too narrow for the 2.75rem (≈44 px) stat numbers like "1959".
   Fix: tighten cell padding and scale down the numbers.               */
@media (max-width: 767px) {
  .why-grid > div {
    padding: 1.5rem 1.25rem !important;
  }
  .why-grid p[style*="font-size:2.75rem"] {
    font-size:   2rem !important;
    line-height: 1.1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   16. "FOLLOW AGENDA ANTÁRTICA" CARD — icon-row containment
   ═══════════════════════════════════════════════════════════════ */
/* Problem: the social card has padding:3rem (48 px each side).
   On 320 px phones the card content area is only 176 px, but the
   4-icon row (FB+IG+X+LI with gap:2rem) needs ~198 px → LinkedIn
   is pushed outside the card border.
   Fix: reduce card padding + allow icon row to wrap.                  */
@media (max-width: 767px) {
  [style*="border:1px solid rgba(79,163,255,0.2)"][style*="padding:3rem"] {
    padding: 2rem 1.5rem !important;
  }
  [style*="border:1px solid rgba(79,163,255,0.2)"][style*="padding:3rem"] [style*="display:flex;gap:2rem"] {
    flex-wrap: wrap !important;
    gap:       1.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   17. TEAM & ADVISOR CARDS — image height and spacing on mobile
   ═══════════════════════════════════════════════════════════════ */
/* Problem: team/advisor cards have fixed image heights (220 px / 190 px)
   designed for a 4-column desktop grid. On mobile the grid collapses to
   2 columns (~155 px card width), making the image area taller than wide
   and the animals appear disproportionately large.
   Fix: reduce image height so proportions are balanced in 2-col layout.  */
@media (max-width: 767px) {
  #team-grid     .team-card .tc-img { height: 160px !important; }
  #advisors-grid .team-card .tc-img { height: 140px !important; }
  .team-card .tc-body               { padding: 0.875rem 0.75rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   13. BOTTOM NAV — Menu button (replaces Antarctica link)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  #sb-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    border-top: 2px solid transparent;
    margin-top: -1px;
    padding: 6px 2px;
    cursor: pointer;
    color: rgba(11,42,68,0.5);
    font-family: "Inter", sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.25s ease;
  }

  #sb-bottom-nav button:active {
    color: #4FA3FF;
  }
}