/* 21+ age check (src/components/AgeGate.astro). Colours and type follow upcoming-events.css. */
html:not(.age-ok) body { overflow: hidden; }
html.age-ok .ag { display: none; }

.ag {
  --ag-gold: #c9a447;
  --ag-ink: #f2ede4;
  --ag-soft: #d9d1c4;
  --ag-muted: #b5ab9c;
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto;
  background: radial-gradient(ellipse at center, #0f0f0fcc 0%, #0a0908f5 70%),
    url('/images/_1920s_prohibition_speakeasy_celebration_1.avif') 50% / cover no-repeat, #0f0f0f;
  color: var(--ag-ink); font-family: Josefin Sans, sans-serif;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity .4s ease;
}
.ag--leaving { opacity: 0; pointer-events: none; }

.ag__panel {
  position: relative; width: 100%; max-width: 520px; padding: 56px 48px 40px; text-align: center;
  background: #0f0f0fe6; border: 1px solid #3a3226; border-radius: 4px;
  box-shadow: 0 30px 80px #000000b3;
  animation: ag-in .6s ease both;
}
/* Inner gold hairline, art deco frame. */
.ag__panel::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid #c9a44766; border-radius: 2px; pointer-events: none;
}
@keyframes ag-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ag__logo { display: block; width: 180px; max-width: 60%; height: auto; margin: 0 auto; }
.ag__rule { display: flex; align-items: center; gap: 14px; margin: 28px auto 28px; max-width: 260px; color: var(--ag-gold); }
.ag__rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ag-gold), transparent); }
.ag__rule i { font-style: normal; font-size: 10px; }

.ag__kicker {
  display: block; margin: 0 0 12px; font-size: 13px; line-height: 1.3; letter-spacing: 4px;
  text-transform: uppercase; color: var(--ag-gold);
}
.ag__title { margin: 0 0 14px; font-family: Playfair Display, serif; font-weight: 400; font-size: 38px; line-height: 1.1; color: var(--ag-ink); }
.ag__text { margin: 0 auto 32px; max-width: 360px; font-size: 16px; line-height: 1.6; color: var(--ag-soft); }

.ag__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ag__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.ag__btn--yes { background: var(--ag-gold); color: #0f0f0f; border: 1px solid var(--ag-gold); }
.ag__btn--yes:hover { background: #ead08a; border-color: #ead08a; }
.ag__btn--no { background: transparent; color: var(--ag-ink); border: 1px solid #5a4e3c; }
.ag__btn--no:hover { border-color: var(--ag-gold); color: var(--ag-gold); }
.ag__btn:focus-visible, .ag__back:focus-visible { outline: 2px solid #ead08a; outline-offset: 3px; }

.ag__back {
  background: none; border: 0; padding: 8px; font-family: inherit; font-size: 14px; letter-spacing: 1px;
  color: var(--ag-gold); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.ag__back:hover { color: #ead08a; }

.ag__fine { margin: 36px 0 0; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ag-muted); }

@media (max-width: 479px) {
  .ag__panel { padding: 44px 24px 32px; }
  .ag__title { font-size: 30px; }
  .ag__actions { flex-direction: column; }
  .ag__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ag, .ag__panel { animation: none; transition: none; }
}