/* 13 · recordes — placar de cronometragem de TV sobre o filme f-elite (véu forte).
   Duas colunas da grade: masculino à esquerda, feminino à direita. Cada uma é a pilha de uma
   transmissão: câmera (foto real com crédito), lower third com o código do país, cronômetro
   mono gigante que trava no recorde, prêmio. Tudo sob #recordes. */
#recordes .rc-stage { background: var(--ink); }
#recordes .rc-bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 55% 42%, #4a2a5e 0%, #1c0b26 60%, var(--ink) 100%); }
/* filme e reserva desfocados de fábrica (assets/ch/recordes): atmosfera de amanhecer, nenhum rosto legível.
   O leve zoom esconde a borda que o desfoque escurece. */
#recordes .rc-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.06); }
#recordes .rc-film { background: transparent; transform: scale(1.06); }

#recordes .rc-wrap {
  position: relative; z-index: 3; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding-top: calc(var(--hud-h) + clamp(12px, 2.4vh, 28px)); padding-bottom: clamp(16px, 3.2vh, 40px);
}
#recordes .rc-head { display: grid; gap: 0; justify-items: start; transform-origin: 0 0; }
#recordes .rc-title { font-size: calc((clamp(34px, min(4vw, 6.6vh), 64px)) * var(--ts, 1)); }

#recordes .rc-board { position: relative; align-self: center; column-gap: clamp(32px, 4.8vw, 80px); row-gap: 0; }
/* fio vertical que separa os dois placares (fora do fluxo da grade) */
#recordes .rc-board::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 16%, var(--line-2) 84%, transparent);
}
#recordes .rc-side { --rc-hang: clamp(16px, 2.6vh, 24px); container-type: inline-size; display: grid; align-content: start; justify-items: start; } /* --rc-hang: quanto o lower third sobe sobre a câmera */

/* câmera: proporção fixa (16:9 larga), a largura cede quando a tela é baixa — nunca recorta mais o rosto */
#recordes .rc-feed {
  /* 55,6vh − 205px: em tela baixa (720–900) a pilha de texto (título, nome, relógio, prêmio) já ocupa ~205px + 44% da
     altura com a letra da peça (--ts); a câmera fica com o resto e o placar não sobe mais por cima do título */
  --fh: clamp(150px, min(34vh, 55cqi, 55.6vh - 205px), 400px);
  height: var(--fh); width: min(100%, calc(var(--fh) * 1.8));
  border-radius: 2px;
}
/* o zoom de câmera parte do ponto que não pode ser cortado: o alto da cabeça dele, o rosto dela */
#recordes .rc-feed--m img { object-position: 72% 0%; transform-origin: 72% 0%; }
#recordes .rc-feed--f img { object-position: 28% 62%; transform-origin: 30% 42%; }
/* véu só no canto do rótulo da câmera: o rosto do atleta (alto, no centro) fica limpo */
#recordes .rc-feed .scrim--l { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 38%); mask-image: linear-gradient(180deg, #000 0%, transparent 38%); }
#recordes .rc-cam { position: absolute; left: 12px; top: 10px; z-index: 2; color: var(--offwhite); }
/* crédito na vertical, colado na borda direita: não cruza rosto nem o lower third */
/* o crédito começa acima do lower third: em tela baixa a câmera estreita e a placa do nome passa da borda direita dela */
#recordes .rc-feed .credit { top: auto; bottom: calc(var(--rc-hang) + 10px); right: 8px; writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(100% - var(--rc-hang) - 22px); line-height: 1.5; }
/* câmera baixa: o crédito quebra em duas colunas entre a fonte e a agência, nunca no meio do nome */
#recordes .rc-feed .credit > span { display: inline-block; white-space: nowrap; }

/* lower third pendurado na borda de baixo da câmera, como na TV */
#recordes .rc-id { position: relative; z-index: 2; display: flex; align-items: stretch; gap: 6px; margin-top: calc(-1 * var(--rc-hang)); padding-left: 12px; max-width: 100%; }
#recordes .rc-cc { display: grid; place-items: center; font-size: calc((clamp(18px, .9vw + 8px, 26px)) * var(--ts, 1)); padding-inline: .8em; text-decoration: none; cursor: default; }
#recordes .rc-lt { min-width: 0; }
#recordes .rc-lt b { white-space: nowrap; font-size: calc((clamp(16px, min(4.4cqi, 2.6vh), 24px)) * var(--ts, 1)); }

/* cronômetro: JetBrains Mono 700, dígitos tabulares; a largura nunca muda enquanto corre */
#recordes .rc-time { display: grid; justify-items: start; gap: clamp(4px, 1vh, 10px); margin-top: clamp(8px, 1.8vh, 18px); }
#recordes .rc-clock {
  font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  /* 1:03:39 mede 3,92 em: quando a coluna é que limita (24cqi), o relógio já enchia 94% dela e com +10% passaria
     da coluna; o teto de 25,4cqi o segura na borda (só nesse caso; onde a altura limita, cresce os 10%) */
  font-size: min(calc((clamp(54px, min(24cqi, 14.5vh), 190px)) * var(--ts, 1)), 25.4cqi); line-height: .96; letter-spacing: -.04em;
  color: var(--offwhite); transform-origin: 0 70%; white-space: nowrap;
}
#recordes .rc-rec { transform-origin: 0 50%; }

#recordes .rc-prize { width: 100%; margin-top: clamp(10px, 2.2vh, 24px); display: grid; gap: 4px; }
#recordes .rc-prize .stat-row { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; }
#recordes .rc-prize .stat-row > .stat { padding-top: clamp(8px, 1.2vh, 14px); gap: .2em; }
#recordes .rc-prize .stat__n { font-size: calc((clamp(26px, min(7.6cqi, 5.4vh), 52px)) * var(--ts, 1)); color: var(--offwhite); }
#recordes .rc-prize .stat__l { font-size: calc((clamp(13px, min(2.6cqi, 1.9vh), 17px)) * var(--ts, 1)); max-width: none; }

/* tela larga (1920, projetor 2560): a faixa de 1560 deixava o placar miúdo no meio e os relógios colados no fio;
   o placar abre até 2040 e cada coluna ganha largura para o relógio crescer os 10% inteiros */
@media (min-width: 1800px) and (orientation: landscape) {
  #recordes .rc-wrap { max-width: 2040px; }
}

@media (max-width: 980px) {
  #recordes .rc-board { grid-template-columns: 1fr 1fr; }
  #recordes .rc-board > .rc-side { grid-column: auto; }
}
/* tablet em pé: um atleta por faixa — câmera à esquerda, nome e cronômetro à direita, prêmio embaixo */
@media (orientation: portrait) and (max-width: 1100px) {
  #recordes .rc-board { grid-template-columns: minmax(0, 1fr); row-gap: clamp(44px, 5.5vh, 80px); }
  #recordes .rc-board > .rc-side { grid-column: 1 / -1; }
  #recordes .rc-board::before { display: none; }
  /* câmera em 50% (era 52%): com a letra maior o relógio (44,8cqi) passava 1–2 px da coluna da direita */
  #recordes .rc-side { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); align-items: start; }
  #recordes .rc-feed { --fh: calc(50cqi / 1.8); grid-column: 1; grid-row: 1 / span 2; width: 100%; }
  #recordes .rc-id { grid-column: 2; grid-row: 1; margin-top: 0; padding-left: 0; flex-wrap: wrap; }
  #recordes .rc-feed .credit { bottom: 12px; max-height: calc(100% - 24px); } /* aqui o lower third fica ao lado, não sobre a câmera */
  #recordes .rc-time { grid-column: 2; grid-row: 2; }
  #recordes .rc-prize { grid-column: 1 / -1; }
  #recordes .rc-clock { font-size: calc(10.4cqi * var(--ts, 1)); }
}