/* YAAZHAI final mobile-only refinements. Desktop styles intentionally untouched. */
@media (max-width: 800px) {
  /* Vision passes: give each card and its action area room to breathe. */
  .pass-grid { gap: 22px !important; }
  .pass-card { padding: 28px 22px 24px !important; }
  .pass-card h3 { line-height: 1.2; margin-bottom: 8px; }
  .pass-benefits { margin-top: 20px !important; margin-bottom: 28px !important; }
  .pass-benefits li { padding-top: 13px !important; padding-bottom: 13px !important; padding-right: 2px; line-height: 1.55; }
  .pass-cta { gap: 12px !important; margin-top: 8px; }
  .pass-cta .btn { min-height: 48px !important; padding: 13px 16px !important; line-height: 1.45 !important; }
  .pass-note { margin-top: 18px !important; line-height: 1.6; }

  /* Mamandur navigation logout: comfortable touch target and clear spacing. */
  .logout { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; padding: 10px 17px !important; margin: 4px 0 4px 8px; line-height: 1.35; white-space: normal; }

  /* Now vs then labels: keep both labels visible within the image frame in EN and Tamil. */
  .recon-slider { overflow: hidden; }
  .recon-label { top: 9px !important; max-width: 47%; box-sizing: border-box; padding: 7px 8px !important; font-size: 8px !important; line-height: 1.3 !important; letter-spacing: .035em !important; white-space: normal !important; overflow-wrap: anywhere; text-align: center; }
  .recon-label.now { left: 8px !important; right: auto !important; }
  .recon-label.past { right: 8px !important; left: auto !important; }
  body.tamil-mode .recon-label { font-size: 9px !important; letter-spacing: 0 !important; }

  /* Kingdom flags: show the complete flag artwork instead of cropping its edges. */
  .ages-flag-wrap { align-items: center !important; gap: 12px !important; padding: 12px !important; }
  .ages-flag { flex: 0 0 100px; width: 100px !important; height: 70px !important; box-sizing: border-box; object-fit: contain !important; object-position: center !important; padding: 3px; background: #fffaf6; border-radius: 8px; }
  .ages-flag-meta { min-width: 0; line-height: 1.5 !important; overflow-wrap: anywhere; }

  /* Photograph viewer: close control stays on-screen; image and caption share the viewport. */
  .gallery-lightbox { padding: 12px !important; align-items: center !important; }
  .gallery-lightbox-inner { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto; overflow-x: hidden; justify-content: flex-start; padding-top: 48px; padding-bottom: 8px; box-sizing: border-box; }
  .gallery-lightbox-close { position: fixed !important; top: max(10px, env(safe-area-inset-top)) !important; right: max(10px, env(safe-area-inset-right)) !important; z-index: 20005 !important; width: 44px !important; height: 44px !important; flex: 0 0 44px; }
  .gallery-lightbox img { max-width: 100% !important; max-height: 42dvh !important; width: auto !important; height: auto !important; object-fit: contain !important; flex: 0 1 auto; border-radius: 12px !important; }
  .gallery-lightbox-nav { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; max-width: calc(50% - 8px); margin: 8px 3px !important; padding: 9px 10px !important; font-size: 12px !important; white-space: normal; }
  .gallery-lightbox-count { margin: 3px 0 5px !important; }
  .gallery-lightbox-caption { max-width: 100% !important; margin-top: 6px !important; padding: 0 4px; font-size: 14px !important; line-height: 1.55 !important; overflow-wrap: anywhere; }
  .gallery-lightbox-hint { max-width: 100%; margin: 7px 0 2px !important; font-size: 11px !important; line-height: 1.5; text-align: center; }

  /* Keep the close/exit controls for excavation and diagram overlays reachable. */
  .cave1-build-close, .cave-build-close,
  .cave1-elevation-close, .cave2-elevation-close, .cave3-diagram-close {
    position: sticky !important; top: 6px !important; z-index: 12020 !important;
    flex: 0 0 44px !important; width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important; margin-left: auto;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 14px rgba(48, 32, 22, .2);
  }
  .cave1-build-top, .cave-build-top { position: sticky !important; top: 0 !important; z-index: 12010 !important; align-items: flex-start !important; gap: 10px !important; padding: 6px 2px 12px !important; background: linear-gradient(180deg, #f8eee5 82%, rgba(248,238,229,.94)); }
  .cave-build-top > div { min-width: 0; }
  .cave-build-top h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
  .cave1-build-modal, .cave-build-modal { padding: 8px !important; }
  .cave1-build-modal.open, .cave-build-modal.open { align-items: flex-start !important; overflow-y: auto !important; }
  .cave1-build-panel, .cave-build-panel { max-height: calc(100dvh - 16px) !important; width: calc(100vw - 16px) !important; overflow: auto !important; padding: 12px !important; }

  /* Cave 1/2/3 model controls: retain only Front Elevation + View in AR.
     The research note below each model remains visible; desktop controls are unchanged. */
  .cave1-3d-info, .cave2-3d-info, .cave3-3d-info,
  .cave1-3d-viewer .model-ui-toggle, .cave2-3d-viewer .model-ui-toggle, .cave3-3d-viewer .model-ui-toggle,
  .cave1-3d-viewer .narration-row, .cave2-3d-viewer .narration-row, .cave3-3d-viewer .narration-row {
    display: none !important;
  }
  .cave1-3d-controls button:not(#c1elevation):not(#c1ar),
  .cave2-3d-controls button:not(#c2elevation):not(#c2ar),
  .cave3-3d-controls button:not(#c3diagram):not(#c3ar) { display: none !important; }
  .cave1-3d-controls, .cave2-3d-controls, .cave3-3d-controls {
    left: 10px !important; right: 10px !important; bottom: 10px !important;
    display: flex !important; flex-wrap: nowrap !important; justify-content: center !important;
    align-items: center; gap: 10px !important; z-index: 5;
  }
  .cave1-3d-controls button, .cave2-3d-controls button, .cave3-3d-controls button {
    display: inline-flex !important; flex: 1 1 0; min-width: 0; min-height: 42px !important;
    align-items: center; justify-content: center; padding: 9px 10px !important;
    font-size: 11px !important; line-height: 1.3 !important; white-space: normal;
  }
  .cave1-3d-note, .cave2-3d-note, .cave3-3d-note { display: block !important; margin-top: 14px !important; padding: 12px 14px; border-radius: 14px; background: rgba(143,93,57,.08); line-height: 1.6 !important; }

  /* Sources & Further Reading launch card: centre its external wording cleanly. */
  .yaazhai-source-launch { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 13px !important; padding: 22px 18px !important; }
  .yaazhai-source-launch .source-mark { margin: 0 auto 2px !important; }
  .yaazhai-source-launch-copy { width: 100%; flex: 0 1 auto !important; text-align: center !important; }
  .yaazhai-source-launch-kicker { letter-spacing: .12em !important; line-height: 1.45 !important; }
  .yaazhai-source-launch h3, .yaazhai-source-launch p { width: 100%; max-width: 100% !important; text-align: center !important; }
  .yaazhai-source-open { justify-self: center !important; align-self: center !important; margin: 2px auto 0 !important; white-space: normal !important; max-width: 100%; }
}

@media (max-width: 420px) {
  .gallery-lightbox img { max-height: 38dvh !important; }
  .gallery-lightbox-nav { font-size: 11px !important; padding: 8px 7px !important; }
  .ages-flag { flex-basis: 88px; width: 88px !important; height: 64px !important; }
  .pass-card { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Latest-request patch: align the NOW ↔ THEN badge and place gallery exit
   below the gallery heading, right aligned. Mobile only; desktop untouched. */
@media (max-width: 800px) {
  .recon-card-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .recon-card-head > div { min-width: 0 !important; width: 100% !important; }
  .recon-card-head .recon-tag {
    display: inline-flex !important;
    align-self: flex-end !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 2px 0 auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    line-height: 1.35 !important;
    letter-spacing: .04em !important;
    font-size: 10px !important;
    padding: 8px 12px !important;
  }
  .gallery-lightbox { align-items: flex-start !important; }
  .gallery-lightbox-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 8px !important;
    max-height: calc(100dvh - 20px) !important;
  }
  .gallery-lightbox-close {
    position: relative !important;
    inset: auto !important;
    align-self: flex-end !important;
    order: -2 !important;
    margin: 0 2px 8px auto !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .gallery-lightbox-nav.gallery-lightbox-prev { order: -1 !important; }
  .gallery-lightbox img { order: 0 !important; }
  .gallery-lightbox-nav.gallery-lightbox-next { order: 1 !important; }
  .gallery-lightbox-count { order: 2 !important; }
  .gallery-lightbox-caption { order: 3 !important; }
  .gallery-lightbox-hint { order: 4 !important; }
}