/* =========================================================================
   GALLERY PAGE — page-specific sections
   New components not already in sections.css:
   - intro content-section
   - gallery (tabs + filterable image grids)
   Tokens come from tokens.css.
   ========================================================================= */

/* ---------- SECTION: intro content ---------- */
.content-section { padding: var(--y-gap) 0 0; }
.content-section .content { padding: 0 var(--x-gap); max-width: 900px; margin: 0 auto; }
.content-section .text-center { text-align: center; }

/* ---------- SECTION: gallery ---------- */
.gallery { padding: var(--y-gap) var(--x-gap); }

.tabs-container { display: flex; flex-direction: column; }

.tabs__nav { width: 100%; }
.tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  list-style: none; margin: 0 auto 2rem; padding: 0; }
.tabs__item { display: inline-flex; }

/* In the gallery, tabs render as plain underline text links (overrides defaults). */
.tabs__link {
  min-width: auto;
  font-family: var(--font-family-buttons);
  font-weight: var(--font-weight-buttons);
  font-size: 1rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: .25rem;
  cursor: pointer;
  transition: color var(--base-timing);
}
.tabs__link:hover { color: var(--color-primary); }
.tabs__link.active { text-decoration: underline; color: #000; }

/* ---------- tab panels ---------- */
.tabs { display: flex; flex-direction: column; width: 100%; list-style: none; }
.tab { display: none; padding: 2rem 0; }
.tab.active,
.tab.active--enter,
.tab.active--leave { display: block; }
.tab.active--enter { animation: tabIn .251s ease-out; opacity: 0; }
.tab.active--leave { animation: tabOut .251s ease-in; opacity: 0; }
@keyframes tabIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tabOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(10px); }
}

/* ---------- image grid ---------- */
.gallery__images { display: grid; gap: 2.5rem; }
@media (min-width: 500px) {
  .gallery__images { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
.gallery__images a { display: block; overflow: hidden; border-radius: var(--border-radius); }
.gallery__images img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform var(--base-timing);
}
.gallery__images a:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .tab.active--enter, .tab.active--leave { animation: none; opacity: 1; }
  .gallery__images a:hover img { transform: none; }
}