@charset "UTF-8";
/* =============================================================================
   O SEGREDO — Galeria de imagens (os-gallery-redesign.css) · v2
   ---------------------------------------------------------------------------
   Layout editorial para o post-format "Galeria" e blocos de galeria do tema.
   Mira as classes reais:
     .fn__gallery_justified           (galeria justificada via Justified Gallery JS)
     .fn__gallery_6 / .row            (mosaico de destaque 6 imagens)
     .fn__gallery_format .slick_slider (slider/carrossel)
     .fn__gallery_carousel            (carrossel)
     .fn__gallery_count               (selo "N fotos" sobre a capa)
     .fn__gallery_thumbs / .items     (grade de miniaturas + lightbox)
   Sem !important desnecessário · sem box-shadow · fontes do tema.
   Drop em framework/css/ e enfileirar, OU anexar ao os-gallery-premium.css.
   ============================================================================= */

:root{
  --ogl-surface:#fff;--ogl-surface-2:oklch(0.965 0.004 80);--ogl-surface-3:oklch(0.94 0.005 80);
  --ogl-line:oklch(0.90 0.005 80);--ogl-ink:oklch(0.20 0.010 60);--ogl-ink-2:oklch(0.34 0.010 60);
  --ogl-muted:oklch(0.52 0.010 60);--ogl-accent:#ff532c;--ogl-deep:#241734;--ogl-radius:8px;--ogl-gap:10px;
}
[data-site-skin="dark"]{
  --ogl-surface:oklch(0.20 0.008 60);--ogl-surface-2:oklch(0.23 0.008 60);--ogl-surface-3:oklch(0.26 0.008 60);
  --ogl-line:oklch(0.32 0.008 60);--ogl-ink:oklch(0.96 0.005 60);--ogl-ink-2:oklch(0.85 0.005 60);--ogl-muted:oklch(0.65 0.005 60);
}

/* =========================================================================
   Cabeçalho da galeria (opcional — .ogl-head se o PHP emitir; senão herda h2)
   ========================================================================= */
.ogl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin:0 0 18px;border-bottom:1px solid var(--ogl-line);}
.ogl-head h2{font-family:var(--hff),system-ui,sans-serif;font-size:clamp(20px,2vw,26px);
  font-weight:700;letter-spacing:-0.015em;color:var(--ogl-ink);display:flex;align-items:center;gap:12px;margin:0;}
.ogl-head h2::before{content:"";width:4px;height:18px;background:var(--ogl-accent);border-radius:1px;flex-shrink:0;}
.ogl-head .count{font-family:var(--bff),system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ogl-muted);white-space:nowrap;}

/* =========================================================================
   1) GALERIA JUSTIFICADA (Justified Gallery JS) — linhas alinhadas
   ========================================================================= */
.fn__gallery_justified{margin:8px 0 28px;border-radius:var(--ogl-radius);overflow:hidden;}
/* Antes do JS calcular (e fallback sem JS): grade limpa que preserva proporção */
.fn__gallery_justified:not(.justified-gallery){display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--ogl-gap);}
.fn__gallery_justified:not(.justified-gallery) > a,
.fn__gallery_justified:not(.justified-gallery) > div{
  position:static;display:block;width:100%;border-radius:var(--ogl-radius);overflow:hidden;background:var(--ogl-surface-2);}
.fn__gallery_justified:not(.justified-gallery) img{
  width:100%;height:220px;object-fit:cover;display:block;border-radius:var(--ogl-radius);}
/* Depois do JS (.justified-gallery): respeita o cálculo de linhas */
.fn__gallery_justified.justified-gallery > a,
.fn__gallery_justified.justified-gallery > div{border-radius:var(--ogl-radius);overflow:hidden;}
.fn__gallery_justified.justified-gallery > a > img,
.fn__gallery_justified.justified-gallery > div > img{border-radius:0;}
.fn__gallery_justified .jg-caption{font-family:var(--bff),system-ui,sans-serif;font-size:12px;
  background:linear-gradient(transparent,rgba(0,0,0,0.7));color:#fff;padding:14px 12px 10px;}

/* =========================================================================
   2) MOSAICO DE DESTAQUE (.fn__gallery_6) — capa grande + grade
   ========================================================================= */
.fn__gallery_6_wrap{position:relative;margin:8px 0 28px;}
.fn__gallery_6{display:grid;gap:var(--ogl-gap);}
.fn__gallery_6 .row{display:grid;gap:var(--ogl-gap);}
.fn__gallery_6 .row--1{grid-template-columns:2fr 1fr;}
.fn__gallery_6 .row--2{grid-template-columns:repeat(3,1fr);}
.fn__gallery_6 .row > a,
.fn__gallery_6 .row > div{display:block;border-radius:var(--ogl-radius);overflow:hidden;
  background:var(--ogl-surface-2);position:relative;}
.fn__gallery_6 .row--1 > *:first-child img{height:420px;}
.fn__gallery_6 .row--1 > *:nth-child(2) img{height:420px;}
.fn__gallery_6 .row--2 img{height:200px;}
.fn__gallery_6 img{width:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.fn__gallery_6 a:hover img{transform:scale(1.04);}

/* =========================================================================
   3) GRADE DE MINIATURAS (.fn__gallery_thumbs .items) + lightbox
   ========================================================================= */
.fn__gallery_thumbs{margin:8px 0 28px;}
.fn__gallery_thumbs .items{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ogl-gap);}
.fn__gallery_thumbs .items > a,
.fn__gallery_thumbs .items > div{display:block;position:relative;aspect-ratio:1;
  border-radius:var(--ogl-radius);overflow:hidden;background:var(--ogl-surface-2);}
.fn__gallery_thumbs .items img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.fn__gallery_thumbs .items a:hover img{transform:scale(1.05);}
.fn__gallery_thumbs .items a::after{content:"";position:absolute;inset:0;
  background:rgba(36,23,52,0);transition:background .2s ease;}
.fn__gallery_thumbs .items a:hover::after{background:rgba(36,23,52,0.12);}

/* =========================================================================
   4) CARROSSEL / SLIDER (.fn__gallery_carousel / .slick_slider)
   ========================================================================= */
.fn__gallery_carousel_wrap,.fn__gallery_format{position:relative;margin:8px 0 28px;
  border-radius:var(--ogl-radius);overflow:hidden;background:var(--ogl-surface-3);}
.fn__gallery_carousel .item,.fn__gallery_format .slick_item .item{
  border-radius:0;overflow:hidden;}
.fn__gallery_format .slick_slider .item{height:560px;background-size:cover;background-position:center;}
@media(max-width:768px){.fn__gallery_format .slick_slider .item{height:380px;}}
/* setas do slick */
.fn__gallery_format .slick-arrow,.fn__gallery_carousel .slick-arrow{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.92);border:1px solid var(--ogl-line);
  display:flex;align-items:center;justify-content:center;z-index:5;}
.fn__gallery_format .slick-arrow:hover{background:var(--ogl-accent);}
.fn__gallery_format .slick-dots{bottom:14px;}
.fn__gallery_format .slick-dots li button:before{color:#fff;opacity:0.5;font-size:9px;}
.fn__gallery_format .slick-dots li.slick-active button:before{color:var(--ogl-accent);opacity:1;}

/* =========================================================================
   5) SELO "N FOTOS" (.fn__gallery_count) sobre a capa
   ========================================================================= */
.fn__gallery_count{position:absolute;top:12px;right:12px;z-index:6;display:inline-flex;align-items:center;gap:6px;
  background:rgba(36,23,52,0.86);color:#fff;font-family:var(--bff),system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:0.04em;padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px);}
.fn__gallery_count svg{width:14px;height:14px;}
.fn__gallery_count span{font-variant-numeric:tabular-nums;}

/* =========================================================================
   RESPONSIVO (desktop · iPad · mobile)
   ========================================================================= */
@media(max-width:1024px){
  .fn__gallery_thumbs .items{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  .fn__gallery_justified:not(.justified-gallery){grid-template-columns:repeat(2,1fr);}
  .fn__gallery_justified:not(.justified-gallery) img{height:180px;}
  .fn__gallery_6 .row--1{grid-template-columns:1fr;}
  .fn__gallery_6 .row--1 > *:first-child img,
  .fn__gallery_6 .row--1 > *:nth-child(2) img{height:300px;}
  .fn__gallery_6 .row--2{grid-template-columns:repeat(2,1fr);}
  .fn__gallery_thumbs .items{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:520px){
  .fn__gallery_justified:not(.justified-gallery){grid-template-columns:1fr 1fr;gap:6px;}
  .fn__gallery_justified:not(.justified-gallery) img{height:140px;}
  .fn__gallery_6 .row--2{grid-template-columns:1fr 1fr;}
  .fn__gallery_6 .row--2 img{height:150px;}
  .fn__gallery_thumbs .items{grid-template-columns:repeat(2,1fr);gap:6px;}
}