/* 14 · Três clínicas gratuitas — areia, cena fixada.
   Composição espelhada em relação ao 12 Master (que é areia, título à esquerda e foto na linha de quadra à
   direita): aqui a foto da clínica fica à esquerda, sem moldura, com a frase final do slide embaixo; à direita,
   o "3" enorme (terracota, medido pela coluna) com "clínicas gratuitas" e a frase de contrapartida. Embaixo,
   uma linha de areia atravessa a grade e os três temas chegam como três bolas que caem e quicam até o seu lugar. */
#clinicas .cli-stage { background: transparent; }
#clinicas .cli-wrap { position: relative; z-index: 2; height: 100%; display: grid; align-content: center;
  padding-top: calc(var(--hud-h) + clamp(12px, 3vh, 36px)); padding-bottom: calc(var(--tide) + clamp(8px, 2.4vh, 28px)); }
#clinicas .cli-lay { row-gap: clamp(26px, 5.4vh, 64px); align-items: center; }

/* o "3" enorme e o título na mesma linha de base; a frase embaixo, na largura da coluna */
#clinicas .cli-copy { --span: 7 / 13; grid-row: 1; display: grid; gap: clamp(12px, 2.2vh, 26px); container-type: inline-size; }
#clinicas .cli-hero { display: flex; align-items: flex-end; gap: clamp(14px, 2.4cqi, 28px); }
/* teto: no projetor o "3" de 36vh espremia a coluna do título e a frase quebrava em 3 linhas curtas */
#clinicas .cli-three { flex: none; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; color: var(--clay);
  font-size: min(calc(36vh * var(--ts, 1)), 52cqi); line-height: .74; letter-spacing: -.04em; margin-bottom: -.035em; }
#clinicas .cli-side { flex: 1 1 0; min-width: 0; container-type: inline-size; }
#clinicas .cli-title { font-size: min(calc((clamp(30px, 3.1vw, 56px)) * var(--ts, 1)), 13cqi); line-height: 1.02; } /* o mesmo h2 do 13, 15 e 16, com teto pela coluna */
#clinicas .cli-lede { max-width: 32ch; text-wrap: balance; } /* embaixo do "3" + título, na largura da coluna: 2 linhas até no projetor */

/* a foto, à esquerda, sem moldura de quadra (a moldura fica no Master) */
#clinicas .cli-fig { --span: 1 / 7; grid-row: 1; display: grid; gap: clamp(14px, 2.2vh, 26px); }
#clinicas .cli-photo { width: 100%; aspect-ratio: 4 / 3; max-height: 46vh; }
#clinicas .cli-photo img { object-position: 46% 55%; }
#clinicas .cli-note { max-width: 46ch; }

/* os três temas sobre a linha de areia: rótulos alinhados em cima, bola sempre na linha */
#clinicas .cli-row { --span: 1 / -1; position: relative; }
#clinicas .cli-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
#clinicas .cli-item { --b: clamp(44px, 7vh, 76px); display: grid; grid-template-columns: var(--b) minmax(0, 1fr); align-items: start; column-gap: clamp(14px, 1.3vw, 22px); }
#clinicas .cli-drop { position: relative; align-self: end; width: var(--b); height: var(--b); }
#clinicas .cli-ball { position: absolute; inset: 0; display: block; will-change: transform; }
#clinicas .cli-ball .ball { width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(16, 38, 51, .2)); --ball-word: 1; }
#clinicas .cli-shadow { position: absolute; left: 8%; right: 8%; bottom: -7px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 38, 51, .34), rgba(16, 38, 51, 0)); }
#clinicas .cli-item__txt { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 6px; padding-bottom: clamp(2px, .6vh, 8px); }
#clinicas .cli-item__t { display: block; font-size: calc((clamp(18px, 1.5vw, 28px)) * var(--ts, 1)); color: var(--ink-text); text-wrap: balance; }
#clinicas .cli-ground { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--clay) 0%, rgba(203, 87, 45, .5) 30%, rgba(16, 38, 51, .18) 70%, rgba(16, 38, 51, .06) 100%); }

@media (orientation: portrait) {
  #clinicas .cli-copy, #clinicas .cli-fig { --span: 1 / -1; grid-row: auto; }
  #clinicas .cli-three { font-size: min(calc(17vh * var(--ts, 1)), 36cqi); }
  #clinicas .cli-title { font-size: min(calc((clamp(34px, 4.8vw, 60px)) * var(--ts, 1)), 13cqi); }
  #clinicas .cli-lede { max-width: 30ch; }
  #clinicas .cli-photo { aspect-ratio: 16 / 9; max-height: none; }
}