/* SWPL v2 — additions on top of v1's stylesheet.

   Only what the new markup needs: three filter groups instead of one chip row,
   a status on every fixture, and a fixed Buy bar on the phone. Everything else
   is inherited, so the two pages stay visually the same family and a change to
   the base still reaches both. */

/* v1's own sticky bar is gone from this page, so the 92px it reserved at the
   bottom of the document is dead space on desktop. */
body{padding-bottom:0}

/* ------------------------------------------------------- the filter groups */
.fbar{margin:22px 0 18px;display:grid;gap:14px}
/* the CLUB / CITY captions are gone, so the group is just the scroller */
.fgrp{display:block;min-width:0}
/* Nine club chips fit no width: at 1440 NEOM dropped alone onto a second line
   and the two groups stopped reading as two rows. So the row scrolls sideways
   at every width — arrows on a pointer device, a swipe on touch — and the
   fade at each end says there is more without needing a scrollbar. */
.fscroll{position:relative;min-width:0}
.frow{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;
  scroll-behavior:smooth;padding:2px 0}
.frow::-webkit-scrollbar{display:none}
.frow .chip{flex:0 0 auto}
/* the fade has to be wider than the arrow, or the arrow sits on top of a chip
   that is still fully legible and the two fight */
.fscroll.can-l .frow{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 58px);
          mask-image:linear-gradient(90deg,transparent 0,#000 58px)}
.fscroll.can-r .frow{
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 58px);
          mask-image:linear-gradient(270deg,transparent 0,#000 58px)}
.fscroll.can-l.can-r .frow{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 58px,#000 calc(100% - 58px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 58px,#000 calc(100% - 58px),transparent 100%)}

.fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;font:700 21px/1 inherit;padding-bottom:3px;
  background:var(--chip);color:var(--white);
  box-shadow:0 2px 14px rgba(0,0,0,.5)}
.fnav:hover{background:var(--greenb);color:#0B0713}
/* `display:grid` above beats the user agent's own [hidden]{display:none}, so
   both arrows rendered at scroll position 0 — the same trap the v1 lightbox
   fell into. Say it explicitly. */
.fnav[hidden]{display:none}
.fprev{left:-8px} .fnext{right:-8px}
/* touch scrolls by hand; the arrows are for mice and trackpads */
@media (hover:none){ .fnav{display:none} }

/* Nine clubs miss fitting 1440 by fifteen pixels. Two of those come back from
   the gap and the rest from the chip's own padding, so the widest common
   desktop shows the whole row and never needs an arrow at all. */
@media (min-width:1200px){
  .fbar .chip{padding:11px 17px}
  .frow{gap:7px}
}
.fclear{justify-self:start;margin-top:2px;font-family:inherit;font-weight:800;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:none;border:0;padding:6px 2px;color:var(--greenb);
  text-decoration:underline;text-underline-offset:4px}

/* ----------------------------------------------------------- the subtitle
   v1 solved this the other way round: the plate was pulled 6px left and the
   padding put back, so the letters lined up with the heading and the plate
   itself stuck out past it. On a page with this much air the overhanging plate
   is what the eye catches, so align the plate to the heading and the content
   grid — all three now start at the same x — and give the text room inside it
   instead of sitting against the edge. */
.sub{margin-left:0;padding-left:16px;padding-right:20px}
.sub.warn{margin-left:0;padding-left:16px}

/* --------------------------------------------------------------- gallery
   v1 capped the gallery at 33vh. With a 16/9 box a height cap is really a
   width cap, so at 1440 it drew 528px wide inside a 654px column and left a
   strip of empty ground down its right side. That went unnoticed on v1
   because five more sections crowded it; here the block stands nearly alone
   and the gap is the first thing you see. Let the column decide the width
   and the ratio decide the height, and cap only what a short window needs. */
.why .gal{max-height:min(58vh,560px)}
/* On a wide screen the text card is taller than a 16/9 picture of the same
   width, so the two columns end level rather than the picture floating. */
@media (min-width:1200px){
  .why .whygrid{align-items:stretch}
  .why .gal{aspect-ratio:auto;height:100%;min-height:clamp(300px,42vh,470px)}
}
/* 1001-1199 is where a 1440 screen lands at 125-140% browser zoom, so it is not
   an edge case — it is how a lot of people actually read this page. The text
   card was still pinned at 620px there and ate the row, leaving the picture
   348px wide with a hole under it. Split the row, give the picture the larger
   half, and let it fill the height like it does on a wide screen. */
@media (min-width:1001px) and (max-width:1199px){
  .why .whygrid{grid-template-columns:minmax(280px,.92fr) minmax(0,1.08fr);
    align-items:stretch}
  .why .gal{aspect-ratio:auto;height:100%;min-height:clamp(260px,36vh,420px)}
}

/* ------------------------------------------------------------- the status
   SAFF's point 8: readable without opening the match. It sits in the row, not
   on a hover, and the button says the same thing so the two cannot disagree. */
.tstat{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px}
.tstat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-available   {color:var(--greenb);background:rgba(2,241,25,.13)}
.s-coming_soon {color:var(--amber);background:rgba(197,219,101,.14)}
.s-sold_out    {color:var(--pink);background:rgba(255,35,167,.13)}
.s-sales_closed{color:var(--lilac);background:rgba(167,154,186,.14)}

.mprice.mq{opacity:.45}
/* A dead button still has to look like a button, or the row reads as broken. */
.btn.off{background:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  color:var(--lilac);cursor:default}
.btn.off:hover{transform:none;background:none}
.mrow[data-st="SOLD_OUT"] .mteams b,
.mrow[data-st="SALES_CLOSED"] .mteams b{opacity:.72}

/* the fixture row gains a column for the status */
@media (min-width:1001px){
  .mrow{grid-template-columns:clamp(112px,10vw,168px) minmax(0,1fr) auto auto auto}
}

/* ------------------------------------------------------- mobile Buy bar
   SAFF's point 9. It names the next match that is actually on sale, so the
   button never lands on a sold-out fixture, and it stands down while the
   ticket list itself is on screen. */
.mbuy{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--chip);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
  padding:10px max(14px,env(safe-area-inset-left))
          calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));
  transform:translateY(0);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.mbuy.hide{transform:translateY(115%)}
.mbuy.none{display:none!important}
.mbin{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto}
.mbtxt{min-width:0;flex:1}
.mbtxt b{display:block;font-size:14px;font-weight:800;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbtxt span{display:block;font-size:12px;color:var(--lilac);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbuy .btn{flex:0 0 auto;padding:12px 20px;font-size:14px}

@media (max-width:1000px){
  .mbuy{display:block}
  /* the bar sits over the page, so the last section needs room under it */
  body{padding-bottom:0}
  .foot{padding-bottom:96px}

  .fbar{gap:10px}
  /* the row runs to both edges of the screen so the last chip is not stranded
     behind the gutter, and carries the gutter as its own padding instead */
  .fscroll{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}
  .frow{padding:2px var(--pad) 6px}
  /* the scroller already reaches both edges here, so an arrow hanging 14px
     outside it hangs off the screen and widens the document */
  .fprev{left:6px} .fnext{right:6px}

  /* Status above the price rather than beside it: at 390px the row already
     carries date, two crests, two club names and a venue. */
  .tstat{grid-column:1/-1;justify-self:start;margin-top:2px}
}

@media (prefers-reduced-motion:reduce){
  .mbuy{transition:none}
}