/* ════════════════════════════════════════════════════════════
   RESPONSIVE — all breakpoints in one place
   ════════════════════════════════════════════════════════════ */

/* ─── TABLET (≤ 900px) ─── */
@media (max-width: 900px) {
  .hero {
    flex-direction: column !important;  /* override RTL/LTR row variants */

    .hero-photo { display: none; }
  }

  .news-grid    { grid-template-columns: 1fr; }
  .issues-grid  { grid-template-columns: 1fr 1fr; }

  .dropdown-wide {
    min-width: auto;
    width: 280px;
    grid-template-columns: 1fr;
  }
}

/* ─── MOBILE (≤ 880px) — hamburger breakpoint, see --hamburger-breakpoint in variables.css ─── */
@media (max-width: 880px) { /* --hamburger-breakpoint in variables.css */
  /* Hide desktop nav elements, show hamburger */
  .utility-bar        { display: none; }
  .site-header        { border-top: 4px solid var(--our-darker-green); }
  .header-nav         { display: none; }
  .header-divider     { display: none; }
  .header-search      { display: none; }
  .latest-update-btn  { display: none; }
  .hamburger          { display: flex; }

  :root { --header-top: 84px; }

  .header-top   { padding: 0; }
  .header-top .header-inner {
    max-width: 100%;
    width: 100%;
    padding: 0 0.5rem;
    gap: 0.75rem;
  }
  .hero         { padding: 3rem 1.25rem; }
  .issues-strip { padding: 2rem 1.25rem; }
  .issues-grid  { grid-template-columns: 1fr 1fr; }
  .news-section { padding: 3rem 1.25rem; }
  .news-grid    { grid-template-columns: 1fr; }
  .page-hero    { padding: 2rem 1.25rem 1.75rem; }
  .page-body    { padding: 0 1.25rem 3rem; }
  .page-body-inner { padding-top: 2rem; }
  footer        { padding: 2rem 1.25rem 1.5rem; }

  .footer-top { gap: 1.5rem; }

  .contact-band { padding: 2.5rem 1.25rem; }
  .contact-options {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-btn { justify-content: center; }

  /* Strip document-content padding and page-body-inner bevel on mobile —
     the page-body padding provides enough breathing room */
  .document-content {
    padding-inline: 0;
  }
  .page-body-inner {
    padding-top: 2rem;
    border: none;
  }
}

/* ─── SMALL MOBILE (≤ 480px) ─── I hope */
@media (max-width: 480px) {
  .issues-grid { grid-template-columns: 1fr; }

  .hero h1 { font-size: 1.75rem; }

  .hero-actions {
    flex-direction: column;

    .btn-lg-primary, .btn-lg-outline { text-align: center; }
  }
}

/* ─── NARROW MOBILE (≤ 430px) — hide header lang toggle, use drawer instead ─── */
@media (max-width: 430px) {
  .header-lang-toggle { display: none; }
}

/* ─── MID-WIDTH PADDING (880px–1290px) — prevent header hitting edges ─── */
@media (min-width: 881px) and (max-width: 1290px) {
  .header-inner {
    padding-inline: 1rem;
  }
}

/* ─── DESKTOP (≥ 900px) — large logo and pill font ─── */
@media (min-width: 900px) {
  .site-header {
    margin-top: 8px;
  }

  .member-logo {
    width: var(--header-logo-width-large);
  }

  .latest-update-label,
  .latest-update-date {
    font-size: var(--pill-font-size-large-en);
  }

  body.lang-he .latest-update-label,
  body.lang-he .latest-update-date {
    font-size: var(--pill-font-size-large-he);
  }
}

/* ─── Fix last nav item dropdown going off-screen ─── */
/* Anchor the last dropdown inward at all desktop widths, not just up to
   1290px. The problem occurs at ~1291–1380px where the dropdown would
   otherwise overflow the left (RTL) or right (LTR) edge of the viewport. */
@media (min-width: 881px) {
  body.lang-en .nav-item:last-child .dropdown {
    left: auto;
    right: 0;
  }
  body.lang-he .nav-item:last-child .dropdown {
    right: auto;
    left: 0;
  }
}