/* ==========================================================================
   Wahaca — private hire "spaces" slider
   Markup-driven. Works with the [wahaca_spaces] shortcode (see
   wahaca-spaces.php) or with an Oxygen Repeater, as long as the class names
   and data attributes are kept. Nothing here depends on a JS framework.

   Structure
   .wahaca-spaces
     .wahaca-spaces__viewport            (focusable region)
       .wahaca-spaces__track             (grid stack — all slides overlap)
         .ws-slide[data-slide]           (one per space)
           .ws-media > img
           .ws-panel
             .ws-content
               h2.ws-venue
               .ws-hire > h3.ws-hire__name + p.ws-hire__detail
             .ws-arrows > button.ws-arrow[data-ws-dir]
       p.ws-live                         (screen-reader announcements)
   ========================================================================== */

.wahaca-spaces {
  /* Brand tokens, taken from wahaca.co.uk itself (theme CSS + computed styles
     on /groups-parties/), not eyeballed from the mockup.
     Red   — footer, sticky header and hover fills.
     Cream — page and section background.
     Deep  — pressed/hover red.
     Orange— accent in the same palette, not used by the slider. */
  --ws-red: #bd4423;
  --ws-cream: #fdf4eb;
  --ws-ink: #fdf4eb;
  --ws-red-deep: #9d3619;
  --ws-orange: #f28937;

  --ws-photo-bg: #ded4c4;

  /* Fluid metrics are relative to the SLIDE's width (cqw), not the viewport.
     Inside an Oxygen Section the column is narrower than the browser window;
     sized in vw the panel came out twice the design's height and dragged the
     photo into a portrait crop to match. */
  --ws-edge: 0px;                                  /* the Section owns the gutter */
  --ws-gap: clamp(0.75rem, 2.9cqw, 3.4rem);        /* photo ↔ panel gap   */
  /* Matched to the live type scale: hero 48/1.3 at 1px tracking, card title
     22/1.2 at 3px, body 16/1.6. */
  /* Capped at the site's own sizes — h1 48, h3 22, body 16 — so they are exact
     at the layout width and only shrink below it. */
  --ws-venue-size: clamp(1.75rem, 5.2cqw, 3rem);
  --ws-name-size: clamp(1rem, 2.4cqw, 1.375rem);
  --ws-detail-size: clamp(0.875rem, 1.75cqw, 1rem);
  --ws-arrow-size: clamp(2rem, 3.4cqw, 3.2rem);
  --ws-panel-inline: clamp(1.25rem, 7cqw, 6rem);
  --ws-panel-block: clamp(1.25rem, 3cqw, 3rem);

  /* The theme already loads both faces from /wp-content/uploads/, so this file
     declares no @font-face and ships no font files. */
  --ws-font-display: "Wahaca", "Larsseit", "Helvetica Neue", Arial, sans-serif;
  --ws-font-body: "Larsseit", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* No background of its own: painting the cream here produced a visible
     lighter rectangle whenever the page's cream differed by a shade. The
     Section supplies both the background and the vertical rhythm. */
  background: transparent;
  color: var(--ws-red);
  font-family: var(--ws-font-body);
  -webkit-font-smoothing: antialiased;
}

.wahaca-spaces *,
.wahaca-spaces *::before,
.wahaca-spaces *::after { box-sizing: border-box; }

.wahaca-spaces__viewport {
  padding-inline: var(--ws-edge);
  outline: none;
}
.wahaca-spaces__viewport:focus-visible {
  outline: 2px solid var(--ws-red);
  outline-offset: -2px;
}

/* --- the stack ----------------------------------------------------------- */
.wahaca-spaces__track {
  display: grid;
  container-type: inline-size;   /* anchor for the cqw metrics above */
}

.ws-slide {
  grid-area: 1 / 1;              /* every slide occupies the same cell      */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ws-gap);
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.ws-slide.is-active {
  z-index: 1;                    /* incoming slide fades in over the old    */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s linear 0s;
}

/* --- left: photo --------------------------------------------------------- */
/* The panel decides the height. The photo is absolutely positioned so its own
   intrinsic size cannot push the row taller — a portrait upload used to double
   the slide height, and the panel stretched to match it. */
.ws-media {
  position: relative;
  overflow: hidden;
  background: var(--ws-photo-bg);
  min-height: clamp(13rem, 26cqw, 24rem);
}

.ws-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a hair of drift as the photo arrives — reads as premium, not showy */
.ws-slide.is-active .ws-media img {
  animation: ws-img-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes ws-img-in {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

/* --- right: panel -------------------------------------------------------- */
.ws-panel {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--ws-red);
  color: var(--ws-ink);
  text-align: center;
  padding: var(--ws-panel-block) var(--ws-panel-inline);
}

.ws-content { display: grid; }

.ws-venue {
  margin: 0;
  font-family: var(--ws-font-display);
  font-size: var(--ws-venue-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.021em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* the venue name links through to its restaurant page when one is chosen */
/* The theme forces `font-family: Larsseit !important` on div, a, p and button
   in one global rule, so a linked heading loses the display face on the <a>
   inside it. An important declaration can only be beaten by another one, and
   `.ws-venue a` is more specific than their bare `a`, so this wins. Scoped to
   the one element that needs it — nothing else in the component depends on
   fighting the theme. */
.ws-venue a {
  font: inherit !important;
  color: inherit;
  text-decoration: none;
}

/* The theme's `a:hover { color: #bd4423 }` is the panel's own red, so the title
   disappeared on hover. Pin the ink in every link state — the underline is the
   affordance, so nothing needs to change colour. `.ws-venue a:hover` outranks
   the theme's bare `a:hover` on specificity, no !important required. */
.ws-venue a:visited,
.ws-venue a:hover,
.ws-venue a:focus,
.ws-venue a:active {
  color: inherit;
}

.ws-venue a:hover {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 2px;
}
.ws-venue a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.ws-hire { margin-top: clamp(1.1rem, 4.2cqw, 3rem); }

.ws-hire__name {
  margin: 0;
  /* Explicit: as an <h3> it otherwise picks up the theme's heading face,
     which is a serif in this build. */
  font-family: var(--ws-font-display);
  font-size: var(--ws-name-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.135em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ws-hire__detail {
  margin: 0.45em 0 0;
  font-family: var(--ws-font-body);
  font-size: var(--ws-detail-size);
  font-weight: 400;
  line-height: 1.6;
  white-space: pre-line;         /* honours the line breaks typed in WP    */
}

/* staggered rise for the panel copy on each change */
.ws-slide.is-active .ws-content > * {
  animation: ws-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ws-slide.is-active .ws-content > :nth-child(2) { animation-delay: 0.06s; }
.ws-slide.is-active .ws-content > :nth-child(3) { animation-delay: 0.12s; }
.ws-slide.is-active .ws-content > :nth-child(4) { animation-delay: 0.18s; }

@keyframes ws-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- arrows -------------------------------------------------------------- */
.ws-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(0.5rem, 2.2cqw, 2rem);
  pointer-events: none;          /* the panel stays clickable/selectable   */
}

.ws-arrow {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: var(--ws-arrow-size);
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.ws-arrow svg { width: 44%; height: auto; display: block; }

.ws-arrow:hover { background: var(--ws-ink); color: var(--ws-red); }

.ws-arrow:focus-visible {
  outline: 2px solid var(--ws-ink);
  outline-offset: 3px;
}

/* --- a11y helper --------------------------------------------------------- */
.ws-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- tablet / phone ------------------------------------------------------ */
@media (max-width: 760px) {
  .ws-slide { grid-template-columns: 1fr; }

  /* start, not stretch: the photo keeps its own ratio instead of being
     stretched to the tallest slide's height */
  .ws-media {
    aspect-ratio: 4 / 3;
    align-self: start;
    height: auto;
    min-height: 0;
  }

  .ws-panel {
    padding: 2.25rem 1.25rem 1.5rem;
  }

  .ws-arrows {
    position: static;
    padding: 1.75rem 0 0;
    justify-content: center;
    gap: 1.25rem;
    pointer-events: auto;
  }
}

/* --- motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ws-slide { transition-duration: 0.001ms, 0.001ms; }
  .ws-slide.is-active .ws-media img,
  .ws-slide.is-active .ws-content > * { animation: none; }
}