/* 13 · Intercâmbio e desenvolvimento — o cumprimento sob a rede.
   Cena fixada. Quadro 1: a foto do cumprimento com o título à esquerda sob véu.
   Rolando, uma rede atravessa a tela da direita para a esquerda (faixa navy com vivo claro, malha do núcleo,
   cordão, antenas nas bordas da coluna) LOGO ABAIXO do aperto de mão, e os três pilares saem de baixo dela,
   um de cada vez. Só o que fica abaixo da rede escurece: as caras e o aperto de mão continuam claros na
   parada final. A rede sangra na tela (fora da .wrap); os pilares ficam na grade. */
#intercambio .itc-stage { background: linear-gradient(180deg, #1d3a50 0%, #4f6a7c 34%, #b98f6c 62%, #d9b58c 74%, #8c6c52 100%); } /* reserva: céu sobre a areia */
#intercambio .itc-bg { position: absolute; inset: 0; overflow: hidden; }
/* em tela mais alta que 16:9 (1440 × 900) a foto sobra dos lados: o enquadramento puxa as atletas para a direita,
   para as cabeças ficarem ao lado da última linha do título, não embaixo dela; a câmera chega a partir do alto
   (as caras descem um pouco, nunca sobem para dentro do título) */
#intercambio .itc-photo { object-position: 20% 42%; transform-origin: 50% 0; will-change: transform; }

/* véu do título, medido pelas linhas do título (o JS grava --tx, --t2, --t3x e --tb em px):
   camada de baixo = coluna do título, vai até o fim da última linha e desce suave;
   ::after = faixa larga que cobre a caixa inteira do título (inclusive o céu à direita da última linha, ao
   lado das cabeças) e some logo abaixo dela */
#intercambio .itc-veil { --tx: 56%; --t2: 24%; --t3x: 38%; --tb: 31%;
  background: linear-gradient(90deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .78) calc(var(--t3x) * .62), rgba(16, 38, 51, .5) var(--t3x), rgba(16, 38, 51, 0) calc(var(--t3x) + 9%));
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--tb) + 6px), rgba(0, 0, 0, .45) calc(var(--tb) + 64px), rgba(0, 0, 0, .45) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--tb) + 6px), rgba(0, 0, 0, .45) calc(var(--tb) + 64px), rgba(0, 0, 0, .45) 100%); }
#intercambio .itc-veil::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .84) calc(var(--tx) * .56), rgba(16, 38, 51, .72) calc(var(--tx) - 2%), rgba(16, 38, 51, .42) calc(var(--tx) + 6%), rgba(16, 38, 51, 0) calc(var(--tx) + 18%));
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--tb) + 2px), transparent calc(var(--tb) + 34px));
  mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--tb) + 2px), transparent calc(var(--tb) + 34px)); }

/* o quadro: título · (folga, com o crédito no pé) · rede · pilares, de cima para baixo */
#intercambio .itc-frame { --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding-top: calc(var(--hud-h) + clamp(10px, 2.4vh, 36px)); }
#intercambio .itc-frame > .wrap:first-child { grid-row: 1; position: relative; z-index: 1; }
#intercambio .itc-head { display: grid; gap: clamp(8px, 1.2vh, 14px); container-type: inline-size; }
#intercambio .itc-title { font-size: min(calc((clamp(30px, 3.1vw, 56px)) * var(--ts, 1)), 8.2cqi); line-height: 1.04; }

/* legenda do quadro final (paisagem): logo acima da rede, à esquerda — o lado da foto sem gente */
#intercambio .itc-cap { grid-row: 2; grid-column: 1; align-self: end; justify-self: start; position: relative; z-index: 1; margin: 0 0 clamp(10px, 1.6vh, 16px) var(--edge); }
/* crédito (em pé): plaqueta como no 10 e no 11, na linha da tarja, à direita */
#intercambio .itc-credit { display: none; padding: 4px 10px; border-radius: 999px; background: rgba(10, 24, 34, .62); color: var(--sand); text-shadow: none; }

/* sombra da rede: da rede para baixo (cobre as linhas 3 e 4 da grade e sobe um pouco acima da faixa) */
#intercambio .itc-dim { grid-row: 3 / 5; grid-column: 1; position: relative; z-index: 0; margin-top: calc(var(--net-fall, 14px) * -1); pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 24, 34, 0) 0, rgba(10, 24, 34, .5) var(--net-fall, 14px), rgba(10, 24, 34, .8) calc(var(--net-fall, 14px) + 64px), rgba(10, 24, 34, .9) 100%); }

/* a rede */
#intercambio .itc-net { --band: clamp(10px, 1.5vh, 16px); --mesh: clamp(22px, 3.4vh, 44px); --cord: 4px;
  grid-row: 3; grid-column: 1; position: relative; z-index: 1; height: calc(var(--band) + var(--mesh) + var(--cord)); will-change: transform; }
#intercambio .itc-net__band { position: absolute; left: 0; right: 0; top: 0; height: var(--band); background: var(--navy);
  box-shadow: inset 0 2px 0 rgba(244, 239, 229, .9), inset 0 -2px 0 rgba(244, 239, 229, .9), 0 6px 16px rgba(0, 0, 0, .3); }
#intercambio .itc-net__mesh { position: absolute; left: 0; top: calc(var(--band) - 1px); width: 100%; max-width: none; height: calc(var(--mesh) + 2px); color: var(--mist); opacity: .34; }
#intercambio .itc-net__cord { position: absolute; left: 0; right: 0; top: calc(var(--band) + var(--mesh)); height: var(--cord); background: var(--navy);
  box-shadow: inset 0 1.5px 0 rgba(244, 239, 229, .8), inset 0 -1.5px 0 rgba(244, 239, 229, .8); }
/* antenas: listradas terracota/areia, sobem um pouco acima da faixa como na quadra; ficam na medianiz, fora do texto */
#intercambio .itc-net__ant { position: absolute; top: calc(var(--mesh) * -.5); width: 5px; height: calc(var(--mesh) * 1.5 + var(--band) + var(--cord)); border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--clay) 0 10px, var(--sand) 10px 20px); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
#intercambio .itc-net__ant--l { left: calc(var(--edge) - clamp(12px, 1.3vw, 24px) - 3px); }
#intercambio .itc-net__ant--r { right: calc(var(--edge) - clamp(12px, 1.3vw, 24px) - 3px); }

/* os pilares: saem de baixo do cordão (a borda de cima recorta, os lados e o pé não); compactos (título do
   pilar e texto, sem ícone), para a rede caber logo abaixo do aperto de mão */
#intercambio .itc-under { grid-row: 4; grid-column: 1; position: relative; z-index: 1; padding-top: clamp(6px, 1vh, 14px); padding-bottom: clamp(10px, 2vh, 30px); clip-path: inset(0 -400px -400px -400px); }
/* três colunas na medida do texto de cada pilar (o 1º é o mais longo): nenhum passa de 4 linhas, e a fileira
   fica baixa o bastante para a rede passar abaixo do aperto de mão */
#intercambio .itc-row { --cg: clamp(14px, 1.3vw, 22px); --cp: clamp(14px, 1.1vw, 22px); container-type: inline-size;
  grid-template-columns: 1.16fr .92fr .92fr; align-items: stretch; row-gap: clamp(10px, 1.4vh, 16px); column-gap: var(--cg); }
#intercambio .itc-card { --span: auto; display: grid; align-content: start; gap: clamp(8px, 1.2vh, 14px); padding: clamp(12px, 1.3vw, 24px) var(--cp); will-change: transform; }
/* o de cima fica na frente: na pilha do tablet em pé, o pilar seguinte desce por trás do anterior */
#intercambio .itc-card:nth-child(1) { z-index: 3; } #intercambio .itc-card:nth-child(2) { z-index: 2; } #intercambio .itc-card:nth-child(3) { z-index: 1; }
/* título do pilar medido pela fileira (o mesmo tamanho nos três): "DESENVOLVIMENTO" (≈ 12,9 em) tem de caber no
   cartão estreito (.92fr) — em 1920 e 2560 a .h3 do núcleo vazava ~40 px da borda */
#intercambio .itc-card__h { color: var(--sun); font-size: min(calc((clamp(19px, 1.45vw, 26px)) * var(--ts, 1)), calc(((100cqi - 2 * var(--cg)) * .92 / 3 - 2 * var(--cp)) / 13.2)); }
#intercambio .itc-card__t { max-width: none; text-wrap: wrap; }

#intercambio .itc-lt { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(22px, 5vh, 56px); }

/* tela baixa (1280 × 720, 1366 × 768): título mais perto do HUD e pilares mais justos, para as cabeças ficarem
   abaixo do título e a rede, abaixo do aperto de mão */
@media (orientation: landscape) and (max-height: 800px) {
  #intercambio .itc-frame { padding-top: calc(var(--hud-h) + 10px); --net-fall: 6px; }
  #intercambio .itc-head { gap: 7px; }
  #intercambio .itc-net { --mesh: 20px; --band: 10px; }
  #intercambio .itc-under { padding-top: 5px; padding-bottom: 10px; }
  #intercambio .itc-card { padding-block: 12px 13px; gap: 6px; }
}

@media (orientation: portrait) {
  /* as quatro atletas ficam entre 44% e 84% da foto: a janela em pé (~39% da largura) centra no aperto de mão */
  #intercambio .itc-photo { object-position: 72% 50%; }
  /* em pé o título ocupa a largura toda: véu de cima para baixo, até o pé do título */
  #intercambio .itc-veil { background: linear-gradient(180deg, rgba(10, 24, 34, .9) 0, rgba(10, 24, 34, .78) calc(var(--tb) * .7), rgba(10, 24, 34, .5) var(--tb), rgba(10, 24, 34, 0) calc(var(--tb) + 12%)); -webkit-mask-image: none; mask-image: none; }
  #intercambio .itc-veil::after { display: none; }
  #intercambio .itc-head { --span: 1 / -1; }
  #intercambio .itc-title { font-size: calc((clamp(34px, 4.8vw, 60px)) * var(--ts, 1)); }
  #intercambio .itc-net { --mesh: clamp(26px, 3vh, 48px); }
  #intercambio .itc-row { grid-template-columns: minmax(0, 1fr); }
  #intercambio .itc-card__h { font-size: calc((clamp(19px, 1.45vw, 26px)) * var(--ts, 1)); } /* em pé cada pilar tem a largura toda */
  #intercambio .itc-card { --span: 1 / -1; }
  /* em pé as atletas ocupam a largura toda: sem legenda no quadro final, e o crédito vai para a linha da tarja
     (acima do título, à direita — a tarja é curta), longe das cabeças */
  #intercambio .itc-cap { display: none; }
  #intercambio .itc-credit { display: block; position: absolute; grid-row: 1; grid-column: 1; top: -3px; right: var(--edge); margin: 0; z-index: 1; }
}