/* ==============================================
   RESPONSIVE — INP Website
   ============================================== */

@media (max-width: 1200px) {
  .nav { padding: 0 2.5rem; }
  .s, .ph, .hero-l { padding: 4rem 2.5rem; }
  .pg-label { margin: 2rem 2.5rem 0; }
  .footer { padding: 4rem 2.5rem 2rem; }
  .contact-l, .contact-r { padding: 4rem 2.5rem; }
  .donate-bar { padding: 2rem 2.5rem; }
  .mission-strip { padding: 3rem 2.5rem; }
  .newsletter { padding: 3.5rem 2.5rem; }
}

@media (max-width: 900px) {

  /* Nav */
  .nav { padding: 0 1.5rem; }
  .nav-links {
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--charcoal);
    padding: 0 1.5rem;
    gap: 0;
    border-bottom: 2px solid var(--gold);
    transition: max-height 0.3s ease, visibility 0.3s, padding 0.3s;
  }
  .nav-links.open {
    visibility: visible;
    max-height: 420px;
    padding: 1rem 1.5rem 1.5rem;
  }
  .nav-hamburger { display: flex; }
  .nav-cta-desktop { display: none; }
  .nav-cta-mobile-li { display: block; }
  .nav-links li:last-child { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.75rem; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { padding: 0.75rem 0; min-height: 48px; }

  /* General sections */
  .s          { padding: 3rem 1.5rem; }
  .pg-label   { margin: 2rem 1.5rem 0; }
  .ph         { padding: 3rem 1.5rem; }

  /* Grids → single column */
  .two-col,
  .three-col,
  .four-col,
  .agenda-grid,
  .desk,
  .contact-grid,
  .footer-grid,
  .slogans,
  .hero,
  .phase-grid,
  .geo-grid {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero { min-height: auto; }
  .hero-l { padding: 3rem 1.5rem; }
  .hero-r { padding: 2rem 1.5rem; min-height: 280px; }
  .hero-manifesto { padding-bottom: 2rem; }
  .hero h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); }

  /* Director's desk */
  .desk { grid-template-columns: 1fr; }
  .desk-l { padding: 3rem 1.5rem; }
  .desk-r { padding: 3rem 1.5rem; }
  .desk-photo { max-width: 280px; }

  /* Featured blog post */
  .featured-post { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; }
  .featured-post-img { height: 220px; }

  /* Agenda detail */
  .ag-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .ag-big-num { display: none; }

  /* Agenda grid */
  .agenda-grid { grid-template-columns: 1fr 1fr; }
  .ag-item:nth-child(5n) { border-right: 1px solid rgba(255,255,255,0.08); }
  .ag-item:nth-child(even) { border-right: none; }

  /* M&E table */
  .me-row { grid-template-columns: 1fr; }
  .me-cell { border-right: none; border-bottom: 1px solid var(--gray-light); }

  /* Events */
  .ev-row { grid-template-columns: 80px 1fr; gap: 1rem; }
  .ev-row .btn { grid-column: 1 / -1; justify-self: start; }

  /* Slogans */
  .slogans { grid-template-columns: 1fr; }
  .slogan:nth-child(even) { border-right: 1px solid rgba(255,255,255,0.07); }
  .slogan:nth-last-child(-n+1) { border-bottom: none; }

  /* Phase grid */
  .phase-grid { grid-template-columns: 1fr 1fr; }
  .phase-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .phase-item:last-child { border-bottom: none; }

  /* Geo grid */
  .geo-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer { padding: 3rem 1.5rem 2rem; }
  .footer-grid { gap: 2rem; }
  .footer-col h4 { font-size: 0.75rem; }
  .f-tags span { font-size: 0.75rem; }
  .eyebrow { font-size: 0.72rem; }

  /* Contact */
  .contact-l, .contact-r { padding: 3rem 1.5rem; }

  /* Donate bar */
  .donate-bar { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
  .donate-bar p { font-size: 1.1rem; }

  /* Newsletter */
  .newsletter { padding: 3rem 1.5rem; }
  .nl-form { flex-direction: column; }
  .nl-form input, .nl-form button { width: 100%; }

  /* Mission strip */
  .mission-strip { padding: 2.5rem 1.5rem; }

  /* Ticker */
  .ticker-inner { animation-duration: 20s; }

  /* Stats */
  .four-col.stats { grid-template-columns: 1fr 1fr; }
  .stat { border-left: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }

  /* Join form */
  .join-form-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .agenda-grid { grid-template-columns: 1fr; }
  .geo-grid    { grid-template-columns: 1fr; }
  .phase-grid  { grid-template-columns: 1fr; }
  .four-col.stats { grid-template-columns: 1fr; }

  .hero h1 { font-size: 2.2rem; }
  .display-md { font-size: 1.4rem; }

  .two-col.vision { grid-template-columns: 1fr; }
  .two-col.vision > div:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); padding-right: 0; padding-bottom: 2rem; margin-bottom: 0; }

  .three-col { grid-template-columns: 1fr; }

  .ev-row { grid-template-columns: 1fr; }

  .slogans { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  /* Hero CTA buttons stack cleanly on narrow screens */
  .hero-acts { flex-direction: column; gap: 0.75rem; align-items: flex-start; }

  /* Readability bumps for small screens */
  .blog-cat { font-size: 0.72rem; }
  .stat-lbl { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  /* Tighter padding for budget Android phones */
  .nav { padding: 0 1rem; }
  .s, .ph, .hero-l { padding: 2rem 1rem; }
  .pg-label { margin: 1.5rem 1rem 0; }
  .footer { padding: 2rem 1rem 1.5rem; }
  .contact-l, .contact-r { padding: 2rem 1rem; }
  .donate-bar { padding: 1.75rem 1rem; }
  .mission-strip { padding: 2rem 1rem; }
  .newsletter { padding: 2.5rem 1rem; }
  .hero-r { padding: 1.5rem 1rem; }
  .desk-l, .desk-r { padding: 2rem 1rem; }

  /* Typography floor */
  .hero h1 { font-size: 1.9rem; }
  .display-md { font-size: 1.25rem; }
  .ph h1 { font-size: 1.6rem; }

  /* Buttons fit on very small screens */
  .btn { padding: 0.7rem 1.2rem; }

  /* Toast stays within viewport */
  .toast { bottom: 1rem; right: 1rem; left: 1rem; max-width: 100%; }

  /* Share bar stacks on very small screens */
  .share-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .share-btn { font-size: 0.72rem; padding: 0.4rem 0.7rem; }
}

/* Print */
@media print {
  .nav, .ticker, .newsletter, .donate-bar, .footer, .pg-label { display: none; }
  .s { padding: 2rem 0; }
  body { color: #000; background: #fff; }
}