/* css/lb-slideshow.css */
/* Slideshow base styles. */

:root {
  --lb-slideshow-min-height: 500px;
  --lb-slideshow-spacer: calc(1rem * 1.5);
  --lb-slideshow-arrow-size: 2rem;
  --lb-slideshow-dot-size: 0.875rem;
}

/* Structural: prevent collapse before Slick initializes. */
.lb-slideshow {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.15s linear;
}

/* Restore opacity once Slick has initialized or in Layout Builder edit mode. */
.lb-slideshow.layout-builder__region,
.lb-slideshow.slick-initialized {
  opacity: 1;
}

/* FOUC prevention: show only first slide before Slick is ready. */
/* Slick adds .slick-initialized to the element after init. */
/* Exclude .layout-builder__region so edit mode shows all blocks + add-block buttons. */
.lb-slideshow:not(.slick-initialized):not(.layout-builder__region) > * + * {
  display: none;
}

/* Arrow positioning: inside the slide area. */
/* Overrides slick.theme.css which positions at left:-25px/right:-25px (outside). */
.lb-slideshow .slick-prev,
.lb-slideshow .slick-next {
  z-index: 10;
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 22px;
}

.lb-slideshow .slick-prev {
  left: 12px;
}

.lb-slideshow .slick-next {
  right: 12px;
}

/* Arrow icons: SVG data URI chevrons (no webfont dependency). */
/* Overrides slick.theme.css ::before content (color: #ff6d2c). */
.lb-slideshow .slick-prev::before {
  font-family: none;
  color: transparent;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z' fill='white'/%3E%3C/svg%3E") center center / 20px no-repeat;
}

.lb-slideshow .slick-next::before {
  font-family: none;
  color: transparent;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' fill='white'/%3E%3C/svg%3E") center center / 20px no-repeat;
}

/* Arrow hover + focus: darken the pill and inherit slide text color. */
/* color: currentcolor hooks into .text-white class set by lb-slideshow.js on slide change. */
.lb-slideshow .slick-prev:hover,
.lb-slideshow .slick-prev:focus,
.lb-slideshow .slick-next:hover,
.lb-slideshow .slick-next:focus {
  color: currentcolor;
  background-color: rgba(0, 0, 0, 0.75);
}

/* Responsive: on mobile, move arrows to bottom instead of vertically centered. */
@media (max-width: 991.98px) {
  .lb-slideshow .slick-prev,
  .lb-slideshow .slick-next {
    top: auto;
    bottom: calc(var(--lb-slideshow-spacer) / 2);
    transform: none;
  }
}

/* Dot base styling: the raw slick-theme.css is not loaded (Drupal Slick module */
/* ships its own partial theme), so we provide complete dot styling here. */
.lb-slideshow .slick-dots {
  position: absolute;
  bottom: var(--lb-slideshow-spacer);
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.lb-slideshow .slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.lb-slideshow .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.lb-slideshow .slick-dots li button::before {
  font-size: 28px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '\2022';
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
  opacity: 1;
}

.lb-slideshow .slick-dots li.slick-active button::before {
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
  opacity: 1;
}

/* Remove default margin-bottom from slick-dotted (it was for outside dots). */
.lb-slideshow.slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* Hero scrim: dark overlay on hero blocks. */
/* Only active after Slick init or in Layout Builder edit mode. */
.lb-slideshow.layout-builder__region .cklb-hero .content,
.lb-slideshow.slick-initialized .cklb-hero .content {
  position: relative;
  z-index: 2;
}

.lb-slideshow.layout-builder__region .cklb-hero::after,
.lb-slideshow.slick-initialized .cklb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Container: center slide content with responsive max-widths. */
.lb-slideshow .block-layout-builder > .content {
  --beo-gutter-x: 1.5rem;
  --beo-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--beo-gutter-x) * 0.5);
  padding-left: calc(var(--beo-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  padding-top: var(--lb-slideshow-spacer);
  padding-bottom: var(--lb-slideshow-spacer);
}

@media (min-width: 992px) {
  .lb-slideshow .block-layout-builder > .content {
    display: grid;
    align-content: center;
    min-height: var(--lb-slideshow-min-height);
    width: 960px;
  }
}

@media (min-width: 1200px) {
  .lb-slideshow .block-layout-builder > .content {
    width: 1140px;
  }
}

@media (min-width: 1400px) {
  .lb-slideshow .block-layout-builder > .content {
    width: 1320px;
  }
}

/* Equal-height slides: flex track ensures all slides share the tallest height. */
.lb-slideshow .slick-track {
  display: flex !important;
}

.lb-slideshow .slick-slide {
  height: inherit;
}

.lb-slideshow .slick-slide > div,
.lb-slideshow .slick-slide .cklb-hero {
  height: 100%;
}

.lb-slideshow .cklb-hero {
  position: relative;
}