/* 20 · programacao — grade de programação de TV no placar do núcleo (.board): uma coluna por dia,
   os dois dias de prova mais largos, em mel e maiores (.is-hl do núcleo). Um cursor "ao vivo"
   (fita vermelha + selo da barra de transmissão) anda pelos dias e revela a grade.
   Tudo sob #programacao. */
#programacao .pg-stage { background: radial-gradient(80% 70% at 12% 0%, rgba(125, 85, 150, .2), transparent 62%), var(--ink); }
/* a luz do amanhecer cresce no canto dos dias de prova conforme o cursor anda */
#programacao .pg-dawn { position: absolute; inset: 0; pointer-events: none; opacity: .15;
  background: radial-gradient(60% 55% at 88% 100%, rgba(244, 178, 35, .2), rgba(244, 178, 35, 0) 72%); }

#programacao .pg-wrap {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding-top: calc(var(--hud-h) + clamp(14px, 3vh, 36px)); padding-bottom: clamp(18px, 4vh, 48px);
}
#programacao .pg-head { display: grid; gap: 4px; justify-items: start; }
#programacao .pg-head__t { display: flex; align-items: center; flex-wrap: wrap; gap: 10px clamp(14px, 1.6vw, 26px); }
#programacao .pg-title { font-size: calc((clamp(44px, min(5.4vw, 9.4vh), 96px)) * var(--ts, 1)); }

#programacao .pg-screen { position: relative; align-self: center; container-type: inline-size;
  /* o selo "ao vivo" (9 px + 13 px × 1,55 × --ts de altura) pende 8 px acima da grade: a folga cresce com a letra */
  margin-top: max(clamp(34px, 4.6vh, 56px), calc(29px + 20px * var(--ts, 1))); }

/* ---------- a grade ---------- */
#programacao .pg-board { table-layout: fixed; background: rgba(22, 10, 29, .6); box-shadow: var(--shadow-1); }
#programacao .pg-c { width: 16%; }
#programacao .pg-c--m { width: 20%; }
#programacao .pg-c--race { width: 24%; }
#programacao .pg-board th, #programacao .pg-board td {
  text-align: left; vertical-align: top; padding: clamp(10px, 1.5vh, 16px) clamp(10px, 1.1cqi, 16px);
  border-right: 1px solid var(--line);
}
#programacao .pg-board th:last-child, #programacao .pg-board td:last-child { border-right: 0; }
#programacao .pg-board thead th { position: static; vertical-align: bottom; padding-block: clamp(10px, 1.6vh, 18px) clamp(8px, 1.2vh, 14px); }
#programacao .pg-date { display: block; font-size: calc((clamp(30px, 3.6cqi, 52px)) * var(--ts, 1)); color: var(--offwhite); }
#programacao .pg-board thead th.is-hl .pg-date { font-size: calc((clamp(40px, 5.8cqi, 84px)) * var(--ts, 1)); color: var(--honey); }
#programacao .pg-race { display: block; margin-bottom: 2px; font-family: var(--f-mono); font-weight: 700; font-size: calc(11px * var(--ts, 1)); letter-spacing: .16em; color: var(--offwhite); }

#programacao .pg-pics td { padding-bottom: 0; }
#programacao .pg-pic { height: clamp(120px, min(27vh - 20px, 17.5cqi), 280px); border-radius: 2px; }
#programacao .pg-pic img { object-position: var(--op, 50% 50%); }
#programacao .pg-pic .scrim--b { background: linear-gradient(0deg, rgba(14, 7, 19, .7) 0%, rgba(14, 7, 19, .25) 18%, rgba(14, 7, 19, 0) 34%); }
#programacao .pg-pic .credit { right: 10px; bottom: 8px; left: 10px; text-align: right; line-height: 1.45; }
#programacao .pg-pic .credit span { display: inline-block; }  /* quebra só entre o fotógrafo e a agência */

#programacao .pg-what td { padding-bottom: clamp(14px, 2.2vh, 24px); }
#programacao .pg-prog { font-size: calc((clamp(18px, 2.3cqi, 32px)) * var(--ts, 1)); line-height: 1.14; color: var(--offwhite); text-wrap: balance; }
#programacao .pg-prog--race { font-size: calc((clamp(20px, 2.6cqi, 36px)) * var(--ts, 1)); }
#programacao .pg-prog--21 { font-size: calc((clamp(56px, 8.2cqi, 118px)) * var(--ts, 1)); line-height: .96; color: var(--honey); letter-spacing: -.01em; }
#programacao .pg-u { text-transform: none; }
#programacao .pg-prog--21 .pg-u { font-size: .44em; margin-left: .05em; letter-spacing: 0; }

/* ---------- cursor "ao vivo" ---------- */
#programacao .pg-cursor { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#programacao .pg-glow { position: absolute; left: 0; top: 0; bottom: 0; width: 100px; transform-origin: 0 0;
  background: linear-gradient(180deg, rgba(255, 75, 95, .16) 0%, rgba(245, 238, 224, .05) 36%, rgba(245, 238, 224, 0) 100%); }
#programacao .pg-bar { position: absolute; left: 0; top: 0; width: 100px; height: 3px; transform-origin: 0 50%; background: var(--signal); box-shadow: 0 0 16px rgba(255, 75, 95, .55); }
#programacao .pg-live { position: absolute; left: 0; top: auto; bottom: calc(100% + 8px); white-space: nowrap; }

/* tablet em pé: a grade gira — um dia por linha (data · programa · foto), como a lâmina L22;
   o cursor desce de linha em linha e o selo "ao vivo" fica no canto da foto, como na TV */
@media (orientation: portrait) and (max-width: 1100px) {
  #programacao .pg-title { font-size: calc((clamp(56px, 8.4vw, 96px)) * var(--ts, 1)); }
  #programacao .pg-screen { margin-top: clamp(24px, 3vh, 44px); }
  #programacao .pg-board { display: grid; grid-template-columns: minmax(0, 23%) minmax(0, 1fr) minmax(0, 36%); grid-auto-flow: row dense; }
  #programacao .pg-board colgroup { display: none; }
  #programacao .pg-board thead, #programacao .pg-board tbody, #programacao .pg-board tr { display: contents; }
  #programacao .pg-board th, #programacao .pg-board td { border-right: 0; border-bottom: 1px solid var(--line); }
  #programacao .pg-board thead th { grid-column: 1; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); border-right: 2px solid var(--honey); }
  #programacao .pg-what td { grid-column: 2; display: flex; align-items: center; padding-inline: clamp(16px, 2.4cqi, 28px); }
  #programacao .pg-pics td { grid-column: 3; padding-block: clamp(10px, 1.4vh, 14px); }
  #programacao .pg-pics td[colspan] { grid-row: span 2; }
  #programacao .pg-pic { height: 100%; min-height: clamp(120px, 13.2vh, 200px); }
  #programacao .pg-date { font-size: calc((clamp(34px, 5.4cqi, 56px)) * var(--ts, 1)); }
  #programacao .pg-board thead th.is-hl .pg-date { font-size: calc((clamp(40px, 7.4cqi, 76px)) * var(--ts, 1)); }
  #programacao .pg-prog { font-size: calc((clamp(22px, 3.6cqi, 36px)) * var(--ts, 1)); }
  #programacao .pg-prog--race { font-size: calc((clamp(24px, 3.9cqi, 40px)) * var(--ts, 1)); }
  #programacao .pg-prog--21 { font-size: calc((clamp(64px, 11cqi, 120px)) * var(--ts, 1)); }
  #programacao .pg-glow { right: 0; bottom: auto; width: auto; height: 100px;
    background: linear-gradient(90deg, rgba(255, 75, 95, .16) 0%, rgba(245, 238, 224, .05) 36%, rgba(245, 238, 224, 0) 100%); }
  #programacao .pg-bar { width: 3px; height: 100px; transform-origin: 50% 0; }
  #programacao .pg-live { left: auto; right: 22px; top: 22px; bottom: auto; }
}

/* tela grande (2560×1440, projetor): a grade crescia só até 1560 px e ficava num quarto do quadro.
   A faixa passa a crescer com a ALTURA (como no 21), e os tetos dos tamanhos em cqi sobem na mesma
   proporção — é a mesma composição de 1440×900, ampliada. */
@media (min-width: 1800px) and (min-height: 1200px) {
  #programacao .pg-wrap { max-width: max(1560px, 150svh); }
  #programacao .pg-date { font-size: calc((clamp(30px, 3.6cqi, 76px)) * var(--ts, 1)); }
  #programacao .pg-board thead th.is-hl .pg-date { font-size: calc((clamp(40px, 5.8cqi, 122px)) * var(--ts, 1)); }
  #programacao .pg-race { font-size: calc(15px * var(--ts, 1)); }
  #programacao .pg-prog { font-size: calc((clamp(18px, 2.3cqi, 48px)) * var(--ts, 1)); }
  #programacao .pg-prog--race { font-size: calc((clamp(20px, 2.6cqi, 54px)) * var(--ts, 1)); }
  #programacao .pg-prog--21 { font-size: calc((clamp(56px, 8.2cqi, 170px)) * var(--ts, 1)); }
  #programacao .pg-pic { height: clamp(120px, min(27vh - 20px, 17.5cqi), 380px); }
  #programacao .pg-board th, #programacao .pg-board td { padding: clamp(14px, 1.5vh, 22px) clamp(14px, 1.1cqi, 24px); }
}