/* =============================================================================
   VIDUR FOUNDATION — RESPONSIVE STYLES v4.5
   Mobile first. Every Indian reader matters — most are on phones.
   ============================================================================= */

/* ── Global: prevent horizontal overflow on all devices ──────────────────── */
html { overflow-x: hidden; }
body { overflow-x: clip; } /* clip: no scroll container created, just clips visual overflow */

/* ── Small (≥ 640px) ─────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .newsletter-form { flex-direction: row; }
}

/* ══ TABLET + MOBILE (≤ 768px) ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav: hide desktop links, show hamburger ────────────────────────────── */
  .nav-links { display: none !important; }
  .nav-toggle { display: flex !important; }

  /* Featured card — stack vertically */
  .featured-card { grid-template-columns: 1fr; }
  .featured-card__image { min-height: 200px; }
  .featured-card__body { padding: var(--space-6); }

  /* Founder panel — single column */
  .founder-panel { grid-template-columns: 1fr; }
  .founder-panel__identity {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: var(--space-8);
  }
  .founder-panel__content { padding: var(--space-8); }

  /* Contact — stack info above form */
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Founder card */
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-avatar { margin: 0 auto; }

  /* Stats strip — 2×2 grid (fixes display:flex base) */
  .stats-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #D2D2D7;
  }
  .stat-block { background: #F5F5F7; }
  .stat-block + .stat-block { border-left: none; }

  /* Pillar hero — hide large decorative Hindi text */
  .pillar-hero__hindi { display: none; }

  /* Article layout — single column, 20px padding (critical: was edge-to-edge) */
  .article-layout {
    display: block;
    padding-inline: 20px;
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
  }

  /* Featured image bleeds to edges on mobile */
  .article-featured-image {
    margin-inline: -20px;
    padding-inline: 0;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
  }

  .article-hero-gradient { margin-inline: -20px; }
}

/* ── Medium (≥ 768px) ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }

  .article-layout {
    grid-template-columns: 1fr min(var(--max-width-content), calc(100% - var(--space-12))) 1fr;
  }
}

/* ── Large (≥ 1024px) ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ── Hero grid responsive ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-visual { display: none; }
}

/* ══ SMALL PHONES (< 640px) ═════════════════════════════════════════════════ */
@media (max-width: 639px) {

  /* Container — 20px sides minimum */
  .container { padding-inline: 20px; }

  /* ── Hero — eliminate dead space ────────────────────────────────────────── */
  .hero-light {
    min-height: auto;
    align-items: flex-start;
    padding: 0;
  }

  .hero-light .container {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .hero-light .hero-title {
    font-size: 2.25rem;
    max-width: 100%;
    margin-bottom: var(--space-6);
  }

  /* Inner-page hero */
  .hero { padding: var(--space-12) 0 var(--space-10); }

  .hero-light .hero-description,
  .hero-description { font-size: 16px; }

  /* ── Buttons — full width stack ─────────────────────────────────────────── */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3);
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Stats — 2×2 grid ───────────────────────────────────────────────────── */
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .impact-numbers { grid-template-columns: repeat(2, 1fr); }

  /* ── Back to top — closer to screen edge on small phones ───────────────── */
  #back-to-top {
    bottom: 20px;
    right: 20px;
  }

  /* ── Footer ─────────────────────────────────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-3); }

  /* ── Newsletter ──────────────────────────────────────────────────────────── */
  .newsletter-form { flex-direction: column; }
  .newsletter-form input,
  .newsletter-form .btn { width: 100%; }

  /* ── Article body — 18px, 1.8 line height ───────────────────────────────── */
  .article-body { font-size: 18px; line-height: 1.8; }
  .article-title { font-size: 1.75rem; }
  .article-excerpt { font-size: var(--text-base); }
  .article-meta { gap: var(--space-2); }
  .article-meta-dot { display: none; }

  /* ── Archive filters — horizontal scroll (no wrap) ──────────────────────── */
  .archive-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-8);
    scrollbar-width: none;
  }
  .archive-filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }

  /* ── CTA banner — stack on mobile ───────────────────────────────────────── */
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-8);
    gap: var(--space-5);
  }
  .cta-banner .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Contact form card — reduce padding ─────────────────────────────────── */
  .contact-form-card { padding: var(--space-6); }

  /* ── Stat grid in articles ───────────────────────────────────────────────── */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Table — horizontal scroll ───────────────────────────────────────────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── Section intro — tighter ─────────────────────────────────────────────── */
  .section-intro { margin-bottom: var(--space-10); }

  /* ── Program cards — stack icon + content vertically on very small screens */
  .program-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* ── Decorative elements — remove on small phones ───────────────────────── */
  .hero-orb { display: none; }
  .hero-scroll-indicator { display: none; }

  /* ── Hero eyebrow — clip overflow (long text + letter-spacing at 375px) ── */
  .hero-eyebrow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ── Hero content — force single column, no bleed from desktop grid ─────── */
  .hero-content { width: 100%; min-width: 0; }

  /* ── Pillar hero — contain large Hindi watermark ────────────────────────── */
  .pillar-hero { overflow: hidden; }
}

/* ── Print styles ────────────────────────────────────────────────────────── */
@media print {
  .site-nav,
  .site-footer,
  .newsletter-section,
  #reading-progress,
  .article-share,
  .related-articles { display: none; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
  .article-body img { max-width: 80%; margin: 1cm auto; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}