﻿/* Core India Movement - responsive layout rules */
@media (max-width: 1180px) {
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    z-index: 1190;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    max-height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 0.9rem max(1rem, env(safe-area-inset-left)) calc(1.4rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0.24s ease;
  }

  .site-nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .site-nav a {
    width: 100%;
    justify-content: flex-start;
    min-height: 52px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    font-size: 0.98rem;
  }

  .menu-toggle {
    display: inline-grid;
  }
}

@media (max-width: 980px) {
  :root {
    --header-height: 72px;
  }

  .grid-4,
  .grid-5,
  .highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3,
  .gallery-grid,
  .donation-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split,
  .split.reverse,
  .founder-card,
  .chapter-layout,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .split.reverse .image-panel {
    order: -1;
  }

  .cta-inner {
    display: grid;
    text-align: center;
    justify-items: center;
  }

  .image-panel img,
  .founder-card img {
    min-height: 300px;
    height: auto;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(100% - 24px, var(--max));
  }

  h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  h2 {
    font-size: clamp(1.55rem, 7vw, 2.25rem);
  }

  p {
    overflow-wrap: anywhere;
  }

  .section {
    padding: 58px 0;
  }

  .section-sm {
    padding: 44px 0;
  }

  .hero {
    min-height: calc(100svh - var(--header-height));
    background-position: center bottom;
  }

  .hero-logo {
    width: 118px;
    height: 118px;
  }

  .hero-content {
    padding: 48px 0 78px;
  }

  .hero-actions,
  .search-bar,
  .newsletter-form {
    display: grid;
  }

  .hero-actions .btn,
  .cta-inner .btn,
  .form-card .btn {
    width: 100%;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .highlight-grid,
  .gallery-grid,
  .donation-tiers,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .roadmap-item {
    grid-template-columns: 1fr;
  }

  .calendar {
    gap: 0.3rem;
  }

  .calendar span {
    min-height: 38px;
    font-size: 0.86rem;
  }

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

  .footer-bottom {
    display: grid;
    text-align: center;
  }

  .scroll-top {
    right: calc(0.85rem + env(safe-area-inset-right));
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }
}

@media (max-width: 520px) {
  :root {
    --header-height: 68px;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .brand-name {
    font-size: 0.85rem;
  }

  .brand-short {
    font-size: 0.68rem;
  }

  .nav-actions {
    gap: 0.35rem;
  }

  .icon-btn,
  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .site-nav {
    padding-top: 0.7rem;
  }

  .site-nav a {
    min-height: 50px;
    padding: 0.78rem 0.9rem;
  }

  .page-hero {
    padding: 52px 0 38px;
  }

  .card,
  .form-card {
    padding: 1rem;
  }

  .activity-card,
  .news-card,
  .event-card,
  .leader-card {
    padding: 0;
  }

  .countdown strong {
    font-size: 1.35rem;
  }
}

@media (max-width: 380px) {
  .brand-text {
    display: none;
  }

  .container {
    width: min(100% - 18px, var(--max));
  }

  .calendar span {
    min-height: 34px;
    font-size: 0.78rem;
  }
}

