/* Shared carousel geometry and photo treatment. Brand artwork stays in its theme. */

.subpage-hero--carousel {
  min-block-size: var(--hero-carousel-height);
  display: flex;
  align-items: flex-end;
  padding-block: var(--hero-carousel-padding);
}

.subpage-hero--carousel .hero-content-copy {
  z-index: 2;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--brand-white);
  padding: 0;
  border-radius: 0;
  max-width: var(--hero-carousel-copy-width);
}

.hero-content-copy .hero-line-mark {
  display: inline;
  /* Natural leading joins fragments while retaining Arabic dots and descenders. */
  /* background: var(--scrim-hero);  */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  
  //padding: var(--hero-carousel-mark-padding);
}

.hero-content-copy h1:has(.hero-line-mark) {
  display: block;
  line-height: var(--hero-carousel-heading-leading);
  margin-block: 0;
  
  padding-bottom: var(--hero-carousel-heading-tail);
}

.hero-content-copy p:has(.hero-line-mark) {
  display: block;
  margin-block: 0;
  
  margin-block-start: var(--hero-carousel-lead-gap);
  
  line-height: var(--hero-carousel-lead-leading);
}

@media (min-width: 981px)  {
.subpage-hero--carousel .hero-content-copy {
    max-width: var(--hero-carousel-copy-width-wide);
  }
}

.subpage-hero--carousel .hero-content-copy p {
  color: var(--brand-white);
}

.subpage-hero--carousel .hero-content-copy .em {
  color: var(--accent-on-dark);
}

.subpage-hero--carousel .subpage-hero-media::after {
  display: none;
}

.subpage-hero--carousel .subpage-hero-media img {
  filter: none;
}

.subpage-hero--carousel:not(.subpage-hero--error)::before,
.subpage-hero--carousel:not(.subpage-hero--error)::after {
  display: none;
}

@media (max-width: 640px)  {
.hero .hero-content {
    min-block-size: var(--hero-carousel-height-mobile);
  }
.subpage-hero--carousel {
    min-block-size: var(--hero-carousel-height-mobile);
  }
}


.hero-carousel-copy {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hero-carousel-copy.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
@media (max-width: 560px) {
  .hero .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero .hero-actions .btn {
    flex: 0 0 auto;
    inline-size: 100%;
    white-space: nowrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-carousel-copy {
    transition: none;
  }
}
.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hero-carousel-slide.is-active {
  opacity: 1;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-carousel-slide {
    transition: none;
  }
}
.hero-carousel-ind {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--hero-carousel-rail-gap);
  margin-block-start: var(--hero-carousel-rail-margin);
  inline-size: var(--hero-carousel-rail-width);
}
.hero-carousel-dot {
  flex: 1 1 0;
  inline-size: auto;
  /* The control uses the documented 44px target; negative margins keep
     the existing rail position and layout height. */
  block-size: 44px;
  margin-block: calc((var(--hero-carousel-rail-height) - 44px) / 2);
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: visible;
}
.hero-carousel-dot::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc((100% - var(--hero-carousel-rail-height)) / 2);
  block-size: var(--hero-carousel-rail-height);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent-on-dark) var(--hero-carousel-rail-rest), transparent);
}
.hero-carousel-dot::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((100% - var(--hero-carousel-rail-height)) / 2);
  block-size: var(--hero-carousel-rail-height);
  border-radius: var(--r);
  z-index: 1;
  inline-size: 0;
  background: var(--accent-on-dark);
}
.hero-carousel-dot.is-active::before {
  inline-size: 100%;
  transition: inline-size var(--hero-carousel-interval) linear;
}
.hero-carousel-dot.is-done::before {
  inline-size: 100%;
  transition: none;
}
.hero-carousel .hero-carousel-dot:focus-visible {
  outline: var(--hero-carousel-focus-width) solid var(--accent-on-dark);
  outline-offset: var(--hero-carousel-focus-offset);
}
@media (max-width: 640px) {
.hero-carousel-ind {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-dot.is-active::before {
    transition: none;
  }
}