/* ==========================================================================
   Component: slider
   Source site: dc (fullest)
   Owns: the accessible carousel engine styling (.dncg-carousel*, built by
     js/carousel.js) shared by the carousel, image_carousel and testimonial
     blocks, PLUS the carousel block's own slide-content styling
     (.carousel-slider, .hero-slide + descendants, .image-overlay geometry).

   Stage 6 rebuild: slick + jQuery were removed. The old .slick-* core, the
   slick dot machinery (.slider-dots-container), the .carousel-slider-controls
   positioning and the dead @keyframes slideup2/3/4 are gone. Navigation is now
   generated and styled as .dncg-carousel__* below.

   Block-scoped slider usages (.testimonials-slider content, .home-hero-split,
     .hero-page, .hero-background) are deltas owned by their own block files.
   ========================================================================== */

/* ==========================================================================
   dncg carousel engine  —  structure + controls (js/carousel.js)
   Everything here is scoped under .dncg-carousel, which the engine adds on
   init. With no JS the slides simply stack (visible, reachable fallback).
   ========================================================================== */
.dncg-carousel {
  position: relative;
}
.dncg-carousel__viewport {
  overflow: hidden;
  /* Let vertical page scroll through; the engine captures horizontal drags. */
  touch-action: pan-y;
}
.dncg-carousel__track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.dncg-carousel__track.is-instant {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .dncg-carousel__track {
    transition: none;
  }
}
.dncg-carousel__slide {
  min-width: 0;
  box-sizing: border-box;
}

/* Arrows: glass discs with a currentColor chevron. A light disc + dark chevron
   reads clearly over both dark hero images and light section backgrounds. */
.dncg-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(var(--on-dark-rgb), 0.35);
  border-radius: 50%;
  /* Dark scrim + white chevron: a white button vanished on light slides. */
  background: rgba(var(--navy-deep-rgb), 0.6);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}
@media print, screen and (min-width: 40em) {
  .dncg-carousel__arrow {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.dncg-carousel__arrow::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border: solid currentColor;
  border-width: 0.2rem 0.2rem 0 0;
}
.dncg-carousel__arrow--prev {
  left: 0.75rem;
}
.dncg-carousel__arrow--prev::before {
  transform: translateX(25%) rotate(-135deg);
}
.dncg-carousel__arrow--next {
  right: 0.75rem;
}
.dncg-carousel__arrow--next::before {
  transform: translateX(-25%) rotate(45deg);
}
.dncg-carousel__arrow:hover {
  /* The disc flips to a light fill on hover, but the chevron is drawn with
     `border: solid currentColor` and the resting colour is --white, so on hover it
     was white-on-light and the arrow effectively disappeared. Flip the glyph too. */
  background: var(--surface);
  color: var(--text-heading);
  transform: translateY(-50%) scale(1.06);
}
.dncg-carousel__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.dncg-carousel__arrow[disabled]:hover {
  transform: translateY(-50%);
  background: rgba(var(--overlay-light-rgb), 0.9);
}

/* Dots: a translucent capsule so the indicators read on any background. */
.dncg-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  /* 0.45 left the dots sitting on "45% dark over whatever the slide shows", so
     dot-to-pill contrast varied with the image and measured 1.61-1.89:1. At 0.88
     the pill is a predictable dark ground on any slide and the dots clear 3:1. */
  background: rgba(var(--surface-dark-rgb), 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* The hit area is the BUTTON (24x24 minimum, WCAG 2.2 target size); the visible
   dot is the ::before, so the design keeps its 12px dot without the control being
   12px. Previously the button itself was 12x12, and 28x12 when active. */
.dncg-carousel__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.2s ease;
}
.dncg-carousel__dot::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: rgba(var(--overlay-light-rgb), 0.7);
  transition:
    background 0.2s ease,
    width 0.2s ease;
}
.dncg-carousel__dot:hover::before {
  background: rgba(var(--overlay-light-rgb), 0.9);
}
.dncg-carousel__dot.is-active {
  width: 2.5rem;
}
.dncg-carousel__dot.is-active::before {
  width: 1.75rem;
  background: var(--text-on-dark);
}

/* --- Progress variant (opt-in via data-carousel {"progress":true}) ----------
   Used by the testimonials carousel. Replaces the dot pagination with a bottom
   control bar: a "n / total" counter, a fill-track progress bar, and the two
   arrows moved inline (round, outlined). Sits below the slides on the dark
   section ground, under a hairline. */
.dncg-carousel--progress .dncg-carousel__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--on-dark-rgb), 0.18);
}
.dncg-carousel--progress .dncg-carousel__counter {
  flex: 0 0 auto;
  font-size: var(--fs-min);
  font-variant-numeric: tabular-nums;
  color: rgba(var(--on-dark-rgb), 0.6);
}
.dncg-carousel--progress .dncg-carousel__progress {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--on-dark-rgb), 0.2);
  overflow: hidden;
}
.dncg-carousel--progress .dncg-carousel__progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent-on-dark);
  transition: width 0.35s var(--ease-out);
}
.dncg-carousel--progress .dncg-carousel__nav { flex: 0 0 auto; display: flex; gap: 0.6rem; }
/* Arrows move from the slide edges into the bar: static, round, outlined. */
.dncg-carousel--progress .dncg-carousel__arrow {
  position: static;
  transform: none;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border-color: rgba(var(--on-dark-rgb), 0.4);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dncg-carousel--progress .dncg-carousel__arrow:hover {
  background: rgba(var(--on-dark-rgb), 0.12);
  color: var(--white);
  border-color: var(--white);
  transform: scale(1.06);
}
.dncg-carousel--progress .dncg-carousel__arrow[disabled]:hover { transform: none; background: transparent; }

/* Play / pause (only rendered when a block opts into autoplay). */
.dncg-carousel__playpause {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(var(--shadow-rgb), 0.12);
  border-radius: 50%;
  background: rgba(var(--overlay-light-rgb), 0.9);
  color: var(--text);
  cursor: pointer;
}
/* Playing -> pause glyph (two bars). */
.dncg-carousel__playpause::before {
  content: "";
  width: 0.4rem;
  height: 0.9rem;
  border-left: 0.28rem solid currentColor;
  border-right: 0.28rem solid currentColor;
  box-sizing: content-box;
}
/* Paused -> play glyph (triangle). */
.dncg-carousel__playpause.is-paused::before {
  width: 0;
  height: 0;
  border: 0.45rem solid transparent;
  border-right: 0;
  border-left: 0.7rem solid currentColor;
}

/* --- shared image-overlay geometry (source dc 5000-5013) --- */
.related-links .image-overlay,
.home-hero-split .image-overlay,
.carousel-slider .hero-slide .image-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 1;
}

/* --- carousel-slider (source dc 5524-5811) --- */
.carousel-slider {
  margin: 0;
  overflow: hidden;
  position: relative;
}
/* Hero (content) carousels render white text on their dark slides at mobile
   sizes. The image carousel (.carousel-images) has its own captions on the
   page background, so it is excluded. */
@media print, screen and (max-width: 41.68625em) {
  .carousel-slider:not(.carousel-images) {
    color: var(--text-on-dark) !important;
  }
}
.carousel-slider-logo {
  padding: 1rem;
  max-height: 100px;
  width: auto;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider-logo {
    padding: 0 2rem;
  }
}
.carousel-slider .hero-slide {
  background-color: var(--surface-blue);
  display: flex;
  display: -ms-flexbox;
  -ms-flex-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: var(--text-on-dark);
  padding-bottom: 4em;
  height: auto;
  min-height: 50vh;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .hero-slide {
    min-height: 60vh;
  }
}
@media screen and (max-height: 750px) {
  .carousel-slider .hero-slide {
    min-height: 60vh;
  }
}
.carousel-slider .hero-slide .image-overlay {
  height: 120%;
}
/* Forced legibility: a scrim over the background image so overlaid content is
   readable by default, whatever image an editor picks. Stronger on mobile. */
.carousel-slider .hero-slide .image-overlay::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.35);
}
@media print, screen and (max-width: 41.68625em) {
  .carousel-slider .hero-slide .image-overlay::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(var(--shadow-rgb), 0.7);
  }
}
.carousel-slider .hero-slide .row {
  width: 100%;
  position: relative;
  z-index: 90;
  padding: 6rem 1rem 0 1rem;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .hero-slide .row {
    padding: 0 2rem;
  }
}
@media print, screen and (min-width: 64em) {
  .carousel-slider .hero-slide .row {
    padding: 0 2rem;
  }
}
@media screen and (min-width: 87.5em) {
  .carousel-slider .hero-slide .row {
    padding: 0;
  }
}
@media screen and (max-height: 750px) {
  .carousel-slider .hero-slide .row {
    padding-top: 8em;
  }
}
.carousel-slider .hero-slide .row .outline-cta {
  margin: 2rem 0 0 0;
}
.carousel-slider .hero-slide .row h2 {
  margin: 0;
  line-height: 1;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 1.2rem;
  font-size: 2.2rem;
}
.carousel-slider .hero-slide .row h2 :after {
  clear: both;
  content: "";
  width: 100%;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .hero-slide .row h2 {
    font-size: 2rem;
  }
}
@media print, screen and (min-width: 64em) {
  .carousel-slider .hero-slide .row h2 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 67.5em) {
  .carousel-slider .hero-slide .row h2 {
    font-size: 2.5rem;
    line-height: 1;
  }
}
@media print, screen and (max-width: 41.68625em) {
  .carousel-slider .hero-slide .row h2 {
    background-color: transparent !important;
  }
}
/* Content over the image: forced glass backdrop (translucent dark + blur) so
   the copy is legible by default. Editor content_background_colour /
   content_text_colour (inline) still override this. */
.carousel-slider .hero-slide .row .carousel-content {
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  color: var(--text-on-dark);
  background: rgba(var(--surface-dark-alt-rgb), 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 8px;
}
.carousel-slider .hero-slide .row .carousel-content a {
  color: var(--text-on-dark);
  text-decoration: underline;
}
/* Title sits above the glass panel, directly on the image - keep it legible. */
.carousel-slider .hero-slide .row h2.title-font {
  text-shadow: 0 1px 4px rgba(var(--shadow-rgb), 0.55);
}
.carousel-slider .hero-slide .row .home-slider-subtitle {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: bold;
  display: block;
  margin-bottom: 1rem;
}
.carousel-slider .hero-slide .row h3 {
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 1.8rem;
}
@media print, screen and (min-width: 64em) {
  .carousel-slider .hero-slide .row h3 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
.carousel-slider .video-full {
  opacity: 1 !important;
}
.carousel-slider .image-overlay-full {
  opacity: 1 !important;
}
/* The dots capsule clears the hero's bottom padding on the home slider. */
.carousel-slider.home-slider .dncg-carousel__dots {
  bottom: 2rem;
}
.carousel-slider .home-slider .hero-slide {
  padding-bottom: 8em;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .home-slider .hero-slide {
    padding-bottom: 4em;
  }
}
.carousel-slider .cta-banner-home-indent {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .cta-banner-home-indent {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}