/* =============================================================================
   Galeria "Veja as fotos" (.gal) · O Segredo — LAYOUT ÚNICO desde 01/08/2026
   (kit "O Segredo (17)"). Carrossel in-article: palco escuro (foto em contain),
   setas, tela cheia, legenda + crédito, barras de progresso, rail de miniaturas.
   Sem box-shadow. Tokens escopados no componente (não vazam pro tema).
   ============================================================================= */
.gal{
  --hff:'Outfit',system-ui,sans-serif;
  --bff:'Figtree',system-ui,sans-serif;
  --line:oklch(0.90 0.005 80);
  --ink:oklch(0.20 0.010 60);
  --muted:oklch(0.52 0.010 60);
  --accent:#ff532c;
  --night:oklch(0.17 0.010 70);
  --night-2:oklch(0.13 0.008 70);
  --radius:6px;
  margin:28px 0;
}
.gal :where(button){appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer;font:inherit;padding:0;}
/* :where() = especificidade ZERO: o reset limpa o chrome de button do tema
   sem NUNCA vencer as classes do kit (.gal__nav/.gal__bar/etc.) — um reset
   com .gal button engolia o circulo branco das setas e as barras. */

/* cabeçalho editorial */
.gal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);position:relative;}
.gal__head::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;background:var(--accent);}
.gal__head h3{font-family:var(--hff);font-size:clamp(21px,2.6vw,26px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0;color:var(--ink);}
.gal__count{font-family:var(--bff);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-bottom:2px;}
.gal__count b{color:var(--ink);font-family:var(--hff);font-size:15px;letter-spacing:-.01em;}

/* palco */
.gal__stage{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--night);aspect-ratio:4/3;}
.gal__slides{position:absolute;inset:0;}
.gal__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .28s ease;pointer-events:none;}
.gal__slide.on{opacity:1;pointer-events:auto;}
.gal__slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0;}
/* Blindagem (01/08, pedido do Jader): o CSS de imagem do ARTIGO forca
   width:100% e AMPLIAVA foto pequena 3x ("esticada"). Aqui a foto nunca
   passa do tamanho natural — pequena fica pequena no palco preto. Os
   !important sao a imunidade do componente contra regras de conteudo. */
.gal .gal__stage .gal__slide img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;}

/* véu inferior para a legenda */
.gal__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.34) 42%,transparent);}

/* setas */
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,opacity .15s ease;}
.gal__nav svg{width:20px;height:20px;}
.gal__nav:hover{background:var(--accent);color:#fff;}
.gal__nav--prev{left:14px;}
.gal__nav--next{right:14px;}
.gal__nav[disabled]{opacity:.32;pointer-events:none;}

/* botão tela cheia */
.gal__full{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:var(--radius);background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease;}
.gal__full:hover{background:rgba(255,255,255,.28);}
.gal__full svg{width:18px;height:18px;}

/* legenda */
.gal__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 26px;pointer-events:none;}
.gal__cap p{font-family:var(--bff);font-size:16px;line-height:1.4;color:#fff;margin:0 0 3px;max-width:62ch;text-wrap:pretty;}
.gal__cap .credit{font-size:13px;font-weight:700;color:rgba(255,255,255,.72);margin:0;}
.gal__cap p[hidden]{display:none;}

/* barras de progresso */
.gal__bars{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:4px;padding:0 22px 12px;}
.gal__bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);transition:background .18s ease;padding:0;}
.gal__bar.on{background:#fff;}
.gal__bar:hover{background:rgba(255,255,255,.6);}

/* miniaturas */
.gal__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;}
.gal__thumb{width:76px;height:56px;flex-shrink:0;border-radius:4px;overflow:hidden;padding:0;border:1px solid var(--line);opacity:.6;transition:opacity .15s ease,border-color .15s ease;background:var(--night);}
.gal__thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;}
.gal__thumb:hover{opacity:.85;}
.gal__thumb.on{opacity:1;border-color:var(--accent);}

/* modo tela cheia */
.gal.is-full{position:fixed;inset:0;z-index:99999;margin:0;background:var(--night-2);display:flex;flex-direction:column;padding:14px;}
.gal.is-full .gal__head{padding:2px 4px 12px;border-color:rgba(255,255,255,.14);}
.gal.is-full .gal__head::after{background:var(--accent);}
.gal.is-full .gal__head h3{color:#fff;}
.gal.is-full .gal__count{color:rgba(255,255,255,.6);}
.gal.is-full .gal__count b{color:#fff;}
.gal.is-full .gal__stage{flex:1;aspect-ratio:auto;border-radius:var(--radius);}
.gal.is-full .gal__thumbs{margin-top:12px;}
.gal.is-full .gal__thumb{border-color:rgba(255,255,255,.2);}
.gal.is-full .gal__thumb.on{border-color:var(--accent);}

@media (max-width:640px){
  .gal__stage{aspect-ratio:3/4;}
  .gal__nav{width:38px;height:38px;}
  .gal__nav--prev{left:8px;}
  .gal__nav--next{right:8px;}
  .gal__full{width:36px;height:36px;top:10px;right:10px;}
  .gal__cap{padding:0 16px 22px;}
  .gal__cap p{font-size:14.5px;}
  .gal__cap .credit{font-size:12px;}
  .gal__bars{padding:0 16px 10px;}
  .gal__thumb{width:64px;height:48px;}
}

/* aviso de galeria ausente (só p/ editores) */
.ose-eg--missing{padding:12px 16px;border:1px dashed #ccc;border-radius:6px;color:#8a6d3b;background:#fcf8e3;font-size:14px;}