/* ==========================================================================
   Showcase — full-bleed showreel video. Figma layer "Rectangle 10" was a
   1921×1081 collage spanning the frame edge to edge (y 3192→4273; mobile a
   405×228 box at x −3). The box keeps that full-bleed width and the section's
   vertical padding (half the gap to "services" above and "work" below, from
   sections/index.json); its aspect is now the reel's 16:9, so it is 1080 tall
   at 1920 (Figma 1081) and 226 at 402 (Figma 228, whose 3px left bleed is
   dropped along with the collage crop).
   State classes js/showreel.js sets on the figure:
     .is-ready     script attached — the pills / play button may render
     .is-playing   the video is playing (pause pill reads "Pause")
     .wants-click  no autoplay (prefers-reduced-motion, or the browser refused
                   it): poster + centred play button until the user clicks
   ========================================================================== */

.section--showcase {
  padding: 78px 0 44px;               /* (3192 − 3036) / 2 , (4361 − 4273) / 2 */
}

.section--showcase__figure {
  position: relative;
  margin: 0;
  width: 100%;
  background: var(--black);
}

.section--showcase .showreel__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;                  /* poster and frames fill the box */
  background: var(--black);
}

/* ---- Controls: small pills bottom-right (pause / play, sound) ------------
   Hidden until the script is attached, so without JS the box is a poster. */
.section--showcase .showreel__controls {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: none;
  gap: 8px;
}
.section--showcase .showreel.is-ready .showreel__controls { display: flex; }

/* A small .btn: 36px pill, 16px label (the base pill is 46px / 24px) */
.section--showcase .showreel__btn {
  height: 36px;
  padding: 0 14px 0 12px;
  gap: 0;                             /* icon + label live inside one state span */
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.section--showcase .showreel__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section--showcase .showreel__state svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Only the current state's icon + label renders, so it is also the button's
   accessible name: "Pause" / "Play", "Sound off" / "Sound on" */
.section--showcase .showreel__state--playing { display: none; }
.section--showcase .showreel.is-playing .showreel__state--playing { display: inline-flex; }
.section--showcase .showreel.is-playing .showreel__state--paused { display: none; }
.section--showcase .showreel__state--on { display: none; }
.section--showcase .showreel__sound[aria-pressed="true"] .showreel__state--on { display: inline-flex; }
.section--showcase .showreel__sound[aria-pressed="true"] .showreel__state--off { display: none; }

/* ---- Centred play button (reduced motion / autoplay refused) -------------
   Same black disc + green triangle as the video-testimonial cards, larger. */
.section--showcase .showreel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--black);
  color: var(--accent);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.section--showcase .showreel.is-ready.wants-click:not(.is-playing) .showreel__play { display: grid; }
.section--showcase .showreel.is-ready.wants-click:not(.is-playing) .showreel__controls { display: none; }
.section--showcase .showreel__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.section--showcase .showreel__play svg {
  width: 30px;
  height: 30px;
  margin-left: 5px;                   /* optical centre for the triangle */
}

@media (max-width: 1024px) {
  .section--showcase {
    padding: 56px 0 48px;
  }
}

@media (max-width: 640px) {
  .section--showcase {
    padding: 31.5px 0 50.5px;         /* (2568 − 2505) / 2 , (2897 − 2796) / 2 */
  }
  .section--showcase .showreel__controls {
    right: 12px;
    bottom: 12px;
    gap: 6px;
  }
  .section--showcase .showreel__btn {
    height: 32px;
    padding: 0 12px 0 10px;
    font-size: 14px;
  }
  .section--showcase .showreel__state { gap: 6px; }
  .section--showcase .showreel__state svg {
    width: 14px;
    height: 14px;
  }
  .section--showcase .showreel__play {
    width: 64px;
    height: 64px;
  }
  .section--showcase .showreel__play svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
  }
}