/* 15 · Públicos do evento — escuro, a torcida em loop atrás de véu.
   À direita, três anéis concêntricos como arquibancadas em volta da quadra (fileiras de assentos em
   tracejado): Esporte (o mais perto da areia), Comunidade, Relacionamento. Cada anel acende numa varredura a
   partir do alto e o seu grupo aparece na coluna da esquerda, com a mesma cor na chave. As cápsulas são as do
   núcleo (.tag--sand, .tag--sun, .tag); a gradação areia → sol → terracota vai do anel mais perto da quadra ao
   mais longe. Luz de tarde (15 h): a foto aparece; o véu fica atrás do texto (esquerda) e dos anéis. */
#publicos .pub-stage { background: radial-gradient(120% 90% at 70% 40%, #3b4f5c 0%, #1a3040 55%, #0a1822 100%); } /* reserva */
#publicos .pub-film { object-position: 50% 38%; }
#publicos .pub-dim { background: rgba(10, 24, 34, .34); }
#publicos .pub-veil { background: linear-gradient(90deg, rgba(10, 24, 34, .95) 0%, rgba(10, 24, 34, .88) 34%, rgba(16, 38, 51, .42) 54%, rgba(16, 38, 51, 0) 68%); }

#publicos .pub-wrap { position: relative; z-index: 3; height: 100%; display: grid; align-content: center;
  padding-top: calc(var(--hud-h) + clamp(10px, 2.4vh, 30px)); padding-bottom: clamp(14px, 3vh, 36px); }
#publicos .pub-lay { align-items: center; }

/* texto: título, frase e os três grupos */
#publicos .pub-copy { --span: 1 / 6; display: grid; gap: clamp(18px, 3.4vh, 40px); }
#publicos .pub-head { display: grid; gap: clamp(8px, 1.3vh, 14px); }
#publicos .pub-title { font-size: calc((clamp(30px, 3.1vw, 56px)) * var(--ts, 1)); } /* o mesmo h2 do 13, 14 e 16 */
#publicos .pub-lede { max-width: 30ch; text-wrap: balance; }
#publicos .pub-groups { display: grid; gap: clamp(12px, 2.3vh, 26px); }
#publicos .pub-group { --c: var(--sand); display: grid; gap: clamp(4px, .8vh, 8px); padding-left: clamp(14px, 1.2vw, 20px); border-left: 2px solid color-mix(in srgb, var(--c) 60%, transparent); }
#publicos .pub-group--2 { --c: var(--sun); }
#publicos .pub-group--3 { --c: var(--clay); }
#publicos .pub-group__t { display: flex; align-items: center; gap: 12px; font-size: calc((clamp(17px, 1.3vw, 24px)) * var(--ts, 1)); color: var(--sand); }
#publicos .pub-key { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 3.5px var(--c), 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
#publicos .pub-items { display: grid; color: var(--text-2); font-size: calc((clamp(17px, .5vw + 10px, 19px)) * var(--ts, 1)); line-height: 1.42; }
#publicos .pub-items li { display: flex; align-items: center; gap: .7em; }
#publicos .pub-items li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }

/* os anéis */
#publicos .pub-rings { --span: 6 / 13; position: relative; justify-self: end; width: min(100%, calc(100svh - var(--hud-h) - clamp(28px, 6vh, 80px))); aspect-ratio: 1; }
#publicos .pub-rings::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 24, 34, .84) 0%, rgba(10, 24, 34, .72) 62%, rgba(10, 24, 34, 0) 100%); }
#publicos .pub-svg { position: relative; width: 100%; height: 100%; overflow: visible; }
#publicos .pub-seats circle, #publicos .pub-lit circle { fill: none; stroke-width: 5.4; stroke-dasharray: 4.4 3.3; }
#publicos .pub-seats circle { stroke: rgba(244, 239, 229, .15); }
#publicos .pub-ring--1 .pub-lit { stroke: var(--sand); filter: drop-shadow(0 0 5px rgba(244, 239, 229, .6)); }
#publicos .pub-ring--2 .pub-lit { stroke: var(--sun); filter: drop-shadow(0 0 5px rgba(242, 151, 109, .6)); }
#publicos .pub-ring--3 .pub-lit { stroke: #e0673a; filter: drop-shadow(0 0 5px rgba(203, 87, 45, .7)); }
#publicos .pub-lit circle { stroke: inherit; }
#publicos .pub-sweep { fill: none; stroke: #fff; stroke-width: 34; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
#publicos .pub-court__sand { fill: #eadfc9; }
#publicos .pub-court__lines { fill: none; stroke: #fff; stroke-width: 2.2; }
#publicos .pub-court__net { stroke: var(--navy); stroke-width: 3.2; }
/* rótulo de cada anel, no alto do anel */
#publicos .pub-tagpos { position: absolute; left: 50%; top: calc(50% - var(--r) * 1% / 6); transform: translate(-50%, -50%); z-index: 2; }
#publicos .pub-tag { display: block; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
#publicos .pub-tag--3 { background: var(--clay-2); } /* o .tag terracota com letra de 17 px dá 3,6:1 (reprova AA): terracota escuro, ~4,9:1 */

#publicos .pub-credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(14px, 2.6vh, 28px); }

/* tablet em pé: título e anéis lado a lado, os três grupos embaixo em largura cheia (empilhado, o conteúdo
   passava da altura do palco e subia para trás do HUD). .pub-copy vira "contents": cabeça e grupos são itens
   da grade. */
@media (orientation: portrait) {
  #publicos .pub-dim { background: rgba(10, 24, 34, .46); }
  #publicos .pub-veil { background: linear-gradient(180deg, rgba(10, 24, 34, .62) 0%, rgba(10, 24, 34, .74) 40%, rgba(10, 24, 34, .9) 100%); }
  #publicos .pub-lay { row-gap: clamp(28px, 3.6vh, 48px); }
  #publicos .pub-copy { display: contents; }
  #publicos .pub-head { grid-column: 1 / 7; grid-row: 1; align-self: center; }
  #publicos .pub-rings { --span: 7 / 13; grid-row: 1; justify-self: end; width: 100%; }
  #publicos .pub-groups { grid-column: 1 / -1; grid-row: 2; gap: clamp(16px, 2.2vh, 28px); }
  #publicos .pub-items { font-size: calc(19px * var(--ts, 1)); }
  #publicos .pub-group__t { font-size: calc(23px * var(--ts, 1)); }
  #publicos .pub-title { font-size: calc((clamp(34px, 4.8vw, 60px)) * var(--ts, 1)); }
}