/*
 * Elementor Hero Carousel — Frontend Styles
 * ==========================================
 * Stylesheet for the EHC carousel widget.
 * Loaded only when the widget is present on the page.
 *
 * @package EHC
 * @version 1.1.0
 */

/* ==========================================================================
   1. Wrapper
   ========================================================================== */

.ehc-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  outline: none; /* Focus ring handled by :focus-visible below. */
}

.ehc-carousel-wrapper:focus-visible {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}

/* ==========================================================================
   2. Swiper slide base
   ========================================================================== */

.ehc-swiper .swiper-slide.ehc-slide {
  position: relative;
  width: 100%;
  /* Default height — overridden by Elementor slider control. */
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* ==========================================================================
   3. Background image — PRIMARY image renderer
   ==========================================================================
   Using a real <img> element is more reliable than CSS background-image:
   it loads predictably, works independently of CSS specificity, and lets
   the browser use its native lazy-loading and preload hints.
   z-index 0 puts it below the overlay (2) and content (3).
   Ken Burns is the only skin that needs CSS background-image (for its
   ::before animation), so we keep opacity:0 there and let the inline
   style + pseudo-element do the work instead.
   ========================================================================== */

.ehc-slide-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 50% horizontal, 30% vertical — sits slightly above centre so the main
     subject of most photos (people, vehicles, horizons) is visible above
     the text scrim at the card bottom. Overridden per-slide via inline style. */
  object-position: 50% 30%;
  opacity: 1;           /* VISIBLE — this IS the background image */
  pointer-events: none;
  z-index: 0;
}

/* Ken Burns uses a CSS ::before pseudo-element animated via background-image,
   so the <img> must stay hidden to avoid double-rendering. */
.ehc-skin-kenburns .ehc-slide-bg-img {
  opacity: 0;
}

/* ==========================================================================
   4. Background video
   ========================================================================== */

.ehc-slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   5. Overlay
   ========================================================================== */

.ehc-overlay {
  position: absolute;
  inset: 0;
  /* Color is set exclusively by Elementor's overlay_color CSS custom property.
     We default to transparent so there is NO hardcoded darkening — the first two
     slides (or any slide) will never appear black/over-lit from stale CSS. */
  /* Fallback matches the Elementor control default (rgba 0,0,0,0.4).
     Once the page is saved, Elementor's generated CSS sets this via
     --ehc-overlay-normal, so the fallback only applies to unsaved widgets. */
  background-color: var(--ehc-overlay-normal, rgba(0, 0, 0, 0.4));
  /* Smooth transition drives both the normal→hover effect and the
     overlay_transition_speed control (--ehc-overlay-transition). */
  transition: background-color var(--ehc-overlay-transition, 350ms) ease;
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   6. Slide content container
   ========================================================================== */

.ehc-slide-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  padding: clamp(24px, 4vw, 60px);
  box-sizing: border-box;
}

/* ── Horizontal alignment ─────────────────────────────────────────────────── */

.ehc-align-h-left   .ehc-slide-content { justify-content: flex-start; }
.ehc-align-h-left   .ehc-slide-inner   { text-align: left;  }

.ehc-align-h-center .ehc-slide-content { justify-content: center; }
.ehc-align-h-center .ehc-slide-inner   { text-align: center; }

.ehc-align-h-right  .ehc-slide-content { justify-content: flex-end; }
.ehc-align-h-right  .ehc-slide-inner   { text-align: right; }

/* ── Vertical alignment ───────────────────────────────────────────────────── */

.ehc-align-v-top    .ehc-slide-content { align-items: flex-start; }
.ehc-align-v-middle .ehc-slide-content { align-items: center;     }
.ehc-align-v-bottom .ehc-slide-content { align-items: flex-end;   }

/* ==========================================================================
   7. Slide inner wrapper (constrains text width)
   ========================================================================== */

.ehc-slide-inner {
  max-width: min(780px, 80vw);
}

/* ==========================================================================
   8. Title
   ========================================================================== */

.ehc-slide-title {
  margin: 0 0 0.5em;
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  word-break: break-word;
}

/* ==========================================================================
   9. Description
   ========================================================================== */

.ehc-slide-description {
  margin: 0 0 1.5em;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  color: #ffffff;
  line-height: 1.6;
}

/* ==========================================================================
   10. CTA Button
   ========================================================================== */

.ehc-slide-btn {
  display: inline-block;
  padding: 14px 32px;
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease,
    transform        0.2s  ease,
    box-shadow       0.25s ease;
  white-space: nowrap;
}

.ehc-slide-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.ehc-slide-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  transform: translateY(-2px);
}

/* ==========================================================================
   11. Slide-change animations (fade in + slide up)
   ========================================================================== */

/*
 * All text elements start invisible and shifted down.
 * They animate to visible + original position when their slide becomes active.
 * Each element has a staggered delay for a sequential reveal effect.
 */

.ehc-slide-title,
.ehc-slide-description,
.ehc-slide-btn {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   0.65s ease,
    transform 0.65s ease;
}

.ehc-slide-title       { transition-delay: 0.15s; }
.ehc-slide-description { transition-delay: 0.30s; }
.ehc-slide-btn         { transition-delay: 0.45s; }

/* Active slide: animate elements into view. */
.swiper-slide-active .ehc-slide-title,
.swiper-slide-active .ehc-slide-description,
.swiper-slide-active .ehc-slide-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Reset animation for slides re-entering after transition */
.swiper-slide-prev .ehc-slide-title,
.swiper-slide-prev .ehc-slide-description,
.swiper-slide-prev .ehc-slide-btn,
.swiper-slide-next .ehc-slide-title,
.swiper-slide-next .ehc-slide-description,
.swiper-slide-next .ehc-slide-btn {
  opacity: 0;
  transform: translateY(30px);
  transition-delay: 0s;
}

/* ==========================================================================
   12. Navigation Arrows
   ========================================================================== */

.ehc-swiper .swiper-button-prev,
.ehc-swiper .swiper-button-next {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  /* Hidden by default, revealed on carousel hover or focus. */
  opacity: 0;
  transition:
    opacity          0.3s ease,
    background-color 0.3s ease,
    transform        0.2s ease;
  /* Override Swiper's default top positioning for better vertical centering. */
  top: 50%;
  transform: translateY(-50%);
}

/* Show arrows when the carousel is hovered or an arrow is focused. */
.ehc-carousel-wrapper:hover .ehc-swiper .swiper-button-prev,
.ehc-carousel-wrapper:hover .ehc-swiper .swiper-button-next,
.ehc-swiper .swiper-button-prev:focus-visible,
.ehc-swiper .swiper-button-next:focus-visible {
  opacity: 1;
}

.ehc-swiper .swiper-button-prev:hover,
.ehc-swiper .swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.ehc-swiper .swiper-button-prev::after,
.ehc-swiper .swiper-button-next::after {
  font-size: 18px;
  color: #ffffff;
  font-weight: 700;
}

.ehc-swiper .swiper-button-prev:focus-visible,
.ehc-swiper .swiper-button-next:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* ==========================================================================
   13. Pagination Dots
   ========================================================================== */

.ehc-swiper .swiper-pagination {
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ehc-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform        0.3s ease;
  border: 2px solid transparent;
}

.ehc-swiper .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ehc-swiper .swiper-pagination-bullet-active {
  background-color: #ffffff;
  transform: scale(1.35);
}

/* ==========================================================================
   14. Screen-reader-only utility
   ========================================================================== */

.ehc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   15. Editor placeholder (shown in Elementor edit mode)
   ========================================================================== */

.ehc-editor-placeholder {
  background: #f0f0f0;
  padding: 40px;
  text-align: center;
  font-family: sans-serif;
  border: 2px dashed #ccc;
  border-radius: 4px;
}

/* ==========================================================================
   16. Cards skin
   ========================================================================== */

/*
 * The wrapper receives the class ehc-skin-cards (or ehc-skin-hero) from PHP.
 * All cards-specific rules are scoped under .ehc-skin-cards so they never
 * leak into the hero skin.
 */

/* Outer wrapper: vertical padding creates space for the card hover lift shadow. */
.ehc-skin-cards {
  padding: 12px 0 12px;
  /* overflow: hidden inherited from .ehc-carousel-wrapper — do NOT override */
}

/* Side padding reserves space for the prev/next arrows (60px each side).
   overflow: hidden is required — Swiper needs it to clip off-screen slides. */
.ehc-skin-cards .ehc-swiper {
  padding: 0 60px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Card slides: fixed height (overridden per-breakpoint by Elementor control),
   rounded corners, overflow hidden to clip the background image. */
.ehc-skin-cards .ehc-swiper .swiper-slide.ehc-slide {
  height: 380px;   /* default; Elementor responsive control overrides this */
  border-radius: 16px;
  overflow: hidden;
  /* Remove the fullscreen min-height that the hero skin relies on. */
  min-height: 0;
  /* Ensure background image covers the card (inline style sets the URL). */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Fallback color while image loads or when no image is set. */
  background-color: #1c2b35;
}

/* Gradient scrim: lives on a ::after pseudo-element so it always occupies
   the bottom portion of the CARD, independent of how much text there is.
   This prevents the dark gradient from expanding upward on tall text blocks
   and from crushing dark images into solid black. */
.ehc-skin-cards .ehc-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;              /* above image (0) and overlay (hidden), below content (3) */
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.60) 20%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.00) 60%
  );
  border-radius: inherit;
}

/* Content: always anchored to the bottom-left of the card.
   No background here — the ::after pseudo-element handles the scrim. */
.ehc-skin-cards .ehc-slide-content {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px 24px;
  background: none;
  z-index: 3;              /* above ::after scrim */
}

/* Force left-aligned text in cards regardless of per-slide alignment setting. */
.ehc-skin-cards .ehc-slide-inner {
  text-align: left;
  max-width: 100%;
}

/* Compact title for cards — no huge hero headline. */
.ehc-skin-cards .ehc-slide-title {
  font-size: 20px;   /* overridden by Elementor card_title_size control */
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Hide the flat overlay div — the gradient on .ehc-slide-content takes its role. */
.ehc-skin-cards .ehc-overlay {
  display: none;
}

/* Description and button hidden by default in cards skin.
   Can be re-shown individually via the "Show Description / Show Button" toggles. */
.ehc-skin-cards .ehc-slide-description,
.ehc-skin-cards .ehc-slide-btn {
  display: none;
}

/* When description IS shown, keep it compact. */
.ehc-skin-cards .ehc-slide-description {
  font-size: 0.85rem;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* When button IS shown, tighten padding for the smaller card context. */
.ehc-skin-cards .ehc-slide-btn {
  margin-top: 10px;
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* Cards text: always visible. Animate only when a new slide enters view
   (Swiper removes swiper-slide-visible briefly during transition, then re-adds it).
   Using swiper-slide-visible ensures ALL visible cards show text — not just active. */
.ehc-skin-cards .ehc-slide-title,
.ehc-skin-cards .ehc-slide-description,
.ehc-skin-cards .ehc-slide-btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* During a slide transition, incoming slides start offscreen (no swiper-slide-visible).
   Animate them in as they become visible. */
.ehc-skin-cards .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-active) .ehc-slide-title,
.ehc-skin-cards .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-active) .ehc-slide-description,
.ehc-skin-cards .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-active) .ehc-slide-btn {
  opacity: 0;
  transform: translateY(12px);
}

/* Navigation arrows: always visible in cards (no hover trick needed).
   Use a solid dark background + border for visibility on any image color. */
.ehc-skin-cards .swiper-button-prev,
.ehc-skin-cards .swiper-button-next {
  opacity: 1;
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Centre arrows precisely on the CARD HEIGHT — the CSS var --ehc-card-height
     is emitted by the Elementor card_height control (default 380px).
     This prevents them drifting down when pagination is rendered below. */
  top: calc(var(--ehc-card-height, 380px) / 2);
  transform: translateY(-50%);
  transition: background-color 0.25s ease, transform 0.2s ease, opacity 0.25s ease;
}

.ehc-skin-cards .swiper-button-prev:hover,
.ehc-skin-cards .swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.80);
  border-color: rgba(255, 255, 255, 0.9);
}

/* Position arrows in the side padding zone (60px reserved above) so they
   never overlap card content. left/right values are padding(60px) / 2 - half arrow(22px). */
.ehc-skin-cards .swiper-button-prev {
  left: 8px;
}
.ehc-skin-cards .swiper-button-next {
  right: 8px;
}

/* Pagination: detach from inside the swiper, sit below the cards row. */
.ehc-skin-cards .swiper-pagination {
  position: relative;
  bottom: auto;
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* Dots: white semi-transparent so they work on any page background color. */
.ehc-skin-cards .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.40);
  opacity: 1;
}
.ehc-skin-cards .swiper-pagination-bullet-active {
  background-color: rgba(255, 255, 255, 0.95);
}

/* Visually dim non-active cards slightly so the active one stands out. */
.ehc-skin-cards .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
.ehc-skin-cards .swiper-slide:hover {
  opacity: 1;
}

/* Reduce the "inner" padding added by hero skin. */
.ehc-skin-cards .ehc-slide-inner {
  padding: 0;
}

/* ==========================================================================
   17. Responsive overrides
   ========================================================================== */

@media (max-width: 1024px) {
  .ehc-swiper .swiper-button-prev,
  .ehc-swiper .swiper-button-next {
    /* Always visible on touch devices — cannot rely on hover. */
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .ehc-slide-content {
    padding: 24px;
  }

  .ehc-swiper .swiper-button-prev,
  .ehc-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    opacity: 1;
  }

  .ehc-swiper .swiper-button-prev::after,
  .ehc-swiper .swiper-button-next::after {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .ehc-slide-inner {
    max-width: 100%;
  }

  .ehc-slide-title {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }
}

/* ==========================================================================
   18. Split skin
   ========================================================================== */

/*
 * Layout: background image fills the full slide; the content panel (an
 * absolutely positioned div) sits on one side, hiding that half of the image
 * behind a solid background. The image is therefore only visible on the
 * opposite side — no extra markup needed.
 *
 * CSS custom property --ehc-split-width controls the panel size and is set
 * by the Elementor "Panel Width" slider.
 */

.ehc-skin-split {
  --ehc-split-width: 50%; /* default; overridden by Elementor control */
}

/* Disable the global flat overlay — Split uses per-side overlays instead. */
.ehc-skin-split .ehc-overlay {
  display: none;
}

/* Image-side overlay (only covers the visible half). */
.ehc-split-img-overlay {
  display: none; /* hidden in all other skins */
}
.ehc-skin-split .ehc-split-img-overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Content panel: absolutely positioned; width = --ehc-split-width. */
.ehc-skin-split .ehc-slide-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ehc-split-width, 50%);
  /* Override hero's flex defaults */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px;
  box-sizing: border-box;
  background-color: #1a1a2e; /* overridden by Elementor control */
  z-index: 3;
}

/* RIGHT layout (default): panel is on the right. */
.ehc-skin-split.ehc-split-content-right .ehc-slide-content {
  right: 0;
  left: auto;
}

/* LEFT layout: panel is on the left; image shows on the right. */
.ehc-skin-split.ehc-split-content-left .ehc-slide-content {
  left: 0;
  right: auto;
}
.ehc-skin-split.ehc-split-content-left .ehc-slide {
  background-position: right center;
}

.ehc-skin-split .ehc-slide-inner {
  max-width: 100%;
  text-align: left;
}

/* Description + button always visible in split skin. */
.ehc-skin-split .ehc-slide-description,
.ehc-skin-split .ehc-slide-btn {
  display: block;
}
.ehc-skin-split .ehc-slide-btn {
  display: inline-block;
}

/* Slide animations still apply — content enters from below. */
.ehc-skin-split .ehc-slide-title,
.ehc-skin-split .ehc-slide-description,
.ehc-skin-split .ehc-slide-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ehc-skin-split .ehc-slide-title       { transition-delay: 0.15s; }
.ehc-skin-split .ehc-slide-description { transition-delay: 0.30s; }
.ehc-skin-split .ehc-slide-btn         { transition-delay: 0.45s; }

.ehc-skin-split .swiper-slide-active .ehc-slide-title,
.ehc-skin-split .swiper-slide-active .ehc-slide-description,
.ehc-skin-split .swiper-slide-active .ehc-slide-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Navigation arrows always visible in split (not hover-only). */
.ehc-skin-split .swiper-button-prev,
.ehc-skin-split .swiper-button-next {
  opacity: 1;
}

/* Responsive: stack vertically on small screens. */
@media (max-width: 768px) {
  .ehc-skin-split .ehc-slide-content {
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    padding: 32px 24px;
    min-height: 40%;
  }

  .ehc-skin-split .ehc-swiper .swiper-slide.ehc-slide {
    display: flex;
    flex-direction: column;
    /* image half takes top 60%; panel below */
    background-size: cover;
    background-position: top center;
  }
}

/* ==========================================================================
   19. Boxed skin
   ========================================================================== */

/*
 * Full background image + overlay (same as hero), but the content sits in a
 * centered glassmorphism box with backdrop-filter blur.
 */

/* Inherit all hero defaults; only override content positioning and inner box. */
.ehc-skin-boxed .ehc-slide-content {
  align-items: center;
  justify-content: center;
  /* Remove per-slide alignment classes — always centered in boxed. */
}

/* The inner box: glassmorphism / semi-opaque panel. */
.ehc-skin-boxed .ehc-slide-inner {
  background-color: rgba(0, 0, 0, 0.55); /* overridden by control */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 40px 48px;
  text-align: center;
  max-width: 600px;
  width: 90%;
}

/* Override horizontal alignment classes for boxed — always center. */
.ehc-skin-boxed .ehc-align-h-left   .ehc-slide-content,
.ehc-skin-boxed .ehc-align-h-right  .ehc-slide-content,
.ehc-skin-boxed .ehc-align-h-center .ehc-slide-content {
  justify-content: center;
}
.ehc-skin-boxed .ehc-align-h-left   .ehc-slide-inner,
.ehc-skin-boxed .ehc-align-h-right  .ehc-slide-inner,
.ehc-skin-boxed .ehc-align-h-center .ehc-slide-inner {
  text-align: center;
}

/* Description + button visible by default in boxed. */
.ehc-skin-boxed .ehc-slide-description,
.ehc-skin-boxed .ehc-slide-btn {
  display: block;
}
.ehc-skin-boxed .ehc-slide-btn {
  display: inline-block;
}

/* Content enters with a scale-up + fade for a "modal appearing" feel. */
.ehc-skin-boxed .ehc-slide-inner {
  opacity: 0;
  transform: scale(0.92) translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.1s;
}

.ehc-skin-boxed .swiper-slide-active .ehc-slide-inner {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Individual elements inside the box still stagger. */
.ehc-skin-boxed .ehc-slide-title,
.ehc-skin-boxed .ehc-slide-description,
.ehc-skin-boxed .ehc-slide-btn {
  /* Override the default translate animation — box animates as a unit. */
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================================
   20. Ken Burns skin
   ========================================================================== */

/*
 * Same layout as hero, but the background image is displayed via a ::before
 * pseudo-element that animates (zoom in or zoom out) while the slide is active.
 *
 * The slide's own background-image is kept (CSS lazy-loading writes to it).
 * The ::before inherits that value live and renders on top, covering the static
 * parent background. Overflow is clipped by the slide's overflow: hidden.
 *
 * CSS custom properties:
 *   --ehc-kb-zoom:     zoom delta in % (default 12 → 1 + 0.12 = scale(1.12))
 *   --ehc-kb-duration: animation duration (default 8000ms)
 */

.ehc-skin-kenburns {
  --ehc-kb-zoom: 12;
  --ehc-kb-duration: 8000ms;
}

/* ::before pseudo-element carries the animated background. */
.ehc-skin-kenburns .ehc-slide::before {
  content: '';
  position: absolute;
  /* Slightly larger than slide to avoid white edges during zoom. */
  inset: -8%;
  background-image: inherit;   /* Inherits from slide — updates when JS lazy-loads. */
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}

/* ── Zoom-in keyframes ────────────────────────────────────────────────────── */

@keyframes ehc-kenburns-in {
  0%   { transform: scale(1); }
  100% { transform: scale(calc(1 + var(--ehc-kb-zoom, 12) / 100)); }
}

/* ── Zoom-out keyframes ───────────────────────────────────────────────────── */

@keyframes ehc-kenburns-out {
  0%   { transform: scale(calc(1 + var(--ehc-kb-zoom, 12) / 100)); }
  100% { transform: scale(1); }
}

/*
 * The `.ehc-kb-running` class is added/removed by JS (restartKenBurns helper)
 * on each slide transition. This ensures the animation ALWAYS restarts from
 * frame 0 — even when a slide loops back and is shown a second time.
 * Using .swiper-slide-active::before alone would NOT restart on re-visit.
 */

/* Zoom-in direction. */
.ehc-skin-kenburns.ehc-kb-in .ehc-kb-running::before {
  animation: ehc-kenburns-in var(--ehc-kb-duration, 8000ms) ease-in-out forwards;
}

/* Zoom-out direction. */
.ehc-skin-kenburns.ehc-kb-out .ehc-kb-running::before {
  animation: ehc-kenburns-out var(--ehc-kb-duration, 8000ms) ease-in-out forwards;
}

/* Video: also lives in z-index 1 — sits above ::before (z-index 0). */

/* Overlay and content z-indices are already 2 and 3 — no change needed. */

/* Content: same as hero (no changes). Description + button inherit hero defaults. */

/* ==========================================================================
   Full-slide Cover Link
   ==========================================================================
   An invisible <a> that stretches across the entire slide, sitting in the
   z-index stack ABOVE the overlay but BELOW the content, hotspots, and
   navigation arrows. This lets the whole background image be a clickable
   link without interfering with the button, hotspot tooltips, or arrows.

   z-index layers (lowest → highest):
     0  ::before (Ken Burns bg)
     1  video background
     2  .ehc-overlay / .ehc-split-img-overlay
   ➡️ 2  .ehc-slide-cover-link  ← sits here (pointer-events on bg only)
     3  .ehc-slide-content
    10  .ehc-hotspot
    99  .ehc-particle-canvas
   ========================================================================== */

.ehc-slide-cover-link {
  position:       absolute;
  inset:          0;
  z-index:        2;            /* above overlay, below content */
  display:        block;
  cursor:         pointer;
  text-decoration: none;
  /* Transparent — purely a hit area. */
  background:     transparent;
  /* Focus ring: visible outline when navigated via keyboard. */
  outline:        none;
}

.ehc-slide-cover-link:focus-visible {
  outline:        3px solid rgba(255, 255, 255, 0.85);
  outline-offset: -4px;
}

/*
 * ✅ BUG FIX: .ehc-slide-content is position:absolute — do NOT add
 * position:relative here or it breaks vertical alignment.
 * Hotspots and buttons already have their own stacking context.
 */
.ehc-hotspot,
.ehc-slide-btn {
  position: relative;
  z-index:  4;
}

/* ── Cards skin: make the ENTIRE card clickable via the cover link ─────────
   Raise cover link above content (z-index 5) and disable pointer-events on
   the gradient content area so the cover link captures all clicks.
   Button and hotspots re-enable pointer-events at z-index 6.
   ────────────────────────────────────────────────────────────────────────── */

.ehc-skin-cards .ehc-slide {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.ehc-skin-cards .ehc-slide-cover-link {
  z-index: 5;
}

.ehc-skin-cards .ehc-slide-content {
  pointer-events: none;
}

.ehc-skin-cards .ehc-slide-btn,
.ehc-skin-cards .ehc-hotspot {
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

/* Lift card on hover when it has a cover link (progressive enhancement). */
.ehc-skin-cards .ehc-slide:has(.ehc-slide-cover-link:hover) {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

/* Hover overlay effect on linked slides.
   Uses the Elementor-controlled custom properties so the hover color is
   always relative to what the user configured — no hardcoded darkening. */
.ehc-slide:has(.ehc-slide-cover-link:hover) .ehc-overlay {
  background-color: var(--ehc-overlay-hover, rgba(0, 0, 0, 0.15));
}

/* For browsers that don't support :has() — no hover effect, still works. */

/* ==========================================================================
   NEW FEATURE 1 — 🖱 Mouse Parallax / Gyroscope
   ==========================================================================
   No dedicated class is needed — the JS applies inline transform/
   background-position directly. The only CSS needed is to prepare the
   content layer so hardware-accelerated transforms don't cause paint flicker.
   ========================================================================== */

.ehc-carousel-wrapper .ehc-slide-content {
  will-change: transform;
}

/* ==========================================================================
   NEW FEATURE 2 — ⏱ Autoplay Progress Ring
   ==========================================================================
   Each pagination bullet is replaced by an inline SVG with two rings.
   The SVG wrapper (.ehc-progress-ring) sizes itself to the bullet container.
   The fill ring's stroke-dashoffset is animated by JS via inline style.
   ========================================================================== */

/* Size the button to accommodate the SVG. */
.ehc-swiper .swiper-pagination-bullet.ehc-has-ring {
  background: transparent;
  width:  auto;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The SVG fits the ring size set via the Elementor control
   (default radius 9 → viewBox ≈ 24 → rendered at ~24 px). */
.ehc-progress-ring {
  display: block;
  overflow: visible;
  width:  1.5em;
  height: 1.5em;
}

/* Track ring: faint white ring always visible. */
.ehc-ring-track {
  fill:         none;
  stroke:       rgba(255, 255, 255, 0.25);
  stroke-linecap: round;
}

/* Fill ring: starts "empty" (dashoffset = full circumference); JS sweeps it. */
.ehc-ring-fill {
  fill:             none;
  stroke-linecap:   round;
  transform:        rotate(-90deg);   /* start sweep from 12 o'clock */
  transform-origin: 50% 50%;
  transition:       stroke-dashoffset 0.1s linear;
}

/* Active bullet dot: shown as the filled centre when ring variant is active. */
.ehc-swiper .swiper-pagination-bullet.ehc-has-ring.swiper-pagination-bullet-active .ehc-ring-track {
  stroke: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   NEW FEATURE 3 — ✨ Particle Burst (Canvas)
   ==========================================================================
   The <canvas> is created and destroyed entirely by JS.
   The only CSS rule needed ensures the canvas inherits any border-radius
   from its parent (.ehc-swiper) — already handled via border-radius:inherit
   in the JS inline style. No extra rules required here.
   ========================================================================== */

/* Confirm canvas doesn't accidentally block Swiper events. */
.ehc-particle-canvas {
  pointer-events: none !important;
  user-select:    none;
}

/* ==========================================================================
   NEW FEATURE 4 — 📍 Interactive Image Hotspots
   ==========================================================================
   Hotspot button: absolutely positioned inside .swiper-slide.
   Contains:
     .ehc-hotspot-pulse  — expanding ring animation
     .ehc-hotspot-dot    — info icon (SVG)
     .ehc-hotspot-tooltip — callout box (title + body paragraph)
   ========================================================================== */

/* ── Hotspot button ──────────────────────────────────────────────────────── */

.ehc-hotspot {
  position:         absolute;
  width:            36px;
  height:           36px;
  /* left / top set via inline style from PHP */
  transform:        translate(-50%, -50%);
  z-index:          10;
  cursor:           pointer;
  background:       none;
  border:           none;
  padding:          0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.ehc-hotspot:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  border-radius: 50%;
}

/* ── Pulsing ring ────────────────────────────────────────────────────────── */

.ehc-hotspot-pulse {
  position:     absolute;
  inset:        0;
  border-radius: 50%;
  background:   rgba(255, 255, 255, 0.35);
  animation:    ehc-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes ehc-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(2);   opacity: 0;   }
  100% { transform: scale(2);   opacity: 0;   }
}

/* ── Dot / icon ──────────────────────────────────────────────────────────── */

.ehc-hotspot-dot {
  position:         relative;
  width:            28px;
  height:           28px;
  border-radius:    50%;
  background:       rgba(255, 255, 255, 0.92);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       0 2px 10px rgba(0, 0, 0, 0.35);
  transition:       background 0.2s ease, transform 0.2s ease;
  flex-shrink:      0;
}

.ehc-hotspot:hover .ehc-hotspot-dot,
.ehc-hotspot[aria-expanded="true"] .ehc-hotspot-dot {
  background:  #ffffff;
  transform:   scale(1.15);
}

.ehc-hotspot-dot svg {
  width:  14px;
  height: 14px;
  color:  #222222;
  display: block;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */

.ehc-hotspot-tooltip {
  position:         absolute;
  bottom:           calc(100% + 12px);
  left:             50%;
  transform:        translateX(-50%) translateY(6px);
  min-width:        180px;
  max-width:        260px;
  background:       rgba(15, 15, 15, 0.92);
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color:            #ffffff;
  border-radius:    10px;
  padding:          12px 16px;
  pointer-events:   none;
  opacity:          0;
  transition:       opacity 0.25s ease, transform 0.25s ease;
  box-shadow:       0 8px 32px rgba(0, 0, 0, 0.4);
  z-index:          20;
  text-align:       left;
  white-space:      normal;
}

/* Small arrow pointing down from tooltip. */
.ehc-hotspot-tooltip::after {
  content:      '';
  position:     absolute;
  bottom:       -7px;
  left:         50%;
  transform:    translateX(-50%);
  border-width: 7px 6px 0;
  border-style: solid;
  border-color: rgba(15, 15, 15, 0.92) transparent transparent;
}

/* Show tooltip when hotspot is expanded. */
.ehc-hotspot[aria-expanded="true"] .ehc-hotspot-tooltip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Tooltip positioned BELOW hotspot when it is near the top of the slide. */
.ehc-hotspot.ehc-tip-below .ehc-hotspot-tooltip {
  bottom: auto;
  top:    calc(100% + 12px);
  transform: translateX(-50%) translateY(-6px);
}
.ehc-hotspot.ehc-tip-below[aria-expanded="true"] .ehc-hotspot-tooltip {
  transform: translateX(-50%) translateY(0);
}
.ehc-hotspot.ehc-tip-below .ehc-hotspot-tooltip::after {
  bottom: auto;
  top:    -7px;
  border-width: 0 6px 7px;
  border-color: transparent transparent rgba(15, 15, 15, 0.92);
}

/* Tooltip typography. */
.ehc-hotspot-title {
  display:       block;
  font-size:     0.85rem;
  font-weight:   700;
  line-height:   1.3;
  margin-bottom: 4px;
  color:         #ffffff;
}

.ehc-hotspot-body {
  margin:      0;
  font-size:   0.78rem;
  line-height: 1.5;
  color:       rgba(255, 255, 255, 0.82);
}

/* ── Responsive / touch ──────────────────────────────────────────────────── */

/* On small screens, keep tooltips fully inside the slide. */
@media (max-width: 480px) {
  .ehc-hotspot-tooltip {
    min-width: 140px;
    max-width: 200px;
  }
}

/* ==========================================================================
   NEW FEATURE A — 🔢 Slide Counter
   ==========================================================================
   Absolutely positioned over the carousel wrapper (position:relative).
   Five position variants driven by modifier classes from PHP.
   Font uses tabular-nums so digits don't jump width during transitions.
   ========================================================================== */

.ehc-counter {
  position:            absolute;
  z-index:             12;
  padding:             6px 14px;
  font-size:           0.9rem;
  font-weight:         700;
  color:               #ffffff;
  letter-spacing:      0.1em;
  font-variant-numeric: tabular-nums;
  pointer-events:      none;
  /* Subtle glass pill background. */
  background:          rgba(0, 0, 0, 0.35);
  backdrop-filter:     blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:       20px;
  /* Smooth transition when counter updates. */
  transition:          opacity 0.3s ease;
}

.ehc-counter--top-left      { top: 20px; left: 20px; }
.ehc-counter--top-right     { top: 20px; right: 20px; }
.ehc-counter--bottom-left   { bottom: 48px; left: 20px; }
.ehc-counter--bottom-right  { bottom: 48px; right: 20px; }
.ehc-counter--bottom-center {
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
}

/* Counter fade-in on update (driven by JS class toggle). */
.ehc-counter.ehc-counter-updating {
  opacity: 0;
}

/* ==========================================================================
   NEW FEATURE B — 🔤 Text Scramble
   ==========================================================================
   JS manipulates textContent directly — no layout changes needed.
   The only CSS is a monospace-friendly stack to prevent width jitter
   during the scramble phase, plus a min-height to prevent collapse.
   ========================================================================== */

.ehc-slide-title[data-scrambling="true"] {
  /* Monospace during scramble prevents line-length jumping. */
  font-family: 'Courier New', Courier, monospace;
  min-height: 1em;
}

/* ==========================================================================
   NEW FEATURE C — 🌊 Click Ripple Wave
   ==========================================================================
   JS creates .ehc-ripple-ring divs at the click position inside .ehc-swiper.
   Each ring starts at scale(0) and expands to scale(1) while fading out.
   Multiple rings fire with staggered delays for a shockwave feel.
   ========================================================================== */

@keyframes ehc-ripple-expand {
  0% {
    transform: scale(0);
    opacity:   0.75;
  }
  100% {
    transform: scale(1);
    opacity:   0;
  }
}

.ehc-ripple-ring {
  position:       absolute;
  border-radius:  50%;
  border:         2px solid rgba(255, 255, 255, 0.6); /* overridden by JS inline style */
  pointer-events: none;
  z-index:        20;
  transform:      scale(0);
  animation:      ehc-ripple-expand 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  box-shadow:     0 0 12px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Mouse Wheel Navigation — Visual Feedback
   ==========================================================================
   Two elements:
   1. .ehc-wheel-active  — modifier class on the wrapper while cursor is
      inside. Used to show a custom cursor with scroll arrows.
   2. .ehc-wheel-hint    — temporary animated pill injected by JS on the
      first hover of the session.
   ========================================================================== */

/* ── 1. Custom cursor while hovering a wheel-enabled carousel ─────────────
   Uses cursor: ns-resize (↕) for vertical, ew-resize (↔) for horizontal.
   JS adds .ehc-wheel-active to the wrapper; we target the swiper inside it
   so the cursor only changes over the actual slide area, not arrows/dots.
   ─────────────────────────────────────────────────────────────────────── */

.ehc-wheel-active .ehc-swiper {
  /* ↕ arrows signal vertical-scroll navigation */
  cursor: ns-resize;
}

/* Horizontal / both directions → left-right resize arrows */
.ehc-wheel-active[data-ehc-config*='"wheelDirection":"horizontal"'] .ehc-swiper,
.ehc-wheel-active[data-ehc-config*='"wheelDirection":"both"'] .ehc-swiper {
  cursor: ew-resize;
}

/* Keep the default pointer on interactive elements inside the swiper. */
.ehc-wheel-active .swiper-button-prev,
.ehc-wheel-active .swiper-button-next,
.ehc-wheel-active .swiper-pagination,
.ehc-wheel-active .ehc-slide-btn,
.ehc-wheel-active .ehc-hotspot,
.ehc-wheel-active .ehc-slide-cover-link {
  cursor: pointer;
}

/* ── 2. Scroll hint pill ──────────────────────────────────────────────────
   Starts invisible (opacity 0, translateY 8px), animates to visible when
   JS adds .ehc-wheel-hint--visible, then JS removes the class to fade out.
   ─────────────────────────────────────────────────────────────────────── */

.ehc-wheel-hint {
  position:         absolute;
  bottom:           80px;
  left:             50%;
  transform:        translateX(-50%) translateY(8px);
  z-index:          50;
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  padding:          8px 18px;
  border-radius:    40px;
  /* Glassmorphism pill */
  background:       rgba(0, 0, 0, 0.55);
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:            #ffffff;
  font-size:        0.78rem;
  font-weight:      600;
  letter-spacing:   0.06em;
  white-space:      nowrap;
  pointer-events:   none;
  /* Start invisible */
  opacity:          0;
  transition:       opacity 0.4s ease, transform 0.4s ease;
  box-shadow:       0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Visible state — added by JS */
.ehc-wheel-hint--visible {
  opacity:    1;
  transform:  translateX(-50%) translateY(0);
}

/* Icon: larger, animated bounce */
.ehc-wheel-hint-icon {
  font-size:   1rem;
  animation:   ehc-hint-bounce 0.9s ease-in-out infinite alternate;
  display:     inline-block;
}

@keyframes ehc-hint-bounce {
  from { transform: translateY(0);    }
  to   { transform: translateY(-4px); }
}

.ehc-wheel-hint-text {
  opacity: 0.88;
}

/* ── Reduced motion: disable pulse & tooltip slide animation ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .ehc-hotspot-pulse {
    animation: none;
  }
  .ehc-hotspot-tooltip,
  .ehc-hotspot[aria-expanded="true"] .ehc-hotspot-tooltip,
  .ehc-hotspot.ehc-tip-below .ehc-hotspot-tooltip,
  .ehc-hotspot.ehc-tip-below[aria-expanded="true"] .ehc-hotspot-tooltip {
    transition: none;
    transform:  translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable ripple animation. */
  .ehc-ripple-ring { display: none; }
  /* Disable wheel hint bounce. */
  .ehc-wheel-hint-icon { animation: none; }
  .ehc-wheel-hint { transition: none; }
}
  /* Keep scramble but skip the random phase — show final text instantly. */
  .ehc-slide-title[data-scrambling="true"] { font-family: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .ehc-slide-title,
  .ehc-slide-description,
  .ehc-slide-btn {
    transition: none;
    transition-delay: 0s;
    opacity: 1;
    transform: none;
  }

  .swiper-slide-prev .ehc-slide-title,
  .swiper-slide-prev .ehc-slide-description,
  .swiper-slide-prev .ehc-slide-btn,
  .swiper-slide-next .ehc-slide-title,
  .swiper-slide-next .ehc-slide-description,
  .swiper-slide-next .ehc-slide-btn {
    opacity: 1;
    transform: none;
  }

  .ehc-slide-btn {
    transition: none;
  }
}