.sctc-competitions {
  display: grid;
  gap: clamp(20px, 4vw, 36px);
  margin-block: 0 clamp(32px, 5vw, 64px);
  padding: clamp(22px, 4vw, 42px);
  background: var(--wp--preset--color--tertiary-bg-color, #f6f7fa);
}

.sctc-competitions__header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.sctc-competitions__eyebrow,
.sctc-competition-card__date {
  margin: 0 0 6px;
  color: var(--wp--preset--color--primary, #cd1a2e);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.sctc-competitions h2,
.sctc-competition-card h3,
.sctc-competitions__empty {
  margin: 0;
}

.sctc-competitions__link,
.sctc-competition-card__side > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--wp--preset--color--primary, #cd1a2e);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sctc-competitions__link:hover,
.sctc-competitions__link:focus,
.sctc-competition-card__side > a:hover,
.sctc-competition-card__side > a:focus {
  background: var(--wp--preset--color--primary-dark, #a81325);
  color: #fff;
}

.sctc-competitions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Two columns: heading on the left, scoreboard and link stacked on the right.
   The right column is a flex child so the link sits right under the scoreboard
   instead of being pushed to the bottom of whatever height the heading dictates.
   Columns may shrink to zero: a fixed minimum would overflow the card between
   the mobile breakpoint and roughly 900px, clipping team names. */
.sctc-competition-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
  align-content: start;
  gap: 14px 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--border-color, #dadada);
}

.sctc-competition-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: start;
  gap: 14px;
  min-width: 0;
}

.sctc-competition-card__side > .sctc-competition-card__scoreboard {
  align-self: stretch;
}

.sctc-competition-card__heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* Championship labels are long uppercase strings; let them scale down with the
   viewport instead of forcing the card wider than its container. */
.sctc-competition-card h3 {
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.25;
  overflow-wrap: break-word;
}

.sctc-competition-card__scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  align-self: start;
  min-width: 0;
  padding: 14px;
  background: var(--wp--preset--color--tertiary-bg-color, #f6f7fa);
}

.sctc-competition-card__scoreboard p,
.sctc-competition-card__status,
.sctc-competition-card__meta {
  margin: 0;
}

/* Team names inherit the theme body size, which is far too large for a
   four-column scoreboard. Keep them readable but let them wrap and shrink. */
/* No hyphens: club names are proper nouns and "STADE CLERMON-TOIS" reads as an
   error. Wrap between words, and only break inside one if it alone overflows. */
.sctc-competition-card__scoreboard p {
  min-width: 0;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.sctc-competition-card__scoreboard p:last-child {
  text-align: right;
}

.sctc-competition-card__scoreboard strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 6px;
  background: #fff;
  color: var(--wp--preset--color--secondary, #2b2e73);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1;
}

.sctc-competition-card__status {
  color: var(--wp--preset--color--primary, #cd1a2e);
  font-weight: 800;
}

/* Win/loss badge. The wording carries the meaning on its own: colour is only a
   reinforcement, so the card stays readable in greyscale and for colour-blind
   readers. Both backgrounds clear AA against white text. */
.sctc-competition-card__outcome {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sctc-competition-card__outcome--win {
  background: #1c6b3c;
}

.sctc-competition-card__outcome--loss {
  background: #98202f;
}

/* Keep the badge legible when the reader forces higher contrast or removes
   background colours. */
@media (prefers-contrast: more) {
  .sctc-competition-card__outcome {
    border-color: currentColor;
  }

  .sctc-competition-card__outcome--win {
    background: transparent;
    color: #14532a;
  }

  .sctc-competition-card__outcome--loss {
    background: transparent;
    color: #7a1824;
  }
}

.sctc-competition-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.sctc-competition-card__meta li {
  padding: 5px 9px;
  background: var(--wp--preset--color--tertiary-bg-color, #f6f7fa);
  color: var(--wp--preset--color--body-text, #7a758e);
  font-size: 13px;
  font-weight: 700;
}

.sctc-competition-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.sctc-competition-card dl div {
  display: grid;
  gap: 2px;
}

.sctc-competition-card dt {
  color: var(--wp--preset--color--body-text, #7a758e);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.sctc-competition-card dd {
  margin: 0;
}

/* Two side-by-side columns stop being readable well before the mobile
   breakpoint: at ~900px the heading and the scoreboard fight for width and the
   team names get clipped. Stack them from there. */
@media (max-width: 900px) {
  .sctc-competitions__header {
    display: grid;
    justify-items: start;
  }

  .sctc-competition-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* Stacked layout: align the link with the rest of the card, not to the right. */
  .sctc-competition-card__side {
    align-items: flex-start;
  }
}

/* Below this width four columns leave each team barely two words. Switch to one
   row per team, each keeping its own score alongside it, so the pairing stays
   unambiguous. Source order is team1 / score1 / score2 / team2, hence the
   explicit placement. */
@media (max-width: 480px) {
  .sctc-competition-card__scoreboard {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px;
  }

  .sctc-competition-card__scoreboard p:first-child {
    grid-area: 1 / 1;
  }

  .sctc-competition-card__scoreboard strong:nth-of-type(1) {
    grid-area: 1 / 2;
  }

  .sctc-competition-card__scoreboard p:last-child {
    grid-area: 2 / 1;
    text-align: left;
  }

  .sctc-competition-card__scoreboard strong:nth-of-type(2) {
    grid-area: 2 / 2;
  }
}