/* Moments at Red — header + dua baris marquee */

.gallery {
  background-color: var(--color-amber);
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.gallery-header-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 30.625rem;
}

.gallery-tabs {
  display: flex;
  gap: var(--space-l);
}

.gallery-tab {
  font-family: var(--font-serif);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 2;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-black);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.gallery-tab.is-active,
.gallery-tab:hover {
  border-bottom-color: var(--color-black);
}

.gallery-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* Atribut hidden kalah dari display:flex — panel tab non-aktif harus eksplisit */
.gallery-rows[hidden] {
  display: none;
}

@media screen and (max-width: 767px) {
  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .gallery-tabs {
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
  }
}

.gallery-row-track {
  display: flex;
  gap: var(--space-l);
  width: max-content;
}

.gallery-tile {
  width: clamp(13.75rem, 10.5rem + 16vw, 23.5625rem);
  aspect-ratio: 377 / 458;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}