/*
 * Reveal overrides for the static (no-Elementor-JS) rebuild.
 *
 * The original relies on Elementor's frontend JavaScript to reveal elements that
 * start hidden for entrance animations (class `elementor-invisible`,
 * visibility:hidden) and to initialise the Swiper carousel. Since we serve
 * static HTML/CSS with no Elementor runtime, we force the ANIMATION END STATE:
 * everything visible, opacity 1, no transform. This yields exactly the fully-
 * loaded look of the original without running any scripts.
 */

/* 1) Entrance-animation elements: show them (end state of the fade/grow).
 *    The original reveals these on scroll via Elementor JS; we run none, so we
 *    force the fully-revealed END STATE for every animation start-state hook
 *    Elementor uses: the `elementor-invisible` class (visibility:hidden), the
 *    `.animated` / `animated-*` utility classes (opacity:0 + transform), widgets
 *    carrying a `data-settings` animation, and any element left with an INLINE
 *    opacity:0. Verified against the original's post-scroll state: 0 faded els. */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

/* Elementor animation utility classes set opacity:0 initially — force visible. */
.elementor-widget.animated,
.animated,
[class*="animated-"],
.elementor-element[data-settings*="animation"],
.elementor-widget[data-settings*="animation"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Any element left with an INLINE opacity:0 (Elementor animation start-state
 * written to the style attribute). This targets only the `style=` attribute, so
 * it never touches the hvr-* hover-effect pseudo-elements (those set opacity via
 * stylesheet rules on :before/:after, not inline styles). */
[style*="opacity:0"],
[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* 2) Swiper carousels: without JS, lay slides out as a horizontal row matching
 *    the original's slides_to_show (3 across desktop). This reproduces the
 *    carousel's initial on-screen state. */
.swiper.elementor-loop-container {
  overflow: hidden !important;
}
.swiper.elementor-loop-container .swiper-wrapper {
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px;
  align-items: stretch;
}
.swiper.elementor-loop-container .swiper-slide {
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 calc((100% - 40px) / 3) !important; /* 3 across desktop */
  width: calc((100% - 40px) / 3) !important;
  max-width: calc((100% - 40px) / 3) !important;
  height: auto;
}
@media (max-width: 1024px) {
  .swiper.elementor-loop-container .swiper-slide {
    flex-basis: calc((100% - 20px) / 2) !important;
    width: calc((100% - 20px) / 2) !important;
    max-width: calc((100% - 20px) / 2) !important;
  }
}
@media (max-width: 767px) {
  .swiper.elementor-loop-container .swiper-wrapper { flex-wrap: wrap !important; }
  .swiper.elementor-loop-container .swiper-slide {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Hide the extra swiper navigation/pagination that needs JS. */
.swiper.elementor-loop-container ~ .elementor-swiper-button,
.elementor-loop-container .swiper-pagination { display: none !important; }

/* 2b) Video embeds. The original relies on Elementor JS to inject the <iframe>
 *     and to set the wrapper's --video-aspect-ratio. We inject the iframe
 *     statically (lib/videoEmbed.ts); this gives the wrapper a real 16:9 box so
 *     the embed shows at the same height as the original instead of collapsing. */
.elementor-widget-video .elementor-wrapper {
  --video-aspect-ratio: 1.7777 !important;
  aspect-ratio: 1.7777 !important;
  position: relative;
  width: 100%;
}
.elementor-widget-video .elementor-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.elementor-widget-video .elementor-video iframe,
.elementor-widget-video .elementor-video video {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
  background: #000;
}

/* 2c) Audio players. The original's Unlimited-Elements audio widget builds its
 *     UI with JS over a controls-less <audio> (invisible statically). We add the
 *     `controls` attribute (lib/videoEmbed.ts embedAudio) so the browser's own
 *     player shows; make it fill the card so each lecture has a real, playable
 *     bar instead of an empty box. */
.ue-audio-player,
.ue-audio-player__wrapper,
.ue-audio-controls,
.ue-audio-player__container,
.ue-audio-player__container--controls {
  display: block !important;
  width: 100% !important;
  min-width: 0;
}
audio.ue-audio-player-element {
  display: block !important;
  width: 100% !important;
  min-width: 200px;
  min-height: 40px;
  margin-top: 8px;
}

/* 3) The marquee (scrolling article strip) animates via JS/CSS keyframes; keep
 *    its items visible and let it wrap so nothing is clipped when static. */
.ep-marquee, [class*="marquee"] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 4) Safety: any element left hidden purely for animation becomes visible. */
[data-settings*="animation"] {
  visibility: visible !important;
  opacity: 1 !important;
}