﻿/* Front-end gallery grid & masonry */
.gdfotos-gallery{ --gdfotos-cols:4; --gdfotos-cols-md:3; --gdfotos-cols-sm:1; }

/* GRID */
.gdfotos-gallery.is-grid .gdfotos-visible{
  display:grid;
  grid-template-columns:repeat(var(--gdfotos-cols), 1fr);
  gap:0;
}
.gdfotos-gallery.is-grid .gdfotos-hidden{
  display:none; /* fechado por padrão */
}
.gdfotos-gallery.is-open.is-grid .gdfotos-hidden{
  display:grid; /* aberto */
  grid-template-columns:repeat(var(--gdfotos-cols), 1fr);
  gap:0;
}

.gdfotos-gallery.is-grid .gdfotos-item{
  position:relative; overflow:hidden; border-radius:0; background:#fff;
}
.gdfotos-gallery.is-grid .gdfotos-image{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:transform .25s ease, box-shadow .25s ease;
}

/* MASONRY */
.gdfotos-gallery.is-masonry .gdfotos-visible{
  column-count: var(--gdfotos-cols);
  column-gap: 0;
}
.gdfotos-gallery.is-masonry .gdfotos-hidden{display:none;}
.gdfotos-gallery.is-open.is-masonry .gdfotos-hidden{
  display:block; /* aberto */
  column-count: var(--gdfotos-cols);
  column-gap: 0;
}

.gdfotos-gallery.is-masonry .gdfotos-item{
  break-inside: avoid; -webkit-column-break-inside: avoid; margin:0; border-radius:0; background:#fff;
}
.gdfotos-gallery.is-masonry .gdfotos-image{
  display:block; width:100%; height:auto; transition:transform .25s ease, box-shadow .25s ease;
}

/* Hover (desative se quiser 100% neutro) */
.gdfotos-item:hover .gdfotos-image{ transform:scale(1.03); }

.gdfotos-actions{ margin-top:8px; text-align:center; }
.gdfotos-toggle{ border:1px solid #ddd; background:#fff; padding:8px 14px; border-radius:999px; cursor:pointer; }

@media (max-width: 1024px){
  /* GRID responsivo */
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns:repeat(var(--gdfotos-cols-md), 1fr);
  }
  .gdfotos-gallery.is-open.is-grid .gdfotos-hidden{
    grid-template-columns:repeat(var(--gdfotos-cols-md), 1fr);
  }

  /* MASONRY responsivo */
  .gdfotos-gallery.is-masonry .gdfotos-visible{
    column-count: var(--gdfotos-cols-md);
  }
  .gdfotos-gallery.is-open.is-masonry .gdfotos-hidden{
    column-count: var(--gdfotos-cols-md);
  }
}
@media (max-width: 640px){
  /* GRID responsivo */
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns:repeat(var(--gdfotos-cols-sm), 1fr);
  }
  .gdfotos-gallery.is-open.is-grid .gdfotos-hidden{
    grid-template-columns:repeat(var(--gdfotos-cols-sm), 1fr);
  }

  /* MASONRY responsivo */
  .gdfotos-gallery.is-masonry .gdfotos-visible{
    column-count: var(--gdfotos-cols-sm);
  }
  .gdfotos-gallery.is-open.is-masonry .gdfotos-hidden{
    column-count: var(--gdfotos-cols-sm);
  }
}

/* Garantir: no GRID, hidden nunca ocupa espaço (itens vão para o visible) */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* Garantir que o hidden não ocupe espaço no GRID */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* Azulejo +/fechar ocupa um slot normal da galeria */
.gdfotos-item.gdfotos-moreless {
  display: block;
  position: relative;
  min-height: 80px;
  background: #f2f2f2;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn{
  all: unset;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:focus-visible{
  outline: 2px solid #2271b1;
  outline-offset: -2px;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-icon{
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1;
}
/* Grid: hidden não ocupa espaço */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* Tile +/fechar ocupa um slot normal da grade */
.gdfotos-item.gdfotos-moreless{
  display:block;
  position:relative;
  min-height:80px;          /* altura mínima p/ feedback mesmo se as fotos forem muito estreitas */
  background:#f4f4f4;       /* fundo neutro */
  border-radius:0;          /* sem bordas arredondadas */
}

/* Botão interno centralizado */
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn{
  all:unset;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  cursor:pointer;
  color:#222;               /* herda para o SVG (stroke: currentColor) */
}

/* Ícone SVG dimensionado de forma responsiva */
.gdfotos-item.gdfotos-moreless .gdfotos-ml-icon{
  display:inline-grid;
  place-items:center;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-icon svg{
  width:clamp(28px, 5vw, 48px);
  height:clamp(28px, 5vw, 48px);
}

/* Interação */
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:hover{
  background:#ededed;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:focus-visible{
  outline:2px solid #2271b1;
  outline-offset:-2px;
}

/* No GRID, o container hidden não ocupa espaço */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* Espaçadores para completar a última linha quando aberto */
.gdfotos-item.gdfotos-spacer{
  visibility:hidden;
  pointer-events:none;
  background:transparent;
  min-height:80px;  /* garante altura mínima semelhante ao tile */
}
/* GRID consistente e sem gap */
.gdfotos-gallery.is-grid .gdfotos-visible{
  display:grid;
  grid-template-columns: repeat(var(--gdfotos-cols, 4), 1fr);
  gap:0; /* sem espaçamento entre itens */
}
@media (max-width:1024px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-md, 3), 1fr);
  }
}
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm, 1), 1fr);
  }
}
.gdfotos-gallery.is-grid .gdfotos-item{ width:100%; }
.gdfotos-gallery.is-grid .gdfotos-item img{
  display:block; width:100%; height:auto;
}

/* Tile +/× (sem bordas, sem gap) */
.gdfotos-item.gdfotos-moreless{
  display:block;
  position:relative;
  background:#f4f4f4;
  border-radius:0;
  min-height:80px; /* a altura real da linha será ditada pelo item mais alto */
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn{
  all:unset;
  display:grid;
  place-items:center;
  width:100%; height:100%;
  cursor:pointer; color:#222;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-icon svg{
  width:clamp(28px, 5vw, 48px);
  height:clamp(28px, 5vw, 48px);
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:hover{ background:#ededed; }
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:focus-visible{ outline:2px solid #2271b1; outline-offset:-2px; }

/* Spacers: ocupam célula mas não aparecem */
.gdfotos-item.gdfotos-spacer{
  visibility:hidden;
  pointer-events:none;
  background:transparent;
  min-height:1px;
}

/* No GRID, o hidden não ocupa espaço */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* GRID consistente, sem gap; denso para preencher "buracos" */
.gdfotos-gallery.is-grid .gdfotos-visible{
  display:grid;
  grid-template-columns: repeat(var(--gdfotos-cols, 4), 1fr);
  grid-auto-flow: dense;         /* importante p/ não sobrar coluna vazia */
  gap:0;
}
@media (max-width:1024px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-md, 3), 1fr);
  }
}
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm, 1), 1fr);
  }
}
.gdfotos-gallery.is-grid .gdfotos-item{ width:100%; }
.gdfotos-gallery.is-grid .gdfotos-item img{ display:block; width:100%; height:auto; }

/* Tile +/× ocupa um slot normal; sem borda, sem gap */
.gdfotos-item.gdfotos-moreless{
  display:block;
  position:relative;
  background:#f4f4f4;
  border-radius:0;
  min-height:80px;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn{
  all:unset;
  display:grid;
  place-items:center;
  width:100%; height:100%;
  cursor:pointer; color:#222;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-icon svg{
  width:clamp(28px, 5vw, 48px);
  height:clamp(28px, 5vw, 48px);
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:hover{ background:#ededed; }
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:focus-visible{ outline:2px solid #2271b1; outline-offset:-2px; }

/* Quando ABERTA, o tile vai para a ÚLTIMA COLUNA da ÚLTIMA LINHA */
.gdfotos-gallery.is-open.is-grid .gdfotos-moreless{
  grid-column: -1;   /* última coluna sempre */
}

/* No GRID, o hidden não ocupa espaço */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* GRID principal (sem gap; densidade normal) */
.gdfotos-gallery.is-grid .gdfotos-visible{
  display:grid;
  grid-template-columns: repeat(var(--gdfotos-cols, 4), 1fr);
  gap:0;
}
@media (max-width:1024px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-md, 3), 1fr);
  }
}
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm, 1), 1fr);
  }
}

/* Wrapper da ÚLTIMA LINHA quando ABERTO:
   vira flex sem quebra, e cada item recebe largura = 100% / (L+1) */
.gdfotos-gallery.is-open.is-grid .gdfotos-lastrow{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
}
.gdfotos-gallery.is-open.is-grid .gdfotos-lastrow > .gdfotos-item{
  flex:0 0 calc(100% / var(--gdfotos-lastcols, 2));
  max-width:calc(100% / var(--gdfotos-lastcols, 2));
}

/* Itens & imagens */
.gdfotos-gallery.is-grid .gdfotos-item{ width:100%; }
.gdfotos-gallery.is-grid .gdfotos-item img{ display:block; width:100%; height:auto; }

/* Tile +/× (sem bordas, sem gap) */
.gdfotos-item.gdfotos-moreless{
  display:block;
  position:relative;
  background:#f4f4f4;
  border-radius:0;
  min-height:80px;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn{
  all:unset;
  display:grid;
  place-items:center;
  width:100%; height:100%;
  cursor:pointer; color:#222;
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-icon svg{
  width:clamp(28px, 5vw, 48px);
  height:clamp(28px, 5vw, 48px);
}
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:hover{ background:#ededed; }
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn:focus-visible{ outline:2px solid #2271b1; outline-offset:-2px; }

/* No GRID, o hidden não ocupa espaço */
.gdfotos-gallery.is-grid .gdfotos-hidden{ display:none !important; }
/* --- FIX: última linha deve ocupar TODAS as colunas do grid --- */
.gdfotos-gallery.is-open.is-grid .gdfotos-lastrow{
  grid-column: 1 / -1;   /* span linha inteira do grid */
  width: 100%;
  display: flex;         /* já tínhamos, mantemos */
  flex-wrap: nowrap;
  align-items: stretch;  /* itens esticam igual aos das colunas */
}
.gdfotos-gallery.is-open.is-grid .gdfotos-lastrow > .gdfotos-item{
  flex: 0 0 calc(100% / var(--gdfotos-lastcols, 2));
  max-width: calc(100% / var(--gdfotos-lastcols, 2));
}
/* ==== Atualização solicitada ==== */

/* Fundo dos itens no GRID com a var do tema */
.gdfotos-gallery.is-grid .gdfotos-item {
  background: var(--cor-primaria-texto);
}

/* Deixar o SVG do botão "+" branco (estado fechado: data-action="open") */
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn[data-action="open"] .gdfotos-ml-icon svg {
  stroke: #fff !important;
}

/* (Opcional) se houver texto no botão, garante branco também quando fechado */
.gdfotos-item.gdfotos-moreless .gdfotos-ml-btn[data-action="open"] {
  color: #fff;
}
/* Modo GRID no mobile (<=640px): no mínimo 2 colunas,
   exceto quando o painel estiver configurado com 1 coluna explicitamente */
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm-eff, var(--gdfotos-cols-sm, 1))), 1fr);
  }
}
/* Correção de sintaxe do repeat acima */
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(calc(var(--gdfotos-cols-sm-eff, var(--gdfotos-cols-sm, 1))), 1fr);
  }
}
/* Mobile (<=640px): usa --gdfotos-cols-sm-eff (min 2, exceto se admin=1) */
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm-eff, var(--gdfotos-cols-sm, 1))), 1fr);
  }
}
/* correção de sintaxe do repeat (parênteses) */
@media (max-width:640px){
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm-eff, var(--gdfotos-cols-sm, 1)), 1fr);
  }
}
/* ========================================================================
   MÍNIMO DE COLUNAS POR BREAKPOINT (sem JS)
   - Mobile (<=640px): no mínimo 2 colunas, EXCETO se admin definiu 1
   - Tablet (641–1024px): fallback para 2 quando não houver configuração
   ======================================================================== */

/* MOBILE */
@media (max-width:640px){
  /* Se NÃO houver data-cols-sm, define 2 (e expõe a var -eff também) */
  .gdfotos-gallery.is-grid:not([data-cols-sm]){
    --gdfotos-cols-sm: 2;
    --gdfotos-cols-sm-eff: 2;
  }
  /* Se admin explicitou 1, respeita 1 */
  .gdfotos-gallery.is-grid[data-cols-sm="1"]{
    --gdfotos-cols-sm: 1;
    --gdfotos-cols-sm-eff: 1;
  }
  /* Grade mobile usa a var; fallback padrão = 2 */
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-sm, 2), 1fr);
  }
}

/* TABLET */
@media (min-width:641px) and (max-width:1024px){
  /* Se NÃO houver data-cols-md, define 2 como fallback */
  .gdfotos-gallery.is-grid:not([data-cols-md]){
    --gdfotos-cols-md: 2;
  }
  /* Se admin explicitou 1 em md, respeita 1 */
  .gdfotos-gallery.is-grid[data-cols-md="1"]{
    --gdfotos-cols-md: 1;
  }
  /* Grade tablet usa a var md; fallback para desktop( --gdfotos-cols ) ou 2 */
  .gdfotos-gallery.is-grid .gdfotos-visible{
    grid-template-columns: repeat(var(--gdfotos-cols-md, var(--gdfotos-cols, 2)), 1fr);
  }
}
 /* Força 2 colunas SOMENTE na página especificada (mobile) */
 @media (max-width:640px){
   body.page-id-11 .gdfotos-gallery.is-grid .gdfotos-visible{
     grid-template-columns: repeat(2, 1fr) !important;
   }

   /* (Opcional) Se quiser manter 1 coluna quando o painel estiver em 1, descomente abaixo:
   body.page-id-11 .gdfotos-gallery.is-grid[data-cols-sm="1"] .gdfotos-visible{
     grid-template-columns: repeat(1, 1fr) !important;
   }
   */
 }
