/* ============================================================
   Casa Tequila Prime — Instagram Preview Dialog (reusable)
   Sitewide, on all customer-facing pages. Mirrors
   assets/css/happy-hour-promo.css's architecture — same shared
   .promo-dialog* chrome (backdrop, centered panel, close button,
   inner scroll container), intentionally duplicated there rather
   than shared from a third file so either stays independently
   deletable. Only .ig-prompt-* below is unique to this one.

   Opens two ways (see assets/js/instagram-prompt.js): automatically,
   at most once per session and gated by the same rules as Happy
   Hour, OR manually, any time, via .ig-preview-trigger — the small
   "Instagram preview" control styled at the bottom of this file,
   placed next to the real Instagram link in the footer and mobile
   nav. The manual path is the reason this dialog can appear even on
   a page load where Happy Hour already claimed the session's one
   automatic slot.

   TO DISABLE without deleting anything: set ENABLED to false in
   assets/js/instagram-prompt.js.
   TO REMOVE ENTIRELY: delete this file, assets/js/instagram-prompt.js,
   the <link>/<script> tags that reference them, the #instagram-prompt
   markup block, and every .ig-preview-trigger control, on every
   customer-facing HTML page.

   Uses only existing design tokens from style.css (colors, fonts,
   easing, button classes) — no new tokens added.
   ============================================================ */

/* --- Shared dialog chrome — see assets/css/happy-hour-promo.css for
   the canonical copy of these rules and why they're duplicated here
   instead of factored out. Fixed 2026-10-04: this file's own header
   comment above has claimed this duplication since it was first
   written, but the rules themselves were never actually copied in —
   every page except happy-hour.html happened to still look correct
   because happy-hour-promo.css (which genuinely has these rules) was
   ALSO always loaded on the same page, so .promo-dialog's styling
   came from THAT file regardless of which dialog it was applied to.
   Removing happy-hour-promo.css from happy-hour.html (it was dead
   weight there — that dialog never renders on its own page) exposed
   the gap: the Instagram dialog rendered completely unstyled on that
   one page. Caught via a real under-throttle test before shipping,
   not from a visual pass. */
body.promo-dialog-open { overflow: hidden; }

.promo-dialog {
  position: fixed;
  inset: 0;
  z-index: 9500; /* below the photo lightbox (9600) — the two can never be open together anyway, see promo-coordinator.js isBlocked() */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.promo-dialog[hidden] { display: none; }

.promo-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,8,6,.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}

.promo-dialog-panel {
  position: relative;
  z-index: 1;
  width: min(600px, calc(100vw - 40px));
  max-height: min(680px, 90vh);
  max-height: min(680px, 90dvh);
  background: var(--black-2);
  border: 1px solid var(--border-hover);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(224,120,24,.1);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.promo-dialog.is-open .promo-dialog-backdrop { opacity: 1; }
.promo-dialog.is-open .promo-dialog-panel { opacity: 1; transform: translateY(0) scale(1); }

.promo-dialog-close {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 14px; right: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  color: var(--ivory);
  background: rgba(8,8,6,.45);
  border: 1px solid rgba(245,240,232,.3); border-radius: 50%;
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.promo-dialog-close:hover,
.promo-dialog-close:focus-visible { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }
.promo-dialog-close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* The actual scrolling container — everything that can grow lives in
   here, NOT in .promo-dialog-panel itself, so the close button above
   (a sibling, not a child) never moves with it. */
.promo-dialog-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 600px) {
  .promo-dialog { padding: 14px; }
  .promo-dialog-panel { width: 100%; max-height: min(600px, 92dvh); }
  .promo-dialog-close { top: 10px; right: 10px; width: 32px; height: 32px; }
  .promo-dialog-close svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-dialog-backdrop,
  .promo-dialog-panel { transition: opacity .01s linear; }
  .promo-dialog-panel { transform: none; }
}

/* Everything sits in this padded wrapper — unlike Happy Hour, this
   dialog has no full-bleed hero photo above it (the 3-photo grid
   below IS its photo-led element, recognizable as "an Instagram
   feed" in a way a single hero photo wouldn't be), so the padding
   starts right at the top of .promo-dialog-scroll. */
.ig-prompt-content {
  padding: 22px 28px 26px;
  text-align: center;
}

.ig-prompt-header {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 14px;
  padding-right: 28px; /* clears the close button */
}
.ig-prompt-header svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  stroke: var(--gold);
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ig-prompt-handle {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
}

.ig-prompt-body {
  font-family: var(--font-body);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ivory-dim);
  margin: 0 0 16px;
}

/* Small preview of real photos — not a live embed, no Instagram
   script loaded. Three already-used site images, cropped to a square
   via object-fit so this stays a quick visual cue, not a gallery. */
.ig-prompt-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 18px;
}
.ig-prompt-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}

.ig-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ig-prompt-actions .btn { flex-shrink: 0; }

.ig-prompt-later {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(133,124,109,.4);
  transition: color .3s ease, text-decoration-color .3s ease;
}
.ig-prompt-later:hover,
.ig-prompt-later:focus-visible {
  color: var(--ivory-dim);
  text-decoration-color: var(--ivory-dim);
}

@media (max-width: 600px) {
  .ig-prompt-content { padding: 18px 20px 20px; }
  .ig-prompt-header svg { width: 18px; height: 18px; }
  .ig-prompt-handle { font-size: .74rem; }
  .ig-prompt-preview { gap: 6px; margin-bottom: 14px; }
}

/* --- Manual trigger: "Instagram preview" control -----------------
   Sits beside the existing, unmodified Instagram link in the footer
   and the mobile nav's follow block (see generate-promos.js). Text,
   not an icon — deliberately distinct from the real Instagram link
   right next to it, so the two are never visually confusable: one
   leaves the site (real link), one opens this dialog (preview). */
.ig-preview-trigger {
  font-family: var(--font-body);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201,168,76,.35);
  transition: color .3s ease, text-decoration-color .3s ease;
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center;
  min-height: 44px; /* tap target, even though the visible text is small */
}
.ig-preview-trigger:hover,
.ig-preview-trigger:focus-visible {
  color: var(--gold);
  text-decoration-color: var(--gold);
}