/* FS25-pagina (/fs25/). De HTML komt uit build/fs25.py, de gegevens uit fs25/fs25.json,
   het gedrag (platformkeuze, trailer, afspeellijst) uit fs25/fs25.js.
   Idee: de trailer en de koopknop zijn de voorkant; de keuze pc / PlayStation / Xbox is het ene ding
   dat je kunt doen. Daaronder het spel zelf (kaarten, wat nieuw is) en daarna onze eigen handleidingen. */

@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/shop/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

.fs {
  --ink: #f4f1e8;
  --muted: #c4bfb1;
  --surface: #1f1e1a;
  --surface-2: #2a2924;
  --yellow: #f9fb00;
  --amber: #fcc400;
  --green: #8cc63f;
  --dark: #12120f;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --radius: 20px;
  box-sizing: content-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 3.5vw, 48px) clamp(16px, 4vw, 32px) clamp(64px, 8vw, 112px);
  color: var(--ink);
}
/* De lege WordPress-groepen rond de inhoud gaven samen 128 px lucht boven de trailer. */
main:has(.fs) > .wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; }
.fs *, .fs *::before, .fs *::after { box-sizing: border-box; }
.fs :where(h2, h3, p, ul, figure) { margin: 0; padding: 0; }
.fs ul[role="list"] { list-style: none; }
.fs a { color: inherit; text-decoration: none; }
.fs [hidden] { display: none !important; }
.fs :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 12px; }
.fs ::selection { background: var(--yellow); color: var(--dark); }
.fs-ico { width: 18px; height: 18px; flex: none; }
.fs :is(p, li) { font-weight: 400; }
.fs img { display: block; max-width: 100%; height: auto; }

.fs .fs-h2 {
  font: 700 clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem)/.95 var(--display);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.fs .fs-text { font-size: 1.04rem; line-height: 1.6; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.fs-sec { margin-top: clamp(88px, 10vw, 140px); }
.fs-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 36px); }
.fs-btn .fs-ico { width: 18px; height: 18px; }
.fs-btn:active { transform: scale(.97); }

/* ---------- voorkant: trailer + koopknop ---------- */
.fs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
}
.fs-trailer { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.fs-trailer__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.fs-trailer.is-playing .fs-trailer__video { object-fit: contain; }
.fs-trailer__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 28px);
  border: 0;
  background: linear-gradient(to top, rgba(10, 10, 8, .72), rgba(10, 10, 8, 0) 45%);
  color: #fff;
  font: 700 1.05rem/1 inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fs-trailer__play:focus-visible { outline-offset: -6px; border-radius: var(--radius); }
.fs-trailer__disc {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--dark);
  flex: none;
  transition: transform .2s var(--ease-out);
}
.fs-trailer__disc .fs-ico { width: 22px; height: 22px; margin-left: 3px; }
.fs-trailer__play:active .fs-trailer__disc { transform: scale(.94); }

.fs-hero__text { display: grid; justify-items: start; gap: 18px; }
.fs-logo { width: min(300px, 70%); }
.fs .fs-hero__title { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); }
.fs .fs-lead { font-size: clamp(1.04rem, 1rem + .25vw, 1.15rem); line-height: 1.6; color: var(--ink); max-width: 42ch; text-wrap: pretty; }

.fs-buy { display: grid; gap: 12px; width: 100%; margin-top: 6px; }
.fs .fs-plat__label { font-size: .95rem; font-weight: 700; color: var(--muted); }
/* Platformkeuze: drie links (zonder JS gaan ze direct naar de winkel), met JS een schuifje met een gele pil. */
.fs-plat {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  isolation: isolate;
}
.fs-plat__opt {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fs-plat.is-ready::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--w, 0);
  border-radius: 999px;
  background: var(--yellow);
  transform: translateX(var(--x, 0));
  transition: transform .32s var(--ease-out), width .32s var(--ease-out);
}
.fs-plat.no-anim::before { transition: none; }
.fs-plat__opt[aria-pressed="true"] { color: var(--dark); }
.fs-plat__short { display: none; }
.fs-buy .fs-btn { justify-content: center; min-height: 54px; width: 100%; }
.fs .fs-note { font-size: .92rem; line-height: 1.5; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.fs .fs-note strong { color: var(--ink); }

/* ---------- drie kaarten ---------- */
.fs-maps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(28px, 5vw, 72px);
}
.fs-maps__text { display: grid; align-content: start; gap: 16px; }
.fs-maplist { display: grid; gap: clamp(22px, 2.6vw, 32px); margin-top: clamp(14px, 2vw, 24px) !important; }
.fs-map { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding-top: clamp(18px, 2vw, 24px); }
.fs-map + .fs-map { box-shadow: inset 0 2px 0 var(--surface-2); }
.fs .fs-map__name { font: 700 clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.fs .fs-map__where { align-self: center; font-size: .92rem; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.fs .fs-map__text { grid-column: 1 / -1; font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.fs-maps__photo { border-radius: var(--radius); overflow: hidden; background: var(--surface); min-height: 100%; }
.fs-maps__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- wat is er nieuw ---------- */
.fs-new > .fs-h2 { margin-bottom: clamp(24px, 3vw, 36px); }
.fs-new__photos { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.fs-new__photo { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.fs-new__photo:first-child { aspect-ratio: 16 / 10; }
.fs-new__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fs-new__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.4vw, 44px) !important; }
.fs .fs-new__name { font: 700 1.5rem/1 var(--display); text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.fs .fs-new__text { font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- aan de slag ---------- */
.fs-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name go' 'text go';
  align-items: center;
  gap: 6px 20px;
  height: 100%;
  padding: 20px clamp(18px, 2.2vw, 26px);
  border-radius: 18px;
  background: var(--surface);
  transition: background-color .2s ease, transform .16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.fs .fs-row__name { grid-area: name; font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.fs .fs-row__text { grid-area: text; font-size: .98rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.fs-row__go { grid-area: go; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); color: var(--yellow); transition: background-color .2s ease, color .2s ease; }
.fs-row__go .fs-ico { transition: transform .2s var(--ease-out); }
.fs-row:active { transform: scale(.99); }

/* ---------- YouTube ---------- */
.fs-yt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: clamp(28px, 4.5vw, 64px); }
.fs-yt__text { display: grid; justify-items: start; gap: 18px; }
.fs-yt__player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.fs-yt__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fs-yt__facade { position: absolute; inset: 0; display: block; -webkit-tap-highlight-color: transparent; }
.fs-yt__facade img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s var(--ease-out); }
.fs-yt__play {
  position: absolute;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: rgba(18, 18, 15, .86);
  color: #fff;
  font-weight: 700;
  font-size: .98rem;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
}
.fs-yt__play .fs-trailer__disc { width: 44px; height: 44px; }
.fs-yt__play .fs-trailer__disc .fs-ico { width: 18px; height: 18px; }
.fs-yt__facade:active .fs-trailer__disc { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .fs-trailer__play:hover .fs-trailer__disc, .fs-yt__facade:hover .fs-trailer__disc { transform: scale(1.06); }
  .fs-yt__facade:hover img { transform: scale(1.03); }
  .fs-plat__opt:not([aria-pressed="true"]):hover { color: var(--yellow); }
  .fs-row:hover { background: var(--surface-2); }
  .fs-row:hover .fs-row__go { background: var(--yellow); color: var(--dark); }
  .fs-row:hover .fs-row__go .fs-ico { transform: translateX(2px); }
}

/* ---------- het ene moment: de trailer gaat open, de tekst komt erachteraan ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fs-trailer { animation: fs-open .9s var(--ease-out) both; }
  .fs-hero__text > * { animation: fs-rise .6s var(--ease-out) both; }
  .fs-hero__text > :nth-child(1) { animation-delay: .12s; }
  .fs-hero__text > :nth-child(2) { animation-delay: .2s; }
  .fs-hero__text > :nth-child(3) { animation-delay: .28s; }
  .fs-hero__text > :nth-child(4) { animation-delay: .36s; }
}
@keyframes fs-open { from { clip-path: inset(0 0 100% 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes fs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fs *, .fs *::before { transition-duration: .01ms !important; }
}

/* ---------- tablet en telefoon ---------- */
@media (max-width: 999px) {
  .fs-hero, .fs-yt { grid-template-columns: minmax(0, 1fr); }
  .fs-maps { grid-template-columns: minmax(0, 1fr); }
  .fs-maps__photo { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
  .fs-new__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fs { --radius: 16px; }
  .fs-logo { width: min(220px, 62%); }
  .fs-plat__opt { font-size: .92rem; padding: 0 6px; }
  .fs-plat__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fs-plat__short { display: inline; }
  .fs-new__photos { grid-template-columns: minmax(0, 1fr); }
  .fs-new__photo:first-child { aspect-ratio: 4 / 3; }
  .fs-map { grid-template-columns: minmax(0, 1fr); }
  .fs .fs-map__where { align-self: start; }
  .fs-new__photo + .fs-new__photo { display: none; }
  .fs-new__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fs-row { padding: 16px 16px 16px 18px; }
  .fs-yt__text .fs-btn { width: 100%; justify-content: center; }
  .fs-yt__play { font-size: .9rem; }
}