/* ============================================================
   40-about-gallery — horizontal scroll-snap photo gallery.
   Pure CSS: scroll-snap for the track, anchor-link dots for the
   affordance (fragment links scroll their nearest scrollable
   ancestor into view natively, no JS required).
   Stacks to a 2-col grid at <=700px.
   Scoped under .sec-40-about-gallery
   ============================================================ */

.sec-40-about-gallery__scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(1.25rem, calc((100% - var(--container)) / 2 + 1.25rem));
  padding: 0.5rem clamp(1.25rem, 6vw, calc((100% - var(--container)) / 2 + 1.25rem)) 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.sec-40-about-gallery__slide {
  flex: 0 0 clamp(240px, 32vw, 400px);
  scroll-snap-align: start;
  scroll-margin-left: 1.25rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 720 / 480;
}

.sec-40-about-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.98);
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: scale(1.02);
}

.sec-40-about-gallery__slide:hover .sec-40-about-gallery__img,
.sec-40-about-gallery__slide:focus-within .sec-40-about-gallery__img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-40-about-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.sec-40-about-gallery__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-bone);
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-spring);
}

.sec-40-about-gallery__dot:hover,
.sec-40-about-gallery__dot:focus-visible {
  background: var(--accent-strong);
  transform: scale(1.2);
}

@media (max-width: 700px) {
  .sec-40-about-gallery__scroll {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sec-40-about-gallery__slide {
    flex: none;
    scroll-snap-align: none;
  }
  /* 5 real clinic photos in a 2-col grid leaves a lone last item; span it full width
     instead of left-packing it against an empty second column. */
  .sec-40-about-gallery__slide:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .sec-40-about-gallery__dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-40-about-gallery__img { transition: none; }
}