/* ============================================================
   Casa Tequila Prime — Happy Hour Promo Dialog (reusable)
   Sitewide, on every customer-facing page except happy-hour.html
   itself. A real dialog now: subtle backdrop, centered panel,
   560-640px on desktop, fits within the screen with side margins on
   phone. Scrolls INSIDE the panel if content is taller than available
   height — the close button sits outside that scroll area (see the
   markup: it's a sibling of .promo-dialog-scroll, not a child), so
   it's never scrolled out of reach.

   .promo-dialog* classes are the shared dialog chrome (backdrop,
   panel, close button, scroll container) — intentionally duplicated
   in assets/css/instagram-prompt.css rather than shared from a third
   file, so either promo stays independently deletable per its own
   "TO REMOVE ENTIRELY" note, matching this project's existing
   self-contained-file convention. Only .hh-promo-* below is unique
   to this one.

   TO DISABLE without deleting anything: set ENABLED to false in
   assets/js/happy-hour-promo.js.
   TO REMOVE ENTIRELY: delete this file, assets/js/happy-hour-promo.js,
   the <link>/<script> tags that reference them, and the
   #happy-hour-promo markup block — present on every customer-facing
   HTML page except happy-hour.html itself.

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

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 (photo +
   text) 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;
}

/* Shallow photo strip — a relevant photo without the dialog reading
   as a full hero. */
.hh-promo-media {
  position: relative;
  aspect-ratio: 16 / 6;
  overflow: hidden;
}
.hh-promo-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hh-promo-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--black-2) 0%, rgba(8,8,6,.15) 55%, transparent 100%);
}

.hh-promo-content {
  padding: 22px 28px 26px;
  text-align: center;
}

.hh-promo-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.3rem);
  line-height: 1.1;
  color: var(--ivory);
  margin: 0 0 8px;
}

.hh-promo-time {
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 12px;
}

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

/* Detroit Lions line — permanent, not schedule-driven (see the Lions
   supporting-copy comment above the markup on each page). Small and
   secondary to the core time/description, not a competing headline. */
.hh-promo-lions {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 20px;
}

.hh-promo-cta.btn {
  width: 100%;
  justify-content: center;
}

@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; }
  .hh-promo-media { aspect-ratio: 16 / 5; }
  .hh-promo-content { padding: 18px 20px 20px; }
  .hh-promo-headline { font-size: 1.6rem; }
}

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