.carousel-single { position: relative; }
.carousel-single .imaged { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-single .splide__slide { overflow: hidden; }

.hero-media { position: relative; overflow: hidden; }
.hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
  backdrop-filter: blur(1px); pointer-events: none;
}

.hero-caption {
  position: absolute; left: 18px; bottom: 18px; right: 18px; z-index: 10;
  color: #fff; text-shadow: 0 6px 18px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 6px;
}
.hero-caption-title { font-size: 20px; font-weight: 800; line-height: 1; }
.hero-caption-subtitle { font-size: 13px; opacity: 0.95; }

/* Splide arrow and pagination styling */
.splide__arrow { background: rgba(255,255,255,0.9); color: #0D5C4D; border-radius: 8px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(13,92,77,0.12); }
.splide__arrow svg { width: 18px; height: 18px; }
.splide__pagination { bottom: 12px; }
.splide__pagination__page { background: rgba(255,255,255,0.85); width: 10px; height: 10px; border-radius: 8px; transition: all 200ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.splide__pagination__page.is-active { transform: scale(1.6); background: #0D5C4D; }

/* Simple responsive height adjustment */
@media (max-width: 640px) {
  .carousel-single .imaged, .carousel-single video { height: 220px !important; }
  .hero-caption { left: 12px; right: 12px; bottom: 12px; }
  .hero-caption-title { font-size: 16px; }
}