/* IK Brage Stats — scoped under .ikbrage-stats so we don't fight Elementor's theme. */

:root {
  /* Identity tokens (from Brage's design system) */
  --brage-bg-page:      #022510;
  --brage-row-leader:   #745998;
  --brage-row-dark:     #044620;
  --brage-row-light:    #31733E;
  --brage-line:         #479D4F;
  --brage-text-light:   #C9FEB9;
  --brage-text-on-dark: #ffffff;

  --brage-dot-w:        #4EA64C;
  --brage-dot-d:        #E49635;
  --brage-dot-l:        #801919;

  --brage-radius:       12px;

  /* Heading font: Helmer (file not yet shipped — add an @font-face block once provided). */
  --brage-font-heading: 'Helmer', 'Inter', system-ui, -apple-system, sans-serif;
  --brage-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Width of the dark-green strip that separates column groups */
  --brage-divider:      6px;

  /* Legacy aliases (used by MatchCard's v0 styling — keeps that component working
     until its own Figma pass arrives). */
  --brage-green:        #044620;
  --brage-green-dark:   #033a1a;
  --brage-green-deep:   #022510;
  --brage-accent-pink:  #e91e63;
  --brage-muted:        rgba(201, 254, 185, 0.65);
}

.ikbrage-stats { box-sizing: border-box; font-family: var(--brage-font-body); }
.ikbrage-stats *, .ikbrage-stats *::before, .ikbrage-stats *::after { box-sizing: inherit; }

/* === Next match section (unchanged — awaits its own Figma pass) === */
.ikbrage-next-match-section { margin: 2rem 0; }
.ikbrage-next-match-section__heading {
  color: var(--brage-line);
  font-family: var(--brage-font-heading);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  font-size: 1.5rem !important;
}
.ikbrage-next-match-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 760px) {
  .ikbrage-next-match-section__grid { grid-template-columns: 1fr 1fr; }
}

/* === Match card — white card with dark-green header band === */
.ikbrage-match-card {
  background: #ffffff;
  border-radius: var(--brage-radius);
  overflow: hidden;
  border: 1px solid rgba(4, 70, 32, 0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.08);
  color: #1a1a1a;
  font-family: var(--brage-font-body);
}
.ikbrage-match-card__header {
  background: #002912;
  color: var(--brage-text-on-dark);
  padding: 0.85rem 1.2rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 1.05rem;
  font-family: var(--brage-font-heading);
}
.ikbrage-match-card__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
}
.ikbrage-match-card__body--tba {
  display: block;
  text-align: center;
  color: rgba(4, 70, 32, 0.55);
  font-style: italic;
  padding: 2rem 1rem;
}
.ikbrage-match-card__team { display: grid; justify-items: center; gap: 0.55rem; }
.ikbrage-match-card__logo { width: 64px; height: 64px; object-fit: contain; }
.ikbrage-match-card__logo--placeholder {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--brage-row-light);
  border: 1px solid var(--brage-line);
  display: inline-block;
}
.ikbrage-match-card__team-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brage-row-dark);
}
.ikbrage-match-card__kickoff { display: grid; justify-items: center; gap: 0.2rem; text-align: center; }
.ikbrage-match-card__competition {
  display: inline-block;
  background: #044620;
  color: var(--brage-text-on-dark);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-family: var(--brage-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
  line-height: 1.2;
  white-space: nowrap;
}
.ikbrage-match-card__weekday {
  font-size: 1rem;
  color: #000;
  font-weight: 400;
}
.ikbrage-match-card__date {
  font-weight: 800;
  color: var(--brage-line);
  font-size: 2.25rem;
  line-height: 1;
  font-family: var(--brage-font-heading);
  letter-spacing: 0;
}
.ikbrage-match-card__time {
  font-size: 1rem;
  color: #000;
  font-weight: 400;
}

/* ============================================================
   LEAGUE TABLE — Brage identity
   ============================================================ */

.ikbrage-table {
  border: 1px solid var(--brage-line);
  border-radius: var(--brage-radius);
  overflow: hidden;
  color: var(--brage-text-on-dark);
  background: var(--brage-row-dark);
}

/* Top heading band */
.ikbrage-table__header {
  background: var(--brage-row-dark);
  padding: 1rem 1.25rem 0.9rem;
}
.ikbrage-table__heading {
  font-family: var(--brage-font-heading);
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.5rem !important;
  color: var(--brage-text-on-dark);
}

/* Horizontal scroll on narrow viewports — keep all columns visible */
.ikbrage-table__scroll { overflow-x: auto; background: var(--brage-row-dark); }

.ikbrage-table__grid {
  width: 100%;
  /* `separate` (not `collapse`) so position:sticky works reliably on th/td */
  border-collapse: separate;
  border-spacing: 0;
  min-width: 920px;
}
/* Defend against theme-injected td/th borders. Cells that need an internal
   line (column-header underline, POÄNG vertical divider) re-add it right after
   the reset with matching specificity so they survive. */
.ikbrage-table .ikbrage-table__grid,
.ikbrage-table .ikbrage-table__grid thead,
.ikbrage-table .ikbrage-table__grid tbody,
.ikbrage-table .ikbrage-table__grid tr,
.ikbrage-table .ikbrage-table__grid th,
.ikbrage-table .ikbrage-table__grid td {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.ikbrage-table .ikbrage-table__grid thead th {
  border-bottom: 1px solid var(--brage-text-light);
}
.ikbrage-table .ikbrage-table__grid th.ikbrage-table__col--points,
.ikbrage-table .ikbrage-table__grid td.ikbrage-table__col--points {
  border-left: 1px solid var(--brage-text-light);
}

/* Column headers row — light-green text, sits on the card's dark body.
   A thin light-green line below it spans the full width (border-bottom on each th). */
.ikbrage-table__grid thead th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--brage-text-light);
  background: var(--brage-row-dark);
  padding: 0.7rem 0.6rem 0.8rem;
  border-bottom: 1px solid var(--brage-text-light);
  white-space: nowrap;
  font-family: var(--brage-font-body);
}
.ikbrage-table__grid thead th:first-child { padding-left: 1rem; }
.ikbrage-table__grid thead th:last-child  { padding-right: 1rem; text-align: right; }

/* Single vertical light-green line — runs from header all the way down,
   placed on the LEFT edge of the POÄNG column only. */
.ikbrage-table__col--points {
  border-left: 1px solid var(--brage-text-light);
}

.ikbrage-table__col--num     { width: 4.5rem; }
.ikbrage-table__col--team    { width: auto; min-width: 9rem; }
.ikbrage-table__col--form    { text-align: left; min-width: 9.5rem; }
.ikbrage-table__col--numeric { text-align: center; width: 2.4rem; }
.ikbrage-table__col--points  { text-align: right; width: 4.5rem; color: var(--brage-text-light); }

/* Yellow POÄNG header treatment (the column itself stays light-green in body cells) */
.ikbrage-table__grid thead th.ikbrage-table__col--points,
.ikbrage-table__grid thead th.ikbrage-table__col--points .ikbrage-table__sort-caret {
  color: #FFD24A;
}

/* Sticky POÄNG column — pinned to the right while the other columns scroll
   horizontally behind it. Each row's points cell needs an opaque background
   matching that row's color so the scrolling content doesn't bleed through. */
.ikbrage-table__grid thead th.ikbrage-table__col--points,
.ikbrage-table__grid tbody td.ikbrage-table__col--points {
  position: sticky;
  right: 0;
  z-index: 1;
}
.ikbrage-table__grid thead th.ikbrage-table__col--points { background: var(--brage-row-dark); }
.ikbrage-table__grid tbody td.ikbrage-table__col--points { background: var(--brage-row-light); }
.ikbrage-table__grid tbody .ikbrage-table__row:nth-child(even) td.ikbrage-table__col--points {
  background: var(--brage-row-dark);
}
.ikbrage-table__grid tbody .ikbrage-table__row.ikbrage-table__row--leader td.ikbrage-table__col--points {
  background: var(--brage-row-leader);
}
/* Soft shadow on the left of the sticky POÄNG column — depth cue that the row
   continues behind it and is scrollable. High specificity (3 classes + type)
   so it beats the theme-border reset above. */
.ikbrage-table .ikbrage-table__grid th.ikbrage-table__col--points,
.ikbrage-table .ikbrage-table__grid td.ikbrage-table__col--points {
  box-shadow: -12px 0 16px -6px rgba(0, 0, 0, 0.55);
}

/* Data rows — alternating light/dark green, no gap between rows */
.ikbrage-table__grid tbody td {
  padding: 0.7rem 0.6rem;
  font-size: 0.95rem;
  vertical-align: middle;
  background: var(--brage-row-light);
}
.ikbrage-table__grid tbody td:first-child { padding-left: 1rem; }
.ikbrage-table__grid tbody td:last-child  { padding-right: 1rem; }

/* Even rows = dark, odd rows = light. Row 1 is odd → light; row 2 even → dark; etc.
   Leader (purple) overrides this regardless of nth-child. */
.ikbrage-table__grid tbody .ikbrage-table__row:nth-child(even) td {
  background: var(--brage-row-dark);
}

/* Leader row — purple, top-of-table. Doubled class for specificity so it beats nth-child. */
.ikbrage-table__grid tbody .ikbrage-table__row.ikbrage-table__row--leader td {
  background: var(--brage-row-leader);
  font-weight: 700;
}

/* Focus team (IK Brage) — subtle: bold only. The Superettan widget design has no per-team
   highlight; this hook stays so we can add accent later without renderer changes. */
.ikbrage-table__row--focus td { font-weight: 700; }

/* Cutoff bar — thin light-green line under specific rows (playoff / relegation).
   Apply with the --cutoff-after modifier; renderer reads cutoff_positions config. */
.ikbrage-table__row--cutoff-after td {
  box-shadow: inset 0 -1px 0 0 var(--brage-text-light);
}

/* Position number — just a number, no tab */
.ikbrage-table__pos-num {
  display: inline-block;
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brage-text-on-dark);
}

/* Team cell: logo + name */
.ikbrage-table__team {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
}
.ikbrage-table__team-logo {
  width: 22px; height: 22px;
  object-fit: contain;
  border-radius: 4px;
}
.ikbrage-table__team-logo--placeholder {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--brage-row-dark);
  border: 1px solid var(--brage-line);
}

/* Form dots — circles with V/O/F letters */
.ikbrage-form { display: inline-flex; gap: 6px; align-items: center; }
.ikbrage-form__dot {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.72rem;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--brage-text-on-dark);
  font-family: var(--brage-font-body);
}
.ikbrage-form__dot--w { background: var(--brage-dot-w); }
.ikbrage-form__dot--d { background: var(--brage-dot-d); }
.ikbrage-form__dot--l { background: var(--brage-dot-l); }

.ikbrage-table__points {
  font-weight: 800;
  text-align: right;
  color: var(--brage-text-light);
}
.ikbrage-table__row--leader .ikbrage-table__points { color: var(--brage-text-on-dark); }

/* POÄNG sort caret in the header */
.ikbrage-table__sort-caret { font-size: 0.65em; margin-left: 0.25rem; }

/* ============================================================
   TOP SCORERS / TOP ASSISTS — featured player + ranked list
   ============================================================ */

.ikbrage-top-scorers {
  border: 1px solid var(--brage-line);
  border-radius: var(--brage-radius);
  overflow: hidden;
  color: var(--brage-text-on-dark);
  background: var(--brage-row-dark);
}

/* Header reuses the body's two-track grid so the # / SPELARE / MATCHER / MÅL
   column labels line up exactly with the corresponding tds beneath them. */
.ikbrage-top-scorers__header {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 12px;
  padding: 0.95rem 12px 0.85rem 12px;
  background: var(--brage-row-dark);
}
.ikbrage-top-scorers__heading {
  font-family: var(--brage-font-heading);
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.5rem !important;
}
.ikbrage-top-scorers__columns {
  display: grid;
  /* matches the row td widths: rank (1.5rem) + name (auto) + matches (4.5rem) + value (3rem),
     with 1rem L/R padding to align with td:first-child / td:last-child padding */
  grid-template-columns: 1.5rem 1fr 4.5rem 3rem;
  gap: 0.6rem;
  padding: 0 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--brage-text-light);
  font-weight: 700;
  text-align: right;
  align-items: center;
}
.ikbrage-top-scorers__columns > :first-child  { text-align: left; }
.ikbrage-top-scorers__columns > :nth-child(2) {
  text-align: left;
  /* "SPELARE" starts where the team emblem starts inside the name cell. The emblem
     is 24×24px with 0.6rem right margin, so we nudge the label by the same amount. */
  padding-left: 0;
}

.ikbrage-top-scorers__body {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--brage-row-dark);
}

/* Featured player column — photo on top, name band flush below (no overlap).
   White background sits behind the (often transparent-edged) CDN player PNG.
   align-self: start so the card keeps its natural height instead of stretching
   to match the rows-list grid track on the right. */
.ikbrage-top-scorers__featured {
  display: flex;
  flex-direction: column;
  align-self: start;
  background: #fff;
  border: 1px solid var(--brage-line);
  border-radius: 10px;
  overflow: hidden;
}
.ikbrage-top-scorers__featured-photo,
.ikbrage-top-scorers__featured-photo--placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: transparent;
}
/* Name strip: single uniform dark-green band, rank sits inline with first/last name */
.ikbrage-top-scorers__featured-name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  font-family: var(--brage-font-body);
  background: var(--brage-row-dark);
}
.ikbrage-top-scorers__featured-rank {
  font-family: var(--brage-font-heading);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--brage-text-on-dark);
}
.ikbrage-top-scorers__featured-name > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.1;
}
.ikbrage-top-scorers__featured-first {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--brage-text-on-dark);
  text-transform: uppercase;
  font-weight: 700;
}
.ikbrage-top-scorers__featured-last {
  display: block;
  color: var(--brage-text-on-dark);
  font-family: var(--brage-font-heading);
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Ranked list on the right — pill rows with vertical gaps between them */
.ikbrage-top-scorers__grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin: -6px 0;  /* compensate for border-spacing above first / below last row */
}
/* Defend against theme-injected td borders. The pill rows rely on plain backgrounds; any
   theme-side line would streak across them. */
.ikbrage-top-scorers .ikbrage-top-scorers__grid,
.ikbrage-top-scorers .ikbrage-top-scorers__grid thead,
.ikbrage-top-scorers .ikbrage-top-scorers__grid tbody,
.ikbrage-top-scorers .ikbrage-top-scorers__grid tr,
.ikbrage-top-scorers .ikbrage-top-scorers__grid th,
.ikbrage-top-scorers .ikbrage-top-scorers__grid td {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.ikbrage-top-scorers__grid thead { display: none; }
.ikbrage-top-scorers__row td {
  padding: 0.7rem 0.6rem;
  font-size: 0.85rem;
  vertical-align: middle;
  /* Default: dark green (sits subtly against the card body) */
  background: var(--brage-row-dark);
}
/* Even rows in the list are lighter; alternation reads as zebra-with-gaps */
.ikbrage-top-scorers__row:nth-child(even) td {
  background: var(--brage-row-light);
}
/* Leader (row 1) wins via doubled class specificity over the nth-child rule */
.ikbrage-top-scorers__grid .ikbrage-top-scorers__row.ikbrage-top-scorers__row--leader td {
  background: var(--brage-row-leader);
  font-weight: 700;
}

/* Rounded pill ends */
.ikbrage-top-scorers__row td:first-child {
  padding-left: 1rem;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.ikbrage-top-scorers__row td:last-child {
  padding-right: 1rem;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.ikbrage-top-scorers__rank {
  width: 1.5rem;
  text-align: left;
  color: var(--brage-text-light);
  font-weight: 700;
}
.ikbrage-top-scorers__row--leader .ikbrage-top-scorers__rank { color: var(--brage-text-on-dark); }

.ikbrage-top-scorers__name {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brage-text-on-dark);
  text-transform: uppercase;
  font-size: 0.78rem;
}
.ikbrage-top-scorers__team-logo {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 4px;
  margin-right: 0.6rem;
  vertical-align: middle;
  object-fit: contain;
}
/* Placeholder variant when the team has no logo URL configured */
span.ikbrage-top-scorers__team-logo {
  background: var(--brage-row-dark);
  border: 1px solid var(--brage-line);
}
.ikbrage-top-scorers__matches {
  text-align: right;
  width: 4.5rem;
  color: var(--brage-text-light);
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.7;
}
.ikbrage-top-scorers__row--leader .ikbrage-top-scorers__matches { color: var(--brage-text-on-dark); }

.ikbrage-top-scorers__value {
  text-align: right;
  width: 3rem;
  padding-right: 1rem !important;
  font-family: var(--brage-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brage-text-on-dark);
}
.ikbrage-top-scorers__row--leader .ikbrage-top-scorers__value { color: var(--brage-text-on-dark); }

@media (max-width: 520px) {
  .ikbrage-top-scorers__body { grid-template-columns: 1fr; }
  .ikbrage-top-scorers__columns { display: none; }
}

/* ============================================================
   FIXTURES (Spelschema) — Brage identity
   ============================================================ */

.ikbrage-fixtures {
  border: 1px solid var(--brage-line);
  border-radius: var(--brage-radius);
  overflow: hidden;
  background: var(--brage-row-dark);
  color: var(--brage-text-on-dark);
}

/* Header band: heading only — flat block, no divider line below. */
.ikbrage-fixtures__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--brage-row-dark);
}
.ikbrage-fixtures__heading {
  font-family: var(--brage-font-heading);
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.5rem !important;
}
/* Scroll wrapper */
.ikbrage-fixtures__scroll {
  overflow-x: auto;
  background: var(--brage-row-dark);
}

.ikbrage-fixtures__grid {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 640px;
}
/* Themes often inject `td { border-bottom: ... }` globally — neutralise here
   with high specificity (no !important needed because we anchor on the grid). */
.ikbrage-fixtures .ikbrage-fixtures__grid,
.ikbrage-fixtures .ikbrage-fixtures__grid thead,
.ikbrage-fixtures .ikbrage-fixtures__grid tbody,
.ikbrage-fixtures .ikbrage-fixtures__grid tr,
.ikbrage-fixtures .ikbrage-fixtures__grid th,
.ikbrage-fixtures .ikbrage-fixtures__grid td {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* Round divider — centered banner row, darker than the surrounding rows so it
   reads as a clear group boundary, not another match row. */
/* Higher-specificity selector — themes were beating the single-class rule and
   tinting the OMGÅNG band the same green as the regular rows. */
.ikbrage-fixtures .ikbrage-fixtures__grid tr.ikbrage-fixtures__round-header td {
  background: #002912;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 0.4rem;
  color: var(--brage-text-on-dark);
  font-size: 0.75rem;
  font-family: var(--brage-font-heading);
}

/* Match rows — flat full-width bars, alternating light/dark green. */
.ikbrage-fixtures__row td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
  background: var(--brage-row-light);
}
.ikbrage-fixtures__row:nth-of-type(even) td {
  background: var(--brage-row-dark);
}

/* Column widths — details and cta are exactly equal so the center column
   sits at the table's horizontal midpoint, lining up with the OMGÅNG header
   text above it. */
.ikbrage-fixtures__details {
  width: 33%;
  white-space: nowrap;
}
.ikbrage-fixtures__date {
  font-family: var(--brage-font-body);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--brage-text-light);
  line-height: 1.2;
}
.ikbrage-fixtures__teams {
  font-family: var(--brage-font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: var(--brage-text-on-dark);
  text-transform: uppercase;
  margin-top: 0.2rem;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ikbrage-fixtures__team-logo {
  width: 26px; height: 26px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
}
.ikbrage-fixtures__team-logo--placeholder {
  display: inline-block;
  background: var(--brage-row-dark);
  border: 1px solid var(--brage-line);
  border-radius: 4px;
}
.ikbrage-fixtures__team-name { white-space: nowrap; }
.ikbrage-fixtures__teams-sep {
  margin: 0 0.1rem;
  opacity: 0.55;
  font-weight: 400;
  font-size: 0.95em;
}

/* Cell 2: venue + result stacked */
.ikbrage-fixtures__center {
  text-align: center;
  white-space: nowrap;
}
.ikbrage-fixtures__venue {
  font-family: var(--brage-font-body);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--brage-text-light);
  line-height: 1.2;
}
.ikbrage-fixtures__result {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--brage-font-heading);
}
.ikbrage-fixtures__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: var(--brage-line);
  color: var(--brage-text-on-dark);
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 6px;
  line-height: 1;
}
.ikbrage-fixtures__time {
  font-weight: 800;
  color: var(--brage-text-on-dark);
  font-size: 1.2rem;
  font-family: var(--brage-font-heading);
  letter-spacing: 0.02em;
}

/* Cell 3: CTA — same width as details so center column lands at table midpoint */
.ikbrage-fixtures__cta {
  width: 33%;
  text-align: right;
  white-space: nowrap;
}
.ikbrage-fixtures__action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--brage-text-light);
  color: var(--brage-row-dark);
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-family: var(--brage-font-body);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.ikbrage-fixtures__action:hover { filter: brightness(1.08); }
.ikbrage-fixtures__action-arrow {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 820px) {
  .ikbrage-fixtures__row td { padding: 0.75rem 1rem; }
  .ikbrage-fixtures__teams { font-size: 1rem; }
  .ikbrage-fixtures__team-logo { width: 22px; height: 22px; }
}

/* Mobile layout: stack the row so there's no horizontal scroll. Details + center
   sit side by side on the first line; the Köp biljett CTA drops to its own
   full-width line beneath them. */
@media (max-width: 720px) {
  .ikbrage-fixtures__header { flex-direction: column; align-items: flex-start; }

  .ikbrage-fixtures__scroll { overflow-x: visible; }
  .ikbrage-fixtures .ikbrage-fixtures__grid {
    min-width: 0;
    display: block;
    width: 100%;
  }
  .ikbrage-fixtures .ikbrage-fixtures__grid tbody { display: block; }

  .ikbrage-fixtures .ikbrage-fixtures__grid tr.ikbrage-fixtures__round-header {
    display: block;
  }
  .ikbrage-fixtures .ikbrage-fixtures__grid tr.ikbrage-fixtures__round-header td {
    display: block;
    padding: 0.65rem 0.4rem;
    font-size: 0.65rem;
  }

  .ikbrage-fixtures__row {
    display: grid;
    grid-template-areas:
      "details center"
      "cta cta";
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.55rem;
    padding: 0.75rem 0.9rem;
  }
  .ikbrage-fixtures__row td {
    display: block;
    width: auto;
    padding: 0;
    background: transparent !important;
  }
  .ikbrage-fixtures__details {
    grid-area: details;
    white-space: normal;
  }
  .ikbrage-fixtures__center {
    grid-area: center;
    text-align: right;
  }
  .ikbrage-fixtures__cta {
    grid-area: cta;
    width: 100%;
    text-align: center;
  }
  .ikbrage-fixtures__action {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .ikbrage-fixtures__date,
  .ikbrage-fixtures__venue { font-size: 0.6rem; }
  .ikbrage-fixtures__teams {
    font-size: 0.85rem;
    gap: 0.35rem;
    margin-top: 0.15rem;
  }
  .ikbrage-fixtures__team-logo { width: 18px; height: 18px; }
  .ikbrage-fixtures__time { font-size: 0.95rem; }
  .ikbrage-fixtures__chip { min-width: 1.4rem; height: 1.4rem; font-size: 0.8rem; }

  /* Alternating row colour now applies to the whole row (since each row is a
     single grid container rather than a table-row of tds). */
  .ikbrage-fixtures__row { background: var(--brage-row-light); }
  .ikbrage-fixtures__row:nth-of-type(even) { background: var(--brage-row-dark); }
}