/* --- Modal layout & stacking --- */
.post-modal { position: fixed; inset: 0; z-index: 2147483647; }
.post-modal[aria-hidden="true"] { display: none; }
.post-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }

/* Desktop/tablet: centered dialog with internal scroll */
.post-modal__dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 32px));
  max-height: 90vh;
  background: var(--modal-bg, #fff);
  color: var(--modal-text, #111);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* contain the scrolling area */
}

/* Content blocks */
.post-modal__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* KEY for scrolling to work */
  flex: 1;
  min-height: 0;
}

/* Close button: always visible & tappable */
.post-modal__close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: rgba(255,255,255,.95);
  border: 0; border-radius: 9999px;
  font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--modal-text, #111);
  z-index: 3; /* sit above content */
}

/* Titles & meta (force readable colors) */
.post-modal__title { margin: 0; color: var(--modal-text, #111) !important; }
.post-modal__meta  { font-size: 14px; color: var(--modal-muted, #6b7280) !important; }

/* SCROLLABLE AREA (the body) */
.post-modal__body {
  flex: 1;                /* fill remaining height */
  min-height: 0;          /* allow shrinking inside flex parent */
  overflow-y: auto;       /* enable vertical scroll */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  touch-action: pan-y;
  color: var(--modal-text, #111) !important;
  overscroll-behavior: contain;      /* stop scroll chaining */
}

/* Typical post content */
.post-modal__body p,
.post-modal__body li,
.post-modal__body h1,
.post-modal__body h2,
.post-modal__body h3,
.post-modal__body h4,
.post-modal__body h5,
.post-modal__body h6 { color: var(--modal-text, #111) !important; }

.post-modal__body a {
  color: var(--modal-link, #0d6efd) !important;
  text-decoration: underline;
}

.post-modal__body img,
.post-modal__body iframe,
.post-modal__body video { max-width: 100%; height: auto; }

/* Prevent background page from scrolling */
body.modal-open { overflow: hidden; }

/* ===== Mobile responsiveness ===== */
@media (max-width: 239px) {
  /* Fill the screen between safe-area insets (notch/gesture bars) */
  .post-modal__dialog {
    position: fixed;
    inset: calc(env(safe-area-inset-top, 0) + 8px)
           8px
           calc(env(safe-area-inset-bottom, 0) + 8px)
           8px;
    transform: none; left: auto; top: auto;
    width: auto; max-height: none;  /* height controlled by inset */
    display: flex; flex-direction: column;
    border-radius: 12px;
  }

  .post-modal__content { padding: 16px; }

  /* Bigger close target on touch and keep it in-bounds */
  .post-modal__close {
    top: 6px; right: 6px;
    width: 44px; height: 44px; font-size: 28px;
    background: rgba(255,255,255,.97);
  }
}

/* Strong override in case another stylesheet fights us */
.post-modal .post-modal__body { overflow-y: auto !important; }