/* ================================================================
   IMAGAS — GALERIA / 3 PASTAS + VISUALIZADOR DE FOTOS
   FUNCIONA NA NAVEGAÇÃO CONTÍNUA SEM NOVO JAVASCRIPT.
   Edite este bloco para mudar fontes, posições e tamanhos.
   ================================================================ */
body.page-galeria {
    --ig-font: "Courier New", monospace;
    --ig-ink: var(--page-ui-color, #4b5d8a);
    --ig-content-width: 880px;
    --ig-content-x: 0px;
    --ig-content-y: 0px;
    --ig-main-top: 24px;
    --ig-gallery-bottom: 130px;
    --ig-title-size: 36px;
    --ig-text-size: 14px;
    --ig-label-size: 12px;
    --ig-grid-columns: 3;
    --ig-cover-gap: 23px;
    --ig-cover-fit: cover; /* 'contain' evita recortes */
    --ig-cover-ratio: 1 / 1; /* 1 / 1 = quadrado */
    --ig-thumb-radius: 0px;
    --ig-lightbox-background: rgba(247,247,247,.98);
    --ig-lightbox-max-width: 1024px;
    --ig-lightbox-image-height: 72dvh;
    --ig-lightbox-font-size: 12px;
}
html:has(body.page-galeria),body.page-galeria {
    overflow-x:hidden;
    overflow-y:auto;
}
body.page-galeria .ig-gallery-main {
    display:block;
    position:relative;
    z-index:10;
    box-sizing:border-box;
    width:100%; height:auto; min-height:0;
    padding:var(--ig-main-top) 12px var(--ig-gallery-bottom);
    pointer-events:auto;
}
body.page-galeria .ig-gallery-stage {
    display:block;
    width:100%; max-width:none;
    height:auto; min-height:0;
    aspect-ratio:auto;
    margin:0 auto; padding:0;
}
body.page-galeria .ig-gallery-stage > .subpage-mesh {display:none;}
body.page-galeria .ig-gallery-page {
    box-sizing:border-box;
    position:relative;
    width:min(var(--ig-content-width), calc(100vw - 32px));
    max-width:100%;
    margin:0 auto;
    transform:translate(var(--ig-content-x),var(--ig-content-y));
    padding:0;
    color:var(--ig-ink);
    font:400 var(--ig-text-size)/1.5 var(--ig-font);
    text-align:center;
    overflow-wrap:anywhere;
}
body.page-galeria .ig-gallery-page * {box-sizing:border-box;}
body.page-galeria .ig-gallery-heading {
    display:flex;
    flex-direction:column;
    gap:9px;
    align-items:center;
    margin:0 0 28px;
}
body.page-galeria .ig-gallery-heading p {margin:0;}
body.page-galeria .ig-gallery-kicker {
    font-size:var(--ig-label-size);
    letter-spacing:.13em;
    opacity:.85;
}
body.page-galeria .ig-gallery-heading h1 {
    margin:0;
    font:700 var(--ig-title-size)/1.2 var(--ig-font);
}
body.page-galeria .ig-category-grid {
    display:grid;
    grid-template-columns:repeat(var(--ig-grid-columns),minmax(0,1fr));
    gap:var(--ig-cover-gap);
    align-items:start;
    width:100%;
}
body.page-galeria .ig-category {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:inherit;
    text-align:center;
    text-decoration:none;
}
body.page-galeria .ig-category-number {
    align-self:flex-start;
    font-size:var(--ig-label-size);
    letter-spacing:.05em;
    text-align:left;
    opacity:.78;
}
body.page-galeria .ig-category img {
    display:block;
    width:100%;
    aspect-ratio:var(--ig-cover-ratio);
    height:auto;
    object-fit:var(--ig-cover-fit);
    border-radius:var(--ig-thumb-radius);
    transition:opacity .15s ease;
}
body.page-galeria .ig-category strong {
    font:700 clamp(12px,1.4vw,17px)/1.2 var(--ig-font);
    text-transform:uppercase;
}
body.page-galeria .ig-category-description {font-size:var(--ig-label-size);opacity:.88;}
body.page-galeria .ig-category-open {
    margin-top:3px;
    font-size:var(--ig-label-size);
    text-decoration:underline;
    text-underline-offset:3px;
}
body.page-galeria .ig-category:hover img {opacity:.75;}
body.page-galeria a:focus-visible {outline:2px solid currentColor;outline-offset:4px;}

/* Visor: fica fora da área de conteúdo para cobrir a barra de navegação. */
body.page-galeria .ig-lightbox {
    display:none;
    position:fixed;
    inset:0;
    z-index:20000;
    background:var(--ig-lightbox-background);
    color:var(--ig-ink);
    padding:clamp(10px,2.5vw,24px);
    font:400 var(--ig-lightbox-font-size)/1.4 var(--ig-font);
    overflow-y:auto;
    overscroll-behavior:contain;
}
body.page-galeria .ig-lightbox:target {
    display:flex;
    justify-content:center;
    align-items:center;
}
body.page-galeria:has(.ig-lightbox:target) {overflow:hidden !important;}
body.page-galeria .ig-viewer {
    box-sizing:border-box;
    width:min(var(--ig-lightbox-max-width),100%);
    max-height:100%;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
}
body.page-galeria .ig-viewer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    min-height:32px;
}
body.page-galeria .ig-viewer-breadcrumb {font-size:var(--ig-lightbox-font-size);letter-spacing:.04em;}
body.page-galeria .ig-close,
body.page-galeria .ig-viewer-controls a {
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    border:1px solid currentColor;
    background:transparent;
    padding:8px 11px;
    line-height:1.25;
    touch-action:manipulation;
}
body.page-galeria .ig-close:hover,
body.page-galeria .ig-viewer-controls a:hover {background:var(--ig-ink);color:var(--ig-lightbox-background);}
body.page-galeria .ig-current-photo {
    min-height:0;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
body.page-galeria .ig-current-photo img {
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:var(--ig-lightbox-image-height);
    object-fit:contain;
}
body.page-galeria .ig-current-photo figcaption {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
}
body.page-galeria .ig-viewer-controls {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
}
body.page-galeria .ig-viewer-controls a:first-child {justify-self:start;}
body.page-galeria .ig-viewer-controls a:last-child {justify-self:end;}
body.page-galeria .ig-counter {font-variant-numeric:tabular-nums;opacity:.8;}
html[data-theme="dark"] body.page-galeria {
    --ig-lightbox-background:rgba(0,0,0,.97);
}
/* MOBILE: três capas em coluna no corredor central (lateral ASCII livre). */
html[data-imagas-layout="mobile"] body.page-galeria {
    --ig-content-width:58vw;
    --ig-grid-columns:1;
    --ig-cover-gap:25px;
    --ig-main-top:18px;
    --ig-title-size:21px;
    --ig-text-size:11px;
    --ig-label-size:10px;
    --ig-gallery-bottom:140px;
    --ig-lightbox-image-height:67dvh;
    --ig-lightbox-font-size:11px;
}
html[data-imagas-layout="mobile"] body.page-galeria .ig-gallery-stage {
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
}
html[data-imagas-layout="mobile"] body.page-galeria .ig-gallery-page {
    width:min(var(--ig-content-width),calc(100vw - 12px));
}
html[data-imagas-layout="mobile"] body.page-galeria .ig-gallery-heading {
    gap:6px;
    margin-bottom:22px;
}
html[data-imagas-layout="mobile"] body.page-galeria .ig-category {gap:6px;}
html[data-imagas-layout="mobile"] body.page-galeria .ig-category strong {font-size:12px;}
html[data-imagas-layout="mobile"] body.page-galeria .ig-lightbox {padding:9px;}
html[data-imagas-layout="mobile"] body.page-galeria .ig-viewer {gap:10px;}
html[data-imagas-layout="mobile"] body.page-galeria .ig-viewer-breadcrumb {max-width:60%;}
html[data-imagas-layout="mobile"] body.page-galeria .ig-close,
html[data-imagas-layout="mobile"] body.page-galeria .ig-viewer-controls a {padding:10px 7px;}
@media(max-width:500px) {
    body.page-galeria .ig-viewer-controls {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
}
@media(prefers-reduced-motion:reduce) {
    body.page-galeria .ig-category img {transition:none;}
}


/* ================================================================
   IMAGAS — GALERIA COM FORMATOS DIFERENTES
   Fotos verticais, horizontais, quadradas e menores sem deformação.
   COLAR NO FIM de galeria-conteudo.css
   ================================================================ */
body.page-galeria {
    /* As três capas continuam quadradas. contain mostra toda a foto.
       Para preencher o quadrado com corte, use 'cover'. */
    --ig-cover-ratio: 1 / 1;
    --ig-cover-fit: contain;

    /* Altura máxima da foto AMPLIADA (sem obrigar imagens pequenas
       a aumentarem além do tamanho original). */
    --ig-photo-max-height: min(80dvh, calc(100dvh - 175px));
    --ig-photo-max-width: 100%;
}

/* Miniaturas quadradas; jamais distorcer a proporção original. */
body.page-galeria .ig-category img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ig-cover-ratio);
    height: auto;
    object-fit: var(--ig-cover-fit);
    object-position: center;
}

/* A foto grande adapta-se à dimensão REAL da imagem.
   width/height auto impedem o esticamento; max-* evitam vazamento. */
body.page-galeria .ig-lightbox .ig-current-photo > img {
    display: block;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-width: var(--ig-photo-max-width) !important;
    max-height: var(--ig-photo-max-height) !important;
    object-fit: contain !important;
    object-position: center center !important;
    flex-shrink: 1;
}

/* Mantém os controles e legendas visíveis também com retratos altos. */
body.page-galeria .ig-lightbox .ig-viewer {
    max-height: calc(100dvh - 20px);
}
body.page-galeria .ig-lightbox .ig-current-photo {
    min-height: 0;
}
body.page-galeria .ig-lightbox .ig-current-photo figcaption {
    flex-wrap: wrap;
}

/* No celular, reserve espaço para o botão Fechar e as setas. */
html[data-imagas-layout="mobile"] body.page-galeria {
    --ig-photo-max-height: min(78dvh, calc(100dvh - 170px));
    --ig-photo-max-width: 100%;
}

/* Telas pequenas na vertical ou horizontal: reduz a foto se necessário. */
@media (max-height: 560px) {
    body.page-galeria {
        --ig-photo-max-height: max(100px, calc(100dvh - 156px));
    }
}

/* ================================================================
   AJUSTE DO TOPO / GALERIA (Desktop e Mobile)
   Altere a variável abaixo para descer o título e as capas juntos,
   sem sobrepor elementos e sem alterar o cabeçalho de navegação.
   ================================================================ */
body.page-galeria {
    --ig-heading-down: 115px; /* valor Desktop; use 0px para voltar */
}
html[data-imagas-layout="mobile"] body.page-galeria {
    --ig-heading-down: 14px; /* valor Mobile; independente do Desktop */
}
body.page-galeria .ig-gallery-main {
    padding-top: calc(var(--ig-main-top) + var(--ig-heading-down)) !important;
}
