/* Home slider (template-parts/sections/home-slider.php). Own CSS, written from the live's rendering of LayerSlider 6
   (inventory/design/raw/probe L01 home-slider): a canvas of --cw × --ch px scaled to the slider width, fade between
   slides, bullets with play/stop at the bottom centre, a circular timer at the top right. */

.mv-slider {
  position: relative;
  width: 100%;
  container-type: inline-size;
  overflow: hidden;
  margin: 0 auto 0 0;
}
.mv-slider__canvas {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  height: calc(var(--ch) * var(--u));
  /* LayerSlider sets a whole-pixel height (602px for a 1200×2000 canvas at 361px wide, not 601.67px) */
  height: round(nearest, calc(var(--ch) * var(--u) + 0.001px), 1px); /* +0.001px: x.5 rounds up, as on the live, despite float error */
}
.mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.86, 0, 0.07, 1), visibility 0s linear 0.5s;
}
.mv-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}
.mv-layer {
  position: absolute;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: normal;
}
.mv-slider img.mv-layer {
  max-width: none;
}
.slidertext.mv-layer {
  font-family: GothamGreek, sans-serif;
  font-weight: 600;
  color: #fff;
}
.slidersub.mv-layer {
  font-family: GothamGreek, sans-serif;
  font-weight: 400;
  color: #fff;
  /* the template's p { font-size: 16px !important } wins over LayerSlider's scaled size on the live: 16px at every
     width (the letter-spacing stays scaled) */
  font-size: 16px !important;
}

/* bottom navigation: ▶ ● ○ ‖ (measured at 1366: 44 × 12 bullet group, 18px above the bottom edge) */
.mv-slider__nav {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0;
  line-height: 0;
  z-index: 3;
}
.mv-slider__nav button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.mv-slider__bullet {
  width: 12px;
  height: 12px;
  margin: 0 5px !important;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
  opacity: 0.85;
}
.mv-slider__bullet.is-active {
  background: #fff !important;
}
.mv-slider__play {
  width: 0;
  height: 0;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid #fff !important;
  margin-right: 5px !important;
  opacity: 0.85;
}
.mv-slider__stop {
  width: 8px;
  height: 12px;
  margin-left: 5px !important;
  border-left: 3px solid #fff !important;
  border-right: 3px solid #fff !important;
  opacity: 0.85;
}
.mv-slider.is-paused .mv-slider__play { opacity: 1; }
.mv-slider.is-paused .mv-slider__stop { opacity: 0.4; }

/* circular timer, top right (24 × 24, 16px from the top and right edges) */
.mv-slider__timer {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
  z-index: 3;
  opacity: 0.65;
}

/* the slider slides 120px up under the 130px navbar (its margin collapses through .onair-ltnews), except in the
   template's narrower landscape / portrait layouts: declared values and media of the live */
.mv-slider { margin-top: -120px; }
@media screen and (orientation: landscape) and (max-width: 1280px) { .mv-slider { margin-top: 0; } }
@media screen and (orientation: landscape) and (max-width: 823px) { .mv-slider { margin-top: -78px; } }
@media screen and (orientation: portrait) and (min-width: 601px) and (max-width: 800px) { .mv-slider { margin-top: 0; } }
@media screen and (orientation: portrait) and (max-width: 600px) { .mv-slider { margin-top: 0; } }

/* the live shows the desktop slider (1920 × 960) on desktops and tablets and the mobile one (1200 × 2000) on phones */
.mv-slider--mobile { display: none; }
@media (max-width: 767px) {
  .mv-slider--desktop { display: none; }
  .mv-slider--mobile { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-slide, .mv-slide.is-active { transition: none; }
}