/* 14 · kids — capítulo claro. Texto de L19 à esquerda (na grade); à direita, fora da grade, um
   mosaico de paralelogramos com as fotos reais da corrida infantil, cortado na mesma inclinação
   das tarjas do deck e sangrando na borda direita (medido pela altura). Cada foto leva crédito.
   Tudo sob #kids. */
#kids { overflow-x: clip; }
#kids .kd-stage { background: transparent; }
#kids .checker--tl { opacity: .05; }

#kids .kd-wrap { position: relative; z-index: 2; height: 100%; display: grid; align-items: center; padding-top: var(--hud-h); }
#kids .kd-title { font-size: calc((clamp(46px, min(5.4vw, 10vh), 100px)) * var(--ts, 1)); color: var(--ink-text); text-wrap: balance; }
#kids .kd-lede { max-width: 25ch; }
#kids .kd-age { margin-top: -4px; }
#kids .kd-lt b { color: var(--ink-text); }

/* ---------- mosaico ----------
   Um paralelogramo só (a inclinação das tarjas, 0,18 da altura), cortado em fileiras de fotos.
   Para as bordas inclinadas da esquerda e da direita serem contínuas, as duas fileiras têm a mesma
   largura paralela P = soma(a·h) − (n−1)(s − kg) − s:
     fileira de cima (abraço .8 · pórtico 1.5):          P = 1,94·ha + kg
     fileira de baixo (arara 1.4 · mãos 1.4 · medalhas 1.2): P = 3,46·hb + 2kg
   ⇒ hb = (1,94·ha − kg) / 3,46. Se mudar um --a no HTML, refaça estas duas contas.
   O bloco sangra à direita: a quina de baixo toca a borda da tela, a de cima passa dela pela
   inclinação do bloco inteiro (--S). Medido pela altura (fica fora da grade). */
#kids .kd-mosaic {
  --kg: clamp(8px, 1.1vh, 14px);
  --ra: min(50vh, 30vw, 620px);                                  /* fileira de cima */
  --rb: calc((var(--ra) * 1.94 - var(--kg)) / 3.46);             /* fileira de baixo */
  --S: calc((var(--ra) + var(--kg) + var(--rb)) * .18);
  position: absolute; z-index: 1; right: 0; top: calc(50% + var(--hud-h) / 2); translate: 0 -50%;
  display: grid; row-gap: var(--kg); justify-items: end;
}
/* --s = quanto a aresta inclinada anda na horizontal: a mesma inclinação em todas as fileiras */
#kids .kd-row { --s: calc(var(--h) * .18); display: flex; height: var(--h); }
#kids .kd-row--a { --h: var(--ra); margin-right: calc(-1 * var(--S)); }
#kids .kd-row--b { --h: var(--rb); margin-right: calc(-1 * var(--s)); }
#kids .kd-tile {
  --rv: 1;   /* 0 → 1: a revelação da esquerda para a direita, na mesma inclinação */
  flex: none; height: 100%; width: calc(var(--h) * var(--a));
  border-radius: 0; box-shadow: none; background: #e3d6e6;
  clip-path: polygon(var(--s) 0, calc(var(--s) + (100% - var(--s)) * var(--rv)) 0, calc((100% - var(--s)) * var(--rv)) 100%, 0 100%);
}
#kids .kd-tile + .kd-tile { margin-left: calc(var(--kg) - var(--s)); }
#kids .kd-tile img { object-position: var(--op, 50% 50%); transform-origin: 50% 50%; }
/* véu curto só para o crédito (canto de baixo à esquerda, que a inclinação não corta) */
#kids .kd-tile .scrim--b { background: linear-gradient(0deg, rgba(14, 7, 19, .76) 0%, rgba(14, 7, 19, .34) 15%, rgba(14, 7, 19, 0) 32%); }
#kids .kd-tile .credit { left: 12px; right: auto; bottom: 10px; max-width: calc(100% - var(--s) - 24px); line-height: 1.45; }
#kids .kd-tile .credit span { display: inline-block; }  /* quebra só entre o fotógrafo e a agência */

/* tablet em pé: texto em cima, mosaico embaixo em toda a largura */
@media (orientation: portrait) and (max-width: 1100px) {
  #kids .kd-wrap { align-items: start; padding-top: calc(var(--hud-h) + clamp(40px, 6vh, 90px)); }
  #kids .kd-lay > .kd-copy { --span: 1 / 11; }
  #kids .kd-title { font-size: calc((clamp(56px, 8.6vw, 110px)) * var(--ts, 1)); }
  #kids .kd-lede { max-width: 32ch; }
  #kids .kd-mosaic { --ra: 42vw; top: auto; bottom: clamp(28px, 5vh, 72px); translate: none; }
}
@media (max-width: 980px) {
  #kids .kd-lay > .kd-copy { grid-column: 1 / -1; }
}