/* Galeria AC Celebrante — mosaico proporcional e responsivo */
.page-gallery { background: #f6f3ed; }
.gallery-hero {
  position: relative;
  padding: clamp(64px, 9vw, 112px) 24px;
  color: #f7f3e9;
  text-align: center;
  background: linear-gradient(110deg, rgba(20,18,15,.94), rgba(35,29,20,.82)), url("../images/cas-celebrante.webp") center 48%/cover;
}
.gallery-hero-inner { max-width: 850px; margin: 0 auto; }
.gallery-hero .eyebrow { color: #d4bd82; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.gallery-hero h1 { margin: 12px 0 14px; color: #fff; }
.gallery-hero p:last-child { max-width: 650px; margin: 0 auto; color: rgba(255,255,255,.86); }
.gallery-main { max-width: 1680px; margin: 0 auto; padding: clamp(32px, 4vw, 54px) clamp(14px, 2.2vw, 34px); }
.gallery-intro { display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin:0 2px 22px; color:#4d4639; }
.gallery-intro p { margin:0; font-size:1.02rem; }
.gallery-intro span { color:#82765f; font-size:.82rem; }

/* O JS define a quantidade de colunas e a altura de cada quadro a partir da proporção real da foto. */
.photo-mosaic {
    display: block;
    columns: 5;
    column-gap: 12px;
}
.gallery-tile {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
    break-inside: avoid;
}
.gallery-tile img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    transition: transform .35s ease, filter .3s ease;
}
.gallery-tile:after {
  content:"";
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent,rgba(15,13,10,.72));
  opacity:.82;
  transition:opacity .25s ease;
  pointer-events:none;
}
.gallery-tile:hover img,.gallery-tile:focus-visible img { transform:scale(1.015); filter:saturate(1.035); }
.gallery-tile:hover:after,.gallery-tile:focus-visible:after { opacity:1; }
.tile-caption {
  position:absolute;
  z-index:1;
  left:10px;
  right:10px;
  bottom:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#fff;
  text-align:left;
  pointer-events:none;
}
.tile-caption span { font-size:.76rem; line-height:1.2; text-shadow:0 1px 4px rgba(0,0,0,.75); }
.tile-caption time { font-size:.66rem; color:#e5d8b8; }
.gallery-tile:focus-visible { outline:3px solid #9a7a3b; outline-offset:2px; }
.gallery-end { padding:18px 24px 72px; text-align:center; color:#615743; }
.gallery-end p { margin-bottom:22px; }

/* Visualização ampliada: respeita a proporção original e os limites da tela. */
.gallery-lightbox { display:none; position:fixed; z-index:9999; inset:0; align-items:center; justify-content:center; padding:4vh 4vw; background:rgba(12,11,10,.96); }
.gallery-lightbox.is-open { display:flex; }
.lightbox-figure { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; margin:0; gap:12px; }
.lightbox-image { display:block; max-width:92vw; max-height:84vh; width:auto; height:auto; object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.lightbox-figure figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; color:#f5f0e5; font-size:.88rem; text-align:center; }
.lightbox-date { color:#d5bd83; }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff; background:rgba(30,27,22,.58); cursor:pointer; line-height:1; }
.lightbox-close { top:18px; right:20px; width:44px; height:44px; font-size:32px; }
.lightbox-prev,.lightbox-next { top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:38px; }
.lightbox-prev { left:18px; } .lightbox-next { right:18px; }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { background:rgba(154,122,59,.9); }

@media (max-width: 1400px) {
    .photo-mosaic {columns: 4;}
@media(max-width:1100px) {
  .photo-mosaic { columns: 3;}
}
@media(max-width:700px) {
  .gallery-intro { display:block; }
  .gallery-intro span { display:block; margin-top:6px; }
  .photo-mosaic { columns: 2; }
}
@media(max-width:560px) {
  .gallery-hero { padding:58px 20px; }
  .gallery-main { padding:26px 10px 40px; }
  .photo-mosaic { columns: 1;}
  .tile-caption { left:6px; right:5px; bottom:6px; }
  .tile-caption span { font-size:.64rem; }
  .tile-caption time { font-size:.59rem; }
  .gallery-lightbox { padding:5vh 3vw; }
  .lightbox-image { max-width:94vw; max-height:82vh; }
  .lightbox-prev,.lightbox-next { top:auto; bottom:12px; transform:none; width:42px; height:42px; }
  .lightbox-prev { left:calc(50% - 54px); } .lightbox-next { right:calc(50% - 54px); }
  .lightbox-close { top:10px; right:10px; width:40px; height:40px; }
  .lightbox-figure { gap:8px; padding-bottom:48px; }
}
@media(prefers-reduced-motion:reduce) { .gallery-tile img,.gallery-tile:after { transition:none; } }

/* ==================================================
   GALERIA MASONRY - 5 A 1 COLUNA
   ================================================== */

.page-gallery .photo-mosaic {
    display: block;
    columns: 5;
    column-gap: 12px;
}

.page-gallery .gallery-tile {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    overflow: hidden;
    break-inside: avoid;
    background: transparent;
    cursor: zoom-in;

    /* Desativa as dimensões da grade antiga */
    grid-column: auto !important;
    grid-row: auto !important;
}

.page-gallery .gallery-tile img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}

/* 4 colunas */
@media (max-width: 1400px) {
    .page-gallery .photo-mosaic {
        columns: 4;
    }
}

/* 3 colunas */
@media (max-width: 1100px) {
    .page-gallery .photo-mosaic {
        columns: 3;
    }
}

/* 2 colunas */
@media (max-width: 800px) {
    .page-gallery .photo-mosaic {
        columns: 2;
    }
}

/* 1 coluna */
@media (max-width: 500px) {
    .page-gallery .photo-mosaic {
        columns: 1;
    }
}