/* ==========================================================================
   Galeria — usa os tokens e componentes de style.css
   ========================================================================== */

/* ---------- Banner ---------- */
.gal-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 56vh, 520px);
  padding: calc(var(--header-h) + 32px) 0 48px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  isolation: isolate;
}
.gal-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.06);
  animation: gal-hero-in 1.6s var(--ease-out) forwards;
}
.gal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.85) 100%);
}
@keyframes gal-hero-in { to { transform: scale(1); } }

.gal-hero__content { text-align: center; }
.gal-hero__title {
  font-size: clamp(3.6rem, 13vw, 9.5rem);
  font-weight: 600;
  font-stretch: var(--condensed);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}
.gal-hero__lead {
  max-width: 46ch;
  margin: 18px auto 0;
  color: var(--gray-300);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* ---------- Filtros ---------- */
.gal { background: var(--bg-alt); padding-top: clamp(40px, 6vw, 72px); }

.gal__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.gal__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.gal__filter:hover { border-color: var(--black); }
.gal__filter[aria-pressed="true"] {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55);
}
.gal__count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  transition: background-color .25s, color .25s;
}
.gal__filter[aria-pressed="true"] .gal__count { background: rgba(255, 255, 255, .18); color: var(--white); }

.gal__status {
  margin: clamp(28px, 4vw, 40px) 0 18px;
  color: var(--muted);
  font-size: .92rem;
  text-align: center;
}

/* ---------- Grade ---------- */
/* Colunas de largura fixa e centralizadas: tópicos com poucas fotos ficam no meio, não encostados à esquerda */
.gal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: center;
  gap: 16px;
}
.gal__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-200);
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(18px);
  animation: gal-item-in .6s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes gal-item-in { to { opacity: 1; transform: none; } }
.gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out), filter .4s var(--ease);
}
.gal__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.gal__item:hover img,
.gal__item:focus-visible img { transform: scale(1.04); }
.gal__item:hover::after,
.gal__item:focus-visible::after { opacity: 1; }
.gal__item:focus-visible { outline-offset: 4px; }

.gal__empty {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 440px;
  padding: 48px 32px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--muted);
  text-align: center;
}
.gal__empty strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 1.15rem; font-stretch: var(--condensed); text-transform: uppercase; }

/* ---------- Ampliação ---------- */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}
.lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .3s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; } }

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0;
  padding: 64px 88px 40px;
}
.lightbox__img {
  max-width: min(1400px, calc(100vw - 176px));
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  object-fit: contain;
  transition: opacity .25s var(--ease);
}
.lightbox__img.is-loading { opacity: .25; }
.lightbox__caption { color: var(--gray-300); font-size: .95rem; text-align: center; }

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.lightbox__btn:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__btn--close { top: 18px; right: 18px; }
.lightbox__btn--prev { top: 50%; left: 18px; transform: translateY(-50%); }
.lightbox__btn--next { top: 50%; right: 18px; transform: translateY(-50%); }
.lightbox__btn[hidden] { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 600px) {
  /* Muitos tópicos: no celular viram uma faixa que desliza para o lado */
  .gal__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .gal__filters::-webkit-scrollbar { display: none; }
  .gal__filter { flex: none; scroll-snap-align: start; }

  .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Tópico com uma foto só: ela ocupa o centro, em vez da metade esquerda */
  .gal__item:only-child { grid-column: 1 / -1; justify-self: center; width: 78%; }
  .gal__item { border-radius: var(--radius); }
  .gal__empty { padding: 36px 20px; }

  .lightbox__figure { padding: 64px 12px 96px; }
  .lightbox__img { max-width: calc(100vw - 24px); max-height: calc(100vh - 190px); }
  .lightbox__btn--prev,
  .lightbox__btn--next { top: auto; bottom: 22px; transform: none; }
  .lightbox__btn--prev { left: calc(50% - 64px); }
  .lightbox__btn--next { right: calc(50% - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .gal__item { opacity: 1; transform: none; }
  .gal-hero__photo { transform: none; }
}