/* ============================================================
   TAVLA
   The club read off a scoreboard, on the club's navy.

   Nothing here names a literal colour: every ground is --ground
   or --invert, every ink is --on-ground or --on-invert. The site
   ships dark, but the design does not know that — swapping the
   palette in tokens.css is all a light mode would take.

   The load-bearing idea: the offer card is built from --invert,
   the opposite material to the page. On the dark page it is a
   paper slab, the only surface of its kind, so the eye lands on
   the price by material contrast rather than by arrows or
   animation.
   ============================================================ */

/* ---------- hero ----------
   The poster headline. It sits on --ground, so the block flips with
   the theme. The mechanics live in app.css (.posterhead) — everything
   below is colour and scale.

   What it replaced: the hero laid out as a padel court seen from
   above, with the rails thickened into side walls and the markings
   drawn in as floor paint. The poster block wants the full measure
   and no enclosure, so the court went with it. */

/* No padding on the section itself: the rails are drawn by .wrap, so
   anything padded outside it leaves a gap where the two hairlines stop
   and restart. The hero's top air comes from the wrap instead. */
body[data-v='tavla'] .tavla-hero .wrap:first-child {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

/* Ruled off below, the way a poster's standfirst is. The rule is the
   page rail's weight so it belongs to the same system as the bands. */
body[data-v='tavla'] .tavla-hero__eyebrow {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: var(--hair) solid var(--ground-rail);
  color: var(--accent-on-ground);
}

body[data-v='tavla'] .tavla-hero__h {
  margin: 0;
  color: var(--on-ground-strong);
}
body[data-v='tavla'] .tavla-hero__h .posterline {
  font-size: clamp(50px, 11.5vw, 148px);
}
/* The middle line is the one that says who the club is for, so it
   takes the single accent — in whichever lime reads on the ground. */
body[data-v='tavla'] .tavla-hero__h .posterline--1 {
  color: var(--accent-on-ground);
}

body[data-v='tavla'] .tavla-hero__foot {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--ground-rail);
  align-items: start;
}
body[data-v='tavla'] .tavla-hero__p { color: var(--on-ground-muted); }
body[data-v='tavla'] .tavla-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-content: start;
}

/* The scoreboard readout, welded to the bottom of the hero.
   The court's far wall used to be its top edge; with the court gone
   it draws its own, at the same weight as the fixture table's column
   heads — the page's two readouts open the same way. */
body[data-v='tavla'] .tavla-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hair);
  background: var(--ground-rail);
  border-top: var(--rule) solid var(--on-ground-strong);
}
body[data-v='tavla'] .tavla-cell {
  background: var(--ground);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
body[data-v='tavla'] .tavla-cell__l { color: var(--on-ground-muted); }
body[data-v='tavla'] .tavla-cell__v {
  font-size: clamp(34px, 4.6vw, 52px);
  color: var(--accent-on-ground);
  line-height: 1.02;
  padding-top: 0.06em;
}

/* ---------- photography ---------- */

body[data-v='tavla'] .tavla-shot .photo {
  aspect-ratio: 16 / 7;
  border-bottom: var(--hair) solid var(--ground-rail);
  /* Keep the court and the rally; the hall's ceiling is the part the
     band can afford to lose. */
  --photo-pos: 50% 62%;
}
@media (max-width: 759px) {
  body[data-v='tavla'] .tavla-shot .photo { aspect-ratio: 4 / 3; }
}

/* ---------- join ---------- */

body[data-v='tavla'] .tavla-join {
  display: grid;
  gap: var(--sp-6);
}

/* The one surface made of the opposite material. */
/* .on-invert tells the shared focus rule this surface is the
   opposite material, so the ring flips with it. */
body[data-v='tavla'] .tavla-card {
  background: var(--invert);
  color: var(--on-invert);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  border: var(--rule) solid var(--accent-on-ground);
}
body[data-v='tavla'] .tavla-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  color: var(--on-invert-muted);
}
body[data-v='tavla'] .tavla-card__fig {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: var(--hair) solid var(--invert-rail);
}
body[data-v='tavla'] .tavla-card__n {
  font-size: clamp(66px, 9vw, 94px);
  line-height: 0.9;
  color: var(--on-invert);
}
body[data-v='tavla'] .tavla-card__per { font-size: 24px; color: var(--on-invert-muted); }
body[data-v='tavla'] .tavla-incl {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
body[data-v='tavla'] .tavla-incl li {
  display: flex;
  gap: var(--sp-3);
  font-size: 15.5px;
  line-height: 1.4;
}
/* Pending: the line goes through the benefit itself, not through the
   tick beside it or the tag that explains why. */
body[data-v='tavla'] .tavla-incl li.is-soon { color: var(--on-invert-muted); }
body[data-v='tavla'] .tavla-incl li.is-soon .tavla-incl__t {
  text-decoration: line-through;
  text-decoration-thickness: var(--hair);
}
body[data-v='tavla'] .tavla-card__fine {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--on-invert-muted);
}

/* Perks as a readout: value first, in the same face and colour as the
   scoreboard figures above, so the two read as one instrument. */
body[data-v='tavla'] .tavla-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hair) solid var(--ground-rail);
}
body[data-v='tavla'] .tavla-perk {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-bottom: var(--hair) solid var(--ground-rail);
}
body[data-v='tavla'] .tavla-perk__v {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.02;
  padding-top: 0.06em;
  color: var(--accent-on-ground);
}
body[data-v='tavla'] .tavla-perk__t {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ground-strong);
}
body[data-v='tavla'] .tavla-perk__d {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-ground-muted);
  max-width: 48ch;
}

/* The lead perk: the name takes the accent too, so the row the club most
   wants read is marked by colour rather than by weight or a rule. Kept
   above the pending block on purpose — the two have equal specificity, so
   source order decides, and a benefit that has not arrived yet should go
   muted rather than shout, even if it is ever flagged as the lead. */
body[data-v='tavla'] .tavla-perk.is-lead .tavla-perk__t {
  color: var(--accent-on-ground);
}

/* Pending: the row steps back to the muted ink and the value loses the
   accent, so the readout's lime is reserved for what a member gets
   today. The line goes through the figure and the name — not the
   description, which is the part that says what is coming. */
body[data-v='tavla'] .tavla-perk.is-soon .tavla-perk__v,
body[data-v='tavla'] .tavla-perk.is-soon .tavla-perk__t {
  color: var(--on-ground-muted);
  text-decoration: line-through;
}
/* The figure is set several times the size of the name beside it, so a
   hairline would read as a stray mark on one and a strike on the other.
   Each takes the weight its own type needs. */
body[data-v='tavla'] .tavla-perk.is-soon .tavla-perk__v { text-decoration-thickness: 3px; }
body[data-v='tavla'] .tavla-perk.is-soon .tavla-perk__t { text-decoration-thickness: var(--hair); }
body[data-v='tavla'] .tavla-perk.is-soon .tavla-perk__t .badge--soon {
  text-decoration: none;
  margin-left: var(--sp-2);
}

/* ---------- events: a fixture table ---------- */

body[data-v='tavla'] .tavla-fixlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-v='tavla'] .tavla-fix {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  border-bottom: var(--hair) solid var(--ground-rail);
  align-items: baseline;
}
body[data-v='tavla'] .tavla-fix--head {
  display: none;
  padding-block: var(--sp-3);
  border-top: var(--rule) solid var(--on-ground-strong);
  color: var(--on-ground-muted);
}
body[data-v='tavla'] .tavla-fix__date {
  grid-column: 1;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-on-ground);
}
body[data-v='tavla'] .tavla-fix__tag {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 11px;
  color: var(--on-ground-muted);
}
body[data-v='tavla'] .tavla-fix__body { grid-column: 1 / -1; }
body[data-v='tavla'] .tavla-fix__t {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  /* Event titles are the one place a reader scans for a specific
     word, so they keep room for the ring on Å rather than clipping it. */
  line-height: 1.05;
  padding-top: 0.04em;
  color: var(--on-ground-strong);
}
body[data-v='tavla'] .tavla-fix__d {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-ground-muted);
  max-width: 52ch;
}
/* Where the event is held. Stacked under the row until the table is
   wide enough to give it a column of its own. */
body[data-v='tavla'] .tavla-fix__where {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--on-ground-muted);
}
body[data-v='tavla'] .tavla-fix__pin {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.8;
}
/* The header row's own Sted cell: only meaningful once the venue has a
   column. Below that width it would sit under "Hva" labelling nothing. */
body[data-v='tavla'] .tavla-fix--head .tavla-fix__where { display: none; }

/* An event with a signup link. The title is the anchor and its hit area
   is stretched over the row, so the whole row is pressable while the
   page carries one link per event rather than three. */
body[data-v='tavla'] .tavla-fix.has-signup { position: relative; }
body[data-v='tavla'] .tavla-fix__link {
  color: inherit;
  text-decoration: none;
}
body[data-v='tavla'] .tavla-fix__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* The signup marker is drawn, not typed — see go() in render.js for why.
   Sized in em so it tracks the title through its clamp instead of going
   spindly against a 30px headline and heavy against a 22px one, and set
   just under the cap height of the Anton line it follows. */
body[data-v='tavla'] .tavla-fix__go {
  display: inline-block;
  width: 0.46em;
  height: 0.46em;
  margin-left: 0.3em;
  vertical-align: 0.26em;
  color: var(--accent-on-ground);
  transition: transform 140ms ease;
}
/* The row is the hit area, and a mark this small is the first thing to
   blur when it moves. Anyone who has asked for less motion keeps it
   still and reads the underline instead. */
@media (prefers-reduced-motion: reduce) {
  body[data-v='tavla'] .tavla-fix__go { transition: none; }
}
/* The tint is already spent on tournaments, so a cup row that links
   answers the pointer with the title alone. */
body[data-v='tavla'] .tavla-fix.has-signup:not(.is-cup):hover { background: var(--ground-2); }
body[data-v='tavla'] .tavla-fix.has-signup:hover .tavla-fix__link,
body[data-v='tavla'] .tavla-fix__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: from-font;
}
body[data-v='tavla'] .tavla-fix.has-signup:hover .tavla-fix__go { transform: translate(2px, -2px); }

/* Tournaments are the rows that matter. Marked by a tint inside the
   table, not by a side stripe and not by lifting them out of it. */
body[data-v='tavla'] .tavla-fix.is-cup { background: var(--ground-2); }
body[data-v='tavla'] .tavla-fix.is-cup .tavla-fix__tag { color: var(--accent-on-ground); }

/* ---------- closing CTA ----------
   Fixed navy in both modes, so the page closes on the brand colour
   rather than on a full sheet of accent. The lime is spent on the
   button alone, which makes the thing to press the brightest thing
   on the band. */

body[data-v='tavla'] .tavla-cta__h {
  font-size: clamp(40px, 8vw, 92px);
  color: var(--on-invert);
  line-height: 1.02;
  padding-top: 0.06em;
}
body[data-v='tavla'] .tavla-cta__foot {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--invert-rail);
  align-items: start;
}
body[data-v='tavla'] .tavla-cta .lede { color: var(--on-invert-muted); }
body[data-v='tavla'] .tavla-cta__shot {
  aspect-ratio: 16 / 6;
  margin-top: var(--sp-7);
}

/* The CTA is the only fixed ground on the page, so it is the only band
   that can end up the same colour as its neighbour — and on the dark
   palette it does: the events band above it is navy as well. That edge
   takes a hairline so the join reads. Below it the footer is the darker
   ground, and the colour change carries that join on its own. */
body[data-v='tavla'] .tavla-cta { border-top: var(--hair) solid var(--navy-3); }

/* ---------- breakpoints ---------- */

@media (min-width: 760px) {
  body[data-v='tavla'] .tavla-board { grid-template-columns: repeat(4, 1fr); }
  body[data-v='tavla'] .tavla-cta__foot { grid-template-columns: 1.4fr auto; }
  /* The figure and the name shared a baseline here, which reads well only
     while the description is one line: the moment it wraps, the body grows
     downward and the figure is left stranded at the top of the row. Centred,
     the value holds the middle of whatever sits beside it. The 0.06em pad on
     the value is a baseline correction, so it comes off with the baseline. */
  body[data-v='tavla'] .tavla-perk {
    grid-template-columns: 150px 1fr;
    gap: var(--sp-5);
    align-items: center;
  }
  body[data-v='tavla'] .tavla-perk__v { padding-top: 0; }
  body[data-v='tavla'] .tavla-fix {
    grid-template-columns: 130px 1fr 120px;
    align-items: start;
  }
  body[data-v='tavla'] .tavla-fix--head { display: grid; }
  body[data-v='tavla'] .tavla-fix__date { padding-top: 5px; }
  body[data-v='tavla'] .tavla-fix__body { grid-column: 2; }
  /* Still under the title here: three columns leave the venue nowhere to
     go without squeezing the one column doing the reading. */
  body[data-v='tavla'] .tavla-fix__where { grid-column: 2; margin-top: 8px; }
  body[data-v='tavla'] .tavla-fix__tag  { grid-column: 3; grid-row: 1; padding-top: 5px; }
}

/* Wide enough for the venue to stand as its own column, which is what
   makes the band read as a fixture table: date, what, where, kind. */
@media (min-width: 940px) {
  /* The venue track takes a share rather than a fixed width: most rows
     the club enters have no description, and a greedy 1fr for "Hva" left
     a hole in the middle of the table on those. */
  body[data-v='tavla'] .tavla-fix { grid-template-columns: 130px 1.7fr 1fr 120px; }
  body[data-v='tavla'] .tavla-fix--head .tavla-fix__where { display: block; }
  body[data-v='tavla'] .tavla-fix__where {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    padding-top: 6px;
    align-items: start;
  }
  body[data-v='tavla'] .tavla-fix__pin { margin-top: 2px; }
  body[data-v='tavla'] .tavla-fix__tag { grid-column: 4; }
  /* The rows hang their cells off the title's first line, so they carry a
     nudge the column labels have nothing to line up with. */
  body[data-v='tavla'] .tavla-fix--head .tavla-fix__where,
  body[data-v='tavla'] .tavla-fix--head .tavla-fix__tag { padding-top: 0; }
}

@media (min-width: 980px) {
  body[data-v='tavla'] .tavla-join { grid-template-columns: 380px 1fr; gap: var(--sp-8); }
  /* Once the list stands in its own column there is nothing above the first
     row or below the last for a rule to join, so the outer two read as loose
     marks rather than as edges. The rules between the rows stay — those are
     the ones doing work. Below this width the list sits under the card, and
     the top rail is what separates the two, so it is kept. */
  body[data-v='tavla'] .tavla-perks { border-top: 0; }
  body[data-v='tavla'] .tavla-perk:last-child { border-bottom: 0; }
}

@media (min-width: 900px) {
  /* The lede takes the measure and the buttons close on the right
     rail, so the row reads out to both edges of the sheet. */
  body[data-v='tavla'] .tavla-hero__foot { grid-template-columns: 1.5fr auto; }
}