/*
 * Pahadi Pathshala shared modal behavior layer.
 *
 * Owns only global modal mechanics: viewport overlay, dim/blur backdrop,
 * stacking, background scroll lock, and mobile dialog geometry. Individual
 * pages own the modal's study/content styling.
 *
 * Minimal markup:
 *   <div class="shared-modal-overlay" id="example-modal" data-shared-modal aria-hidden="true">
 *     <section class="shared-modal-dialog" data-shared-modal-dialog role="dialog" aria-modal="true">
 *       ...
 *       <button type="button" data-shared-modal-close>Close</button>
 *     </section>
 *   </div>
 *
 * Optional zero-JS page wiring:
 *   <button type="button" data-shared-modal-open="example-modal">Open</button>
 * Add data-shared-modal-auto to the overlay when no page-specific controller
 * needs to configure history/content hooks.
 */

:root {
  --shared-modal-z: 5000;
  --shared-modal-backdrop-bg: rgba(15, 23, 42, 0.66);
  --shared-modal-backdrop-blur: 14px;
  --shared-modal-backdrop-saturate: 0.72;
  --shared-modal-backdrop-brightness: 0.72;
  --shared-modal-gutter: clamp(10px, 2vw, 24px);
}

html.dark {
  --shared-modal-backdrop-bg: rgba(2, 6, 12, 0.78);
  --shared-modal-backdrop-saturate: 0.62;
  --shared-modal-backdrop-brightness: 0.58;
}

.shared-modal-overlay,
[data-shared-modal] {
  position: fixed;
  inset: 0;
  z-index: var(--shared-modal-z);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--shared-modal-gutter);
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--shared-modal-backdrop-bg);
  -webkit-backdrop-filter:
    blur(var(--shared-modal-backdrop-blur))
    saturate(var(--shared-modal-backdrop-saturate))
    brightness(var(--shared-modal-backdrop-brightness));
  backdrop-filter:
    blur(var(--shared-modal-backdrop-blur))
    saturate(var(--shared-modal-backdrop-saturate))
    brightness(var(--shared-modal-backdrop-brightness));
}

.shared-modal-overlay.is-open,
.shared-modal-overlay.open,
[data-shared-modal].is-open,
[data-shared-modal].open {
  display: flex;
}

.shared-modal-dialog,
[data-shared-modal-dialog] {
  position: relative;
  max-width: 100%;
  max-height: calc(100dvh - (2 * var(--shared-modal-gutter)));
  overscroll-behavior: contain;
}

html.shared-modal-open,
body.shared-modal-locked {
  overscroll-behavior: none;
}

/* Strong fallback for engines that cannot blur the backdrop. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shared-modal-overlay,
  [data-shared-modal] {
    background: rgba(15, 23, 42, 0.88);
  }
  html.dark .shared-modal-overlay,
  html.dark [data-shared-modal] {
    background: rgba(0, 0, 0, 0.9);
  }
}

@media (max-width: 640px) {
  :root {
    --shared-modal-gutter: 0px;
  }

  .shared-modal-overlay,
  [data-shared-modal] {
    align-items: stretch;
  }

  .shared-modal-dialog,
  [data-shared-modal-dialog] {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shared-modal-overlay,
  [data-shared-modal],
  .shared-modal-dialog,
  [data-shared-modal-dialog] {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}