/* ==========================================================================
   Shared inner-page components — parties, field trips, learn to skate,
   snack bar, shop, about. Anything used by two or more of them lives here.
   ========================================================================== */

/* Page-header glow for the general inner pages. */
.phead { --phead-glow: radial-gradient(80% 90% at 12% 0%, rgba(255,46,107,.20), transparent 62%),
                       radial-gradient(70% 80% at 88% 30%, rgba(77,140,255,.14), transparent 60%); }

/* Decorative lights, same vocabulary as the home hero. */
.pulse {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .45;
  animation: pulse 7s ease-in-out infinite;
}
.pulse--1 { width: 300px; height: 300px; background: var(--hot); top: -20%; left: 6%; }
.pulse--2 { width: 240px; height: 240px; background: var(--electric); top: 30%; right: 8%; animation-delay: -3s; }

  /* Opacity only — deliberately not scale.
     Animating a blurred element's geometry forces the browser to re-render a
     46px blur every frame, which is what caused the scroll flicker. The fix was
     will-change, but that pins a large rasterised texture per pulse, and iOS
     Safari has a hard ceiling on composited layers — past it, it simply stops
     animating things, which is what killed the ticker on iPhone.
     Holding the geometry still means the blur rasterises once anyway, so the
     opacity fade is pure compositing with no layer pinned open. */
@keyframes pulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: .55; }
}

/* --- Feature grid --------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.15rem;
}
.feature {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--r);
  padding: 1.6rem 1.4rem;
}
.feature--dark {
  background: var(--ink-3);
  border-color: var(--ink-line);
}
.feature__icon {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--hot);
  margin-bottom: .8rem;
}
/* Half and half down the grid — rose, then neon blue. */
.feature:nth-child(even) .feature__icon { color: var(--neon-blue); }
.feature h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.feature p { font-size: .95rem; color: var(--on-light-mute); }
.feature--dark p { color: var(--on-dark-mute); }

/* --- Numbered steps ------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
  counter-reset: step;
}
.step { position: relative; padding-top: .5rem; }
.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--hot);
  color: #fff;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.25rem;
  margin-bottom: .9rem;
}
.step:nth-child(even) .step__n { background: var(--neon-blue); color: var(--on-light); }
.step h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.step p { font-size: .95rem; color: var(--on-light-mute); }
.steps--dark .step p { color: var(--on-dark-mute); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: 0; max-width: 60rem; }
.faq__item {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--ink-line);
}
.faq--light .faq__item { border-bottom-color: var(--cream-line); }
.faq__item:first-child { border-top: 1px solid var(--ink-line); }
.faq--light .faq__item:first-child { border-top-color: var(--cream-line); }

.faq dt {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.015em;
  margin-bottom: .45rem;
}
.faq dd {
  margin: 0;
  max-width: 64ch;
  color: var(--on-dark-mute);
}
.faq--light dd { color: var(--on-light-mute); }
/* A multi-paragraph answer needs its own spacing — the reset zeroes margins,
   so without this the paragraphs run together into one block. */
.faq dd p + p { margin-top: .7rem; }

/* --- Aside card — walled-off third-party or warning block ----------------- */
.aside-card {
  max-width: 46rem;
  background: var(--ink-3);
  border: 1px solid var(--ink-line);
  border-left: 5px solid var(--electric);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
/* Stacked straight after a step list it had no gap at all — the reset zeroes
   margins and neither component sets its own. */
.steps + .aside-card,
.ladder + .aside-card { margin-top: 2rem; }

.aside-card--warn { border-left-color: var(--amber); }
.aside-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: .8rem 0 1rem; }
.aside-card p { color: var(--on-dark-mute); max-width: 58ch; }
.aside-card__sep { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ink-line); }
.aside-card .btn { margin-top: 1.5rem; }

/* --- Chip list ------------------------------------------------------------ */
.chip-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-line);
  background: var(--ink-3);
  font-size: .95rem;
}
.section--light .chip { background: #fff; border-color: var(--cream-line); }
.chip-list--lg .chip {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: .65rem 1.25rem;
}

/* --- Class times (learn to skate) ----------------------------------------- */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}
.class-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-top: 5px solid var(--hot);
  border-radius: var(--r);
  padding: 1.35rem 1.3rem;
}
.class-card:nth-child(even) { border-top-color: var(--neon-blue); }
.class-card__day {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-light-mute);
  margin-bottom: .4rem;
}
.class-card h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.class-card__time {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.class-card__price { font-size: .9rem; color: var(--on-light-mute); }
.class-card__price strong { color: var(--on-light); font-family: var(--display); }
.class-grid__note { margin-top: 1.5rem; font-size: .95rem; color: var(--on-light-mute); }

/* --- Snack bar menu ------------------------------------------------------- */
.menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 860px) { .menu-layout { grid-template-columns: 1fr; } }

.menu-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
}
.menu { width: 100%; border-collapse: collapse; }
.menu thead th {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-light-mute);
  text-align: right;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--cream-2);
}
.menu thead th:first-child { text-align: left; }
.menu tbody th {
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--cream-2);
}
.menu tbody td {
  text-align: right;
  padding: .8rem 0 .8rem 1.25rem;
  border-bottom: 1px solid var(--cream-2);
  font-family: var(--display);
  font-weight: 800;
  white-space: nowrap;
}
.menu tbody td:last-child { color: var(--on-light-mute); }
.menu tbody tr:last-child th,
.menu tbody tr:last-child td { border-bottom: 0; }
.menu__sub {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: .8rem;
  color: var(--on-light-mute);
}

.dips { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px solid var(--cream-2); }
.dips__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-light-mute);
  margin-bottom: .7rem;
}
.dips__list { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .95rem; }
.dips__list li { display: flex; align-items: center; gap: .5rem; }
.dip {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  flex: 0 0 auto;
}
.dip--buttercream { background: #F6EBD2; }
.dip--cheese      { background: #F2B33D; }
.dip--mustard     { background: #E3C11B; }
.dip--brown       { background: #8A5A2B; }

.menu-video { margin: 0; }
.menu-video__el {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--cream-line);
  background: var(--ink-2);
  display: block;
}
.menu-video figcaption {
  margin-top: .7rem;
  font-size: .85rem;
  color: var(--on-light-mute);
}

/* --- About: visit cards + prose ------------------------------------------- */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.15rem;
}
.visit-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-top: 5px solid var(--hot);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem;
}
.visit-card:nth-child(even) { border-top-color: var(--neon-blue); }
.visit-card h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.visit-card__lead {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  margin-bottom: .7rem;
}
.visit-card p { color: var(--on-light-mute); font-size: .95rem; }
.visit-card__note { margin-top: .8rem; font-size: .88rem; }
.visit-card .btn { margin-top: 1.2rem; }

.prose { max-width: 62ch; }
.prose p { color: var(--on-dark-mute); margin-bottom: 1.1rem; }
.prose .btn { margin-top: .8rem; }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Class ladder (skating school) ----------------------------------------
   An ordered list because the classes genuinely build on each other — a skater
   moves up it rather than picking from a menu.
   -------------------------------------------------------------------------- */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.15rem;
  counter-reset: rung;
}
.ladder__step {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--ink-line);
  border-top: 4px solid var(--hot);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.4rem;
  counter-increment: rung;
}
.ladder__step:nth-child(even) { border-top-color: var(--neon-blue); }
.ladder__step::before {
  content: counter(rung);
  position: absolute;
  top: 1.2rem; right: 1.3rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--on-dark);
  opacity: .12;
}
.ladder__when {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .5rem;
}
.ladder__step h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.ladder__alt { font-family: var(--body); font-weight: 400; font-size: .95rem; opacity: .7; }
.ladder__step p { color: var(--on-dark-mute); font-size: .95rem; }
.ladder__gate {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--ink-line);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber) !important;
}

/* --- Coaches -------------------------------------------------------------- */
.coaches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}
.coach {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.coach__body { padding: 1.75rem 1.6rem; }
/* No coach photography exists, so the card leads on the name and the
   credential line rather than framing an empty slot. */
.coach { border-top: 5px solid var(--hot); }
.coach:nth-child(even) { border-top-color: var(--neon-blue); }
.coach__body h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.coach__role {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hot);
  margin-bottom: .9rem;
}
.coach__body p { color: var(--on-light-mute); font-size: .95rem; margin-bottom: .8rem; }
.coach__body p:last-child { margin-bottom: 0; }

/* --- Pull quote ----------------------------------------------------------- */
/* A sentence that introduces the quotation after it. It takes the spacing the
   pullquote would normally have had, and pulls the quote up close, so the two
   read as one thought rather than two stranded blocks. */
.lead-in {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 58ch;
  color: var(--on-dark-mute);
}
.section--light .lead-in { color: var(--on-light-mute); }
.lead-in + .pullquote { margin-top: 1rem; }

.pullquote {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 4px solid var(--hot);
  max-width: 42rem;
}
.pullquote p {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: .7rem;
}
.pullquote cite {
  font-style: normal;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-light-mute);
}

/* --- School nights -------------------------------------------------------- */
.schools__list { margin-bottom: 1.5rem; }
.schools__note {
  font-size: .95rem;
  color: var(--on-light-mute);
  max-width: 56ch;
}
.schools__note a { color: var(--hot); text-underline-offset: 3px; }

/* Food photography beside a menu table. */
.menu-shot { margin: 0; align-self: start; }
.menu-shot img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--cream-line);
}

/* Two blacklight clips side by side. */
.glowpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; max-width: 24rem; }
@media (max-width: 760px) { .glowpair { max-width: 20rem; } }

/* --- Menu page -------------------------------------------------------------
   One section holding every group, so the big inter-section padding stops
   stacking between categories.
   -------------------------------------------------------------------------- */
.menugroup + .menugroup {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--cream-line);
}
.menugroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-bottom: 1.5rem;
}
.menugroup__head h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); }
.menugroup__head p { max-width: 46ch; color: var(--on-light-mute); font-size: .95rem; }
/* The drinks and sweets images are whole designed panels — heading, logo
   and product — so they are shown complete rather than cropped. */
.menu-shot img { aspect-ratio: auto; object-fit: contain; }

/* --- Menu sections ---------------------------------------------------------
   Each category gets its own band, alternating cream with a soft blue and rose
   wash — the same rose/neon-blue rhythm the rest of the site uses, at a tint
   light enough to keep the tables legible. Waves carry one into the next; the
   component is the one already used on the home page.
   -------------------------------------------------------------------------- */
.section--menu {
  position: relative;
  /* Tighter than a standard section: five of these in a row at full padding
     was the "too much space between the categories". */
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}
.menu-sec--blue { background: #EDF2FF; }
.menu-sec--rose { background: #FFF0F4; }


.section--menu .menugroup + .menugroup { margin-top: 0; padding-top: 0; border-top: 0; }
.section--menu .menugroup__head { padding-top: clamp(.5rem, 2vw, 1.5rem); }

/* --- Party rooms -----------------------------------------------------------
   Each room shown twice — lit and under blacklight — so the pair reads as one
   room rather than six unrelated clips.
   -------------------------------------------------------------------------- */
.roomgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.room__name {
  font-size: 1.15rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ink-line);
}
.room:nth-child(1) .room__name { border-bottom-color: var(--hot); }
.room:nth-child(2) .room__name { border-bottom-color: var(--neon-blue); }
.room:nth-child(3) .room__name { border-bottom-color: var(--amber); }
.room__clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }