/* Media Gallery -- one big photo, thumbnail strip, mint controls. */

.mediagallery-block {
  background: var(--bellco-bg);
  border-top: 1px solid var(--bellco-divider);
  padding: 128px 0;
}

.mediagallery-block .mediagallery-head {
  margin-bottom: 48px;
}

.mediagallery-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.mediagallery-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--bellco-radius);
  overflow: hidden;
  background: var(--bellco-bg-card);
}

.mediagallery-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.mediagallery-slide.is-active {
  opacity: 1;
}

/* `contain`, not `cover`, and only here. A gallery's entire job is to show the
   photograph, so this is the one stage where letterboxing is the correct
   answer rather than a compromise -- `cover` was taking 25% off every 4:3 shot
   and 68% off the vertical ones. The 16:9 frame already carries a card
   background for the bars to sit on. Cards elsewhere keep `cover`: there the
   consistent silhouette matters more than the whole frame. */
.mediagallery-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mediagallery-border {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(139, 217, 186, 0.12);
  pointer-events: none;
}

.mediagallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bellco-mint);
  border: none;
  color: var(--bellco-on-mint);
  cursor: pointer;
  transition: filter 0.2s;
}

.mediagallery-nav:hover {
  filter: brightness(1.1);
}

.mediagallery-nav--prev {
  left: 16px;
}

.mediagallery-nav--prev .bellco-icon {
  transform: rotate(180deg);
}

.mediagallery-nav--next {
  right: 16px;
}

.mediagallery-count {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font1);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(242, 242, 240, 0.7);
  background: rgba(8, 14, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
}

.mediagallery-thumbs {
  display: flex;
  gap: 2px;
  height: 72px;
}

.mediagallery-thumb {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border-radius: var(--bellco-radius-sm);
  overflow: hidden;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.2s;
}

.mediagallery-thumb.is-active {
  border-color: var(--bellco-mint);
}

/* Matches the stage's anchor so a thumbnail previews the slide it selects. */
.mediagallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0.45;
  transition: opacity 0.3s;
}

.mediagallery-thumb.is-active .mediagallery-thumb-img {
  opacity: 1;
}

.mediagallery-thumb.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bellco-mint);
}

@media (max-width: 1199px) {
  .mediagallery-block {
    padding: 88px 0;
  }
}

@media (max-width: 767px) {
  .mediagallery-block {
    padding: 64px 0;
  }

  .mediagallery-nav {
    width: 40px;
    height: 40px;
  }

  .mediagallery-nav--prev { left: 8px; }
  .mediagallery-nav--next { right: 8px; }

  .mediagallery-thumbs {
    height: 44px;
  }
}

/* ==========================================================================
   Thumbnail hit area  [mediagallery-target-size]

   The thumbs are `flex: 1 1 0` with `min-width: 0`, so they divide whatever
   width there is. On a 390px screen that is fine to 13 thumbs; past that they
   drop under the 24px WCAG 2.2 AA minimum (2.5.8 Target Size) -- measured 21px
   on /vibratory-bowl-feeders/ (15 thumbs) and 23px on /escapements/ (14).

   Giving them a floor and letting the strip scroll fixes those two without
   touching the other six gallery pages, where 9-12 thumbs still divide out at
   27-36px and never reach the floor, so nothing scrolls and nothing moves.
   ========================================================================== */
@media (max-width: 767px) {
  .mediagallery-thumbs {
    overflow-x: auto;
    scrollbar-width: none;          /* a scrollbar in a 44px strip is noise */
    -webkit-overflow-scrolling: touch;
  }

  .mediagallery-thumbs::-webkit-scrollbar { display: none; }

  .mediagallery-thumb {
    min-width: 24px;
    flex-shrink: 0;
  }
}