/* Clash Esports rooms, PC and PlayStation: the list page (full-height cards of swipeable photos) and the room page
   (photos beside the details and the booking). Loads after style.css; the walk between pages is in js/site.js. */

/* ---------- the photo strip ---------- */
.gal { position: relative; overflow: hidden; background: var(--surface); }
/* native scrolling both ways: sideways moves the photos, up and down moves the page; no pinch or double-tap zoom here */
.gal-track {
  display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline-offset: -3px; }
.gal-slide { flex: 0 0 100%; scroll-snap-align: start; }
.gal-slide img, .gal-thumb img, .other img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.gal-slide img { width: 100%; height: 100%; object-fit: cover; }
/* one bar per photo along the top, the lit one is the photo on screen */
.gal-bars { position: absolute; inset: 12px 12px auto; display: flex; gap: 4px; pointer-events: none; }
.gal-bars span { flex: 1; height: 3px; background: rgba(243, 243, 241, 0.35); transition: background-color 300ms ease; }
.gal-bars span.is-on { background: var(--ink); }
.gal-btn {
  position: absolute; top: 40%; width: 44px; height: 44px; translate: 0 -50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(8, 8, 10, 0.72); color: var(--ink);
  transition: background-color var(--t-hover) ease, scale var(--t-press) var(--ease-out);
}
.gal-btn svg { width: 20px; height: 20px; }
.gal-btn:active { scale: 0.94; }
.gal-prev { inset-inline-start: 12px; }
.gal-next { inset-inline-end: 12px; }
.gal-prev svg, [dir="rtl"] .gal-next svg { scale: -1 1; }
[dir="rtl"] .gal-prev svg { scale: 1 1; }
.is-single .gal-btn, .is-single .gal-bars { display: none; }
@media (hover: hover) and (pointer: fine) { .gal-btn:hover { background: var(--ink); color: var(--bg); } }

/* ---------- the rooms page ---------- */
.rl { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: calc(100svh - var(--bar-full)); padding: 0 var(--margin) var(--margin); gap: 20px; }
.rl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75em; }
.rl-title h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(3.5rem, 1.5rem + 6.5vw, 8.5rem); line-height: 0.85; letter-spacing: -0.01em; text-transform: uppercase; }
.rl-sub { color: var(--muted); font-weight: 600; }
.rl-rooms { display: flex; gap: 6px; min-height: 0; }
/* more than five rooms: rows of four that the page scrolls through */
.rl:has(.is-many) { height: auto; }
.rl-rooms.is-many { flex-wrap: wrap; }
.rl-rooms.is-many .rc { flex: 1 1 22%; height: 74svh; }
.rl-plain { display: grid; gap: 12px; font-size: var(--step-lead); }

.rc {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: grid;
  container-type: inline-size;
  transition: flex-grow 800ms var(--ease-out), filter 800ms ease;
}
.rc > .gal { position: absolute; inset: 0; }
.rc .gal-track { cursor: pointer; }
/* the room's team colour lives only in small marks: the edge of its box, the lit photo bar, the arrow */
.rc-red { --team: var(--red); }
.rc-blue { --team: var(--blue-strong); }
.rc-yellow { --team: var(--yellow); }
.rc-none { --team: var(--muted); }
/* red and blue in one room: the edge is red above and blue below */
.rc-both { --team: var(--red); }
.rc-both .rc-copy::before, .rc-both .other-copy::before {
  content: ""; position: absolute; inset-inline-start: -4px; bottom: 0; width: 4px; height: 50%; background: var(--blue-strong);
}
.rc .gal-bars span.is-on { background: var(--team); }

/* a small dark box under the words, so they read on any photograph without a field of colour */
.rc-copy {
  position: relative; z-index: 1; align-self: end; justify-self: start; display: grid; gap: 2px; justify-items: start;
  max-width: calc(100% - 20px); margin: 10px; padding: 14px 18px;
  background: var(--bg); border-inline-start: 4px solid var(--team);
  text-decoration: none; color: var(--ink);
}
.rc-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(2rem, 15cqi, 4rem); line-height: 0.95; text-transform: uppercase; }
.rc-line { font-weight: 600; color: var(--muted); }
.rc-price { margin-top: 4px; font-weight: 600; font-size: var(--step-small); }
.rc-price b { font-family: var(--font-display); font-size: var(--step-lead); }
.rc-price s { color: var(--muted); margin-inline-start: 4px; }
.rc-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.rc-go svg { color: var(--team); }
.rc-go svg { width: 20px; height: 20px; transition: translate 240ms var(--ease-out); }
[dir="rtl"] .rc-go svg { scale: -1 1; }

@media (hover: hover) and (pointer: fine) {
  .rl-rooms:hover .rc { filter: brightness(0.85); }
  .rl-rooms .rc:hover { filter: none; flex-grow: 1.45; }
  .rc:hover .rc-go svg { translate: 6px 0; }
  [dir="rtl"] .rc:hover .rc-go svg { translate: -6px 0; }
}

/* arriving: the cards rise one after another, then their words */
@media (prefers-reduced-motion: no-preference) {
  .js .rc { animation: rise-in 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
  .js .rc:nth-child(2) { --i: 1; } .js .rc:nth-child(3) { --i: 2; } .js .rc:nth-child(4) { --i: 3; } .js .rc:nth-child(n+5) { --i: 4; }
  .js .rc-copy { animation: words-in 450ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 320ms); }
  .js .rl-title { animation: words-in 450ms var(--ease-out) both; }
}
@keyframes rise-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes words-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* leaving: the chosen room takes the row, then the page dims to dark */
.is-leaving .rc { transition: flex-grow 450ms cubic-bezier(0.65, 0, 0.35, 1), filter 200ms ease; }
.is-leaving .rc.is-chosen { flex-grow: 1; filter: none; }
.is-leaving .rc:not(.is-chosen) { flex-grow: 0; }
.is-leaving .rc-copy, .is-leaving .gal-btn, .is-leaving .gal-bars { opacity: 0; transition: opacity 150ms ease; }
.sheet { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: var(--bg); opacity: 0; visibility: hidden; }
.sheet.is-on { opacity: 1; visibility: visible; transition: opacity 260ms ease; }

/* ---------- the room page ---------- */
.rp { padding: 0 var(--margin) var(--section); }
.rp-back { display: inline-flex; align-items: center; gap: 8px; }
.rp-back svg { width: 18px; height: 18px; scale: -1 1; }
[dir="rtl"] .rp-back svg { scale: 1 1; }
.rp-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 72px); align-items: start; margin-top: 8px; }
.rp-media {
  position: sticky; top: calc(var(--bar-full) + 12px);
  display: grid; grid-template-rows: 1fr auto; gap: 8px;
  height: calc(100svh - var(--bar-full) - 24px);
}
.rp-media .gal { min-height: 0; }
.gal-thumbs { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gal-thumb { flex: 0 0 auto; }
.gal-thumb { width: 72px; height: 72px; padding: 0; border: 0; background: var(--surface); cursor: pointer; opacity: 0.55; transition: opacity var(--t-hover) ease; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb[aria-current="true"] { opacity: 1; outline: 3px solid var(--ink); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .gal-thumb:hover { opacity: 1; } }

.rp-info { display: grid; gap: 20px; align-content: start; padding-block: clamp(8px, 4vh, 48px) 0; }
.rp-name {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.5rem, 2rem + 5vw, 8rem); line-height: 0.88; letter-spacing: -0.01em;
}
[data-side="red"] .rp-name { color: var(--red); }
[data-side="blue"] .rp-name { color: var(--blue-strong); }
[data-side="yellow"] .rp-name { color: var(--yellow); }
[data-side="none"] .rp-name { color: var(--ink); }
.rp-name span { display: block; color: var(--ink); }
[dir="rtl"] .rp-name { text-align: right; }
.rp-about { font-size: var(--step-lead); line-height: 1.45; font-weight: 600; max-width: 30ch; }
.rp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-weight: 600; }
.rp-price b { font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: 0.9; }
.rp-price s { color: var(--muted); }
.rp-save { margin-top: -12px; color: var(--muted); }
.rp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 2px solid var(--surface-2); padding-top: 20px; }
.rp-facts dt { color: var(--muted); font-size: var(--step-small); }
.rp-facts dd { font-weight: 800; }
.rp-h { font-weight: 800; font-size: var(--step-body); }
.rp-inside { display: grid; gap: 8px; margin-top: -8px; }
.rp-inside li { display: flex; align-items: center; gap: 12px; }
.rp-inside li::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--red); }
[data-side="blue"] .rp-inside li::before { background: var(--blue); }

/* the PCs, one row per part */
.rp-spec { display: grid; margin-top: -8px; }
.rp-spec > div { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: 12px; padding: 10px 0; border-top: 2px solid var(--surface-2); }
.rp-spec dt { color: var(--muted); }
.rp-spec dd { font-weight: 600; }

.rp-book { display: grid; gap: 14px; background: var(--surface); padding: clamp(20px, 2vw, 28px); margin-top: 8px; }
.rp-hours { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.step {
  width: 52px; height: 52px; border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer;
  font-size: 1.6rem; font-weight: 700; line-height: 1;
  transition: background-color var(--t-hover) ease, scale var(--t-press) var(--ease-out);
}
.step:active { scale: 0.94; }
.step:disabled { opacity: 0.35; cursor: default; }
.stepper output { min-width: 64px; text-align: center; font-size: var(--step-body); }
.rp-total { font-size: var(--step-lead); }
.rp-total b { font-family: var(--font-display); }
.rp-cta { width: 100%; }
.rp-note { color: var(--muted); }

/* ---------- booking a PlayStation room (js/ps-booking.js) ---------- */
.bk { display: grid; gap: 22px; }
.bk-group { display: grid; gap: 10px; }
.bk-label { font-weight: 700; }
.bk-sub, .bk-wait { color: var(--muted); font-size: var(--step-small); }
.bk-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-days .bk-chip { flex: none; }
.bk-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.bk-units { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip {
  min-height: 44px; padding: 0 14px; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.bk-chip:active { transform: scale(0.97); }
.bk-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.bk-chip:disabled { cursor: default; color: var(--muted); background: transparent; box-shadow: inset 0 0 0 2px var(--surface-2); /* the outline of a taken slot (taste-skill-ignore) */ }
.bk-chip small { font-size: var(--step-small); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .bk-chip:not(:disabled):not([aria-pressed="true"]):hover { background: #2c2c33; } }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-field { display: grid; gap: 8px; font-weight: 700; }
.bk-field input {
  min-height: 48px; padding: 0 14px; border: 0; background: var(--bg); color: var(--ink);
  font: inherit; font-weight: 400; box-shadow: inset 0 0 0 2px var(--surface-2); /* the field's edge (taste-skill-ignore) */
}
.bk-field input:focus-visible { outline: 3px solid var(--blue-strong); outline-offset: 0; }
.bk-summary { font-size: var(--step-lead); font-weight: 700; }
.bk-msg { color: #ff8a92; font-weight: 600; }
.bk-wa { justify-self: start; }
.bk-done-line { font-size: var(--step-lead); font-weight: 700; }
@media (max-width: 720px) { .bk-fields { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) { .step:not(:disabled):hover { background: var(--ink); color: var(--bg); } }

.rp-more { margin-top: var(--section); display: grid; gap: 28px; }
.others { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gutter); }
.others > li, .other { min-width: 0; }
.other a { position: relative; display: grid; aspect-ratio: 4 / 5; overflow: hidden; text-decoration: none; color: #fff; }
.other img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.other-copy { position: relative; align-self: end; display: grid; margin: 10px; padding: 12px 16px; font-weight: 600; justify-self: start; background: var(--bg); color: var(--ink); border-inline-start: 4px solid var(--team); }
.other-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 0.9; text-transform: uppercase; }
.other-copy b { font-family: var(--font-display); }
@media (hover: hover) and (pointer: fine) { .other a:hover img { transform: scale(1.05); } }

@media (prefers-reduced-motion: no-preference) {
  .js .rp-info > * { animation: words-in 450ms var(--ease-out) backwards; }
  .js .rp-info > :nth-child(2) { animation-delay: 80ms; } .js .rp-info > :nth-child(3) { animation-delay: 160ms; }
  .js .rp-info > :nth-child(4) { animation-delay: 220ms; } .js .rp-info > :nth-child(n+5) { animation-delay: 280ms; }
}

/* ---------- tablet: the rooms two by two; the room page in one column ---------- */
@media (max-width: 1080px) {
  .rl { height: auto; }
  .rl-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 62svh; }
  .rl-rooms.is-many .rc { height: auto; }
  .rp-top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .rp-media { position: static; height: 72svh; }
  .rp-info { padding-top: 0; }
}

/* ---------- phone: one room per screen, swipe sideways for its photos ---------- */
@media (max-width: 720px) {
  .rl { gap: 14px; }
  .rl-title h1 { font-size: clamp(2.5rem, 14vw, 4.5rem); overflow-wrap: anywhere; max-width: 100%; }
  .rl-rooms { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 78svh; gap: 10px; }
  .rc-name { font-size: clamp(2.25rem, 12vw, 3rem); }
  .rp-media { height: 64svh; }
  .gal-thumb { width: 60px; height: 60px; }
  .rp-facts { grid-template-columns: 1fr; }
  /* two rooms side by side; an odd one out goes across both */
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .others li:last-child:nth-child(odd) a { aspect-ratio: 16 / 10; }
  .other-name { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rc, .gal-btn, .sheet.is-on { transition: none; }
}