/* ==========================================================================
   Uptown HQ · public web layout
   Complements app.css (tokens + components). app.css was authored for fixed
   390px phone frames; this file adds the responsive PAGE shell: header, hero,
   grids, footer. Same tokens, no new palette.
   ========================================================================== */

body { background: var(--cream); }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 241, 239, .88);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 560px) { .site-nav a.nav-hide-sm { display: none; } }
/* Keep the header from crowding on small phones */
@media (max-width: 430px) {
  .site-header__in { height: 60px; }
  .brand__logo { width: 122px; height: 35px; }
  .site-nav { gap: 12px; }
}

/* ---------- Hero ---------- */
/* Vertical-only padding: never clobber .wrap's horizontal inset (both are single-class
   selectors, so a `padding:` shorthand here would zero the left/right gap -> text to the edge). */
.hero { padding-top: 56px; padding-bottom: 34px; text-align: center; }
.hero .h1 { font-size: clamp(30px, 6vw, 46px); }
.hero__sub { max-width: 560px; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.hero__rule { width: 54px; height: 2px; background: var(--blush); border: 0; margin: 22px auto 0; }

/* Compact intro shown only in the embedded (WordPress) build, so the events widget
   opens with a heading + breathing room instead of butting the host header. */
.embed-intro { padding-top: 30px; padding-bottom: 10px; }
.embed-intro .h1 { font-size: clamp(26px, 5.2vw, 34px); margin-top: 2px; }
.embed-intro__sub { max-width: 620px; margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Section heads ---------- */
.section { padding-top: 8px; padding-bottom: 64px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.section__head h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.section__count { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }

/* ---------- Listing filters ----------
   Chips come from app.css (.chips/.chip, with the aria-pressed active state); this
   only lays the facet rows out and labels them. */
.filters { margin: -6px 0 24px; }
.filters__group + .filters__group { margin-top: 12px; }
.filters__label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.filters__clear {
  margin-top: 12px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--blush-ink); text-decoration: underline;
}
.linkish {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--blush-ink); text-decoration: underline;
}

/* ---------- Event grid ---------- */
.event-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.event-grid > .empty { grid-column: 1 / -1; }
@media (min-width: 620px) { .event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .event-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card becomes a full clickable link on the web (component styling stays in app.css) */
a.event-card { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.event-card__cover { aspect-ratio: 4 / 5; }
@media (min-width: 620px) { .event-card__cover { aspect-ratio: 3 / 4; } }

/* ---------- Detail page ---------- */
.detail { padding-top: 30px; padding-bottom: 90px; }
.detail__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .detail__grid { grid-template-columns: 1.4fr 1fr; align-items: start; gap: 40px; } }
.detail__cover { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); aspect-ratio: 4 / 5; object-fit: cover; background: var(--cream-deep); }
.detail__aside { position: sticky; top: 92px; }
.detail__body p { margin-bottom: 14px; }
.session-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.session-opt small { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--cream-deep); padding: 34px 0; }
.site-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer small { color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; }

/* ---------- States ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.skeleton { border-radius: var(--r-lg); background: linear-gradient(100deg, var(--cream-deep) 30%, var(--blush-soft) 50%, var(--cream-deep) 70%); background-size: 200% 100%; animation: sk 1.3s infinite; aspect-ratio: 4/5; }
@keyframes sk { to { background-position: -200% 0; } }

/* Modal (RSVP) */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; justify-content: center; background: rgba(41, 50, 63, .5); }
.modal.is-open { display: flex; }
@media (min-width: 620px) { .modal { align-items: center; } }
.modal__panel { width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; background: var(--cream); border-radius: var(--r-lg) var(--r-lg) 0 0; }
@media (min-width: 620px) { .modal__panel { border-radius: var(--r-lg); } }
.modal__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--cream); border-bottom: 1px solid var(--line); }

/* ==========================================================================
   App-like mobile UX (PWA): sticky bottom dock, slide-up sheet, safe areas
   ========================================================================== */
:root { --dock-h: 78px; }
body { -webkit-tap-highlight-color: transparent; }
@supports (-webkit-touch-callout: none) { .screen-body, main { -webkit-overflow-scrolling: touch; } }

/* Sticky bottom action bar on the event detail page (mobile only) */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 241, 239, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.dock .action-bar__price { white-space: nowrap; }
.dock .btn { min-height: 50px; }

/* Slide-up bottom sheet */
.modal__panel--sheet { animation: sheet-up .26s cubic-bezier(.22,.61,.36,1); padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal { animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Give the modal a grab handle on mobile */
@media (max-width: 619.98px) {
  .modal__panel { position: relative; }
  .modal__panel::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 3px; background: var(--line-strong); z-index: 2;
  }
}

/* Card press feedback (feels native) */
a.event-card:active { transform: scale(.99); }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* Detail cover: cap height on mobile so the fold shows content, not just the flyer */
@media (max-width: 899.98px) { .detail__cover { max-height: 62vh; } }