/*
 * Hibot Slider Manager — sliders on the site.
 *
 * Home page hero: the theme styles it (.fv, .fv__txt, .fv__txt1, .fv__txt2,
 * .fv img, .fv video). This file only adds the presets that differ from the
 * theme: the "medium" size and dark layer are the theme's own and add no
 * class.
 *
 * Blocks (shortcode, template action): styled here alone. A hero
 * (.hb-sl-hero) looks like the home page hero, a gallery (.hb-sl-gallery)
 * like the product galleries. Selectors are specific enough to beat the
 * theme's styles for headings and images inside page content.
 */

/* -------------------------------------------------------------------------
 * Hero block
 * ---------------------------------------------------------------------- */

.hb-sl-hero {
  position: relative;
  overflow: hidden;
}
.hb-sl-hero.hb-sl-height-home { height: 81rem; }
.hb-sl-hero.hb-sl-height-large { height: 60rem; }
.hb-sl-hero.hb-sl-height-medium { height: 45rem; }

@media (max-width: 767px) {
  .hb-sl-hero.hb-sl-height-home { height: 50rem; }
  .hb-sl-hero.hb-sl-height-large { height: 40rem; }
  .hb-sl-hero.hb-sl-height-medium { height: 30rem; }
}

.hb-sl-hero .swiper { height: 100%; }
.hb-sl-hero .swiper-slide {
  position: relative;
  overflow: hidden;
}
.hb-sl.hb-sl-hero .swiper-slide picture,
.hb-sl.hb-sl-hero .swiper-slide img,
.hb-sl.hb-sl-hero .swiper-slide video {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.hb-sl-hero .hb-sl__text {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 6rem 8.9rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: left;
}
.hb-sl-hero .hb-sl__text--center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hb-sl-hero .hb-sl__text--left { justify-content: flex-start; }
.hb-sl-hero .hb-sl__text--left::before {
  content: "";
  flex: 0 0 30%;
}

.hb-sl-hero .hb-sl__text .hb-sl__title {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.26em;
  color: #fff;
}
/* Page content headings have decorative lines (theme: .content h2::before/::after). */
.hb-sl-hero .hb-sl__text .hb-sl__title::before,
.hb-sl-hero .hb-sl__text .hb-sl__title::after { content: none; }
.hb-sl-hero .hb-sl__text .hb-sl__subtitle {
  margin: 0.6em 0 0;
  padding: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

.hb-sl-hero .swiper-pagination { bottom: 2rem; }
.hb-sl-hero .swiper-pagination-bullet { background-color: #fff; }

@media (max-width: 767px) {
  .hb-sl-hero .hb-sl__text,
  .hb-sl-hero .hb-sl__text--center {
    justify-content: flex-end;
    align-items: flex-start;
    padding: 4rem 1rem 5.5rem;
    text-align: left;
  }
  .hb-sl-hero .hb-sl__text--left { justify-content: flex-end; }
  .hb-sl-hero .hb-sl__text--left::before { display: none; }
  .hb-sl-hero .hb-sl__text .hb-sl__title {
    font-size: 2rem;
    line-height: 1.5em;
  }
  .hb-sl-hero .hb-sl__text .hb-sl__subtitle { font-size: 1.4rem; }
}

/* -------------------------------------------------------------------------
 * Gallery block: the measures of the theme's product galleries
 * (child-page/service/style.css, .detail__inner .slideshow), so a gallery
 * put in their place looks the same. The photo sits on a dark background,
 * whole; the thumbnails are a column on the right, a row below on phones.
 * ---------------------------------------------------------------------- */

.hb-sl-gallery {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 59.5rem;
}
.hb-sl-gallery .hb-sl-gallery__main {
  width: 46.8rem;
  margin-right: 2rem;
}
.hb-sl-gallery .hb-sl-gallery__main .swiper-slide {
  height: 58.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #37414F;
}
.hb-sl.hb-sl-gallery .swiper-slide img {
  max-width: none;
  margin: 0;
}
.hb-sl-gallery .hb-sl-gallery__main .swiper-slide img {
  width: 100%;
  object-fit: contain;
  opacity: 0;
  transition: all 0.4s;
}
.hb-sl-gallery .hb-sl-gallery__main .swiper-slide-active img { opacity: 1; }

.hb-sl-gallery .hb-sl-gallery__thumbs {
  width: 10rem;
  height: 33rem;
}
.hb-sl-gallery .hb-sl-gallery__thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .hb-sl-gallery .hb-sl-gallery__thumbs .swiper-slide:last-child { margin-bottom: 0 !important; }
  .hb-sl-gallery.hb-sl-thumbs-2 .hb-sl-gallery__thumbs .swiper-wrapper { justify-content: flex-end; }
}
/* Two thumbnails: each as tall as one of three, at the bottom of the column. */
.hb-sl-gallery.hb-sl-thumbs-2 .hb-sl-gallery__thumbs .swiper-slide { height: 10rem !important; }

@media (max-width: 767px) {
  .hb-sl-gallery { flex-direction: column; }
  .hb-sl-gallery .hb-sl-gallery__main {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2rem;
  }
  .hb-sl-gallery .hb-sl-gallery__main .swiper-slide { height: 30rem; }
  .hb-sl-gallery .hb-sl-gallery__main .swiper-slide img { height: 100%; }
  .hb-sl-gallery .hb-sl-gallery__thumbs {
    width: 100%;
    height: auto;
  }
  .hb-sl-gallery .hb-sl-gallery__thumbs .swiper-slide { height: 10rem !important; }
}

/* -------------------------------------------------------------------------
 * Presets (home page hero and shortcode)
 * ---------------------------------------------------------------------- */

/* Title and subtitle sizes (theme: 3rem / 2rem, phones 2rem / 1.4rem). */
.fv .fv__txt.hb-sl-size-s h1,
.hb-sl-hero .hb-sl__text.hb-sl-size-s .hb-sl__title { font-size: 2.4rem; }
.fv .fv__txt.hb-sl-size-s p,
.hb-sl-hero .hb-sl__text.hb-sl-size-s .hb-sl__subtitle { font-size: 1.6rem; }
.fv .fv__txt.hb-sl-size-l h1,
.hb-sl-hero .hb-sl__text.hb-sl-size-l .hb-sl__title { font-size: 4rem; }
.fv .fv__txt.hb-sl-size-l p,
.hb-sl-hero .hb-sl__text.hb-sl-size-l .hb-sl__subtitle { font-size: 2.4rem; }
.fv .fv__txt.hb-sl-size-xl h1,
.hb-sl-hero .hb-sl__text.hb-sl-size-xl .hb-sl__title { font-size: 5.2rem; }
.fv .fv__txt.hb-sl-size-xl p,
.hb-sl-hero .hb-sl__text.hb-sl-size-xl .hb-sl__subtitle { font-size: 2.8rem; }

@media (max-width: 767px) {
  .fv .fv__txt.hb-sl-size-s h1,
  .hb-sl-hero .hb-sl__text.hb-sl-size-s .hb-sl__title { font-size: 1.6rem; }
  .fv .fv__txt.hb-sl-size-s p,
  .hb-sl-hero .hb-sl__text.hb-sl-size-s .hb-sl__subtitle { font-size: 1.2rem; }
  .fv .fv__txt.hb-sl-size-l h1,
  .hb-sl-hero .hb-sl__text.hb-sl-size-l .hb-sl__title { font-size: 2.6rem; }
  .fv .fv__txt.hb-sl-size-l p,
  .hb-sl-hero .hb-sl__text.hb-sl-size-l .hb-sl__subtitle { font-size: 1.6rem; }
  .fv .fv__txt.hb-sl-size-xl h1,
  .hb-sl-hero .hb-sl__text.hb-sl-size-xl .hb-sl__title { font-size: 3.2rem; }
  .fv .fv__txt.hb-sl-size-xl p,
  .hb-sl-hero .hb-sl__text.hb-sl-size-xl .hb-sl__subtitle { font-size: 1.8rem; }
}

/* Dark layer under the text (theme: 50%). */
.fv .fv__txt.hb-sl-overlay-none,
.hb-sl-hero .hb-sl__text.hb-sl-overlay-none { background-color: transparent; }
.fv .fv__txt.hb-sl-overlay-light,
.hb-sl-hero .hb-sl__text.hb-sl-overlay-light { background-color: rgba(0, 0, 0, 0.3); }
.fv .fv__txt.hb-sl-overlay-dark,
.hb-sl-hero .hb-sl__text.hb-sl-overlay-dark { background-color: rgba(0, 0, 0, 0.7); }

/* Without the layer, a soft shadow keeps white text readable on light images. */
.fv .fv__txt.hb-sl-overlay-none h1,
.fv .fv__txt.hb-sl-overlay-none p,
.hb-sl-hero .hb-sl__text.hb-sl-overlay-none .hb-sl__title,
.hb-sl-hero .hb-sl__text.hb-sl-overlay-none .hb-sl__subtitle { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

/*
 * Subtitle in the home page hero: on its own line under the title, aligned
 * with it. (The theme's centered layout, .fv__txt2, is a flex row, and its
 * <p> has a 1rem indent; its own slides have no subtitle.)
 */
.fv .hb-sl-swiper .fv__txt p {
  margin-top: 0.6em;
  padding-left: 0;
}
@media (min-width: 768px) {
  .fv .hb-sl-swiper .fv__txt2 { flex-direction: column; }
  .fv .hb-sl-swiper .fv__txt2 p { text-align: center; }
}

/* Image for phones (<picture>) in the home page hero: fills the slide like a plain image. */
.fv .hb-sl-swiper picture {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * A slide with a link: a transparent link over the whole slide (above the
 * text, below the dots), and a button. On phones the slide fills the screen,
 * so only the button is clickable there.
 */
.hb-sl-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
@media (max-width: 767px) {
  .hb-sl-link { display: none; }
}

.fv .hb-sl-swiper .hb-sl-button,
.hb-sl.hb-sl-hero .hb-sl-button,
.hb-sl.hb-sl-gallery .hb-sl-button {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 2.4rem;
  padding: 1.1rem 2.4rem;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
/* Gallery: on the photo, at the bottom left; the photo has no dark layer, so the button has its own. */
.hb-sl.hb-sl-gallery .hb-sl-button {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  margin: 0;
  background-color: rgba(55, 65, 79, 0.85);
}
/* Pointing at the slide or the button highlights the button. */
.fv .hb-sl-swiper .hb-sl-button:hover,
.hb-sl .hb-sl-button:hover,
.swiper-slide:has(> .hb-sl-link:hover) .hb-sl-button {
  background-color: #fff;
  color: #37414F;
}
.hb-sl-button:focus-visible {
  outline: 3px solid #FF521C;
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .fv .hb-sl-swiper .hb-sl-button,
  .hb-sl.hb-sl-hero .hb-sl-button,
  .hb-sl.hb-sl-gallery .hb-sl-button {
    margin-top: 1.6rem;
    padding: 1rem 2rem;
    font-size: 1.4rem;
  }
  .hb-sl.hb-sl-gallery .hb-sl-button {
    left: 1rem;
    bottom: 1rem;
    margin: 0;
  }
}

/* Slow zoom on an image, back and forth, so a slide never jumps when it changes. */
.hb-sl-zoom { overflow: hidden; }
.hb-sl-zoom img { animation: hb-sl-zoom 16s ease-in-out infinite alternate; }

@keyframes hb-sl-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hb-sl-zoom img { animation: none; }
}

/* -------------------------------------------------------------------------
 * Notes for logged-in editors
 * ---------------------------------------------------------------------- */

/* "Draft": the draft is shown (preview mode). */
.hb-sl-draft {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 12;
  padding: 4px 10px;
  border-radius: 3px;
  background: #FF521C;
  color: #fff;
  font: 600 12px/1.4 sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Home page: below the fixed header. */
.hb-sl-draft--home {
  top: calc(9rem + var(--hibot-top-offset, 0px));
  right: 2rem;
}

/* Preview page (/hibot-slider-preview/): the home page hero as wide as the window, the notes under the slider. */
.hb-sl-preview-wide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.hb-sl-preview-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #CFCFCF;
}

/* Shortcode with a wrong ID. */
.hb-sl-missing {
  padding: 8px 12px;
  border: 1px dashed #FF521C;
  color: #FF521C;
  font: 14px/1.4 sans-serif;
}