/* ==========================================================================
   PAGE HERO ART — the cash desk (/sparks) banner for the other pages.
   views/partials/page-hero.ejs puts .ph-art between the topbar and <main> (map: src/page-heroes.js).
   It is a body flex item pulled up under the transparent topbar with negative margins and taking no room in the
   flow: the page's own head (eyebrow, h1, lede, actions) is painted on top of it, nothing in the views changes.
   No positioning/z-index/transform/opacity on purpose (any of them makes a stacking context that would paint over
   the page): flex items paint atomically in order, so <main> always sits over the art.
   ========================================================================== */
body {
  --ph-h: clamp(420px, 40vw, 600px);   /* art height, the topbar included */
  --ph-top: calc(var(--nav-h) + env(safe-area-inset-top));
  --ph-pt: clamp(56px, 7vw, 104px);    /* the head of the page sits lower than usual, over the art */
}
.ph-art {
  display: grid;
  flex: none;
  height: var(--ph-h);
  margin-top: calc(-1 * var(--ph-top));
  margin-bottom: calc(var(--ph-top) - var(--ph-h));
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.ph-art > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.ph-art picture { display: block; }
.ph-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.ph-art img.is-missing { visibility: hidden; }
/* the cash desk scrim (top → page) plus a left shade under the headline */
.ph-scrim {
  background:
    linear-gradient(90deg, rgba(7, 6, 10, 0.74) 0%, rgba(7, 6, 10, 0.38) 34%, rgba(7, 6, 10, 0) 64%),
    linear-gradient(180deg, rgba(7, 6, 10, 0.2) 0%, rgba(7, 6, 10, 0.5) 58%, rgba(7, 6, 10, 0.86) 84%, var(--bg) 100%);
}

/* the page under the art: its head moves down a little, like the text in the cash desk hero */
.ph-art + main { padding-top: var(--ph-pt); }

/* topbar over the art: the cash desk look until the page is scrolled */
body:has(> .ph-art) .topbar:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(7, 6, 10, 0.62), transparent);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* phones: the art is a narrow slice of a wide picture — keep the subject (right side) in view, shade evenly */
@media (max-width: 700px) {
  body { --ph-h: 460px; --ph-pt: 40px; }
  .ph-art img { object-position: 70% 50%; }
  .ph-scrim {
    background: linear-gradient(180deg, rgba(7, 6, 10, 0.35) 0%, rgba(7, 6, 10, 0.62) 50%, rgba(7, 6, 10, 0.9) 82%, var(--bg) 100%);
  }
}

/* the room password door (views/gate.ejs) */
.gate-form { width: min(100%, 520px); }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }
@media (max-width: 700px) { .gate-actions .btn { flex: 1 1 auto; justify-content: center; } }