/* ==========================================================================
   responsive.css — मोबाइल-प्रथम (mobile-first) प्रतिसादक्षम रचना
   खालील टप्पे : 320px → 480px → 760px → 980px → 1100px → 1280px → 1600px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. गॅलरी प्रतिसादक्षम ग्रिड रचना (Responsive CSS Grid)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .gallery-item {
    border-radius: 12px;
  }
}

/* --------------------------------------------------------------------------
   2. टॅबलेट (980px पर्यंत) — साइडबार व तळटीप २ × २ (2x2 Grid)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid--sidebar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sticky-side { position: static; }
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .footer__col,
  .footer__col + .footer__col {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 179, 63, 0.18);
    border-radius: 12px;
    padding: 0.95rem 1rem;
  }
  table.data { min-width: 500px; }

  /* डॅशबोर्ड टॅबलेट / मोबाइल रचना */
  .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .compact-utsav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compact-utsav-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   3. मोबाइल / टॅबलेट मार्गदर्शिका (1100px पर्यंत) :
      भरीव शीर्षलेख + अचूक संरेखित हॅमबर्गर ड्रॉवर + आधुनिक फ्लोटिंग तळ-पट्टी
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .site-header {
    background: #fffaf1;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 3px 14px rgba(64, 9, 15, 0.07);
  }
  .site-header.is-stuck {
    background: #fffaf1;
    box-shadow: 0 6px 20px rgba(64, 9, 15, 0.11);
  }

  .hamburger {
    display: inline-flex;
  }

  /* मुख्य मार्गदर्शिका : स्वच्छ, साधी व एकसमान संरेखित आधुनिक ड्रॉवर रचना */
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(84vw, 320px);
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #fffdf9;
    border-inline-start: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 20px 0 0 20px;
    box-shadow: -16px 0 40px rgba(32, 6, 10, 0.18);
    padding: 1rem 1rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 280ms;
    z-index: 165;
  }
  .primary-nav.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* ड्रॉवर शीर्षक पट्टी — मेनू आयटम्सच्या डाव्या/उजव्या रेषेवर तंतोतंत संरेखित */
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.15rem 0.25rem 0.85rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .drawer-head__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
  }
  .drawer-head__brand img,
  .drawer-head__logo {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 50%;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 2px 5px rgba(64, 9, 15, 0.22));
    flex: none;
  }
  .drawer-head__titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.3;
  }
  .drawer-head__title {
    font-family: var(--font-head);
    font-size: 0.98rem;
    color: var(--maroon-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drawer-head__sub {
    font-size: 0.72rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--ivory);
    color: var(--maroon-800);
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
  }
  .drawer-close:hover {
    background: var(--saffron-100);
    transform: scale(1.04);
  }
  .drawer-close svg { width: 17px; height: 17px; }

  /* ड्रॉवरमधील सर्व ६ दुवे — १००% पूर्ण रुंदी व डावीकडून अचूक संरेखित (Left-aligned) */
  .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    padding: 0.35rem 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .menu__item {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
  }
  .menu__link,
  .menu__link--cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.72rem 0.85rem;
    min-height: 46px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    box-shadow: none;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--maroon-700);
    opacity: 0.85;
    transition: color 180ms ease, opacity 180ms ease;
  }
  .menu__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .menu__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 16px;
    flex: 0 0 16px;
    margin-inline-start: auto;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--ink-muted);
    opacity: 0.55;
  }
  .menu__link:hover,
  .menu__link--cta:hover {
    background: rgba(242, 106, 27, 0.08);
    color: var(--maroon-800);
  }
  .menu__link[aria-current="page"],
  .menu__link--cta[aria-current="page"] {
    background: rgba(242, 106, 27, 0.12);
    border-color: rgba(233, 153, 31, 0.28);
    box-shadow: inset 3px 0 0 var(--saffron-500);
    color: var(--maroon-800);
    font-weight: 700;
  }
  .menu__link[aria-current="page"] .menu__icon,
  .menu__link--cta[aria-current="page"] .menu__icon,
  .menu__link[aria-current="page"] .menu__arrow,
  .menu__link--cta[aria-current="page"] .menu__arrow {
    color: var(--saffron-600);
    opacity: 1;
  }

  .drawer-foot {
    display: block;
    margin-top: auto;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(242, 106, 27, 0.06);
    border: 1px solid rgba(201, 162, 39, 0.22);
    text-align: center;
  }
  .drawer-foot__time {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.45;
  }
  .drawer-foot__mantra {
    margin: 0.25rem 0 0;
    font-family: var(--font-head);
    font-size: 0.85rem;
    color: var(--maroon-700);
  }

  /* मुख्यपृष्ठ (index.html) : टॅबलेट व मोबाइल दृश्यात (<= 1100px)
     डुप्लिकेट कार्डांशिवाय व उडीशिवाय चालणारा अनंत (infinite) कार्ड स्लायडर */
  body.page-home .mobile-slider-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding-block: 4px 8px;
    touch-action: pan-y pinch-zoom;
  }
  body.page-home [data-mobile-slider] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 1rem;
    will-change: transform;
  }
  /* टॅबलेट (641px–1100px) : एका वेळी २ कार्डे बाजूबाजूला */
  body.page-home [data-mobile-slider] > * {
    flex: 0 0 calc((100% - 1rem) / 2);
    width: calc((100% - 1rem) / 2);
    max-width: calc((100% - 1rem) / 2);
    min-width: 0;
    height: auto;
    margin: 0;
  }

  .mobile-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
  }
  .mobile-slider-dot {
    width: 7px;
    height: 6px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(123, 30, 43, 0.22);
    cursor: pointer;
    transition: width 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
      background-color 260ms ease;
  }
  .mobile-slider-dot.is-active {
    width: 24px;
    background: var(--saffron-500);
  }
  .section--dark .mobile-slider-dot {
    background: rgba(255, 240, 210, 0.26);
  }
  .section--dark .mobile-slider-dot.is-active {
    background: var(--gold-400);
  }

  /* तळ-मार्गदर्शिका : मिनिमल आधुनिक प्रीमियम फ्लोटिंग डॉक */
  .bottom-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none !important;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    --bottom-nav-h: 64px;
  }
  .to-top { --bottom-nav-h: 68px; }
  .site-footer { padding-bottom: 0.75rem; }
}

@media (max-width: 640px) {
  /* मोबाइल (<= 640px) : १ मुख्य कार्ड (88%) + पुढील कार्डाची १२% झलक */
  body.page-home [data-mobile-slider] {
    gap: 0.85rem;
  }
  body.page-home [data-mobile-slider] > * {
    flex: 0 0 88%;
    width: 88%;
    max-width: 88%;
  }
}

@media (min-width: 1101px) {
  .nav-scrim { display: none !important; }
  body { --bottom-nav-h: 0px; }
  .mobile-slider-viewport:not(.mobile-slider-viewport--always) { display: contents; }
  .mobile-slider-dots:not(.mobile-slider-dots--always) { display: none !important; }
}

/* --------------------------------------------------------------------------
   4. संपूर्ण संकेतस्थळ मोबाइल ऑप्टिमायझेशन (760px पर्यंत) :
      सुयोग्य फॉन्ट आकार, संतुलित पॅडिंग व अचूक संरेखन
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --header-h: 64px;
    --sp-2: 0.55rem;
    --sp-3: 0.85rem;
    --sp-4: 1.15rem;
    --sp-5: 1.55rem;
    --sp-6: 2rem;
  }

  body {
    font-size: 0.94rem;
    line-height: 1.72;
  }

  .container {
    padding-inline: 1rem;
  }

  /* टॉप-पट्टी */
  .topbar { font-size: 0.73rem; }
  .topbar__inner { min-height: 28px; padding-block: 0.16rem; }
  .topbar__sep,
  .topbar__place { display: none; }

  /* मुख्य शीर्षलेख */
  .site-header__inner {
    min-height: 64px;
    padding-block: 0.3rem;
    gap: 0.6rem;
  }
  .brand { gap: 0.55rem; }
  .brand__logo { width: 40px; height: 40px; border-radius: 50%; }
  .brand__name { font-size: 0.96rem; line-height: 1.32; }
  .brand__sub { font-size: 0.68rem; line-height: 1.3; }

  /* विभाग व शीर्षके */
  .section { padding-block: 2.1rem; }
  .section--tight { padding-block: 1.45rem; }
  .section-head { margin-bottom: 1.25rem; }
  .section-head__kicker {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.3rem;
  }
  .section-head__title {
    font-size: clamp(1.2rem, 4.6vw, 1.44rem);
    line-height: 1.36;
    margin-bottom: 0.38rem;
  }
  .section-head__lead {
    font-size: 0.9rem;
    line-height: 1.64;
  }
  .divider { margin: 0.85rem auto 1.25rem; }

  /* मुख्य हिरो स्लायडर व आतील पानांचा हिरो */
  .hero {
    aspect-ratio: 1920 / 900;
    min-height: 0;
  }
  .hero__inner {
    padding-block: 1.65rem 1.45rem;
    gap: 0.95rem;
  }
  .hero__mantra {
    font-size: 0.84rem;
    margin-bottom: 0.25rem;
  }
  .hero__title {
    font-size: clamp(1.36rem, 5.4vw, 1.68rem);
    line-height: 1.32;
    margin-bottom: 0.3rem;
  }
  .hero__subtitle {
    font-size: 0.9rem;
    line-height: 1.48;
    margin-bottom: 0.75rem;
  }
  .hero__scroll { display: none; }

  .page-hero {
    padding-block: 1.65rem 1.5rem;
    min-height: auto;
    background-image:
      radial-gradient(circle at 88% 14%, rgba(244, 180, 26, 0.34) 0%, rgba(232, 138, 12, 0.14) 32%, transparent 64%),
      radial-gradient(circle at 8% 90%, rgba(224, 88, 22, 0.26) 0%, transparent 56%),
      repeating-linear-gradient(135deg, rgba(255, 226, 154, 0.032) 0px, rgba(255, 226, 154, 0.032) 1px, transparent 1px, transparent 18px),
      linear-gradient(122deg, #2a050b 0%, #5c0f1c 38%, #8e1e22 70%, #c64f16 100%);
  }
  .breadcrumb {
    font-size: 0.75rem;
    padding: 0.28rem 0.72rem;
    gap: 0.38rem;
    margin-bottom: 0.6rem;
  }
  .page-hero__kicker {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.28rem;
  }
  .page-hero__title {
    font-size: clamp(1.32rem, 5vw, 1.62rem);
    line-height: 1.34;
    margin-bottom: 0.38rem;
  }
  .page-hero__lead {
    font-size: 0.89rem;
    line-height: 1.6;
  }

  /* ग्रिड्स व कार्ड्स — एकसमान संरेखन व पॅडिंग */
  .grid,
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
    gap: 0.95rem;
  }
  .card {
    padding: 1.1rem;
    border-radius: 14px;
    gap: 0.5rem;
  }
  .card--photo {
    padding: 0;
    gap: 0;
  }
  .card--photo .card__body {
    padding: 1.05rem 1.1rem 1.15rem;
    gap: 0.45rem;
  }
  .card__title {
    font-size: 1.04rem;
    line-height: 1.38;
    margin-bottom: 0.1rem;
  }
  .card__text {
    font-size: 0.9rem;
    line-height: 1.66;
  }
  .card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .card__icon svg { width: 20px; height: 20px; }
  .info-card__label { font-size: 0.72rem; }
  .info-card__value {
    font-size: 1.06rem;
    margin-block: 0.1rem 0.2rem;
  }

  .callout {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.66;
  }
  .callout__title {
    font-size: 1.03rem;
    margin-bottom: 0.3rem;
  }
  .side-card {
    padding: 1.05rem;
    border-radius: 12px;
  }
  .side-card__title {
    font-size: 1rem;
    margin-bottom: 0.45rem;
  }

  /* आकडेवारी पट्टी (2x2 ग्रिड) */
  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .stat {
    padding: 0.9rem 0.7rem;
    border-radius: 12px;
  }
  .stat__value {
    font-size: 1.26rem;
    line-height: 1.3;
  }
  .stat__label {
    font-size: 0.78rem;
    line-height: 1.38;
  }

  /* बटणे व बॅजेस */
  .btn-row { gap: 0.55rem; }
  .btn {
    padding: 0.62rem 1.1rem;
    font-size: 0.88rem;
    min-height: 42px;
  }
  .btn--lg {
    padding: 0.66rem 1.2rem;
    font-size: 0.9rem;
  }
  .badge {
    font-size: 0.72rem;
    padding: 0.18rem 0.55rem;
  }

  /* कॉम्पॅक्ट कालरेषा व कॉम्पॅक्ट उत्सव ग्रिड (Mobile) */
  .timeline--compact {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .timeline--compact > li {
    padding: 0.88rem 0.95rem;
    gap: 0.35rem;
  }
  .timeline--compact .timeline__title {
    font-size: 0.98rem;
  }
  .timeline--compact .timeline__text {
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .compact-utsav-grid,
  .compact-utsav-grid--3,
  .compact-darshan-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .compact-utsav-card,
  .compact-darshan-card {
    padding: 0.8rem 0.9rem;
  }
  .compact-darshan-card__value {
    font-size: 0.94rem;
  }
  .compact-darshan-card__text {
    font-size: 0.8rem;
  }
  .parisar-card__media-wrap {
    height: 126px;
  }
  .parisar-card__body {
    padding: 0.65rem 0.8rem 0.72rem;
  }
  .parisar-card__title {
    font-size: 0.92rem;
  }
  .parisar-card__text {
    font-size: 0.79rem;
    line-height: 1.44;
  }
  .section-head--compact {
    margin-bottom: 0.9rem;
    padding-bottom: 0.55rem;
    gap: 0.45rem 0.75rem;
  }
  .section-head--compact > .btn {
    margin-inline-start: auto;
    padding: 0.36rem 0.82rem;
    min-height: 32px;
    font-size: 0.78rem;
  }
  .timeline {
    padding: 0;
    gap: 1.25rem;
  }
  .timeline > li {
    margin: 0;
    padding: 1.15rem 1.1rem;
    border-radius: 14px;
    gap: 0.7rem;
  }
  .timeline > li:not(:last-child)::after {
    inset-inline-start: 1.4rem;
    height: 1.25rem;
  }
  .timeline__head {
    gap: 0.45rem;
  }
  .timeline__stage {
    font-size: 0.76rem;
    padding: 0.24rem 0.72rem;
  }
  .timeline__title {
    font-size: clamp(1.06rem, 4.3vw, 1.22rem);
    line-height: 1.4;
  }
  .timeline__text {
    font-size: 0.92rem;
    line-height: 1.68;
  }
  .timeline__figure figcaption {
    padding: 0.55rem 0.8rem;
    font-size: 0.78rem;
  }

  table.data {
    font-size: 0.86rem;
    min-width: 460px;
  }
  table.data th,
  table.data td {
    padding: 0.6rem 0.75rem;
  }
  table.data thead th { font-size: 0.9rem; }

  /* संपर्क पान (contact.html) व साधा सूचना तक्ता प्रतिसादक्षम नियम */
  .event-meta {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .event-meta dt {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--maroon-700);
  }
  .event-meta dt:first-child {
    margin-top: 0;
  }
  .event-meta dd {
    font-size: 0.91rem;
    line-height: 1.56;
  }
  .map-placeholder {
    aspect-ratio: auto;
    min-height: 0;
    padding: 1.25rem 1rem;
    font-size: 0.88rem;
  }
  .form__row,
  .simple-form-grid,
  .captcha-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .captcha-box {
    justify-content: space-between;
    width: 100%;
  }
  .simple-bar {
    align-items: flex-start;
    gap: 0.65rem;
  }
  .simple-card {
    padding: 0.9rem;
    border-radius: 12px;
  }
  .simple-table {
    font-size: 0.84rem;
    min-width: 480px;
  }
  .simple-table thead th,
  .simple-table tbody td {
    padding: 0.62rem 0.7rem;
  }

  .faq__trigger {
    padding: 0.85rem 1rem;
    min-height: 48px;
    gap: 0.65rem;
  }
  .faq__q {
    font-size: 0.92rem;
    line-height: 1.45;
  }
  .faq__state { width: 24px; height: 24px; font-size: 1rem; }
  .faq__panel {
    padding: 0 1rem 0.95rem;
    font-size: 0.88rem;
    line-height: 1.66;
  }

  .band-jay { padding-block: 1.3rem; }
  .band-jay__text {
    font-size: 1.12rem;
    line-height: 1.4;
  }
  .band-jay__sub {
    font-size: 0.8rem;
    margin-top: 0.2rem;
  }
  .quote__mark { font-size: 1.85rem; }
  .quote__text {
    font-size: 1.04rem;
    line-height: 1.56;
    margin: 0.3rem 0 0.45rem;
  }
  .quote__cite { font-size: 0.8rem; }

  .two-col-text { columns: 1; }
  .filter-bar { gap: 0.4rem; margin-bottom: 1rem; }
  .filter-chip {
    font-size: 0.82rem;
    padding: 0.42rem 0.8rem;
    min-height: 38px;
  }
  .gallery-item__cap {
    padding: 0.65rem 0.8rem 0.7rem;
    font-size: 0.84rem;
  }

  .lightbox__prev { inset-inline-start: 0.4rem; }
  .lightbox__next { inset-inline-end: 0.4rem; }
  .lightbox__btn { width: 42px; height: 42px; }

  /* मोबाइल तळटीप : मिनिमल, स्वच्छ २ × २ ग्रिड व ठळक बुलेट पॉईंट्स (2x2 Grid with Differentiated Columns) */
  .footer__top {
    padding-block: 1rem 0.9rem;
    gap: 0.6rem;
  }
  .brand--footer { gap: 0.55rem; }
  .brand--footer .brand__logo { width: 38px; height: 38px; }
  .brand--footer .brand__name { font-size: 0.94rem; line-height: 1.3; }
  .brand--footer .brand__sub { font-size: 0.68rem; }
  .footer__jay {
    font-size: 0.78rem;
    padding: 0.24rem 0.7rem;
  }
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding-block: 1.1rem 1.25rem;
  }
  .footer__col,
  .footer__col + .footer__col {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 179, 63, 0.18);
    border-radius: 12px;
    padding: 0.85rem 0.8rem;
  }
  .footer__title {
    font-size: 0.86rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
  }
  .footer__list {
    list-style: disc;
    padding-inline-start: 1.05rem;
  }
  .footer__list li,
  .footer__list a {
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .footer__list li { margin-bottom: 0.32rem; }
  .footer__meta { padding-block: 0.75rem 0.9rem; }
  .footer__meta-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.3rem;
  }
  .footer__copy,
  .footer__credit {
    font-size: 0.78rem;
    line-height: 1.48;
  }
}

/* --------------------------------------------------------------------------
   5. लहान मोबाइल (480px आणि 360px पर्यंत)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .topbar__right { display: none; }
  .topbar__inner { justify-content: center; }
  .notice { grid-template-columns: 1fr; gap: 0.45rem; }
  .to-top { width: 42px; height: 42px; }
  .page-hero { padding-block: 1.4rem 1.3rem; }
  .breadcrumb { font-size: 0.72rem; padding: 0.24rem 0.64rem; margin-bottom: 0.5rem; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .dash-stat-card { padding: 0.8rem 0.85rem; }
  .dash-stat-card__value { font-size: 1.28rem; }
  .admin-modal { padding: 0.65rem; }
  .admin-modal__card { padding: 0.95rem 1rem; border-radius: 14px; }
  .admin-modal__actions {
    grid-template-columns: 1fr;
  }
  .admin-modal__actions .btn[type="submit"] {
    order: -1;
  }
  .page-contact .btn-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .page-contact .btn-row .btn {
    width: 100%;
    justify-content: center;
  }
  .simple-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .brand__logo { width: 36px; height: 36px; border-radius: 50%; }
  .brand__name { font-size: 0.9rem; }
  .brand__sub { font-size: 0.64rem; }
  .bottom-nav__label { font-size: 0.64rem; }
  .bottom-nav__icon { width: 18px; height: 18px; }
  .btn { font-size: 0.84rem; padding: 0.58rem 0.95rem; }
  .footer__grid { gap: 0.7rem; }
  .footer__col,
  .footer__col + .footer__col { padding: 0.75rem 0.65rem; }
}

/* --------------------------------------------------------------------------
   6. मोठे डेस्कटॉप
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root { --container: 1200px; }
}

@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* --------------------------------------------------------------------------
   7. उंच-पण-कमी स्क्रीन (लँडस्केप फोन)
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0; --bottom-nav-h: 0px; }
}

/* --------------------------------------------------------------------------
   8. टच उपकरणे व उच्च-कॉन्ट्रास्ट
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .menu__link:hover { background: none; }
  .card--hover:hover { transform: none; }
  .timeline > li:hover { transform: none; }
  .btn:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --line: #c9ab7c;
    --ink-muted: #5d4b39;
  }
  .card, .notice, .stat { border-width: 2px; }
  .menu__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--maroon-700); }
}

@media (prefers-color-scheme: dark) {
  .map-placeholder { background: repeating-linear-gradient(45deg, #f7f0e2 0 14px, #f2e8d6 14px 28px); }
}