/*
 * V3 section package: gallery
 *
 * Canonical CSS variables used:
 *   --pd-color-surface, --pd-color-surface-alt, --pd-color-text,
 *   --pd-color-muted, --pd-color-border, --pd-color-primary
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5, --pd-space-6, --pd-space-8
 *   --pd-radius-sm, --pd-radius-md, --pd-radius-lg
 *   --pd-font-heading
 *
 * CSS isolation: every selector is rooted under
 *   .pd-section--gallery[data-pd-module^="gallery--"]
 */

/* Background tone contrast.
 * Section bg/root color come from the shared [data-background-tone]
 * primitive. Image tiles are content-bearing visuals so they don't
 * need to flip; only the section header text and figcaptions need
 * scoped contrast inversion. */
/* PASS 4BO: __headline / __subheadline tone-aware contrast moved to
 * shared [data-background-tone] rules in components.css. Captions
 * still need their own scoped contrast since they're not section
 * headings. */
.pd-section--gallery[data-pd-module^="gallery--"][data-background-tone="primary"] .pd-gallery__caption,
.pd-section--gallery[data-pd-module^="gallery--"][data-background-tone="secondary"] .pd-gallery__caption {
  color: var(--pd-color-surface);
  opacity: 0.85;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__header {
  display: grid;
  gap: var(--pd-space-2);
  margin-bottom: var(--pd-space-6);
  text-align: center;
}

/* PASS 4BO: gallery __headline / __subheadline typography moved to
 * shared .pd-section-heading / .pd-section-intro in components.css.
 * The __subheadline keeps `margin: 0 auto` so the centered gallery
 * header layout still pulls the lede to the middle of the section
 * width. */
.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__subheadline {
  margin: 0 auto;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__track {
  display: grid;
  gap: var(--pd-space-3);
  grid-template-columns: 1fr;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--pd-radius-md);
  background: var(--pd-color-surface-alt);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__trigger:focus-visible {
  outline: 2px solid var(--pd-color-primary);
  outline-offset: 2px;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 260ms ease;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__item:hover .pd-gallery__image {
  transform: scale(1.03);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__caption {
  display: block;
  padding: var(--pd-space-2) var(--pd-space-3);
  color: var(--pd-color-muted);
  font-size: 0.875rem;
}

/* Variant: uniform-grid */
.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-aspect="1-1"] .pd-gallery__image {
  aspect-ratio: 1 / 1;
}

.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-aspect="4-3"] .pd-gallery__image {
  aspect-ratio: 4 / 3;
}

.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-aspect="16-9"] .pd-gallery__image {
  aspect-ratio: 16 / 9;
}

@media (min-width: 30rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"] .pd-gallery__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-columns="2"] .pd-gallery__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-columns="3"] .pd-gallery__track,
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-columns="4"] .pd-gallery__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="uniform-grid"][data-columns="4"] .pd-gallery__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Variant: masonry - CSS column-count for broad browser support */
.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="masonry"] .pd-gallery__track {
  display: block;
  column-count: 1;
  column-gap: var(--pd-space-3);
}

.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="masonry"] .pd-gallery__item {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--pd-space-3);
  break-inside: avoid;
}

@media (min-width: 30rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="masonry"] .pd-gallery__track {
    column-count: 2;
  }
}

@media (min-width: 48rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="masonry"] .pd-gallery__track {
    column-count: 3;
  }
}

@media (min-width: 64rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="masonry"] .pd-gallery__track {
    column-count: 4;
  }
}

/* Variant: carousel - CSS scroll-snap fallback when no runtime utility binds */
.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="carousel"] .pd-gallery__track {
  display: flex;
  flex-direction: row;
  gap: var(--pd-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--pd-space-3);
}

.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="carousel"] .pd-gallery__item {
  flex: 0 0 auto;
  width: 80%;
  scroll-snap-align: start;
}

@media (min-width: 48rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="carousel"] .pd-gallery__item {
    width: 45%;
  }
}

@media (min-width: 64rem) {
  .pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="carousel"] .pd-gallery__item {
    width: 30%;
  }
}

.pd-section--gallery[data-pd-module^="gallery--"][data-pd-variant="carousel"] .pd-gallery__image {
  aspect-ratio: 4 / 3;
}

/* Lightbox overlay */
.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pd-space-4);
  background: var(--pd-color-text);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox[hidden] {
  display: none;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-figure {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  display: grid;
  gap: var(--pd-space-2);
  justify-items: center;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--pd-radius-sm);
  background: var(--pd-color-surface-alt);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-caption {
  color: var(--pd-color-surface);
  font-size: 0.9375rem;
  text-align: center;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-close,
.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-prev,
.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-next {
  position: absolute;
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--pd-color-border);
  border-radius: 50%;
  background: var(--pd-color-surface);
  color: var(--pd-color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-close {
  top: var(--pd-space-4);
  right: var(--pd-space-4);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-prev {
  left: var(--pd-space-4);
  top: 50%;
  transform: translateY(-50%);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-next {
  right: var(--pd-space-4);
  top: 50%;
  transform: translateY(-50%);
}

.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-close:focus-visible,
.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-prev:focus-visible,
.pd-section--gallery[data-pd-module^="gallery--"] .pd-gallery__lightbox-next:focus-visible {
  outline: 2px solid var(--pd-color-primary);
  outline-offset: 2px;
}