/* ==========================================================================
   Home banner carousel
   --------------------------------------------------------------------------
   Restores the original homepage slider (full-width banner + round
   thumbnail buttons joined by a line). The base look still comes from
   style.css (".banner-home .slider-for / .slider-nav") and the behaviour
   (fade, ~6s autoplay timer, pause on hover, thumb sync) from
   custom.min.js. This file only adds what the static site needs on top.
   ========================================================================== */

.banner-home .bannergroup {
  position: relative;
  z-index: 0;
}

/* Every banner sits in the same 3:1 box (artwork is 3000x1000), so the
   page never jumps between slides even if a banner is a slightly
   different size. */
.banner-home .slider-for .banneritem img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* Before slick starts: show only the first banner, hide the controls. */
.banner-home .slider-for:not(.slick-initialized) .banneritem + .banneritem {
  display: none;
}
.banner-home .slider-nav:not(.slick-initialized) {
  visibility: hidden;
}

/* Stacking: banners, then the joining line, then the round buttons. */
.banner-home .slider.slider-for {
  z-index: 0;
}
.banner-home .slider.slider-nav {
  z-index: 2;
  pointer-events: none; /* the nav strip spans the full width ... */
}
.banner-home .slider.slider-nav .thumb {
  pointer-events: auto; /* ... but only the buttons themselves are clickable */
}
/* slick clips its list box; the buttons never scroll, so let their ring,
   shadow and label pills show in full instead of being cut at the edges. */
.banner-home .slider.slider-nav .slick-list {
  overflow: visible;
}

/* Button size: smaller than the original 65px circles so they don't
   crowd the banner artwork. */
.banner-home .slider.slider-nav .slick-track .thumb.slick-slide {
  width: 64px !important;
  margin: 0 16px !important;
}
.banner-home .slider.slider-nav .slick-track .thumb.slick-slide .img {
  width: 44px !important;
  height: 44px;
  padding: 10px;
}

/* Icon inside the round button (Font Awesome 4.7 is already loaded). */
.banner-home .slider-nav .thumb .img i {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: #a72c32;
}
.banner-home .slider-nav .thumb .img i.fa-mobile {
  font-size: 24px; /* this glyph is drawn narrow, so give it a bit more size */
}
.banner-home .slider.slider-nav .slick-track .thumb.slick-slide.slick-current.slick-active .img i {
  color: #fff;
}

/* Thin white ring, so the active (red) button still stands out when it
   sits on red artwork, and white buttons still show on white artwork. */
.banner-home .slider.slider-nav .slick-track .thumb.slick-slide .img {
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Overlay position: tucked a little lower than the original so the
   buttons clear the notice text on the banners. */
.banner-home .slider.slider-nav {
  bottom: 8px;
  transform: none;
}

/* Labels: small light pill so they read on light banners and photos alike.
   Keep labels short (1-2 words) so they stay on one line. */
.banner-home .slider.slider-nav .slick-track .thumb.slick-slide .thumb-desc {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 108px;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: #444;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Line joining the first and last button. Its left/right/top are set by
   home-carousel.js; the red fill inside is driven by custom.min.js. */
.banner-home .bannergroup .slider-progress {
  width: auto !important;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  margin: 0;
  z-index: 1;
  visibility: hidden;
}
.banner-home .bannergroup .slider-progress.is-ready {
  visibility: visible;
}

/* Below 1200px the banner gets too short for an overlay (the buttons would
   cover the notice text), so the buttons move to a strip under it. */
@media screen and (max-width: 1199px) {
  /* strip colour sits on the group (behind the line), not on the nav */
  .banner-home .bannergroup {
    background: #efece6;
  }
  .banner-home .slider.slider-nav {
    position: relative;
    bottom: auto;
    transform: none;
    padding: 12px 16px 8px;
  }
  .banner-home .slider.slider-nav .slick-track .thumb.slick-slide {
    width: 84px !important;
    margin: 0 6px !important;
  }
  .banner-home .slider.slider-nav .slick-track .thumb.slick-slide .thumb-desc {
    left: 0;
    transform: none;
    width: auto;
    max-width: none;
    margin-top: 6px;
    padding: 0;
    background: none;
    box-shadow: none;
    font-weight: normal;
    color: #333;
    white-space: normal;
  }
  .banner-home .bannergroup .slider-progress {
    background: rgba(0, 0, 0, 0.15);
  }
}