/*
 * Layout for the jQuery sliders that does not depend on their JS having run.
 *
 * jquery.main.js loads deferred, so the page first paints with every slider in
 * its raw layout and then jumps as each one initialises. Measured on the
 * homepage: the hero banner went from 0px to 630px tall, the trainers row from
 * all trainers stacked (~3400px) to one row, and the testimonials from every
 * quote stacked to one. main.css is prebuilt (see CLAUDE.md), hence this file.
 *
 * Rules scoped with :not(.slick-initialized) only apply until slick takes over.
 */

/*
 * Hero. The slides are stacked in one grid cell, so the banner is always as
 * tall as its tallest slide, before and after the fade gallery starts. Below
 * 992px the headline box sits under the image and wraps differently per slide,
 * and the gallery's autoHeight used to resize the banner on every rotation,
 * shifting the whole page 50-75px every 3 seconds; autoHeight is now off in
 * jquery.main.js. The dark background fills under a shorter slide's headline.
 */
.fade-slider .slideset {
  display: grid;
}
.fade-slider .slide {
  grid-area: 1 / 1;
  position: relative;
}
@media (max-width: 991px) {
  .fade-slider .slide {
    background: #222;
  }
}
.fade-slider:not(.gallery-js-ready) .slide + .slide {
  opacity: 0;
  visibility: hidden;
}

/* Trainers: one row of 1 / 2 / 3, matching the slick breakpoints. */
.team-slider:not(.slick-initialized) {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.team-slider:not(.slick-initialized) .slide {
  flex: 0 0 100%;
}
@media (min-width: 768px) {
  .team-slider:not(.slick-initialized) .slide {
    flex-basis: 50%;
  }
}
@media (min-width: 992px) {
  .team-slider:not(.slick-initialized) .slide {
    flex-basis: 33.3333%;
  }
}

/* Testimonials: first quote only, plus room for the dots slick adds. */
.slider:not(.slick-initialized) .slide + .slide {
  display: none;
}
.quote-block .slider:not(.slick-initialized) {
  padding-bottom: 28px;
}
@media (max-width: 767px) {
  .quote-block .slider:not(.slick-initialized) {
    padding-bottom: 9px;
  }
}

/* Service boxes become a one-at-a-time slider below 768px. */
@media (max-width: 767px) {
  .service-gallery:not(.slick-initialized) .slide + .slide {
    display: none;
  }
}