/******************************************************
 * MIRANDA – FORCE 2x6 GALLERIES (limite 12 + overlay)
 * Compat.: Penci/Elementor + Penci-grid + WP [gallery]
 ******************************************************/

/* ===========================
   1) LIMITAR A 12 ITENS
   =========================== */

/* Elementor "image-gallery" (anchors diretos) */
.elementor-widget-image-gallery .penci-post-gallery-container > a:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.elementor-widget-image-gallery .penci-post-gallery-container > a:nth-child(n+13),
.elementor-widget-image-gallery .penci-post-gallery-container > a.nx-hidden{
  display:none !important;
}

/* Penci/Soledad [gallery] direto (fora do Elementor) */
/* Estrutura justified: <a> diretos (após justifiedGallery processar) */
/* justifiedGallery reorganiza, então usamos seletores mais genéricos */
.penci-post-gallery-container.miranda-forced-2x6.justified a.penci-gallery-ite:not(.nx-hidden):nth-of-type(-n+12),
.penci-post-gallery-container.miranda-forced-2x6.justified a[class*="penci-gallery"]:not(.nx-hidden):nth-of-type(-n+12),
.penci-post-gallery-container.miranda-forced-2x6.justified > a:not(.nx-hidden):nth-of-type(-n+12){
  display:block !important; visibility:visible !important;
}
/* Ocultar elementos marcados ou além do 12º */
.penci-post-gallery-container.miranda-forced-2x6.justified a.nx-hidden,
.penci-post-gallery-container.miranda-forced-2x6.justified a[data-miranda-hidden="true"],
.penci-post-gallery-container.miranda-forced-2x6.justified a.penci-gallery-ite.nx-hidden,
.penci-post-gallery-container.miranda-forced-2x6.justified a[class*="penci-gallery"].nx-hidden{
  display:none !important; visibility:hidden !important; opacity:0 !important;
}
/* Outros tipos (não justified) */
.penci-post-gallery-container.miranda-forced-2x6:not(.justified) > a:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.penci-post-gallery-container.miranda-forced-2x6:not(.justified) > a:nth-child(n+13),
.penci-post-gallery-container.miranda-forced-2x6:not(.justified) > a.nx-hidden{
  display:none !important; visibility:hidden !important;
}
/* Estrutura masonry: <div class="item-gallery-masonry"><a>...</a></div> */
.penci-post-gallery-container.miranda-forced-2x6 > div[class*="item-gallery"]:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.penci-post-gallery-container.miranda-forced-2x6 > div[class*="item-gallery"]:nth-child(n+13),
.penci-post-gallery-container.miranda-forced-2x6 > div[class*="item-gallery"].nx-hidden{
  display:none !important;
}

/* Penci "penci-image-gallery" (grid .penci-gallery-item) – Elementor e conteúdo do post (shortcode [photo-gallery]) */
.penci-image-gallery .penci-block_content > .penci-gallery-item:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.penci-image-gallery .penci-block_content > .penci-gallery-item:nth-child(n+13),
.penci-image-gallery .penci-block_content > .penci-gallery-item.nx-hidden{
  display:none !important;
}

/* Shortcode clássico [gallery] */
.miranda-forced-2x6 .gallery-item:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.miranda-forced-2x6 .gallery-item:nth-child(n+13),
.miranda-forced-2x6 .gallery-item.nx-hidden{
  display:none !important;
}

/* Gutenberg – legacy (ul.blocks-gallery-grid > li.blocks-gallery-item) */
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-child(n+13),
.wp-block-gallery .blocks-gallery-item.nx-hidden{
  display:none !important;
}

/* Gutenberg – moderno (figure.wp-block-image sob .wp-block-gallery) */
.wp-block-gallery.is-layout-flex   > figure.wp-block-image:nth-child(-n+12),
.wp-block-gallery.is-layout-grid   > figure.wp-block-image:nth-child(-n+12),
.wp-block-gallery.is-layout-flow   > figure.wp-block-image:nth-child(-n+12),
.wp-block-gallery.has-nested-images> figure.wp-block-image:nth-child(-n+12){
  display:block !important; visibility:visible !important;
}
.wp-block-gallery.is-layout-flex   > figure.wp-block-image:nth-child(n+13),
.wp-block-gallery.is-layout-grid   > figure.wp-block-image:nth-child(n+13),
.wp-block-gallery.is-layout-flow   > figure.wp-block-image:nth-child(n+13),
.wp-block-gallery.has-nested-images> figure.wp-block-image:nth-child(n+13),
.wp-block-miranda-forced-2x6 figure.wp-block-image.nx-hidden{
  display:none !important;
}

/* ===========================
   2) OVERLAY “+N” NO 12º ITEM
   (JS/PHP marca o alvo com .miranda-has-more e injeta .miranda-plus-badge)
   =========================== */
.elementor-widget-image-gallery .penci-post-gallery-container > a.miranda-has-more,
.penci-post-gallery-container.miranda-forced-2x6 > a.miranda-has-more,
.penci-post-gallery-container.miranda-forced-2x6.justified a.penci-gallery-ite.miranda-has-more,
.penci-post-gallery-container.miranda-forced-2x6.justified a[class*="penci-gallery"].miranda-has-more,
.penci-image-gallery .penci-block_content > .penci-gallery-item > a.miranda-has-more,
.gallery .gallery-icon a.miranda-has-more,
.wp-block-gallery .blocks-gallery-item.miranda-has-more,
.wp-block-gallery .blocks-gallery-item a.miranda-has-more,
.wp-block-gallery > figure.wp-block-image.miranda-has-more,
.wp-block-gallery > figure.wp-block-image a.miranda-has-more,
.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a.miranda-has-more{
  position:relative; z-index:0;
}

.miranda-plus-badge{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.38);
  font-weight:300;
  font-size:clamp(20px, 3.2vw, 38px);
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;     /* mantém o clique no link */
  z-index:99;
}

/* Evitar elementos do tema sobre o selo no Penci */
.penci-image-gallery .penci-block_content > .penci-gallery-item > a.miranda-has-more .caption,
.penci-image-gallery .penci-block_content > .penci-gallery-item > a.miranda-has-more .penciicon-expand{
  display:none !important;
}

/* ===========================
   3) QUADRADOS para o nosso Penci-grid
      gerado pelo [photo-gallery] e [gallery]:
      .penci-block_content.pencisc-grid.miranda-forced-2x6
      
      IMPORTANTE: FORÇA SEMPRE 6 COLUNAS (2x6), ignorando qualquer atributo columns do shortcode
      Sobrescreve .pencisc-grid-3, column-3, e qualquer outra tentativa de usar outras colunas
   =========================== */
.penci-block_content.pencisc-grid.miranda-forced-2x6,
.penci-image-gallery .penci-block_content.pencisc-grid.miranda-forced-2x6,
/* Forçar 6 colunas em qualquer galeria .penci-image-gallery (post/shortcode ou Elementor) */
.penci-image-gallery .penci-block_content.pencisc-grid,
.pencisc-grid.miranda-forced-2x6,
/* Sobrescreve classes de colunas do tema Soledad */
.pencisc-grid-3.miranda-forced-2x6,
.pencisc-grid-2.miranda-forced-2x6,
.pencisc-grid-1.miranda-forced-2x6,
.pencisc-grid-4.miranda-forced-2x6,
.pencisc-grid-5.miranda-forced-2x6,
.pencisc-grid-6.miranda-forced-2x6,
/* Sobrescreve quando as classes estão em elementos pais */
.pencisc-grid-3 .pencisc-grid.miranda-forced-2x6,
.pencisc-grid-2 .pencisc-grid.miranda-forced-2x6,
.pencisc-grid-1 .pencisc-grid.miranda-forced-2x6,
.pencisc-grid-4 .pencisc-grid.miranda-forced-2x6,
.pencisc-grid-5 .pencisc-grid.miranda-forced-2x6,
.pencisc-grid-6 .pencisc-grid.miranda-forced-2x6,
/* Sobrescreve quando as classes estão no próprio elemento */
.pencisc-grid-3.miranda-forced-2x6 .pencisc-grid,
.pencisc-grid-2.miranda-forced-2x6 .pencisc-grid,
.pencisc-grid-1.miranda-forced-2x6 .pencisc-grid,
.pencisc-grid-4.miranda-forced-2x6 .pencisc-grid,
.pencisc-grid-5.miranda-forced-2x6 .pencisc-grid,
.pencisc-grid-6.miranda-forced-2x6 .pencisc-grid,
/* Sobrescreve classes column-X do tema Soledad */
[class*="column-1"].miranda-forced-2x6 .pencisc-grid,
[class*="column-2"].miranda-forced-2x6 .pencisc-grid,
[class*="column-3"].miranda-forced-2x6 .pencisc-grid,
[class*="column-4"].miranda-forced-2x6 .pencisc-grid,
[class*="column-5"].miranda-forced-2x6 .pencisc-grid,
[class*="column-6"].miranda-forced-2x6 .pencisc-grid,
.miranda-forced-2x6 [class*="column-1"] .pencisc-grid,
.miranda-forced-2x6 [class*="column-2"] .pencisc-grid,
.miranda-forced-2x6 [class*="column-3"] .pencisc-grid,
.miranda-forced-2x6 [class*="column-4"] .pencisc-grid,
.miranda-forced-2x6 [class*="column-5"] .pencisc-grid,
.miranda-forced-2x6 [class*="column-6"] .pencisc-grid{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important; /* SEMPRE 6 COLUNAS - ignora columns do shortcode */
  gap:12px !important;                                        /* espaçamento entre tiles */
}

/* Regra genérica: QUALQUER elemento com miranda-forced-2x6 que seja um grid = 6 colunas */
.miranda-forced-2x6[style*="grid-template-columns"],
.miranda-forced-2x6 [style*="grid-template-columns"]{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important; /* FORÇA 6 colunas mesmo se houver style inline */
}
/* Galeria Penci: forçar 6 colunas mesmo com style inline ou regras do tema (máxima prioridade) */
.penci-image-gallery .penci-block_content.pencisc-grid[style*="grid-template-columns"],
body .penci-image-gallery .penci-block_content.pencisc-grid,
#main .penci-image-gallery .penci-block_content.pencisc-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* remover margens herdadas */
.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item{
  margin:0 !important;
}

.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item.nx-hidden {
  display: none;
}

/* cada tile = quadrado; imagens via <img> (loading="lazy", decoding="async") */
.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a,
.penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a > img,
.penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:0;
}

/* overlay (caption, ícone) por cima da imagem */
.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a > .caption,
.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a > .penciicon-expand,
.penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a > .caption,
.penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a > .penciicon-expand{
  position:relative;
  z-index:1;
}

/* fallback para browsers sem aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a,
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a{
    position:relative;
    height:auto;
  }
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a::before,
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a::before{
    content:"";
    display:block;
    padding-top:100%;
  }
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a > *,
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a > *{
    position:absolute;
    inset:0;
  }
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a > img,
  .penci-block_content.pencisc-grid.miranda-forced-2x6 .gallery-item > a > img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* (Opcional) Se preferires quadrados FIXOS (ex.: 150×150), descomenta:
.penci-block_content.pencisc-grid.miranda-forced-2x6{
  --size:150px;
  grid-template-columns:repeat(6, var(--size));
}
.penci-block_content.pencisc-grid.miranda-forced-2x6 .penci-gallery-item > a{
  width:var(--size); height:var(--size); aspect-ratio:auto;
}
*/

/* ===========================
   4) FLAGS / DEBUG
   =========================== */
/* .miranda-forced-2x6 - classe adicionada via JS para marcar galerias processadas */

/* ===========================
   5) BOTÃO EDITAR GALERIA (apenas para usuários com permissão)
   =========================== */
.miranda-gallery-edit-button-wrapper {
  text-align: right;
  margin-bottom: 15px;
}

.miranda-gallery-edit-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #0073aa;
  color: #fff !important;
  text-decoration: none;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
  line-height: 1.5;
}

.miranda-gallery-edit-button:hover,
.miranda-gallery-edit-button:focus {
  background-color: #005a87;
  color: #fff !important;
  text-decoration: none;
}

.miranda-gallery-edit-button .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
  line-height: 1;
}

/* Responsivo: botão menor em mobile */
@media (max-width: 768px) {
  .miranda-gallery-edit-button {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .miranda-gallery-edit-button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}

/* ===========================
   6) Lightbox: 1ª coluna = galeria (.mfp-gallery-main: fechar, imagem, setas, legendas); 2ª = sidebar vazia
   =========================== */
.mfp-wrap.mfp-gallery {
  background-color: #000;
}

.mfp-image-holder .mfp-content.mfp-content--miranda-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden !important; /* evita scrollbar introduzida por overflow:auto do tema */
}

.mfp-image-holder .mfp-content.mfp-content--miranda-sidebar > .mfp-figure.mfp-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mfp-image-holder .mfp-content.mfp-content--miranda-sidebar > .mfp-sidebar {
  flex: 0 0 340px;
  width: 340px;
  max-width: 340px;
  /* min-height > 0: evita caixa “invisível” ao lazy/Intersection do SAPO antes do reflow */
  min-height: 280px;
  box-sizing: border-box;
  background: #0d0d0d;
  order: 2;
  margin-left: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/*
 * Rótulo no lightbox: "PUBLICIDADE" centrado.
 * Em main.css, .top-pub:before (≥641px) usa content: "PUB" — aqui sobrescrevemos só dentro do popup da galeria.
 */
.mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content.mfp-content--miranda-sidebar .mfp-sidebar .top-pub::before,
.mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content.mfp-content--miranda-sidebar .mfp-sidebar .top-pub:before {
  content: 'PUBLICIDADE' !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 12px 10px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #999 !important;
  background: transparent !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

/* Publicidade SAPO na coluna do lightbox */
.mfp-sidebar .sapo-pub-wrapper,
.mfp-sidebar .top-pub {
  margin: 0 auto;
  max-width: 100%;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0 12px 12px;
}

/* Botão fechar (×) na coluna da galeria — substitui padding/font do Magnific (Soledad) */
.mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content.mfp-content--miranda-sidebar .mfp-gallery-main > button.mfp-close {
  padding-right: 34px;
  font-size: 44px;
}

@media (max-width: 1024px) {
  .mfp-image-holder .mfp-content.mfp-content--miranda-sidebar {
    flex-direction: column;
    width: 100% !important;
    overflow: auto !important;
  }

  .mfp-image-holder .mfp-content.mfp-content--miranda-sidebar > .mfp-sidebar {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 120px;
    order: 2;
    margin-left: 0;
    align-self: stretch;
  }
}

/* Overlay do Magnific (Soledad usa opacity ~0.8) — mais escuro na galeria */
.mfp-wrap.mfp-gallery .mfp-bg {
  opacity: 0.94 !important;
}

/* ===========================
   7) Galeria: setas dentro da 1ª coluna (.mfp-gallery-main; movidas por JS)
   =========================== */
.mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content > .mfp-figure.mfp-gallery-main {
  position: relative;
  overflow: visible;
}

.mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content > .mfp-figure.mfp-gallery-main > .mfp-arrow-left {
  left: 4px;
  right: auto;
}

.mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content > .mfp-figure.mfp-gallery-main > .mfp-arrow-right {
  right: 4px;
  left: auto;
}

@media (max-width: 1024px) {
  .mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content > .mfp-figure.mfp-gallery-main > .mfp-arrow-left {
    left: 4px;
  }

  .mfp-wrap.mfp-gallery .mfp-image-holder .mfp-content > .mfp-figure.mfp-gallery-main > .mfp-arrow-right {
    right: 4px;
  }
}