/* ============================================================================
   CAROUSEL STYLES — Hero + Generic Swiper Carousels
   ============================================================================
   This file styles two distinct carousel types on the site:
     1. HERO CAROUSEL (.hero-carousel)   — full-viewport-height cover slides
        with fade transitions, used at the top of the page.
     2. GENERIC CAROUSEL (.carousel-outer-wrapper) — a horizontally scrolling
        carousel with prev/next arrow navigation, used elsewhere on the page.
   Both carousels are powered by Swiper.js; classes prefixed `swiper-` are
   Swiper's own runtime classes (added/toggled by its JS), not custom classes.
   ============================================================================ */


/* ----------------------------------------------------------------------
   1. OUTER WRAPPER
   Breaks the carousel out of the normal content column to span the full
   browser width, regardless of the theme's max-width content constraint.
   ---------------------------------------------------------------------- */
.carousel-block-wrapper {
  grid-column: full;   /* full-bleed if the theme uses CSS grid layout */
  width: 100vw;        /* full-bleed fallback for non-grid layouts */
  margin: 0;
  position: relative;  /* positioning context for .carousel-controls-container */
  overflow: hidden;    /* clips slides sliding in/out during transitions */
}


/* ----------------------------------------------------------------------
   2. CAROUSEL / SLIDE HEIGHT — the main height control
   Sets the carousel to 70% of the viewport height. This is the single
   value to change if you want the whole hero shorter or taller — every
   child element below (.swiper-slide, .wp-block-cover) just inherits
   100% of whatever height is set here, so there's only one number to
   touch for the overall carousel height.
   `!important` is required because Swiper's JS applies inline `height`
   styles directly to these elements at runtime; without `!important`
   our CSS would lose to Swiper's own inline styles.
   ---------------------------------------------------------------------- */
.carousel-swiper,
.carousel-swiper .swiper-slide {
  width: 100%;
  height: 70vh !important;   /* <- adjust this to resize the whole hero */
}


/* ----------------------------------------------------------------------
   3. HERO SLIDE BASE STYLING + FADE TRANSITION
   Hero slides are stacked with `position: absolute` (rather than side-
   by-side) because this carousel uses Swiper's fade effect: all slides
   occupy the same space and crossfade via opacity, instead of sliding
   horizontally.
   ---------------------------------------------------------------------- */
.hero-carousel .swiper-slide {
  position: absolute;        /* stack all slides on top of one another */
  width: 100% !important;    /* matches Swiper's own inline width so its
                                 internal fade/visibility math stays in
                                 sync with actual rendered slide width */
  height: 100% !important;   /* fills the 70vh set on .carousel-swiper above */
  min-height: 450px;         /* floor so the hero never gets too short on
                                 small viewports where 70vh would be tiny */
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 !important;

  /* Fade transition: every slide starts invisible and non-interactive.
     Swiper toggles the .swiper-slide-active class (below) to fade the
     current slide in. `pointer-events: none` stops users from clicking
     links/buttons on slides that are hidden behind the active one.
     `!important` is required to beat Swiper's own inline opacity style
     on non-active slides. */
  opacity: 0 !important;
  transition: opacity 0.46s ease-in-out !important;
  pointer-events: none;
}

/* The currently-visible slide, as marked by Swiper's JS */
.hero-carousel .swiper-slide-active {
  opacity: 1 !important;
  pointer-events: auto;   /* re-enable clicks/links once visible */
}


/* ----------------------------------------------------------------------
   4. COVER BLOCK FILL
   Makes the WordPress "Cover" block (background image + overlay) fill
   its parent slide completely, so the background image always covers
   the full slide area regardless of the slide's height.
   ---------------------------------------------------------------------- */
.hero-carousel .wp-block-cover {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}


/* ----------------------------------------------------------------------
   5. TEXT/CTA OVERLAY CARD — Generic carousel variant
   The frosted-glass content card that sits on top of each slide's
   background image, containing the heading/paragraph/buttons.
   NOTE: this rule and the one in section 6 below both match hero slides
   too (since .hero-carousel is inside .carousel-swiper). Where both
   rules set the same property, the one that appears LATER in the file
   wins — so `top: 12em` from section 6 overrides `top: 8em` here for
   hero slides specifically. This rule's `top: 8em` therefore only
   effectively applies to non-hero (.carousel-swiper but not
   .hero-carousel) slides. Left as-is since the current visual result
   is correct — flagged here so it's not mistaken for a bug later.
   ---------------------------------------------------------------------- */
.carousel-swiper .wp-block-cover__inner-container {
  position: relative;
  top: 8em;
  z-index: 10;              /* sits above the cover's background image/dim */
  width: 100%;
  max-width: calc(var(--max-width) / 2);  /* card never exceeds half the
                                              theme's max content width */
  margin-left: var(--side-margin);

  padding: 3em 2em;
  padding-bottom: 3em;
  color: #fff;

  /* Frosted-glass effect: semi-transparent dark background + blur of
     whatever is behind the card (the slide's background image). */
  background: rgba(23, 32, 36, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);  /* Safari support */
  border-radius: var(--borderRadius);
}

/* Alternate every other slide's card to the right side, for visual
   rhythm as the user pages through the GENERIC carousel specifically.
   (The hero carousel no longer alternates — see section 7 below.) */
.carousel-swiper .wp-block-cover:nth-child(2n) .wp-block-cover__inner-container {
  margin-left: auto;
  margin-right: var(--side-margin);
  justify-content: flex-end;
}


/* ----------------------------------------------------------------------
   6. TEXT/CTA OVERLAY CARD — Hero carousel variant
   Same frosted-glass card as section 5, but hero-specific: positioned
   lower (`top: 12em`, vs 8em above) since hero slides are taller.
   Left/right alignment is NOT set here — it's handled globally for all
   hero slides in section 7 below (every hero slide is pinned right).
   ---------------------------------------------------------------------- */
.hero-carousel .wp-block-cover__inner-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: calc(var(--max-width) / 2);
  padding: 3em 2em;
  color: #fff;
  background: rgba(23, 32, 36, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--borderRadius);
  top: 12em;   /* vertical offset from the top of the slide — adjust this
                  if the card position looks off after changing slide height */
}


/* ----------------------------------------------------------------------
   7. HERO SLIDE CONTENT ALIGNMENT — always right
   Every hero slide's content card is pinned to the right side,
   regardless of slide position (no left/right alternation).
   ---------------------------------------------------------------------- */
.hero-carousel .swiper-slide {
  justify-content: flex-end !important;   /* all slides: content -> right */
}

.hero-carousel .swiper-slide .wp-block-cover__inner-container {
  margin-left: auto !important;
  margin-right: var(--side-margin) !important;
}


/* ----------------------------------------------------------------------
   8. CAROUSEL CONTROLS CONTAINER (pagination dots wrapper)
   Positions the pagination dots at the bottom-center of the carousel,
   overlaid on top of the slides.
   ---------------------------------------------------------------------- */
.carousel-controls-container {
  position: absolute;
  bottom: 3rem;              /* sits near the bottom of the carousel */
  left: 50%;
  transform: translateX(-50%);  /* true horizontal centering */
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;      /* container itself is click-through... */
  width: auto;
}

.carousel-pagination-custom {
  display: flex;
  justify-content: center;
  gap: 12px;
  pointer-events: auto;      /* ...but the dots themselves are clickable */
}

/* Individual pagination dot (inactive state) */
.carousel-pagination-custom .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  background: none;          /* hollow circle when inactive */
  opacity: 0.5;
  cursor: pointer;
  border: 1px solid var(--kiem);   /* theme accent color for the outline */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Active pagination dot — filled in and slightly enlarged */
.carousel-pagination-custom .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--kiem);
  transform: scale(1.2);
}


/* ----------------------------------------------------------------------
   9. ANTI-FOUC SAFEGUARD (Flash of Unstyled Content)
   On a full page reload, there's a brief window between the HTML
   painting and Swiper's JS finishing initialization (adding the
   .swiper-initialized class and toggling .swiper-slide-active). During
   that gap, the opacity-based fade system in section 3 may not have
   applied yet, which can let all 4 hero slides flash visible at once
   before Swiper takes over.
   This rule hides every slide except the first OUTRIGHT (via
   display:none, not opacity) as long as the wrapper does NOT yet have
   Swiper's .swiper-initialized class. The instant Swiper adds that
   class, this rule stops matching and the normal fade system (sections
   3–4) takes over seamlessly — no JS changes required, pure CSS fix.
   ---------------------------------------------------------------------- */
.carousel-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none !important;
}


/* ============================================================================
   GENERIC CAROUSEL
   A separate, simpler carousel pattern used elsewhere on the page: slides
   sit side-by-side (not stacked/faded like the hero) and are navigated
   with prev/next arrow buttons rather than pagination dots.
   ============================================================================ */

.carousel-outer-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 5rem;   /* reserves space below the slides, e.g. for
                              pagination or spacing before the next section */
}

.generic-carousel-inner {
  width: 100%;
}

/* Slides size to their own content rather than being stretched to a
   fixed height/width — this carousel is content-driven, not viewport-
   driven like the hero. */
.carousel-outer-wrapper .swiper-slide {
  height: auto;
  box-sizing: border-box;
  width: auto;
}

.carousel-outer-wrapper .swiper-wrapper {
  display: flex !important;
  gap: 0 !important;   /* spacing between slides is handled by slide
                           padding/margin elsewhere, not by this gap */
}

/* Mobile fallback: force each slide to take the full row width so only
   one slide is visible at a time on small screens. */
@media (max-width: 767px) {
  .carousel-outer-wrapper .swiper-slide {
    width: 100% !important;
  }

  .carousel-outer-wrapper.is-disabled .swiper-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ----------------------------------------------------------------------
   10. GENERIC CAROUSEL NAVIGATION (prev/next arrows)
   Arrows are positioned OUTSIDE the carousel's visible content area
   (negative left/right offsets), vertically centered, within a wrapper
   that's centered and capped at the theme's max content width.
   ---------------------------------------------------------------------- */
.carousel-navigation-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: var(--max-width);
  transform: translate(-50%, -50%);   /* centers the wrapper both axes */
  pointer-events: none;   /* wrapper itself doesn't block clicks on
                              content beneath it; only the buttons do */
  z-index: 30;
}

/* Ensures Swiper's default pagination (if used elsewhere) renders as a
   block-level element rather than being hidden/inline by a conflicting
   theme style. */
.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: block;
}

.carousel-navigation-outer .swiper-button-prev,
.carousel-navigation-outer .swiper-button-next {
  width: 6rem;
  height: 4rem;
  margin: 0;
  /* background: rgba(255,255,255,0.1); */  /* kept for reference — was
     likely used for a solid button background before switching to the
     blur-only look below; left commented intentionally */
  backdrop-filter: blur(5px);
  border-radius: 2rem;
  color: #fff;
  pointer-events: auto;   /* buttons ARE clickable despite wrapper above */
}

.carousel-navigation-outer .swiper-button-prev {
  left: -6rem;   /* pushed outside the carousel's left edge */
}

.carousel-navigation-outer .swiper-button-next {
  right: -6rem;  /* pushed outside the carousel's right edge */
}

/* Swiper's default prev/next icons are replaced with a custom SVG arrow
   via ::after, since Swiper's built-in icon font isn't loaded/used here. */
.carousel-navigation-outer .swiper-button-prev::after,
.carousel-navigation-outer .swiper-button-next::after {
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../img/icons/arrow.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Next button reuses the same arrow SVG, just mirrored horizontally,
   instead of requiring a second (right-pointing) arrow asset. */
.carousel-navigation-outer .swiper-button-next::after {
  transform: scaleX(-1);
}