/* ==========================================================================
   Section pages — clone-side rules for behaviour the source got from plugins.
   The source ships Slick (https://github.com/kenwheeler/slick); the clone
   drives the same DOM (see useSubSliders.ts), so only the layout Slick's own
   stylesheet provided has to be restated here. Swiper's stand-in lives in the
   generated gyrosoft-sub.css, where the source loaded its vendor files.
   ========================================================================== */

/* main slider: Slick's `fade: true` shows one slide at a time */
.gyro .slider-wrap.is-enhanced .main-slider {
  position: relative;
}

.gyro .slider-wrap.is-enhanced .main-slider > .slick-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* the first slide stays in flow so the wrapper keeps the 63.25% aspect */
.gyro .slider-wrap.is-enhanced .main-slider > .slick-slide:first-child {
  position: relative;
}

.gyro .slider-wrap.is-enhanced .main-slider > .slick-slide.slick-active {
  opacity: 1;
  pointer-events: auto;
}

/* nav slider: Slick's `vertical: true, slidesToShow: 4` column of thumbnails */
.gyro .slider-wrap .nav-slider {
  display: flex;
  flex-direction: column;
}

.gyro .slider-wrap .nav-slider > .slick-slide {
  margin: 0;
}

.gyro .slider-wrap .nav-slider > .slick-slide:not(:last-child) {
  margin-bottom: 8.8%;
}

.gyro .slider-wrap .nav-slider > .slick-slide.slick-active .thumb_img {
  opacity: 1;
}

.gyro .slider-wrap .nav-slider > .slick-slide:not(.slick-active) .thumb_img {
  opacity: 0.55;
}

/* dots: Slick's stylesheet positions the list, the source restyles the bullets */
.gyro .slider-wrap .dots-wrap .slick-dots {
  display: flex;
  margin: 0;
  padding: 10px;
  list-style: none;
}

/* `.ce_item` entrance: the source reveals these with GSAP (`autoAlpha` + a 30px
   rise) 0.5s each, 200ms apart, when the `.common_effect` container enters. */
.gyro .common_effect .ce_item {
  transform: translateY(30px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.gyro .common_effect .ce_item.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .gyro .common_effect .ce_item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* The source's article template prints an attachment `<ul>` even when the post
   has no files, then fixes it up inline:
   `if ($(".board-view-file--fc li").length <= 0) $(".board-view-file--fc").css('border-bottom','0')`.
   `<script>` inside injected markup never runs, so the same condition is stated
   declaratively — without it every file-less article is 1px too tall. The
   selector repeats the source's full ancestry because its own rule carries four
   class levels ((0,4,0)); `:not(:has(li))` alone would lose the cascade. */
.gyro .board-wrap--fc .board-view--fc .board-view-file--fc:not(:has(li)) {
  border-bottom: 0;
}