/* Galeria do Sobre (communities/_about_gallery.html), medidas do Skool em docs/05-components-pages.md:
   destaque 704 × 396 raio 10; miniaturas 88 px raio 8, gap 8, a ativa com contorno escuro; vídeo = play sobre branco. */
.about-gallery { margin-bottom: 24px; container-type: inline-size; }
/* Palco na proporção real da mídia (--ratio = largura / altura, vem do about-gallery.js): largura cheia para o que é
   horizontal; o que é vertical ganha um teto de altura e fica centralizado, com a própria mídia desfocada dos lados. */
.about-stage { --ratio: 1.7778; --stage-max: min(70vh, 560px); --stage-h: min(calc(100cqw / var(--ratio)), var(--stage-max)); position: relative; height: var(--stage-h); border-radius: var(--r-md); overflow: hidden; background: var(--surface); transition: height .2s; }
.about-modal .about-stage { --stage-max: min(52vh, 440px); }  /* no modal da 1ª visita sobra menos altura */
.about-stage-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.85); transform: scale(1.15); pointer-events: none; }
.about-stage-item { position: absolute; top: 0; left: 50%; width: min(100%, calc(var(--stage-h) * var(--ratio))); height: 100%; transform: translateX(-50%); border: 0; padding: 0; background: none; }
.about-stage-image { cursor: zoom-in; }
.about-stage-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .about-stage { transition: none; } }
.about-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.about-thumb { position: relative; width: 88px; height: 88px; flex: none; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: var(--card); cursor: pointer; display: grid; place-items: center; }
.about-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-thumb img + .about-thumb-play { position: absolute; }  /* vídeo com capa: o play fica por cima dela */
.about-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.about-thumb.is-active::after { box-shadow: inset 0 0 0 3px var(--ink); }
.about-thumb:not(.is-active):hover::after { box-shadow: inset 0 0 0 1px var(--border); background: rgba(255, 255, 255, .15); }
.about-thumb-play { width: 40px; height: 28px; fill: var(--ink); }
/* Celular (docs/07-mobile.md): miniaturas de 72 px numa linha que rola, sem barra visível */
@media (max-width: 768px) {
  .about-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .about-thumbs::-webkit-scrollbar { display: none; }
  .about-thumb { width: 72px; height: 72px; }
}