/**
 * BACC Hero Slider — Frontend Styles
 *
 * @version 1.0.0
 */

/* --- Slider Container --- */

.bacc-hero-slider {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: var(--slider-height, 100vh); /* Fallback for older browsers */
  overflow: hidden;
  background: #000;
  touch-action: pan-y pinch-zoom;
}

/* --- Slides --- */

.bacc-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-speed, 1200ms) ease-in-out;
  will-change: opacity;
  z-index: 1;
}

.bacc-hero-slide--active {
  opacity: 1;
  z-index: 2;
}

.bacc-hero-slide picture,
.bacc-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive crop positions via per-slide CSS vars */

/* Desktop (default) */
.bacc-hero-slider .bacc-hero-slide img {
  object-fit: cover !important;
  object-position: var(--crop-desktop, 50% 50%) !important;
}

/* Tablet: 768px–1024px */
@media (max-width: 1024px) {
  .bacc-hero-slider .bacc-hero-slide img {
    object-position: var(--crop-tablet, 50% 50%) !important;
  }
}

/* Mobile: <768px */
@media (max-width: 767px) {
  .bacc-hero-slider .bacc-hero-slide img {
    object-position: var(--crop-mobile, 50% 50%) !important;
  }
}

/* --- Slide Content Overlay --- */

.bacc-hero-slide__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 3rem 4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  color: #fff;
  pointer-events: none;
}

.bacc-hero-slide__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* The photographer's name. Sits directly under the image title and carries
   more weight than the competition reference below it — the member who made
   the picture is the more important of the two credits. */
.bacc-hero-slide__credit {
  margin: 0 0 0.25rem;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 400;
  opacity: 0.95;
}

/* Competition and score. Deliberately small and spaced — it is a footnote,
   not a headline, and it should never compete with the photograph. */
.bacc-hero-slide__meta {
  margin: 0 0 1.25rem;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

.bacc-hero-slide__subtitle {
  margin: 0 0 1.25rem;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 300;
  opacity: 0.9;
}

/* The gradient is what keeps white text legible over an unpredictable
   photograph. With three lines of caption the original 55% was not always
   enough, particularly over a bright sky at the foot of the frame. */
.bacc-hero-slide__content {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    transparent 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
  .bacc-hero-slide__content {
    padding: 2rem 1.5rem 3.5rem;
  }
}

.bacc-hero-slide__link {
  display: inline-block;
  padding: 0.65rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s;
  pointer-events: auto;
}

.bacc-hero-slide__link:hover,
.bacc-hero-slide__link:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

/* --- Arrow Navigation --- */

/* Both arrows sit together in the bottom-right corner rather than one on each
   side at mid-height. Clear of the caption, which is bottom-left, and clear of
   the scroll hint, which is bottom-centre.

   The inset was 1.5rem, which measured as inside the frame but read as sitting
   on the very edge of the screen. 3.5rem gives them room to look deliberately
   placed, and leaves them comfortably clear of the bottom of the window on a
   short viewport or where browser chrome eats into it. */
.bacc-hero-slider__arrow {
  position: absolute;
  top: auto;
  bottom: 3.5rem;
  transform: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bacc-hero-slider:hover .bacc-hero-slider__arrow,
.bacc-hero-slider:focus-within .bacc-hero-slider__arrow {
  opacity: 1;
}

.bacc-hero-slider__arrow:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.7);
}

.bacc-hero-slider__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}

.bacc-hero-slider__arrow svg {
  width: 20px;
  height: 20px;
}

/* next hard against the right inset; prev tucked in beside it.
   5rem = 1.5rem inset + the 48px button + a 0.5rem gap between the two. */
.bacc-hero-slider__arrow--prev {
  left: auto;
  right: 5rem;
}

.bacc-hero-slider__arrow--next {
  right: 1.5rem;
}

/* Hide arrows on mobile — swipe only */
@media (max-width: 767px) {
  .bacc-hero-slider__arrow {
    display: none;
  }
}

/* --- Dot Indicators --- */

.bacc-hero-slider__dots {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bacc-hero-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.bacc-hero-slider__dot--active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.2);
}

.bacc-hero-slider__dot:hover {
  border-color: #fff;
}

.bacc-hero-slider__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Hide dots on mobile */
@media (max-width: 767px) {
  .bacc-hero-slider__dots {
    display: none;
  }
}

/* --- Progress Bar --- */

.bacc-hero-slider__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.bacc-hero-slider__progress-fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.6);
}

/* --- Scroll Hint --- */

.bacc-hero-slider__scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  animation: bacc-hero-bounce 2s ease-in-out infinite;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.bacc-hero-slider__scroll-hint--hidden {
  opacity: 0;
}

.bacc-hero-slider__scroll-dot {
  animation: bacc-hero-scroll-wheel 2s ease-in-out infinite;
}

@keyframes bacc-hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes bacc-hero-scroll-wheel {
  0% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Screen Reader Live Region --- */

.bacc-hero-slider__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  .bacc-hero-slide {
    transition: none;
  }

  .bacc-hero-slider__progress-fill {
    transition: none !important;
  }

  .bacc-hero-slider__arrow,
  .bacc-hero-slider__dot,
  .bacc-hero-slide__link {
    transition: none;
  }

  .bacc-hero-slider__scroll-hint {
    animation: none;
  }

  .bacc-hero-slider__scroll-dot {
    animation: none;
  }
}

/* ================================================================
   Living inside Divi
   ----------------------------------------------------------------
   The slider was written for a theme that called it outside the
   content column. Here it is dropped into a page via a shortcode, so
   it lands inside Divi's .container (max-width 1200px) and inherits
   Divi's typography. Two things therefore have to be undone.
   ================================================================ */

/* 1. Break out of the content column to the full viewport width.
      This calc assumes the column is centred in the page. Divi's is NOT —
      there is a sidebar, so the content sits left of centre and this alone
      pushes the slider off by half the sidebar's width, clipping the caption.
      The JS measures the real offset and overrides both values inline; this
      rule is only the starting point, and what you get with JS disabled. */
.bacc-hero-slider {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 2. Divi styles headings and paragraphs inside the content area by ID,
      which outranks any class selector this plugin can reasonably write.
      The caption sits on a photograph and must be white — this is one of
      the few places !important is the honest answer rather than a
      specificity arms race. */
.bacc-hero-slider .bacc-hero-slide__title,
.bacc-hero-slider .bacc-hero-slide__credit,
.bacc-hero-slider .bacc-hero-slide__meta,
.bacc-hero-slider .bacc-hero-slide__subtitle {
  color: #fff !important;
  padding: 0 !important;
  font-family: inherit;
}

.bacc-hero-slider .bacc-hero-slide__link {
  color: #fff !important;
}

/* Divi adds bottom padding to headings in post content, which pushes the
   caption lines apart and breaks the tight title/credit pairing. */
.bacc-hero-slider h2.bacc-hero-slide__title {
  margin: 0 0 0.35rem !important;
  line-height: 1.15;
}

/* 3. Sit flush under the site header.
      Measured on this site, the gap above the slider was 156px: 58px of
      padding on Divi's .container, 23px on #left-area, and the page title
      itself. All three are removed — but only on a page that actually carries
      the slider, via the body class the plugin adds, so every other page keeps
      its normal spacing and its title.

      The slider is a hero: it belongs hard against the header with the
      photograph as the first thing you see, not below a heading. */
/* !important, and not for want of trying a cleaner route first. Divi's rule is
   `body:not(.et-tb) #main-content .container`, which has exactly the same
   specificity as anything sensible written here — so the tie is broken by
   source order, and Divi's CSS is printed inline in the head after this file.
   #left-area's padding additionally comes from inside a media query. Winning
   that on specificity alone would mean an absurd selector; this is the honest
   version, and it is scoped to pages carrying the slider. */
body.bacc-has-hero-slider #main-content .container {
  padding-top: 0 !important;
}

body.bacc-has-hero-slider #left-area {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.bacc-has-hero-slider .entry-title.main_title {
  display: none;
}

/* Divi's single-column layout adds a bottom margin under the article, which
   would leave a white band between the slider and the footer. */
body.bacc-has-hero-slider #main-content .entry-content > .bacc-hero-slider:last-child {
  margin-bottom: 0;
}