/* "Будуймо спільноту разом" (instagram-prompt.js): a real dialog. Desktop (≥ 768 px) centred, ~440 px; phones a bottom
   sheet (top corners --r-lg, handle, ≤ 60 % of the screen, safe area). Navy head with the white Instagram symbol, white
   body, full-width navy button. Backdrop navy at 45 %, no blur. Animation ≤ 250 ms, none with reduced motion. */
.ig-dialog {
  width: min(440px, 100% - 2 * var(--gutter)); max-width: none; max-height: min(90dvh, 640px); margin: auto; padding: 0;
  border: 0; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); overflow: hidden;
}
.ig-dialog[open] { display: flex; flex-direction: column; animation: ig-in .2s ease-out; }
.ig-dialog::backdrop { background: rgba(15, 36, 56, .45); animation: ig-fade .2s ease-out; }
html.ig-lock, html.ig-lock body { overflow: hidden; } /* no page scroll behind the open dialog */

.ig-dialog__head {
  position: relative; display: grid; justify-items: start; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-8) var(--sp-5) var(--sp-5); background: var(--c-navy-surface); color: var(--c-surface);
}
.ig-dialog__handle { display: none; }
.ig-dialog__icon { display: block; color: var(--c-surface); }
.ig-dialog__title {
  margin: 0; color: var(--c-surface); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}
.ig-dialog__close {
  position: absolute; top: var(--sp-2); right: var(--sp-2); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-surface);
  font: var(--fw-semibold) var(--fs-xl)/1 var(--font); cursor: pointer;
}
.ig-dialog__close:hover { background: var(--c-navy-2); }

.ig-dialog__body { display: grid; gap: var(--sp-4); min-height: 0; padding: var(--sp-5); overflow-y: auto; }
.ig-dialog__text { margin: 0; font-size: var(--fs-base); line-height: var(--lh-body); }
.ig-dialog__follow { width: 100%; min-height: 52px; font-size: var(--fs-lg); }
.ig-dialog__ideas { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; }
.ig-dialog__close:focus-visible, .ig-dialog a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Phones: bottom sheet */
@media (max-width: 767px) {
  .ig-dialog {
    width: 100%; max-height: 60dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .ig-dialog[open] { animation-name: ig-up; }
  .ig-dialog__head { padding-top: var(--sp-5); touch-action: none; } /* swipe down to close (instagram-prompt.js) */
  .ig-dialog__handle {
    display: block; justify-self: center; width: 40px; height: 4px; margin: calc(-1 * var(--sp-2)) 0 var(--sp-1);
    border-radius: var(--r-full); background: var(--c-mist);
  }
  .ig-dialog__title { font-size: var(--fs-xl); }
  .ig-dialog__body { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
  .ig-dialog.is-dragging { animation: none; transition: none; }
  .ig-dialog.is-snapping { transition: transform .2s ease-out; }
}

@keyframes ig-in { from { opacity: 0; transform: translateY(var(--sp-3)) scale(.98); } }
@keyframes ig-up { from { transform: translateY(100%); } }
@keyframes ig-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ig-dialog[open], .ig-dialog::backdrop { animation: none; }
  .ig-dialog.is-snapping { transition: none; }
}
@media print { .ig-dialog { display: none; } }