/*
  photo-gallery — local team life mosaic + mobile carousel.
  Desktop: Figma 399:6574 · Mobile: Figma 401:908
  Same images and copy at both breakpoints. CSS only changes the layout.
*/

.photo-gallery {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  border-block-end: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ---------- Inner content band ---------- */

.photo-gallery__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl); /* 32px */
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--photo-gallery-content-max) + (var(--header-pad-x) * 2));
  margin-inline: auto;
  padding-block: var(--photo-gallery-pad-y-mobile); /* 56px */
  padding-inline: var(--space-md); /* 16px */
}

/* ---------- Header ---------- */

.photo-gallery__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg); /* 24px — Figma mobile heading stack */
  inline-size: 100%;
  text-align: center;
}

.photo-gallery__title {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-aio-anchor-title-mobile); /* 24px */
  line-height: var(--lh-aio-anchor-title-mobile); /* 29px */
  letter-spacing: var(--ls-aio-anchor);
  text-transform: uppercase;
  color: var(--color-text-heading);
}

.photo-gallery__lead {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-size: var(--fs-aio-anchor-body-mobile); /* 16px mobile band */
  line-height: var(--lh-aio-anchor-body); /* 30px */
  letter-spacing: var(--ls-aio-anchor);
  color: var(--color-text);
}

/* ---------- Mobile carousel shell ---------- */

.photo-gallery__carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--photo-gallery-carousel-gap); /* 60px — Figma 401:912 */
  inline-size: 100%;
}

.photo-gallery__viewport {
  inline-size: 100%;
  overflow: hidden;
}

.photo-gallery__track {
  display: flex;
  gap: var(--space-md); /* 16px between slides */
  margin: 0;
  padding-block: 0;
  /* Center the active slide in the viewport */
  padding-inline: max(0px, calc((100% - var(--photo-gallery-slide-w)) / 2));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.photo-gallery__track::-webkit-scrollbar {
  display: none;
}

.photo-gallery__slide {
  flex: 0 0 var(--photo-gallery-slide-w); /* 322px */
  scroll-snap-align: center;
  overflow: hidden;
  aspect-ratio: 322 / 328;
}

/* Clickable tile — JS wraps each figure in this button for lightbox access */
.photo-gallery__trigger {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.photo-gallery__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.photo-gallery__figure {
  position: relative;
  margin: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}

.photo-gallery__image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Figma desktop crops — preserved on mobile slides too (same image file) */
.photo-gallery__slide--crop-a .photo-gallery__image {
  block-size: 216.16%;
  inset-block-start: -30.72%;
  inset-inline-start: 0.01%;
}

.photo-gallery__slide--crop-b .photo-gallery__image {
  block-size: 176.07%;
  inset-block-start: -15%;
  inset-inline-start: 0.01%;
}

/* ---------- Pagination dots ---------- */

.photo-gallery__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* 12px visual gap — Figma 60×12 slider */
  min-block-size: 0.75rem;
}

.photo-gallery__dot {
  box-sizing: border-box;
  inline-size: 0.75rem; /* 12px */
  block-size: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-text); /* Shine Grey #191919 */
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.photo-gallery__dot.is-active {
  background-color: var(--color-primary);
}

.photo-gallery__dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ---------- Desktop — Figma 399:6574 ---------- */
/* --bp-lg: 1024px */

@media (min-width: 1024px) {
  .photo-gallery__inner {
    padding-block: var(--photo-gallery-pad-y); /* 120px */
    padding-inline: var(--header-pad-x);
  }

  .photo-gallery__header {
    gap: var(--space-xl); /* 32px */
    max-inline-size: var(--photo-gallery-header-max); /* 1499px */
  }

  .photo-gallery__title {
    font-size: var(--fs-aio-anchor-title); /* 54px */
    line-height: var(--lh-aio-anchor-title); /* 54px */
    letter-spacing: 0;
    color: var(--color-text);
  }

  .photo-gallery__lead {
    max-inline-size: var(--photo-gallery-intro-max); /* 973px */
    font-size: var(--fs-aio-anchor-body); /* 18px */
  }

  .photo-gallery__carousel {
    gap: 0;
  }

  .photo-gallery__viewport {
    overflow: visible;
  }

  .photo-gallery__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Auto rows hug slide aspect ratios; empty rows collapse (no fixed Figma height). */
    grid-template-rows: repeat(3, auto);
    column-gap: var(--photo-gallery-gap-x); /* 24px */
    row-gap: var(--photo-gallery-gap-y); /* 25px */
    padding-inline: 0;
    overflow: visible;
    inline-size: 100%;
    max-inline-size: var(--photo-gallery-content-max); /* 1480px */
  }

  /* Mosaic uses rows 1–2 only until a 5th image needs row 3. */
  .photo-gallery__track:not(:has(.photo-gallery__slide:nth-child(5))) {
    grid-template-rows: repeat(2, auto);
  }

  .photo-gallery__slide {
    flex: none;
    aspect-ratio: auto;
    min-block-size: 0;
  }

  /* Explicit mosaic placement — Figma 399:6580 */
  .photo-gallery__slide:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 477 / 407;
  }

  .photo-gallery__slide:nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1;
    aspect-ratio: 978 / 407;
  }

  .photo-gallery__slide:nth-child(3) {
    grid-column: 1 / span 2;
    grid-row: 2;
    aspect-ratio: 978 / 407;
  }

  .photo-gallery__slide:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
    aspect-ratio: 477 / 407;
  }

  .photo-gallery__slide:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
    aspect-ratio: 477 / 407;
  }

  .photo-gallery__slide:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
    aspect-ratio: 477 / 407;
  }

  .photo-gallery__slide:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
    aspect-ratio: 477 / 407;
  }

  .photo-gallery__dots {
    display: none;
  }
}

/* Lightbox styles: parent theme shine/src/css/components/photo-gallery-lightbox/ */