/**
 * @file
 * Homepage banner slider.
 *
 * Plain CSS on purpose: the theme's gulp + node-sass build needs Node 14 and
 * python2 and does not run on current machines, so this component keeps its
 * styles out of style.css. It also neutralises the demo stylesheet that the
 * tiny_slider module ships, which styles every h2, p and button under
 * .tns-outer.
 */

.esel-banner {
  position: relative;
  margin-right: -15px;
  margin-left: -15px;
}

/*
 * bootstrap_barrio renders the view content as a Bootstrap .row: a flex
 * container with negative margins. As a flex item the slider has no intrinsic
 * width (the slides are aspect-ratio boxes with absolutely positioned media),
 * so it collapses to zero; and the row's margins would add to ours.
 */
.esel-banner > .view-content {
  display: block;
  margin-right: 0;
  margin-left: 0;
}

.esel-banner .tns-outer {
  position: relative;
  font-family: inherit;
}

/* Until tiny-slider has run (it adds .tns-slider), only the first slide shows,
   so the page does not render every slide stacked and then jump. */
.esel-banner-slider:not(.tns-slider) > :not(:first-child) {
  display: none;
}

.esel-banner__slide {
  position: relative;
  aspect-ratio: 8 / 3;
  overflow: hidden;
  background: #0a4f3a;
}

.esel-banner__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.esel-banner__image,
.esel-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.esel-banner .tns-outer img.esel-banner__image {
  max-width: none;
  height: 100%;
}

.esel-banner__video,
.esel-banner__sound,
.esel-banner__play {
  display: none;
}

/* A video slide plays one of two ways, which esel-banner.js marks on the
   slide: the visitor starts it with the play button, in the browser's own
   player (--visitor, below 768 px, and kept while a phone is turned
   sideways), or the banner plays it muted on its own. */
.esel-banner__slide--video .esel-banner__video {
  display: block;
}

.esel-banner__slide--video-failed .esel-banner__video {
  display: none;
}

@media (min-width: 768px) {
  .esel-banner__slide--video:not(.esel-banner__slide--visitor) .esel-banner__sound {
    display: block;
  }

  .esel-banner__slide--video-failed .esel-banner__sound {
    display: none;
  }

  /* No controls here: a click goes through to the slide's link underneath. */
  .esel-banner__slide:not(.esel-banner__slide--visitor) .esel-banner__video {
    pointer-events: none;
  }
}

/* The play button, over the middle of the slide. The browser's own controls
   only appear once it is pressed: before that they would sit under the
   indicators and the pause control. */
.esel-banner__slide--visitor .esel-banner__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: block;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  padding: 0.8rem 0.7rem 0.8rem 0.9rem;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.esel-banner__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* On that slide the play button is the only control: next to it, the
   banner's pause control reads as the video's own. Browsers without :has()
   keep showing it. */
.esel-banner .tns-outer:has(.tns-slide-active .esel-banner__slide--visitor:not(.esel-banner__slide--video-failed)) .esel-banner__pause {
  display: none;
}

/* While the visitor watches the video, the banner's controls would sit on
   top of the player's. */
.esel-banner .tns-outer.esel-banner--watching .tns-nav,
.esel-banner .tns-outer.esel-banner--watching .tns-controls,
.esel-banner--watching .esel-banner__pause,
.esel-banner--watching .esel-banner__play,
.esel-banner__slide--video-failed .esel-banner__play {
  display: none;
}

/*
 * The caption reproduces the legacy carousel's (Bootstrap's .carousel-caption
 * plus the theme's page.scss rules): migrated slides keep their captions and
 * must look the same. Lines do not wrap; heading and text are inline blocks
 * that stack only when they do not fit side by side in the box.
 */
.esel-banner__text {
  position: absolute;
  right: 20%;
  bottom: 4.375rem;
  left: 60%;
  z-index: 1;
  padding: 20px 0;
  text-align: left;
  text-transform: uppercase;
}

.esel-banner .tns-outer .esel-banner__heading,
.esel-banner .tns-outer .esel-banner__subheading,
.esel-banner .tns-outer .esel-banner__cta {
  display: inline-block;
  padding: 0.4rem;
  color: #fff;
  background-color: #006e43;
  text-align: left;
  white-space: nowrap;
}

.esel-banner .tns-outer .esel-banner__heading {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
}

.esel-banner .tns-outer .esel-banner__subheading,
.esel-banner .tns-outer .esel-banner__cta {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1.5;
}

/*
 * Sound and pause controls stay discreet at rest: 32 px, a lighter backdrop.
 * 45% black is the floor, not a taste: over the brightest slide (a white
 * background) it keeps the white icon at 3.4:1, above the 3:1 WCAG asks of
 * controls. They turn solid on hover and keyboard focus.
 */
.esel-banner__sound,
.esel-banner__pause {
  position: absolute;
  bottom: 3rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  padding: 0.45rem;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.esel-banner__sound {
  right: 1rem;
  padding: 0.4rem;
}

.esel-banner__sound:hover,
.esel-banner__sound:focus-visible,
.esel-banner__pause:hover,
.esel-banner__pause:focus-visible {
  background: rgba(0, 0, 0, 0.75);
}

.esel-banner__sound:focus-visible,
.esel-banner__pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Pause/play for the whole banner (WCAG 2.2.2), on every screen size. */
.esel-banner__pause {
  left: 1rem;
}

.esel-banner__pause .esel-banner__icon--play,
.esel-banner__pause.is-paused .esel-banner__icon--pause {
  display: none;
}

.esel-banner__pause.is-paused .esel-banner__icon--play {
  display: block;
}

@media (max-width: 767px) {
  /* On a 146 px banner the indicators span nearly the full width, so the
     pause control sits above them instead of on top of the leftmost ones. */
  .esel-banner__pause {
    bottom: 1.25rem;
    left: 0.5rem;
  }
}

.esel-banner__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.esel-banner__sound[aria-pressed="false"] .esel-banner__icon--sound,
.esel-banner__sound[aria-pressed="true"] .esel-banner__icon--muted {
  display: none;
}

/* Dots: short white bars, as on the current banner. */
.esel-banner .tns-outer .tns-nav {
  position: absolute;
  right: 0;
  bottom: 1rem;
  left: 0;
  z-index: 2;
  margin: 0;
  text-align: center;
}

.esel-banner .tns-outer .tns-nav > [aria-controls] {
  width: 30px;
  height: 3px;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

.esel-banner .tns-outer .tns-nav > .tns-nav-active {
  background: #fff;
}

/* Arrows overlaid on the slide instead of the demo's blue pills. */
.esel-banner .tns-outer .tns-controls {
  margin: 0;
}

.esel-banner .tns-outer .tns-controls [aria-controls] {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: auto;
  margin: -1.75rem 0 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font-size: 3rem;
  line-height: 3.5rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.esel-banner .tns-outer .tns-controls [data-controls="prev"] {
  left: 0;
}

.esel-banner .tns-outer .tns-controls [data-controls="next"] {
  right: 0;
}

@media (max-width: 767px) {
  .esel-banner__text {
    top: 0;
    left: 1rem;
  }

  .esel-banner .tns-outer .esel-banner__heading {
    font-size: 0.875rem;
  }

  .esel-banner .tns-outer .tns-controls {
    display: none;
  }

  /* Indicators close to the bottom edge, with no line box around them, so
     the pause control above them clears both them and the caption. */
  .esel-banner .tns-outer .tns-nav {
    bottom: 0.5rem;
    line-height: 0;
  }
}