/*
 * Fund Carousel — hand-compiled standalone stylesheet
 * Source: src/scss/_fund-carousel.scss
 * Loaded via wp_enqueue_style() from functions.php (woodst_enqueue_assets).
 *
 * Inherits arrow + base dot styling from the bundled _slick.scss; overrides
 * only what needs to differ on a light-background fund page (vs. the dark
 * hero/banner carousels).
 *
 * When the theme's SCSS build pipeline is next run, the partial is folded
 * into dist/css/style.css and this file (plus its enqueue) can be removed.
 */

.fund-carousel {
  margin-top: 1rem;
  margin-bottom: 2rem;
  position: relative;
}

.fund-carousel-slider:not(.slick-initialized) .fund-carousel-slide {
  display: none;
}
.fund-carousel-slider:not(.slick-initialized) .fund-carousel-slide:first-child {
  display: block;
}

/* Fixed aspect-ratio frame. Every slide reserves the same height regardless
   of the source image's dimensions, so the page length never changes between
   transitions. Images are letterboxed into the gray background via
   object-fit: contain — nothing is ever cropped. */
.fund-carousel-slide {
  outline: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: #F4F4F4;
  border-radius: .125rem;
  overflow: hidden;
}

.fund-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

.fund-carousel .slick-dots {
  position: static;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.fund-carousel .slick-dots li button {
  background-color: #DFDFE1;
}

.fund-carousel .slick-dots li button:hover,
.fund-carousel .slick-dots li button:focus {
  background-color: #008368;
}

.fund-carousel .slick-dots .slick-active button {
  background-color: #02426D;
}