/**
 * BP Photo Slider — frontend styles.
 * Brand-aligned: dark arrow circles → red on hover, square cards (no pill rounding),
 * uppercase brand-style captions, tight overlay treatment.
 *
 * Class structure:
 *   .bp-photo-slider                         — wrapper
 *   .bp-photo-slider--cap-overlay|below|none — caption mode
 *   .bp-photo-slider--ratio-16-9 etc.        — aspect ratio modifier (informational)
 *   .bp-photo-slide                          — slide
 *   .bp-photo-slide__media                   — image container (sets aspect-ratio inline)
 *   .bp-photo-slide__caption--overlay|below  — caption variants
 */

.bp-photo-slider { position: relative; }

.bp-photo-slider .splide__list { padding: 0 !important; margin: 0 !important; list-style: none; }

.bp-photo-slider .bp-photo-slide { list-style: none; padding: 0; margin: 0; }

.bp-photo-slider .bp-photo-slide__media {
  position: relative;
  width: 100%;
  background: #F5F5F5;
  overflow: hidden;
  border-radius: 0; /* brand: square corners */
}

.bp-photo-slider .bp-photo-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.bp-photo-slider .bp-photo-slide:hover .bp-photo-slide__media img {
  transform: scale(1.04);
}

/* Overlay caption (default) — bottom-left, brand uppercase */
.bp-photo-slider .bp-photo-slide__caption--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,0) 100%);
  text-align: left;
  pointer-events: none;
}

/* Below-photo caption */
.bp-photo-slider .bp-photo-slide__caption--below {
  margin-top: 10px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1A1A1A;
  text-align: center;
}

/* === Splide overrides — brand colours === */
.bp-photo-slider .splide__arrow {
  width: 48px;
  height: 48px;
  background: #1A1A1A;
  border-radius: 50%;
  opacity: 1;
  transition: background 200ms;
}
.bp-photo-slider .splide__arrow:hover { background: #FF0000; }
.bp-photo-slider .splide__arrow svg { fill: #ffffff; width: 18px; height: 18px; }
.bp-photo-slider .splide__arrow--prev { left: -8px; }
.bp-photo-slider .splide__arrow--next { right: -8px; }
.bp-photo-slider .splide__arrow:disabled { opacity: .35; }

@media (max-width: 768px) {
  .bp-photo-slider .splide__arrow { width: 40px; height: 40px; }
  .bp-photo-slider .splide__arrow--prev { left: 4px; }
  .bp-photo-slider .splide__arrow--next { right: 4px; }
}

.bp-photo-slider .splide__pagination {
  bottom: -32px;
  gap: 8px;
}
.bp-photo-slider .splide__pagination__page {
  background: #D1D5DB;
  width: 8px;
  height: 8px;
  opacity: 1;
  transition: all 200ms;
}
.bp-photo-slider .splide__pagination__page.is-active {
  background: #FF0000;
  width: 24px;
  border-radius: 4px;
  transform: scale(1);
}

/* Empty-state placeholder */
.bp-photo-slider--empty {
  padding: 40px 24px;
  text-align: center;
  background: #F5F5F5;
  border: 1px dashed #D1D5DB;
  color: #6B7280;
  font-size: 13px;
}