/* =========================================================
   GALLERY — Operação (rolagem horizontal estilo Pinterest)
   ========================================================= */

.gallery {
  height: calc(100vh - var(--header-height));
  background-color: var(--color-primary);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

/* ---- Cabeçalho ---- */

.gallery__header {
  text-align: center;
  padding-inline: var(--space-8);
  margin-bottom: var(--space-8);
  flex-shrink: 0;
}

.gallery__header .section-label {
  color: rgba(255, 255, 255, 0.75);
}

.gallery__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.gallery__subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.80);
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.7;
}

/* ---- Área de rolagem ---- */

.gallery__wrapper {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-inline: var(--space-8);
  /* Fade nos cantos para indicar mais conteúdo */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  );
}

.gallery__wrapper::-webkit-scrollbar {
  display: none;
}

.gallery__wrapper.dragging {
  cursor: grabbing;
  user-select: none;
}

/* ---- Grid masonry horizontal ---- */

.gallery__track {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  grid-auto-flow: column dense;
  gap: var(--space-3);
  width: max-content;
}

/* ---- Item ---- */

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

/* Spans: controlam quantas linhas o item ocupa e a largura correspondente */
.gallery__item[data-span="1"] {
  grid-row: span 1;
  width: 180px;
}

.gallery__item[data-span="2"] {
  grid-row: span 2;
  width: 300px;
}

.gallery__item[data-span="3"] {
  grid-row: span 3;
  width: 460px;
}

/* ---- Mídia dentro do item ---- */

.gallery__item img,
.gallery__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}

.gallery__item:hover img,
.gallery__item:hover video {
  transform: scale(1.04);
}

/* ---- Legenda ao hover ---- */

.gallery__caption {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.70) 0%,
    transparent 50%
  );
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  opacity: 0;
  transition: opacity 300ms ease;
}

.gallery__item:hover .gallery__caption {
  opacity: 1;
}

.gallery__caption span {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.04em;
}

/* ---- Indicador de vídeo ---- */

.gallery__item--video::before {
  content: '';
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E") center / 12px no-repeat;
  backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  z-index: 2;
  pointer-events: none;
}

/* ---- Controles de navegação ---- */

.gallery__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-shrink: 0;
}

.gallery__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  cursor: pointer;
  transition: background 250ms ease, transform 250ms ease;
  flex-shrink: 0;
}

.gallery__btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

.gallery__btn:disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* ---- Estado vazio ---- */

.gallery__empty {
  grid-column: span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  padding: var(--space-12);
  font-style: italic;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 768px) {
  .gallery {
    height: auto;
    padding-bottom: var(--space-10);
  }

  .gallery__wrapper {
    padding-inline: var(--space-4);
  }

  .gallery__track {
    grid-template-rows: repeat(3, 150px);
    height: auto;
    gap: var(--space-2);
  }

  .gallery__item[data-span="1"] { width: 130px; }
  .gallery__item[data-span="2"] { width: 220px; }
  .gallery__item[data-span="3"] { width: 340px; }
}