/* --------------------------------------------------------------------------
   Slideshows and videos an editor has given settings to (src/components/ui/
   CmsMedia.tsx). Loaded only by a page that has one. Each fills its frame, as
   the site's own slideshow and section video do, so the frame keeps its size.
   Without cms-media.js the first picture shows and the arrows stay hidden.
   -------------------------------------------------------------------------- */

.cmsslides { position: absolute; inset: 0; overflow: hidden; }
.cmsslides__track { position: absolute; inset: 0; }
.cmsslides__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fade: pictures stacked, the active one shown. */
.cmsslides--fade .cmsslides__slide { opacity: 0; transition: opacity var(--cmsslides-speed, 800ms) ease; }
.cmsslides--fade .cmsslides__slide.is-active { opacity: 1; }
.cmsslides--fade .cmsslides__slide.is-leaving { opacity: 1; z-index: 0; transition: none; }
.cmsslides--fade .cmsslides__slide.is-active { z-index: 1; }

/* Slide: pictures side by side, the track moves. */
.cmsslides--slide .cmsslides__track { display: flex; transition: transform var(--cmsslides-speed, 800ms) ease; }
.cmsslides--slide .cmsslides__slide { position: relative; flex: 0 0 100%; }

.cmsslides__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(20, 18, 16, .55); color: #fff; font: 400 28px/1 var(--sans, sans-serif); cursor: pointer; display: grid; place-items: center; }
.cmsslides__arrow:hover, .cmsslides__arrow:focus-visible { background: var(--brand, #b03825); outline: none; }
.cmsslides__arrow--prev { left: 14px; }
.cmsslides__arrow--next { right: 14px; }
.cmsslides__arrow[hidden], .cmsslides__dots[hidden] { display: none; }
.cmsslides__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.cmsslides__dot { width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.cmsslides__dot.is-active { background: #fff; }
.cmsslides__dot:focus-visible { outline: 2px solid var(--brand, #b03825); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cmsslides--fade .cmsslides__slide, .cmsslides--slide .cmsslides__track { transition: none; }
}

/* A video with settings fills its frame like the section video does. */
.cmsvideo { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: var(--cmsvideo-fit, cover); object-position: var(--cmsvideo-pos, center); background: #000; }