/* ============================================================
   Responsive — laptop (1250px) + phone (768px)
   ============================================================ */
/* Tablet header: logo + Join/Renew on the first row, the menu centred below */
@media (max-width: 1060px) and (min-width: 769px) {
  :root { --header-h: 135px; }
  .main-header { justify-content: space-between; row-gap: 0.5rem; }
  .header-left { order: 1; }
  .membership-actions { order: 2; }
  .primary-nav { order: 3; flex: 1 1 100%; }
  .main-nav { justify-content: center; margin: 0; }
}

/* Narrow desktop: a tighter menu, so the full-name lockup and Renew/Join stay on one row */
@media (min-width: 1061px) and (max-width: 1250px) {
  .main-nav { gap: 1.3rem; }
}

@media (max-width: 1250px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-cols { grid-column: 1 / -1; }
  .cards-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split-feature { flex-direction: column; border-radius: var(--br-card); }
  .split-feature::after { border-radius: calc(var(--br-card) - 14px); }
  .sf-image { min-height: 350px; }
  h1.mega-display { font-size: clamp(3rem, 10vw, 4rem); line-height: 1.1; }
  .hero-visual { min-height: 40vh; height: 50vh; border-radius: var(--br-card); }
}

/* Tablet footer: the two link columns sit in a 2x2 grid under the seal and the Contact column */
@media (min-width: 769px) and (max-width: 1250px) {
  .footer-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4.5rem; }
}

/* Narrow banners: the seal moves up into the corner, clear of the title and tagline */
@media (max-width: 900px) {
  .page-hero .seal--hero { top: -70px; bottom: auto; right: -96px; width: 260px; transform: none; }
}

/* Desktop banners: one minimum height, so short titles don't crop the seal */
@media (min-width: 1061px) {
  .page-hero { min-height: 291px; display: flex; flex-direction: column; justify-content: center; }
  .page-hero > .container { width: 100%; }
}

@media (max-width: 768px) {
  /* clip, not hidden: hidden would stop the sticky header from sticking */
  html, body { overflow-x: hidden; overflow-x: clip; }
  .container { padding: 0 6%; }

  /* Hero */
  .hero { padding-top: 2rem; padding-bottom: 1.5rem; }
  .hero-top-row { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
  .hero-headline-wrap { min-width: 0; width: 100%; }
  .hero-sub-text-wrap { width: 100%; flex-basis: auto; }
  h1.mega-display { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-visual { height: 40vh; min-height: 250px; border-radius: 16px; }

  /* Header: brand left, hamburger right; full nav lives in the mobile menu */
  :root { --header-h: 81px; }
  .main-header { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
  .header-left { gap: 1rem; }
  .brand { gap: 0.7rem; }
  .brand-emblem { width: 46px; height: 46px; }
  .brand-wordmark { padding-left: 0.7rem; }
  .brand-text { font-size: 1.18rem; }
  .brand-sub { font-size: 0.58rem; margin-top: 5px; }
  .membership-actions { display: none; }
  .primary-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu.open { display: block; padding-top: 0.5rem; padding-bottom: 1.75rem; border-top: 1px solid rgba(var(--navy-rgb), 0.1); max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; }

  /* Cards */
  .cards-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .editorial-card { padding: 2.5rem 2rem; }
  .layout-pad { padding-top: 3rem; padding-bottom: 3rem; }

  /* Split feature */
  .split-feature { flex-direction: column; margin: 3rem 0; border-radius: 16px; }
  .split-feature::after, .newsletter-panel::after { inset: 9px; border-radius: 8px; }
  .newsletter-panel { border-radius: 16px; }
  .editorial-card--dark::after { inset: 9px; border-radius: calc(var(--br-card) - 9px); }
  .page-hero .seal--hero { top: -64px; right: -92px; width: 230px; }
  .sf-content { padding: 2rem 1.5rem; }
  .sf-content h2 { font-size: 1.8rem; }
  .sf-image { min-height: 250px; }

  /* News cards */
  .news-card img { height: 160px; }
  .news-card-body { padding: 1.5rem; }

  /* Events */
  .event-row { padding: 1.25rem 1.25rem; }
  .event-row .pathway-link { display: none; } /* the whole row is the link */

  /* Newsletter */
  .newsletter-panel { padding: 2.5rem 1.5rem; flex-direction: column; text-align: center; }
  .newsletter-copy { min-width: 0; }
  .newsletter-form { flex-direction: column; width: 100%; }
  .newsletter-form input { min-width: 0; width: 100%; }
  .newsletter-form .btn { width: 100%; }

  /* Footer */
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .footer-cols { flex-direction: column; gap: 2.5rem; }
  .footer-links { gap: 0; }
  .footer-links a { display: inline-block; padding-block: 0.7rem; } /* 44px tap targets */
  .footer-seal { width: 104px; }

  /* Section headers */
  .section-header-block { flex-direction: column; align-items: flex-start; gap: 1rem; }
  h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); }

  /* Utility bar hidden on mobile (its links live in the mobile menu) */
  .utility-bar { display: none; }
}

/* Landscape phones: a sticky header would take a third of the screen */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-h: 0px; }
  .site-header { position: relative; }
}