/* 09 · Três frentes — areia, sol alto. Três cartões altos: em cima de cada um, a quadra vista de cima
   (planta, linhas brancas, rede navy); rolando, a quadra gira 90° como um cubo (vista de cima → de frente)
   e revela a foto da frente. Embaixo, o nome e as duas linhas do slide 8 (Participação, Proposta).
   A face de cima e a de frente são as duas faces de um cubo de corte quadrado (lado = altura da mídia):
   a mídia é container de tamanho, então a meia-altura é 50cqh, sem JS. */
#frentes .tf-stage { background: transparent; }
#frentes .tf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#frentes .tf-wrap { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(14px, 2.4vh, 28px); padding-top: calc(var(--hud-h) + clamp(22px, 4.4vh, 52px)); padding-bottom: calc(var(--tide) + clamp(6px, 1.6vh, 18px)); }
#frentes .tf-head { row-gap: 10px; }
#frentes .tf-head__t { display: grid; gap: 6px; }
/* letra pequena em terracota sobre areia: o tom mais fundo do deck (4,0:1 → 5:1) */
#frentes .tf-head .label--clay, #frentes .tf-dl .label--clay { color: var(--clay-2); }
#frentes .tf-title { font-size: calc((clamp(34px, min(3.6vw, 6.6vh), 60px)) * var(--ts, 1)); }
#frentes .tf-lede { justify-self: end; text-align: right; max-width: 30ch; color: var(--ink-text-2); }

/* quatro linhas partilhadas pelos três cartões (mídia · nome · Participação · Proposta): o subgrid põe o nome,
   os rótulos e os fios na mesma altura nas três colunas, qualquer que seja o tamanho de cada texto */
#frentes .tf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) repeat(3, auto); column-gap: var(--gap); row-gap: 0; min-height: 0; }
#frentes .tf-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; column-gap: clamp(12px, 2vh, 22px); min-height: 0; padding: clamp(12px, 1.1vw, 18px) clamp(12px, 1.1vw, 18px) clamp(16px, 2.2vh, 26px); }
#frentes .tf-card::after { display: none; }

/* o cubo */
#frentes .tf-media { position: relative; min-height: 0; margin-bottom: clamp(12px, 2vh, 22px); container-type: size; perspective: 1500px; perspective-origin: 50% 30%; }
#frentes .tf-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(-50cqh); }
#frentes .tf-rot { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
#frentes .tf-face { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 8px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#frentes .tf-face--top { transform: translateZ(50cqh); background: #eadcc1; box-shadow: inset 0 0 0 1px rgba(16, 38, 51, .1); }
#frentes .tf-face--front { transform: rotateX(-90deg) translateZ(50cqh); }
#frentes .tf-court { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#frentes .tf-face--front > img { position: absolute; inset: 0; }
/* recortes próprios: o Elite é outro instante do lance (o 10 mostra o ataque em tela cheia); o Master fecha nas
   mãos e na bola do levantamento (a foto inteira é o herói do 12). Foco = origem do zoom = object-position. */
#frentes .tf-img--elite { object-position: 36% 72%; transform: scale(1.12); transform-origin: 36% 72%; } /* último quadro da take Mikasa (26/09/2026): atacante à esquerda, bloqueadora na rede */
#frentes .tf-img--master { object-position: 30% 6%; transform: scale(1.9); transform-origin: 30% 6%; }
/* o lance de cada quadra vista de cima: trajetória tracejada (o motivo da bola), duplas e bola */
#frentes .tf-traj { fill: none; stroke: #CB572D; stroke-width: 1.5; stroke-dasharray: 2.6 3.4; stroke-linecap: round; opacity: .9; }
#frentes .tf-hit { fill: none; stroke: #CB572D; stroke-width: 1.5; stroke-linecap: round; }
#frentes .tf-ball { --ball-word: 0; } /* a bola do lance é a Mikasa (#ball, pedido do Marcio 26/09/2026): ~12 px na tela, o nome vira o traço azul */
#frentes .tf-face--front > .credit { z-index: 3; right: 10px; bottom: 10px; padding: 4px 10px 3px; border-radius: 999px; background: rgba(10, 24, 34, .8); color: var(--sand); text-shadow: none; letter-spacing: .06em; } /* espaçamento curto: "· gerada por IA" numa linha na face de 340 px (1280) */
/* a face que gira para longe escurece; a que chega clareia */
#frentes .tf-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(16, 38, 51, .55), rgba(16, 38, 51, .25)); opacity: 0; }
#frentes .tf-face--front .tf-shade { background: linear-gradient(0deg, rgba(16, 38, 51, .5), rgba(16, 38, 51, .2)); }

#frentes .tf-body { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-inline: clamp(4px, .5vw, 8px); }
#frentes .tf-name { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(26px, min(2.5vw, 4.6vh), 46px)) * var(--ts, 1)); line-height: 1; letter-spacing: -.015em; color: var(--clay); padding-top: .06em; margin-bottom: clamp(8px, 1.3vh, 14px); }
#frentes .tf-dl { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; margin: 0; }
#frentes .tf-dl > div { display: grid; gap: 3px; align-content: start; padding-top: clamp(8px, 1.2vh, 12px); border-top: 1px solid var(--ink-line); }
#frentes .tf-dl > div + div { margin-top: clamp(8px, 1.2vh, 12px); }
#frentes .tf-dl dd { margin: 0; font-size: calc((clamp(15px, .38vw + 10.6px, 18px)) * var(--ts, 1)); line-height: 1.38; color: var(--ink-text); text-wrap: pretty; }
#frentes .tf-foot { justify-self: start; }

/* ---------- tablet em pé: cartões deitados (mídia à esquerda, texto à direita) ---------- */
@media (orientation: portrait) {
  #frentes .tf-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); row-gap: var(--gap); align-content: center; }
  #frentes .tf-card { grid-row: auto; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  #frentes .tf-media { height: 100%; margin-bottom: 0; }
  #frentes .tf-body, #frentes .tf-dl { grid-row: auto; grid-template-rows: none; }
  #frentes .tf-dl { row-gap: clamp(8px, 1.2vh, 12px); }
  #frentes .tf-dl > div + div { margin-top: 0; }
  #frentes .tf-lede { justify-self: start; text-align: left; }
}