/* ============================================================
   DEPORTES — "Deportes y mercados disponibles".
   Anatomy unlike siblings: an asymmetric sport board (fútbol
   dominant, three smaller codes) over a hairline market ledger
   set as a broadsheet register — NOT a boxed _table card.
   ============================================================ */

.deportes {
  border-top: 1px solid var(--rule);
  padding-block: var(--rhythm);
}

.deportes__head { max-width: 56ch; }
.deportes__head h2 { margin-top: 1rem; }
.deportes__head .standfirst { margin-top: 1rem; max-width: 64ch; }

/* ---- sport board: asymmetric contact-sheet, fútbol dominant ---- */
.board {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(116px, 13vw, 188px);
  gap: clamp(7px, 0.9vw, 13px);
}
.board__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--night-2);
}
.board__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
/* fútbol — the centre of gravity: tall, two rows on the left */
.board__tile--lead { grid-column: 1 / 4; grid-row: 1 / 3; }
.board__tile--lead img { object-position: 50% 34%; }
.board__tile--a { grid-column: 4 / 7; grid-row: 1 / 2; }
.board__tile--b { grid-column: 4 / 6; grid-row: 2 / 3; }
.board__tile--c { grid-column: 6 / 7; grid-row: 2 / 3; }

/* code label — small stamped tag riding the photo */
.board__label {
  position: absolute;
  left: 0.55rem; bottom: 0.55rem;
  padding: 0.34rem 0.8rem;
  background: var(--ember);
  color: var(--night);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* pasted-by-hand tag — slightly off-square, each a touch different */
  transform: rotate(-2deg);
  transform-origin: bottom left;
  box-shadow: 0 5px 14px -5px rgba(0, 0, 0, 0.7);
}
.board__tile--lead .board__label { font-size: 0.86rem; padding: 0.5rem 1.05rem; transform: rotate(-1.5deg); }
.board__tile--a .board__label { transform: rotate(1.6deg); }
.board__tile--c .board__label { transform: rotate(-1deg); }

/* ---- market ledger: broadsheet register, not a boxed table ---- */
.ledger {
  margin-top: clamp(30px, 3.8vw, 56px);
  width: 100%;
  border-collapse: collapse;
}
.ledger thead th {
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 1.5rem 0.85rem 0;
  border-bottom: 2px solid var(--ember-line);
}
.ledger tbody th {
  text-align: left;
  vertical-align: baseline;
  width: 1%;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  text-transform: uppercase;
  color: var(--ink);
  padding: 1.15rem 2.4rem 1.15rem 0;
  border-top: 1px solid var(--rule);
}
.ledger tbody td {
  vertical-align: baseline;
  color: var(--ink-soft);
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}
/* ember tick before each sport — editorial dingbat, not an icon kit */
.ledger tbody th::before {
  content: "";
  display: inline-block;
  width: 1.4ch;
  margin-right: 0.9ch;
  border-top: 2px solid var(--ember);
  transform: translateY(-0.34em);
}

/* ---- coda + CTA ---- */
.deportes__coda {
  margin-top: clamp(24px, 3vw, 40px);
  color: var(--ink-soft);
  max-width: 64ch;
}
.deportes .ticket { margin-top: 1.8rem; }

/* ===== mobile ===== */
@media (max-width: 880px) {
  .deportes__head { max-width: none; }
  .board {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(150px, 40vw, 210px);
  }
  .board__tile--lead { grid-column: 1 / 3; grid-row: auto; }
  .board__tile--a,
  .board__tile--b,
  .board__tile--c { grid-column: auto; grid-row: auto; }
}

@media (max-width: 520px) {
  /* ledger collapses to stacked blocks (sport over its markets) */
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto; }
  .ledger tbody th {
    white-space: normal;
    padding: 1.1rem 0 0.3rem;
    border-top: 1px solid var(--rule);
  }
  .ledger tbody td { padding: 0 0 1.1rem; border-top: 0; }
  .deportes .ticket { width: 100%; justify-content: center; }
}