/* ========================================
   RESPONSIVE.CSS — Responsive Breakpoints
   ======================================== */

/* ——— Large Desktop (1440px+) ——— */
@media (min-width: 1440px) {
  :root {
    --viewport-padding: var(--space-2xl);
  }

  .section-title { font-size: var(--text-4xl); }
}

/* ——— Desktop (1024px - 1439px) ——— */
@media (max-width: 1439px) and (min-width: 1024px) {
  :root {
    --viewport-padding: var(--space-xl);
  }
}

/* ——— Tablet Landscape (768px - 1023px) ——— */
@media (max-width: 1023px) {
  :root {
    --viewport-padding: var(--space-lg);
    --header-height: 70px;
    --text-5xl: 5rem;
    --text-4xl: 3.5rem;
    --text-3xl: 2.5rem;
    --space-4xl: 4.5rem;
    --space-5xl: 5.5rem;
    --space-6xl: 7rem;
  }

  .hero {
    padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  .section-lg {
    padding: var(--space-4xl) 0;
  }

  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .culture-hero {
    grid-template-columns: 1fr;
  }

  .culture-hero-text {
    padding-right: 0;
    text-align: center;
  }
}

/* ——— Tablet Portrait / Mobile Large (480px - 767px) ——— */
@media (max-width: 767px) {
  :root {
    --viewport-padding: var(--space-md);
    --header-height: 64px;
    --text-6xl: 5rem;
    --text-5xl: 4rem;
    --text-4xl: 3rem;
    --text-3xl: 2.25rem;
    --text-2xl: 1.75rem;
    --text-xl: 1.25rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3.5rem;
    --space-5xl: 4.5rem;
    --space-6xl: 6rem;
    --grid-gap: var(--space-lg);
    --grid-gap-sm: var(--space-md);
  }

  .container {
    padding: 0 var(--viewport-padding);
  }

  .hero {
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
    min-height: auto;
  }

  .hero-name-line { font-size: clamp(2.6rem, 14vw, 4.2rem); }
  .hero-name-nepali { font-size: var(--text-base); }

  .section {
    padding: var(--space-2xl) 0;
  }

  .section-lg {
    padding: var(--space-3xl) 0;
  }

  .section-header {
    margin-bottom: var(--space-2xl);
  }

  .section-title { font-size: var(--text-2xl); }
  .section-description { font-size: var(--text-base); }

  .intro-headline { font-size: var(--text-2xl); }
  .intro-body { font-size: var(--text-base); }
  .intro-grid { gap: var(--space-2xl); }

  .digital-stats {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
  }

  .digital-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    text-align: left;
  }

  .stat-divider {
    width: 1px;
    height: 50px;
    margin: 0;
  }

  .stat-value.xl { font-size: var(--text-2xl); }
  .stat-value.lg { font-size: var(--text-xl); }
  .stat-value.md { font-size: var(--text-lg); }

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

  .community-groups { grid-template-columns: 1fr; }
  .community-gallery { grid-template-columns: repeat(2, 1fr); }

  .remembrance-title { font-size: var(--text-2xl); }
  .remembrance-gallery { grid-template-columns: 1fr; }

  .culture-hero { gap: var(--space-2xl); }
  .culture-hero-title { font-size: var(--text-2xl); }
  .culture-hero-title .nepali { font-size: var(--text-lg); }
  .culture-hero-desc { font-size: var(--text-base); }
  .culture-values { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .culture-value { padding: var(--space-lg); }

  .public-role-card { padding: var(--space-xl); }
  .public-role-title-nepali { font-size: var(--text-xl); }
  .public-role-title-english { font-size: var(--text-base); }
  .public-role-party { font-size: var(--text-lg); }

  .thoughts-quote blockquote { font-size: var(--text-lg); }
  .thoughts-quote blockquote::before,
  .thoughts-quote blockquote::after { font-size: var(--text-xl); }

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

  .connect { padding: var(--space-4xl) 0; }
  .connect-title { font-size: var(--text-3xl); }
  .connect-description { font-size: var(--text-base); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-lg); }

  .filter-group { justify-content: flex-start; flex-wrap: wrap; overflow-x: visible; }
  .filter-btn { white-space: nowrap; }

  .sports-timeline { grid-template-columns: 1fr; }

  .timeline { padding-left: var(--space-lg); }
  .timeline::before { left: 7px; }
  .timeline-marker { left: calc(-1 * var(--space-lg)); width: 16px; height: 16px; }
  .timeline-marker::after { width: 6px; height: 6px; }
  .timeline-content { padding-left: var(--space-md); }
}

/* ——— Mobile Small (320px - 479px) ——— */
@media (max-width: 479px) {
  :root {
    --viewport-padding: var(--space-sm);
    --text-base: 0.9375rem; /* 15px */
    --space-xl: 1.5rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --space-4xl: 3.5rem;
  }

  html { font-size: 15px; }

  .hero-name-line { font-size: clamp(2.35rem, 13.5vw, 3.4rem); }
  .hero-name-nepali { font-size: var(--text-sm); }

  .section-title { font-size: var(--text-xl); }
  .section-description { font-size: var(--text-sm); }

  .intro-headline { font-size: var(--text-xl); }
  .intro-body { font-size: var(--text-sm); }

  .card-body { padding: var(--space-md); }
  .card-title { font-size: var(--text-base); }

  .stat-value.xl { font-size: var(--text-xl); }
  .stat-value.lg { font-size: var(--text-lg); }
  .stat-value.md { font-size: var(--text-base); }

  .community-gallery { grid-template-columns: 1fr; }

  .culture-values { grid-template-columns: 1fr; }

  .filter-group { gap: var(--space-xs); }
  .filter-btn { padding: var(--space-xs) var(--space-md); font-size: 0.625rem; }

  .btn { padding: var(--space-sm) var(--space-lg); font-size: var(--text-xs); }
}

/* ——— Landscape Mobile ——— */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
  }
}

/* ——— High DPI / Retina ——— */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* High-res image loading handled via picture/srcset in HTML */
}

/* ——— Print ——— */
@media print {
  .header,
  .mobile-menu-toggle,
  .footer-social,
  .back-to-top,
  .lightbox,
  .filter-group,
  .archive-load-more,
  .connect-pathways {
    display: none !important;
  }

  .main { padding-top: 0; }

  .section { break-inside: avoid; page-break-inside: avoid; }

  a { text-decoration: none; color: var(--color-text); }

  .hero { min-height: auto; padding: 0; }
}

/* ——— Focus Visible Polyfill ——— */
:focus:not(:focus-visible) {
  outline: none;
}

/* ——— Container Queries (Future-proof) ——— */
@container (min-width: 400px) {
  .card-title { font-size: var(--text-lg); }
}

@container (min-width: 600px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
}