/* =========================================================
   Standard layout hero
   ========================================================= */

.hero {
  position: absolute;
  bottom: 20px;
  max-width: inherit;
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero p,
.hero a,
.hero .breadcrumb-item a,
.hero .breadcrumb-item::before,
.hero .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-white);
}

.layout-bg-edit .hero {
  position: inherit;
  bottom: inherit;
}

.layout-bg-bg-container img,
.slick--view--feature--features-home-page img {
  min-height: 250px;
  object-fit: cover;
  max-height: 600px;
}

.slick--view--feature-listing--feature-listing-home-page img {
  min-height: 250px;
  object-fit: cover;
}

.layout-bg-content-container.gradient-black-bg {
  background: linear-gradient(to top, black, transparent 55%);
}

.layout-bg-section.empty-hero .hero {
  position: relative;
  bottom: unset;
}

.layout-bg-section.empty-hero .layout-bg-overlay {
  background-color: var(--color-white) !important;
  opacity: 1 !important;
}

.layout-bg-section.empty-hero .hero h1,
.layout-bg-section.empty-hero .hero .breadcrumb-item a,
.layout-bg-section.empty-hero .breadcrumb-item::before {
  color: var(--color-black);
}

.slick--view--feature blockquote,
.slick--view--feature-listing blockquote {
  border-left: none;
  margin: 0;
  padding: 0 0 0 60px;
}


/* =========================================================
   Homepage hero carousel base media handling
   No forced desktop height here.
   ========================================================= */

:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) img,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) video {
  display: block;
  width: 100%;
  object-fit: cover;
}


/* =========================================================
   Homepage hero carousel medium/tablet/mobile overlay fix
   Desktop >= 992px is intentionally untouched.
   ========================================================= */

@media (max-width: 991.98px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .slick__slide {
    display: flex;
    flex-direction: column;
  }

  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .slick-slide-overlay {
    position: static !important;
    display: block;
    width: 100%;
    max-width: none;
    transform: none;
  }

  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .slick-slide-overlay > .container {
    width: 100%;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
  }

  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .overlay-box {
    position: static !important;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .box-w25,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .box-w33,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .box-w50,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .box-w66,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .box-w75,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .box-w100 {
    width: 100% !important;
    max-width: none;
  }

  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .card-body {
    width: 100%;
    max-width: none;
  }
}


/* =========================================================
   Homepage hero carousel safe responsive media height
   Fixes shallow tablet/mobile heights without touching
   normal large desktop >= 1200px.
   ========================================================= */

/* Small desktop only: 992px to 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) img,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) video {
    min-height: 340px;
    max-height: 480px;
  }
}

/* Tablet / medium screens: main fix */
@media (min-width: 768px) and (max-width: 991.98px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) img,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) video {
    height: 360px;
    min-height: 360px;
    max-height: 390px;
    object-fit: cover;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) img,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) video {
    height: 300px;
    min-height: 300px;
    max-height: 340px;
    object-fit: cover;
  }
}

/* Very small mobile */
@media (max-width: 575.98px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) img,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) video {
    height: 260px;
    min-height: 260px;
    max-height: 300px;
    object-fit: cover;
  }
}


/* =========================================================
   Small screen spacing for homepage hero carousel text
   ========================================================= */

@media (max-width: 767.98px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .card-body {
    padding: 1.25rem;
  }

  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .card-title,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .card-title-link,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) .card-title.h3 {
    margin-bottom: 0.5rem;
  }
}

/* Large-screen feature media: match the existing 600px static hero ceiling.
 * Limit the image/video, not the slide, so captions and controls aren't clipped.
 * Keep the existing tablet/mobile sizes and any authored object-position. */
@media (min-width: 1200px) {
  :is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) img,
:is(.slick--view--feature-listing-hero-carousel--features-home-page, .slick--view--feature--features-home-page, .slick--view--feature-listing--feature-listing-home-page) video {
    max-height: 600px;
  }
}

/* Match the audited full-width hero's existing 2000x600 desktop crop and
 * wrapper sizing from the first paint, including while blank.svg is present. */
@media (min-width: 992px) {
  .acton-hero-stable img.media__element[width="2000"][height="600"] {
    height: clamp(340px, 30vw, 600px);
  }
}

/* Before Slick's flex track exists, reserve the tallest mobile caption using
 * overlapping grid cells. Visibility remains module-owned; no duplicate slide
 * becomes interactive. Scope to the validated single-slide hero configuration. */
@media (max-width: 991.98px) {
  .acton-hero-stable > .slick__slider:not(.slick-initialized) {
    display: grid;
  }
  .acton-hero-stable > .slick__slider:not(.slick-initialized) > .slick__slide {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
  }
}

/* The selected high-priority hero should paint without a decorative fade.
 * Preserve all later slide/card transitions. */
.acton-hero-stable img.media__element[fetchpriority="high"] {
  transition: none;
}

/* Show only the validated starting slide while module assets are pending.
 * Stop controlling slide visibility as soon as Slick creates its track.
 * Other grid cells still reserve the tallest caption without exposing it. */
.acton-hero-early > .slick__slider:not(.slick-initialized) > .slick__slide:first-child {
  visibility: visible;
}

/* A successfully loaded first image can paint before Blazy updates its wrapper.
 * Never show blank/error placeholders or alter module loading classes. */
.acton-hero-stable .media--image.is-b-loading img.media__element.acton-hero-image-ready[fetchpriority="high"] {
  opacity: 1;
  transition: none;
}

/* Reserve the validated hero's media slot even before Drupal/Blazy runs.
 * Match the image heights above; never fix the caption or entire slide height.
 * The desktop slider already reserves its viewport-based height in views.css.
 * Ratio/responsive formatters retain their own media geometry.
 * Keep this independent of .js so delayed/blocked scripts cannot collapse it.
 */
@media (max-width: 991.98px) {
  .acton-hero-stable .media--image:not(.media--player):not(.media--ratio):not(.media--responsive) {
    min-height: 360px;
  }
}
@media (max-width: 767.98px) {
  .acton-hero-stable .media--image:not(.media--player):not(.media--ratio):not(.media--responsive) {
    min-height: 300px;
  }
}
@media (max-width: 575.98px) {
  .acton-hero-stable .media--image:not(.media--player):not(.media--ratio):not(.media--responsive) {
    min-height: 260px;
  }
}