/*
 * Games carousel component, [myth_games_carousel].
 * See loop/work/T05/vesper-spec.md for the full build spec.
 * Palette hexes only: White #FFFFFF, Charcoal #231F1E, Ink #1C1310,
 * Muted Grey #767676, Gold #D4A94A, Maroon #6E0C01.
 */

.myth-carousel {
  background-color: #231F1E;
  padding-block: 2.5rem;
}

.myth-carousel__inner {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.myth-carousel__heading {
  font-family: "Julius Sans One", sans-serif;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #D4A94A;
  text-align: center;
  margin: 0 0 0.5rem;
}

.myth-carousel__kicker {
  font-family: Karma, serif;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #FFFFFF;
  text-align: center;
  margin: 0 0 1.5rem;
}

/* The region is the flex container for the whole instance: prev arrow,
   viewport, next arrow are direct siblings in that DOM order (keyboard tab
   order), and the `order` values below put them back in the intended visual
   order without touching the DOM. This lets a no-JS user reach every card by
   native tab order too. */
.myth-carousel__region {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* No-JS default: a real horizontal scroll-snap rail of the 11 real cards,
   reachable by touch drag, mouse wheel, trackpad, or a native scrollbar. The
   JS switches this to its own transform-driven track only once it has run
   (see .myth-carousel--js below), so a visitor whose script never executes
   never lands on overflow:hidden with no way to move it. */
.myth-carousel__viewport {
  order: 1;
  flex: 1 1 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.myth-carousel__region.myth-carousel--js .myth-carousel__viewport {
  overflow-x: hidden;
  scroll-snap-type: none;
}

.myth-carousel__track {
  display: flex;
  align-items: stretch;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem;
  transform: translateX(0);
  transition: transform 320ms ease;
  will-change: transform;
}

.myth-carousel__slide {
  display: flex;
  min-width: 0;
  flex: 0 0 85%;
  max-width: 85%;
  scroll-snap-align: start;
}

/* .myth-clone-card is the loop's cloned duplicate of a card, kept off the
   "myth-carousel__card" name on purpose (see games-carousel.php); it shares
   every rule here. */
.myth-carousel__card,
.myth-clone-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.25rem;
  overflow: hidden;
}

.myth-carousel__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.25rem 0.25rem 0 0;
  margin: 0;
}

.myth-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* MANUAL-1 (user review, 2026-09-05): the ink scrim that carries the badge
   pills. A gradient strip along the bottom of the figure only, so the
   poster's own title art at the top of the image is never covered. Sized to
   45% of the figure so the pill row (bottom-left, see .myth-carousel__tags
   below) always sits below the figure's own midline, clear of the top 35%
   title band, at every card width this component renders at (measured
   loop/work/MANUAL-1/cortex-cards.md). Clipped to the figure's own rounded
   corners by the figure's overflow: hidden above; no radius needed here. */
.myth-carousel__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(28, 19, 16, 0) 0%, rgba(28, 19, 16, 0.75) 100%);
  pointer-events: none;
}

.myth-carousel__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem;
}

.myth-carousel__name {
  font-family: "Julius Sans One", sans-serif;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* MANUAL-13 (user review, 2026-09-07): the room name reads bold in the GRID
   only. Julius Sans One ships one face at weight 400, so `font-weight: 700`
   would be a synthesised smear: measured, that costs 0% advance in Chromium
   and +4.7% to +5.0% in WebKit (loop/work/MANUAL-13/bold-engines.mjs), which
   is a different line break on every iOS device. A 0.4px stroke is metric
   identical in both engines and puts about 52% more ink on the glyph
   (loop/work/MANUAL-13/boldtest.mjs). Scoped to `.myth-games__grid`, which
   only inc/games-grid.php prints: the carousel's own `.myth-carousel__slide`
   cards, the Gillingham cards and the Maidstone panels are untouched. */
/* No unprefixed pair: `text-stroke` is not a supported property in any
   engine, while `-webkit-text-stroke` is the de facto standard and is
   implemented unprefixed-in-all-but-name by Firefox since 49. An unprefixed
   line here would be a declaration every browser drops. */
.myth-games__grid .myth-carousel__name {
  -webkit-text-stroke: 0.4px currentColor;
}

/* MANUAL-1 (user review): badge pills, bottom-left corner of the figure,
   over the scrim above. Never the top: poster titles sit there. Stacked in
   a column, not a row: a row puts the 2nd and 3rd pill (a coming-soon room
   that is also seasonal carries three) well to the right of the figure's
   own left edge, outside the required bottom-left quadrant. A column keeps
   every pill's own left edge at the same 0.5rem (8px) inset, so each one,
   not just the first, stays left <= 24px of the figure and top >= the
   figure's own midline at every width this renders at (measured
   loop/work/MANUAL-1/cortex-cards.md). z-index only needs to clear the
   scrim underneath it, both inside the same positioned figure. */
/* MANUAL-3 (user review, 2026-09-05): pills sit side by side in a row,
   bottom-left, and only wrap to a second row when the figure is too narrow
   for all of them (two on one line, the third on the next). The row is
   pinned to the bottom edge, so a wrapped row grows upward, never past
   the figure's bottom padding. Same rule serves the carousel card. */
.myth-carousel__tags {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  margin: 0;
}

/* MANUAL-2 (user review, 2026-09-05): centre the pill's text inside the
   pill. inline-flex + align-items/justify-content center removes the
   baseline-driven offset that uppercase Karma at line-height 1.3 leaves
   (ascender-heavy caps sit high in a line-box sized for descenders that an
   all-caps, letter-spaced word never uses); line-height 1 plus equal
   top/bottom padding puts the glyph box, not the font's own leading, at the
   centre of the pill. Applies to every .myth-carousel__tag instance: same
   class, same markup, in both inc/games-grid.php and
   inc/games-carousel.php, so the grid pill and the carousel pill match. */
.myth-carousel__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Karma, serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* MANUAL-3: vertical padding 0.25rem to 0.375rem, still equal top and
     bottom. The inner text box is now cap height only (see
     .myth-carousel__tag-text below), so this keeps the pill at its
     previous overall height instead of shrinking it by the trimmed leading. */
  padding: 0.375rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* MANUAL-3 (user review, 2026-09-05): the em box was already centred
   (MANUAL-2) but the glyphs still read high, because Karma's ascender
   space is much taller than its descender space, so all-caps ink sits in
   the upper part of a line-height-1 box. The text now lives in an inner
   span whose box is trimmed to the cap height and baseline
   (text-box-trim / text-box-edge), so the flex centring on the pill
   centres the visible letters themselves, not the font's leading.
   Browsers without text-box-trim get a font-relative nudge of the same
   size instead; padding stays equal top and bottom in both paths. */
.myth-carousel__tag-text {
  display: block;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

@supports not (text-box-trim: trim-both) {
  .myth-carousel__tag-text {
    position: relative;
    top: 0.16em;
  }
}

.myth-carousel__tag--gillingham {
  color: #6E0C01;
  background-color: #FFFFFF;
}

.myth-carousel__tag--maidstone {
  color: #D4A94A;
  background-color: #231F1E;
}

.myth-carousel__tag--status {
  color: #1C1310;
  background-color: #FFFFFF;
}

/* MANUAL-1 (user review): tightened spacing scale, text area only. 8px to
   whatever comes next (the grid's blurb, or nothing); the carousel card has
   no blurb, so its meta sits directly above the CTA button and gets the
   12px "to the buttons" step instead (:has() targets that case only; the
   grid's meta, always followed by a blurb paragraph, is untouched by it). */
.myth-carousel__meta {
  font-family: Karma, serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
}

/* MANUAL-12: the selector follows the carousel card's action row to its
   new class. The carousel card has no blurb on some callers, so its meta
   can sit directly above the buttons and takes the 12px "to the buttons"
   step instead of the 8px "to the next paragraph" one. */
.myth-carousel__meta:has(+ .myth-card-actions) {
  margin-bottom: 0.75rem;
}

/* MANUAL-9 (user, 2026-09-05): the client-copy excerpt on the carousel
   card, between the players/duration line and the button. Same type as the
   grid's blurb (.myth-games__blurb) so the two cards read as one family;
   parchment at 85% on the Ink card. The button keeps margin-top: auto, so
   every card's button stays on one baseline whatever the excerpt length. */
.myth-carousel__blurb {
  font-family: Karma, serif;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 0.75rem;
}

/* MANUAL-12: .myth-carousel__cta is DELETED, from this file and from
   inc/games-carousel.php. It duplicated the .myth-btn anatomy at its own
   size (14px, 12px by 20px padding, full width, its own hover and its own
   focus ring) and was outside the button system entirely. The carousel
   card now prints the one shared room-card actions row,
   .myth-card-actions, defined in css/myth-motion.css. Nothing replaces it
   here: that is the point. */

/* Arrows are dead controls without the JS that drives them (see
   js/myth-carousel.js), so they stay out of the render entirely until the JS
   class below confirms init has run; a no-JS visitor is never shown a
   button that does nothing. Order 0/2 (viewport is order 1) puts them back
   either side of the viewport visually even though the DOM order (see
   inc/games-carousel.php) is prev, viewport, next for a sane tab sequence. */
.myth-carousel__arrow {
  display: none;
  order: 0;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.myth-carousel__region.myth-carousel--js .myth-carousel__arrow {
  display: flex;
}

.myth-carousel__arrow--next {
  order: 2;
}

.myth-carousel__arrow:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.myth-carousel__arrow:focus-visible {
  outline: 2px solid #D4A94A;
  outline-offset: 2px;
}

.myth-carousel__arrow:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* .visually-hidden moved to css/myth-motion.css in MANUAL-23. */

/* Below 480px, the figure is short enough (aspect-ratio 3/2 on a narrow
   card) that a three-pill stack (a coming-soon room that is also seasonal
   carries three: location, coming soon, seasonal) at the base chip size
   pushes the top pill close to the figure's own midline. MANUAL-1: tighten
   the chip's own padding, gap and letter-spacing in this narrow band, same
   fix Fold made in T05 for a different reason (a wrapping row, before the
   pills moved onto the image), so the full stack stays shorter and every
   pill clears the midline with room to spare; no colour, font family or
   copy changes. */
@media (max-width: 29.9375rem) {
  .myth-carousel__tags {
    gap: 0.1875rem;
  }

  .myth-carousel__tag {
    padding: 0.1875rem 0.25rem;
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
  }
}

/* 768 to 1023: two cards visible, arrows overlay the viewport. */
@media (min-width: 48rem) {
  .myth-carousel {
    padding-block: 3rem;
  }

  .myth-carousel__inner {
    padding-inline: 1.5rem;
  }

  .myth-carousel__heading {
    font-size: 1.5rem;
  }

  .myth-carousel__track {
    gap: 1.25rem;
  }

  .myth-carousel__slide {
    flex: 0 0 calc(50% - 0.625rem);
    max-width: calc(50% - 0.625rem);
  }

  .myth-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .myth-carousel__arrow--prev {
    left: 0;
  }

  .myth-carousel__arrow--next {
    right: 0;
  }
}

/* 1024 and up: three cards visible. */
@media (min-width: 64rem) {
  .myth-carousel {
    padding-block: 4rem;
  }

  .myth-carousel__inner {
    padding-inline: 2rem;
  }

  .myth-carousel__heading {
    font-size: 2rem;
  }

  .myth-carousel__track {
    gap: 1.5rem;
  }

  .myth-carousel__slide {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .myth-carousel__track {
    transition: none;
  }
}

/*
 * Games grid component, [myth_games_grid].
 * See loop/work/T06/vesper-spec.md for the full build spec and
 * loop/work/T06/strings.md for the copy overrides (no count chip, no
 * "Opening soon" button, button labels "See the room" / "Book this room").
 * Card classes shared with the carousel (myth-carousel__card, __figure,
 * __image, __body, __name, __tags, __tag*, __meta, __cta) are not
 * redefined here, only new classes and modifier-scoped overrides.
 * Palette hexes only: White #FFFFFF, Charcoal #231F1E, Ink #1C1310,
 * Muted Grey #767676, Gold #D4A94A, Maroon #6E0C01.
 */

.myth-games {
  padding-block: 2.5rem;
}

.myth-games--light {
  background-color: #FFFFFF;
}

.myth-games--dark {
  background-color: #231F1E;
}

.myth-games__inner {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.myth-games__heading {
  font-family: "Julius Sans One", sans-serif;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.5rem;
}

.myth-games--light .myth-games__heading {
  color: #1C1310;
}

.myth-games--dark .myth-games__heading {
  color: #D4A94A;
}

/* BUG FIX (T07c part B, cortex-b.md, not one of T07c part A's four
   files, but the same law-section-4 defect: docs/PAGE-TEMPLATE-LAWS.md
   bans a centred paragraph over two lines, and this intro measures 3 at
   1440). Block stays horizontally centred (margin auto); the text itself
   goes left-aligned, matching the fix applied to the same defect
   elsewhere on this homepage. Shortcode call and its "heading"/"intro"
   attributes are unchanged, per T07c's own instruction to leave
   [myth_games_grid] exactly as it is; this is CSS only.
   MANUAL-3 (user review, 2026-09-05): centred again, block and text, under
   the centred heading. It measures 2 lines at 1440 inside the 40rem cap,
   which the law's centring rule allows (docs/PAGE-TEMPLATE-LAWS.md
   section 4: lines that fit in two may be centred). */
.myth-games__intro {
  font-family: Karma, serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

.myth-games--light .myth-games__intro {
  color: #1C1310;
}

.myth-games--dark .myth-games__intro {
  color: #FFFFFF;
}

/* Filter bar (All Games / Gillingham / Maidstone), [myth_games_grid] only.
   Hidden until js/myth-games-filter.js confirms it can drive it (added
   class below), same no-JS posture as the carousel's own arrows: a control
   that does nothing is worse than no control. aria-pressed is the single
   source of truth for the active button; no separate is-active class to
   drift out of sync with it. */
.myth-games__filters {
  display: none;
}

.myth-games.myth-games--js .myth-games__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.myth-games__filter {
  font-family: Karma, serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* QA adversary P3: raised from the bare 44px floor to 48px so the only
     other interactive control in this component (besides the card CTAs,
     .myth-btn, myth-motion.css, min-height 3rem) has the same headroom
     rather than sitting exactly on the legal minimum. */
  min-height: 3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background-color: transparent;
  cursor: pointer;
  /* R05: the same 320ms curve as the button system. Colour and shadow
     only; the 2px border width and the padding written against it never
     move, so pressing a filter shifts nothing. */
  transition:
    box-shadow 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .myth-games__filter {
    transition: none;
  }
}

.myth-games--light .myth-games__filter {
  border-color: rgba(28, 19, 16, 0.35);
  color: #1C1310;
  padding: calc(0.625rem - 2px) calc(1.25rem - 2px);
  /* R05 (review A3, B4): a pill is a card-sized control and takes the
     card's resting step. */
  box-shadow: var(--myth-elev-1);
}

/* R05: the pill's hover tint moves inside the pointer query. It was the
   one hover state on the site still firing on a touch context (measured:
   two of the three pills changed background after a tap at 390 with
   `hover: none`, loop/work/REVIEW-05/prove-after-touch.json), so a tapped
   filter stayed tinted until something else was tapped. Same rule as every
   other hover on the site, now stated the same way. */
@media (hover: hover) and (pointer: fine) {
  .myth-games--light .myth-games__filter:hover {
    background-color: rgba(28, 19, 16, 0.06);
  }
}

.myth-games--light .myth-games__filter[aria-pressed="true"] {
  background-color: #6E0C01;
  color: #FFFFFF;
  /* R05: the active pill is the one raised thing in the row, so it takes
     step 2 and the Gold hairline. The border WIDTH is 2px in both states
     and the padding is written against it, so the state change moves
     nothing. */
  border-color: var(--myth-hairline-gold);
  box-shadow: var(--myth-elev-2);
}

.myth-games--light .myth-games__filter:focus-visible {
  outline: 2px solid #6E0C01;
  outline-offset: 2px;
}

.myth-games--dark .myth-games__filter {
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  padding: calc(0.625rem - 2px) calc(1.25rem - 2px);
  box-shadow: var(--myth-elev-1-on-dark);
}

@media (hover: hover) and (pointer: fine) {
  .myth-games--dark .myth-games__filter:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

.myth-games--dark .myth-games__filter[aria-pressed="true"] {
  background-color: #6E0C01;
  color: #FFFFFF;
  border-color: var(--myth-hairline-gold-on-dark);
  box-shadow: var(--myth-elev-2-on-dark);
}

.myth-games--dark .myth-games__filter:focus-visible {
  outline: 2px solid #D4A94A;
  outline-offset: 2px;
}

/* Live count line. Always server-rendered ("Showing all 12 rooms"); the
   filter script rewrites the text on every click. aria-live so a screen
   reader hears the filter did something even though nothing moved focus. */
.myth-games__status {
  font-family: Karma, serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  margin: 0 0 1.5rem;
}

.myth-games--light .myth-games__status {
  color: #1C1310;
}

.myth-games--dark .myth-games__status {
  color: #FFFFFF;
}

.myth-games__grid {
  /* position: relative keeps this the containing block for the visually
     hidden text inside each card's link (position: absolute, no positioned
     ancestor of its own). Without it, those spans' static position escapes
     to the initial containing block and inflates the whole document's
     scrollable width once the rail modifier lays cards out far to the
     right; see loop/work/T06/cortex.md. */
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* MANUAL-5 (user review, 2026-09-05): Divi's `.entry-content ul` rule
   (one class plus a type selector) was beating the single-class rule above
   and leaking `padding: 0 0 23px 1em` and `list-style-type: disc` onto
   this list, so every card row started 17px right of the band's content
   box and the grid carried 23px of dead space under its last row. Two
   classes here outrank it; no other value changes. Found while lining the
   reviews band's container up with this grid. */
.myth-games__inner .myth-games__grid {
  padding: 0;
  list-style: none;
}

.myth-games__item {
  display: flex;
  min-width: 0;
}

/* Hiding is display: none on the <li>, so the grid reflows cleanly.
   data-filter="all" (the server-rendered default and the no-JS state)
   matches neither rule below, so "All Games" needs no CSS to work and a
   visitor without JavaScript always sees all 12 cards. */
.myth-games__grid[data-filter="gillingham"] .myth-games__item[data-location="maidstone"],
.myth-games__grid[data-filter="maidstone"] .myth-games__item[data-location="gillingham"] {
  display: none;
}

/* Card surface, light variant only: the carousel's own 8% white lift over
   Charcoal already paints the dark variant's card, byte for byte, so no
   dark-specific override is declared here. */
.myth-games--light .myth-carousel__card {
  background-color: #FFFFFF;
  border: 1px solid rgba(28, 19, 16, 0.1);
  /* R05: the elevation scale, step 1. This was the value the scale was
     built from, so the light grid card does not move. */
  box-shadow: var(--myth-elev-1);
}

.myth-games--light .myth-carousel__name,
.myth-games--light .myth-carousel__meta,
.myth-games--light .myth-games__blurb,
.myth-games--light .myth-games__price {
  color: #1C1310;
}

.myth-games--dark .myth-games__blurb,
.myth-games--dark .myth-games__price {
  color: #FFFFFF;
}

/* MANUAL-1 (user review): the 6.3em floor is retired. It padded the blurb
   with empty space beyond its own content; CSS Grid's row-stretch
   (.myth-games__grid's default align-items: stretch) already equalises
   every card in a row to the tallest one without it, and margin-top: auto
   on the actions row still pins both buttons to one baseline
   regardless of blurb length. No line clamp: every blurb (loop/work/T06/
   fold.md, P2) stays a clamp-free full sentence run.

   Spacing: 8px to whatever comes next (the price line, on a room with a
   published price) via the base rule; 12px "to the buttons" via the
   :has() override on the common case, a Maidstone room with no price,
   where the blurb sits directly above the actions block. */
.myth-games__blurb {
  font-family: Karma, serif;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.myth-games__blurb:has(+ .myth-games__price) {
  margin-bottom: 0.5rem;
}

.myth-games__price {
  font-family: Karma, serif;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

/* MANUAL-12: .myth-games__actions is DELETED. The grid card prints the
   shared .myth-card-actions row (css/myth-motion.css) like every other
   room card renderer on the site. The old rule stacked unconditionally
   with flex-direction: column; the shared row wraps on measurement
   instead, so this card sits side by side from 768 and stacks below it
   without a breakpoint being written anywhere. */

/* MANUAL-12: three blocks are DELETED from here.

   1. .myth-games__soon, the grid's own "Coming soon" chip. It is now the
      sitewide .myth-chip--soon in css/myth-motion.css, one class shared
      with the Maidstone coming-soon cards, matching a card button's 48px
      min-height and 4px radius exactly so a row of mixed cards keeps one
      action baseline. Its rules here (and the two variant recolours) said
      the same thing for one component only.

   2. .myth-games--light .myth-btn:focus-visible, which recoloured the
      shared Gold ring to Maroon because Gold measured about 2.19:1 against
      this variant's White card. There is now ONE ring for every level and
      every surface: a 6px halo painted entirely outside the border box,
      Ink then White then Ink, self-contained and therefore passing on any
      background at all. This was one of four local ring fixes; all four
      are gone.

   3. The T07b note about .myth-carousel__cta--outline, which described a
      modifier that was already retired and a card that no longer exists in
      that shape. */

/* Card anatomy, design law section 6: 8px radius, a hairline border in the
   location accent role for the surface it sits on (gold at 20% opacity on
   an Ink card, ink at 10% on a Parchment/White card, the latter already
   the T06 value and unchanged). Scoped to .myth-card (the T07b grid hook)
   rather than the shared .myth-carousel__card, so the room-page carousel's
   own card is untouched by this pass. */
.myth-card {
  border-radius: 0.5rem;
}

.myth-card .myth-carousel__figure {
  border-radius: 0.5rem 0.5rem 0 0;
}

.myth-games--dark .myth-card {
  border-color: rgba(212, 169, 74, 0.2);
  /* R05: the same step 1 as every other card, at the alpha its ground
     needs. Ink at 0.10 over Charcoal is a 1.006:1 luminance step, which
     is nothing; at 0.55 it is 1.09:1, which is a soft anchor. */
  box-shadow: var(--myth-elev-1-on-dark);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .myth-games--dark .myth-card:hover {
    box-shadow: var(--myth-elev-2-on-dark), var(--myth-elev-glow-on-dark);
    border-color: var(--myth-hairline-gold-on-dark);
  }
}

/* 390 rail, the default mobile modifier. A plain native scroll rail, no JS,
   no arrows: the shortcode's mobile="rail" attribute (default) emits this
   modifier class. */
@media (max-width: 47.9375rem) {
  .myth-games--rail .myth-games__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-inline: 1rem;
    margin-inline: -1rem;
  }

  .myth-games--rail .myth-games__item {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }

  /* 390 stack, the alternative mobile modifier (mobile="stack"). Identical
     to the base 1fr grid above; stated explicitly so the choice is a real,
     literal block rather than an implicit default. */
  .myth-games--stack .myth-games__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* 768 to 1023: two cards per row. */
@media (min-width: 48rem) {
  .myth-games {
    padding-block: 3rem;
  }

  .myth-games__inner {
    padding-inline: 1.5rem;
  }

  .myth-games__heading {
    font-size: 1.5rem;
  }

  .myth-games__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* FOLD P1 FIX, 2026-09-05 (T07c responsive pass): this block used to
     switch the two card actions ("Learn More" and "Book Now", or "Learn
     More" beside the "Coming soon" chip) to a side-by-side row from
     tablet up, on the stated assumption that "the card's text column is
     wide enough at two and three per row for both short labels without
     wrapping." Measured, not assumed: at 3-per-row (min-width 64rem,
     below) the grid's own 75rem/1200px container cap holds the card at
     roughly 300 to 360px regardless of viewport, giving each half-width
     button about 110px of content room after its own 24px-per-side
     padding (the law's floor, not reducible). "Learn More" plus its arrow
     needs about 127px and "Book Now" plus its arrow about 111px, so both
     card actions wrapped their label onto two lines at every width from
     1024px up (steady state, not a narrow edge case), and the same
     arithmetic makes the 768 to 1023 range no safer. Reverted to the same
     full-width stacked pair used at 390 and below (buttons already
     stretch to fill a column flex parent by default; no explicit width
     rule was ever needed for that), sitewide, at every width. This keeps
     every label on one line and every target at a full 44px+ tap width
     without touching the shared button padding, letter-spacing or type
     scale. See loop/work/T07c/fold.md for the before/after numbers. */
}

/* 1024 and up: three cards per row, four rows. */
@media (min-width: 64rem) {
  .myth-games {
    padding-block: 4rem;
  }

  .myth-games__inner {
    padding-inline: 2rem;
  }

  .myth-games__heading {
    font-size: 2rem;
  }

  .myth-games__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* =======================================================================
 * REVIEW-03, 2026-09-09. ONE APPENDED RULE. Nothing above this line is
 * edited: the frozen carousel's own declarations are untouched.
 *
 * The component's kicker default is now the empty string (review A2, the
 * user's answer to question 1) and inc/games-carousel.php has always
 * omitted the <p> entirely when the kicker is empty, so on every route the
 * rail is now the heading's next sibling. That left the heading 8px off
 * the cards: `.myth-carousel__heading` carries `margin: 0 0 0.5rem`, which
 * was the gap to the KICKER, and the kicker carried the 1.5rem that was
 * the gap to the RAIL. Removing the middle element took the rail's own
 * 24px with it.
 *
 * This rule gives the rail back exactly the 24px it always had above it,
 * and only in the case the removal created: the adjacent sibling selector
 * matches nothing when a caller passes a kicker. No number is invented;
 * 1.5rem is the kicker's own margin-bottom, moved up one element. The two
 * margins collapse, so the measured gap is 24px, not 32.
 *
 * Recorded as the S6 exception the review plan anticipates for scoped
 * additions to this component.
 * ===================================================================== */
.myth-carousel__heading + .myth-carousel__region {
  margin-top: 1.5rem;
}

/* =======================================================================
 * R04: THE ARROWS SIT OUTSIDE THE CARDS, SYMMETRICALLY, AT EVERY WIDTH.
 * Review A9 and F9. S6 EXCEPTION, RECORDED: the carousel is frozen, so
 * nothing above this line is edited. This is a NEW, SCOPED block at the
 * end of the file, exactly like the heading-gap exception above it, and it
 * declares one property the frozen rules never declared. The arrows' own
 * rules (`position: absolute; top: 50%; left: 0; right: 0`) are untouched
 * and are what makes the fix symmetric by construction.
 *
 * MEASURED BEFORE (loop/work/REVIEW-04/before.json, /the-game/):
 *   768   prev [24, 72]     first card [24, 365.5]    48.0px OVER the card
 *         next [696, 744]   last card ends 744        48.0px OVER the card
 *   1024  prev [32, 80]     first card [32, 330.3]    48.0px OVER
 *   1440  prev [152, 200]   first card [152, 509]     48.0px OVER
 *   390   prev above the rail, next below it: not a pair at all.
 * Both arrows painted entirely on top of a card from 768 up, which is the
 * "one over the card, one half over" the review recorded, and below 768
 * they were not a pair at all.
 *
 * THE RULE. From 768 the arrows are absolutely positioned against the
 * region's PADDING box while the track is a flex item in its CONTENT box,
 * so 3.5rem of inline padding on the region is the whole fix: 56px = the
 * 48px arrow plus an 8px gap, taken off both ends of the track, so each
 * arrow lands in its own gutter with the same 8px to the nearest card at
 * every width. Nothing is absolutely positioned by hand and no left or
 * right value is invented, which is why the two gaps cannot drift apart.
 * The cards keep their percentage widths and simply take the narrower
 * track; the frozen JS reads the slide width at call time (getStep in
 * js/myth-carousel.js), so the step follows with no change.
 *
 * 1024, NOT 768, AND THE NUMBER IS MEASURED. Below 1024 the gutters cost
 * more than they buy: at 390 an 85 percent card would fall from 304px to
 * 246px, and at 768 the two-card row would fall from 358px to 294px, which
 * is under the 307.6px a card needs to keep LEARN MORE and BOOK NOW side by
 * side (2 x 137.8px of label plus the 8px gap plus the card's 2 x 16px
 * padding), so the rail's own action rows would start stacking. From 1024
 * the cards are three-up and their actions already stack at every width, so
 * the gutters cost nothing but width: 298.3px to 266.7px at 1024 and
 * 357.0px to 325.3px at 1440, both inside the range the card already
 * renders at 390.
 *
 * BELOW 1024 the arrows are already out of the flex line: the region wraps
 * and they take a line each, one above the rail and one below, which is
 * exactly the "one over the card and one half over" inconsistency the
 * review recorded from a phone. Two `order` values put them on the SAME
 * line, after the viewport, where the region's own `justify-content:
 * center` and its 1rem gap centre them as a pair, equally spaced about the
 * rail's centre and clear of every card. No other property is touched and
 * the DOM order, hence the tab order, is unchanged.
 * ===================================================================== */

@media (max-width: 63.9375rem) {
  .myth-carousel__region .myth-carousel__arrow--prev {
    order: 2;
  }

  .myth-carousel__region .myth-carousel__arrow--next {
    order: 3;
  }
}

/* From 768 the frozen block takes the arrows out of the flex flow
   (`position: absolute; top: 50%; transform: translateY(-50%); left: 0`
   and `right: 0`), which is what painted them on top of the cards, and
   `order` has no effect on an absolutely positioned box. Between 768 and
   1023, where there is no room for a gutter, they are put back in the flow
   so the two order values above can pair them under the rail. Declared at
   0,2,0 in this scoped block; the frozen rule itself is not touched and
   still governs from 1024, where it is now correct because the region
   below reserves the gutter it positions into. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .myth-carousel__region .myth-carousel__arrow {
    position: static;
    transform: none;
  }
}

@media (min-width: 64rem) {
  .myth-carousel__region {
    padding-inline: 3.5rem;
  }
}

/* THE 17PX THAT MADE THE TWO GAPS UNEQUAL, AND THE 23PX THAT PUSHED THE
   ARROWS BELOW THE CARDS. Both are one Divi rule, not a design decision.
   Divi ships
     #left-area ul, .entry-content ul, .et-l--body ul, .et-l--header ul,
     .et-l--footer ul { padding: 0 0 23px 1em; }
   at 0,1,1, and the frozen `.myth-carousel__track { padding: 0 }` above is
   0,1,0, so it loses: the track computes `0px 0px 23px 17px` on every page
   that carries a rail. Measured consequences, before this rule:
     - the slides' percentage widths resolve against a content box 17px
       narrower than the track, so the card row ends 17px short of the
       track's right edge and the two arrow gaps came out 8px on the left
       and 25px on the right at 1024 and 1440;
     - the region's height includes 23px of empty track below the cards, so
       `top: 50%` centred the arrows 11.5px BELOW the cards' own centre.
   Restated here at 0,2,0 so the outcome stops depending on which
   stylesheet loads second. This is the same class of defect, and the same
   remedy, as the breadcrumb block's note about `.et-l--header ol`. The
   frozen rule is not edited; this one wins on the class count. Recorded
   with the arrow placement above as one S6 exception. */
.myth-carousel__region .myth-carousel__track {
  padding: 0;
}

/* =======================================================================
 * R05, S6 EXCEPTION, RECORDED. The carousel is frozen: its own rules are
 * not edited in place, and nothing above this line was touched by this
 * task. This block adds ONE declaration to the frozen card, and it is
 * allowed only because it cannot change a box: `box-shadow` is painted
 * outside the border box, takes part in no layout, and is not inherited by
 * anything inside the card. Every carousel card's width, height and
 * position was measured before and after and is identical (the table in
 * loop/work/REVIEW-05/lumen.md).
 *
 * Resting step 1 only. The frozen card is deliberately given NO hover: a
 * lift on a horizontally scrolling rail fights the drag, and the card's
 * own behaviour is the one thing the freeze protects. The rail's cards on
 * /the-game/ and /events/ sit on Charcoal, so the on-dark alpha applies;
 * the homepage grid card, which is not this component, is handled above.
 * ===================================================================== */
.myth-carousel__card,
.myth-clone-card {
  box-shadow: var(--myth-elev-1-on-dark);
}