/* ===========================================================
   Hero carousel — ported from sections/hero-banner.liquid. The inner
   product-thumbnail strip (.hero__carousel, tied to a `carousel_collection`
   setting) isn't ported — it was a secondary decorative feature, not the
   core hero. Slide fade/positioning + dot/arrow navigation is.
   =========================================================== */

.hero-carousel { position: relative; width: 100%; overflow: hidden; }

.hero-carousel .hero {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.hero-carousel .hero.active { display: flex; }

.hero-carousel .hero--height-large { min-height: 80vh; }

.hero-carousel .hero__image {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.hero-carousel .hero__overlay { position: absolute; inset: 0; background: #000; z-index: 1; }

.hero-carousel .hero__content {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 2rem;
}
.hero-carousel .hero--align-left .hero__content { justify-content: flex-start; }

.hero-carousel .hero__text {
  max-width: 600px; animation: spacivoHeroFadeInUp .8s ease-out;
  background-color: rgba(0,0,0,.35); padding: clamp(1.25rem, 4vw, 2rem); border-radius: 8px; text-align: left; color: #fff;
}
.hero-carousel .hero__eyebrow { font-size: clamp(.8rem, 2vw, .95rem); font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 1rem; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.hero-carousel .hero__heading { font-size: clamp(1.75rem, 7vw, 3.5rem); font-weight: 700; color: #fff; line-height: 1.1; margin: 0 0 1rem; text-shadow: 0 3px 12px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5); }
.hero-carousel .hero__subtitle { font-size: clamp(.9rem, 2.5vw, 1.25rem); color: #fff; line-height: 1.6; margin: 0 0 1.5rem; text-shadow: 0 4px 12px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.6); }
.hero-carousel .hero__cta { display: flex; gap: 1rem; align-items: center; }

@keyframes spacivoHeroFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Prev/next arrows — anchored to the left/right edges, vertically centered,
   per a supplied mockup (previously clustered bottom-right with dots). */
.hero-carousel-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background-color: rgba(0,0,0,.35); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s ease, transform .2s ease; padding: 0;
}
.hero-carousel-nav-btn:hover { background-color: rgba(0,0,0,.55); }
.hero-carousel-nav-btn svg { width: 20px; height: 20px; stroke-width: 2.5; }
.hero-carousel-nav-btn--prev { left: 20px; }
.hero-carousel-nav-btn--next { right: 20px; }

/* .hero-consultation-cta ("Book a Free Consultation") moved to theme.css —
   it's a site-wide floating CTA (footer.php shows it on more than just the
   homepage now), not specific to the hero carousel, so it needs to load
   from a stylesheet that isn't gated to is_front_page(). */

@media (max-width: 750px) {
  .hero-carousel .hero--height-large { min-height: 60vh; }
  /* heading/subtitle font-size is fluid via clamp() above now — no fixed
     override needed (a leftover fixed value here was actually larger than
     the fluid size at small widths, which is what made mobile text look
     oversized in the first place). */
  .hero-carousel .hero__cta { flex-direction: column; align-items: stretch; }
  .hero-carousel .hero__cta .btn { width: 100%; }
  .hero-carousel-nav-btn { width: 36px; height: 36px; }
  .hero-carousel-nav-btn svg { width: 16px; height: 16px; }
  .hero-carousel-nav-btn--prev { left: 10px; }
  .hero-carousel-nav-btn--next { right: 10px; }
}