/**
 * Carousel Component CSS
 *
 * Styles for the reusable Carousel_Component with CSS-based transitions,
 * multiple indicator styles, and accessibility features.
 *
 * @package Plexa_AI_Theme
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  --carousel-transition-duration: 500ms;
  --carousel-transition-duration-mobile: 300ms;
  --carousel-arrow-size: 48px;
  --carousel-arrow-size-mobile: 40px;
  --carousel-indicator-gap: 0.5rem;
}

/* ==========================================================================
   Carousel Container
   ========================================================================== */

.carousel-component {
  position: relative;
  width: 100%;
  overflow: clip;
}

/* Height variants */
.carousel-component.carousel--auto { height: auto; }
.carousel-component.carousel--small { min-height: 30vh; }
.carousel-component.carousel--medium { min-height: 50vh; }
.carousel-component.carousel--large { min-height: 70vh; }
.carousel-component.carousel--xl { min-height: calc(85vh - var(--plexa-chrome-top, 0px)); }
.carousel-component.carousel--fullscreen { min-height: calc(100vh - var(--plexa-chrome-top, 0px)); }

/* ==========================================================================
   Slides Container
   ========================================================================== */

.carousel__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Individual Slides
   ========================================================================== */

.carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

.carousel__slide--active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
}

/* Default background - daisyUI base-200 */
section.carousel__slide {
  background-color: var(--color-base-200);
}

/* Height inheritance from parent */
.carousel-component.carousel--small .carousel__slide { min-height: 30vh; }
.carousel-component.carousel--medium .carousel__slide { min-height: 50vh; }
.carousel-component.carousel--large .carousel__slide { min-height: 70vh; }
.carousel-component.carousel--xl .carousel__slide { min-height: calc(85vh - var(--plexa-chrome-top, 0px)); }
.carousel-component.carousel--fullscreen .carousel__slide { min-height: calc(100vh - var(--plexa-chrome-top, 0px)); min-height: calc(100dvh - var(--plexa-chrome-top, 0px)); }

/* ==========================================================================
   Slide Content
   ========================================================================== */

.carousel__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  /* Gutters for the chrome that floats OVER the slide, on both axes.
     
     Horizontal: the previous/next controls are 48px circles pinned at
     left/right 1rem, vertically centred, and the slide content ran straight
     underneath them — Rick, 2026-09-14: "the text is under the button".

     Vertical: the indicator rail is pinned 1.5rem from the edge and stands
     about 40px tall with its pill padding, INSIDE the slide box. Reserving only
     the horizontal gutters left the other axis to collide, which it duly did
     the moment a slide was anchored to the bottom — Rick, same day: "the text
     is over the bottom navigation". Two axes, one mistake, found twice.

     Reserved on BOTH top and bottom because the indicator rail is placeable at
     either end (navigation.indicators.position), so a gutter on one side only
     would be correct for half the vocabulary. */
  --carousel-arrow-gutter: calc(48px + 2rem);
  --carousel-indicator-gutter: calc(var(--carousel-indicator-h, 40px) + 3rem);
  padding: var(--carousel-indicator-gutter) var(--carousel-arrow-gutter);
}

/* When a slide has background layers.
 *
 * This read `position: absolute; inset: 0` until 2026-09-14, which meant the
 * content could never GROW the slide: a paragraph taller than a 30vh carousel
 * overflowed its own padded box and ran straight under the indicator rail,
 * whatever gutter the rule above reserved. Rick found it twice and I twice
 * reserved more room, which was never going to help something that had been
 * taken out of flow.
 *
 * It does not need to be absolute. `.bg-layers__base` and every other layer are
 * already `position: absolute; inset: 0`, so the content sits above them on
 * z-index alone — which `.carousel__content` already sets. In flow, the slide's
 * min-height becomes what it always should have been: a MINIMUM. */
.bg-layers .carousel__content {
  position: relative;
}

/* ==========================================================================
   Text Color Inheritance
   ========================================================================== */

.carousel__slide.text-white .text-base-content,
.carousel__slide.text-black .text-base-content {
  color: inherit;
}

/* ==========================================================================
   CSS Transitions
   ========================================================================== */

/* Fade (default) */
.carousel-component[data-transition-desktop="fade"] .carousel__slide,
.carousel-component[data-transition-mobile="fade"] .carousel__slide {
  transition: opacity var(--carousel-transition-duration) ease-in-out,
              visibility var(--carousel-transition-duration) ease-in-out;
}

/* Slide */
.carousel-component[data-transition-desktop="slide"] .carousel__slide {
  transform: translateX(100%);
  transition: transform var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out,
              visibility var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="slide"] .carousel__slide--active {
  transform: translateX(0);
}

.carousel-component[data-transition-desktop="slide"] .carousel__slide--exit-left {
  transform: translateX(-100%);
}

/* Slide Vertical */
.carousel-component[data-transition-desktop="slide-vertical"] .carousel__slide {
  transform: translateY(100%);
  transition: transform var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out,
              visibility var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="slide-vertical"] .carousel__slide--active {
  transform: translateY(0);
}

.carousel-component[data-transition-desktop="slide-vertical"] .carousel__slide--exit-up {
  transform: translateY(-100%);
}

/* Zoom */
.carousel-component[data-transition-desktop="zoom"] .carousel__slide {
  transform: scale(0.8);
  transition: transform var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out,
              visibility var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="zoom"] .carousel__slide--active {
  transform: scale(1);
}

/* Blur */
.carousel-component[data-transition-desktop="blur"] .carousel__slide {
  filter: blur(20px);
  transition: filter var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out,
              visibility var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="blur"] .carousel__slide--active {
  filter: blur(0);
}

/* Flip */
.carousel-component[data-transition-desktop="flip"] {
  perspective: 1000px;
}

.carousel-component[data-transition-desktop="flip"] .carousel__slides {
  transform-style: preserve-3d;
}

.carousel-component[data-transition-desktop="flip"] .carousel__slide {
  backface-visibility: hidden;
  transform: rotateY(180deg);
  transition: transform var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="flip"] .carousel__slide--active {
  transform: rotateY(0deg);
}

/* Cube */
.carousel-component[data-transition-desktop="cube"] {
  perspective: 1200px;
}

.carousel-component[data-transition-desktop="cube"] .carousel__slides {
  transform-style: preserve-3d;
}

.carousel-component[data-transition-desktop="cube"] .carousel__slide {
  transform: rotateY(90deg) translateZ(50%);
  transform-origin: center center;
  transition: transform var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="cube"] .carousel__slide--active {
  transform: rotateY(0deg) translateZ(0);
}

/* Cards */
.carousel-component[data-transition-desktop="cards"] .carousel__slide {
  transform: scale(0.9) translateX(100%);
  transition: transform var(--carousel-transition-duration) ease-in-out,
              opacity var(--carousel-transition-duration) ease-in-out;
}

.carousel-component[data-transition-desktop="cards"] .carousel__slide--active {
  transform: scale(1) translateX(0);
}

.carousel-component[data-transition-desktop="cards"] .carousel__slide--exit-left {
  transform: scale(0.9) translateX(-100%);
}

/* ==========================================================================
   Mobile Transition Overrides
   ========================================================================== */

@media (max-width: 767px) {
  .carousel-component {
    --carousel-transition-duration: var(--carousel-transition-duration-mobile);
  }

  /* Mobile uses its own transition type via JS class toggle */
  .carousel-component[data-transition-mobile="slide"] .carousel__slide {
    transform: translateX(100%);
  }

  .carousel-component[data-transition-mobile="slide"] .carousel__slide--active {
    transform: translateX(0);
  }
}

/* ==========================================================================
   Arrow Navigation
   ========================================================================== */

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.carousel__arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.carousel__arrow--prev { left: 1rem; }
.carousel__arrow--next { right: 1rem; }

.carousel__arrow-icon {
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Arrow Styles */
.carousel__arrow--minimal {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.carousel__arrow--minimal:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.carousel__arrow--boxed {
  border-radius: 0.25rem;
}

.carousel__arrow--rounded {
  border-radius: 0.5rem;
}

.carousel__arrow--outside {
  background-color: var(--color-base-100);
  border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
}

.carousel__arrow--outside .carousel__arrow-icon {
  color: var(--color-base-content);
  text-shadow: none;
}

/* ==========================================================================
   Indicators Base
   ========================================================================== */

/* How tall the rail actually is, per style, so the gutter above reserves the
   right amount instead of one guess that is a collision for the tall styles and
   wasted space for the short ones. A fixed 40px cleared dots and bars and left
   the numbered and thumbnail rails running under the text — Rick, 2026-09-14:
   "issues with content colliding with lower carousel nav (thumbnails)". */
.carousel-component[data-indicators="numbers"] { --carousel-indicator-h: 48px; }
.carousel-component[data-indicators="thumbnails"] { --carousel-indicator-h: 68px; }

.carousel__indicators {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--carousel-indicator-gap);
  padding: 0.625rem 1rem;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Indicator Positions */
.carousel__indicators--bottom-center {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.carousel__indicators--bottom-left {
  bottom: 1.5rem;
  left: 1.5rem;
}

.carousel__indicators--bottom-right {
  bottom: 1.5rem;
  right: 1.5rem;
}

.carousel__indicators--top-center {
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.carousel__indicators--side-left {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  border-radius: 1rem;
}

.carousel__indicators--side-right {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  border-radius: 1rem;
}

/* ==========================================================================
   Indicator Styles
   ========================================================================== */

/* Dots (default) */
.carousel__indicator {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.35);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.carousel__indicator:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.carousel__indicator--active {
  background-color: #fff;
  transform: scale(1.3);
}

.carousel__indicator:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Pills */
.carousel__indicators--pills .carousel__indicator {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}

.carousel__indicators--pills .carousel__indicator--active {
  width: 32px;
  transform: none;
}

/* Bars */
.carousel__indicators--bars .carousel__indicator {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}

.carousel__indicators--bars .carousel__indicator--active {
  transform: none;
}

/* Progress bar animation for bars */
.carousel__indicators--bars .carousel__indicator[data-progress="true"]::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background-color: #fff;
  animation: carousel-progress linear forwards;
  animation-play-state: paused;
}

.carousel__indicators--bars .carousel__indicator--active[data-progress="true"]::after {
  animation-play-state: running;
}

@keyframes carousel-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* Lines */
.carousel__indicators--lines .carousel__indicator {
  width: 30px;
  height: 3px;
  border-radius: 0;
}

.carousel__indicators--lines .carousel__indicator--active {
  transform: none;
  height: 4px;
}

/* Dashes */
.carousel__indicators--dashes .carousel__indicator {
  width: 20px;
  height: 2px;
  border-radius: 1px;
}

.carousel__indicators--dashes .carousel__indicator--active {
  width: 28px;
  transform: none;
}

/* Numbers */
.carousel__indicators--numbers .carousel__indicator {
  width: auto;
  height: auto;
  min-width: 28px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background-color: transparent;
  border-radius: 4px;
}

.carousel__indicators--numbers .carousel__indicator::before {
  content: attr(data-slide);
  counter-increment: none;
}

.carousel__indicators--numbers .carousel__indicator:nth-child(1)::before { content: '1'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(2)::before { content: '2'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(3)::before { content: '3'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(4)::before { content: '4'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(5)::before { content: '5'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(6)::before { content: '6'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(7)::before { content: '7'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(8)::before { content: '8'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(9)::before { content: '9'; }
.carousel__indicators--numbers .carousel__indicator:nth-child(10)::before { content: '10'; }

.carousel__indicators--numbers .carousel__indicator--active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  transform: none;
}

/* Fraction */
.carousel__indicators--fraction {
  padding: 0.5rem 1rem;
}

.carousel__fraction {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.carousel__fraction-current {
  font-size: 1.25rem;
}

/* Thumbnails */
.carousel__indicators--thumbnails {
  padding: 0.5rem;
  gap: 0.375rem;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0.5rem;
  max-width: 80%;
  overflow-x: auto;
}

.carousel__thumb {
  flex-shrink: 0;
  width: 60px;
  height: 40px;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.6;
}

.carousel__thumb:hover {
  opacity: 0.8;
}

.carousel__thumb--active {
  border-color: #fff;
  opacity: 1;
}

.carousel__thumb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Pause Button
   ========================================================================== */

.carousel__pause {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}

.carousel__pause:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel__pause:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.carousel__pause-icon {
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: -2px;
}

.carousel__pause-icon--play {
  letter-spacing: normal;
  font-size: 0.875rem;
}

/* ==========================================================================
   Live Region (Screen Readers)
   ========================================================================== */

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

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .carousel__arrow {
    width: var(--carousel-arrow-size-mobile);
    height: var(--carousel-arrow-size-mobile);
  }

  .carousel__arrow--prev { left: 0.5rem; }
  .carousel__arrow--next { right: 0.5rem; }

  .carousel__indicators {
    padding: 0.5rem 0.75rem;
  }

  .carousel__indicators--bottom-center,
  .carousel__indicators--bottom-left,
  .carousel__indicators--bottom-right {
    bottom: 1rem;
  }

  .carousel__indicators--thumbnails {
    max-width: 90%;
  }

  .carousel__thumb {
    width: 48px;
    height: 32px;
  }

  .carousel-component.carousel--large .carousel__slide {
    min-height: 50vh;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .carousel__slide {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  .carousel__arrow,
  .carousel__indicator,
  .carousel__thumb,
  .carousel__pause {
    transition: none;
  }

  .carousel__indicators--bars .carousel__indicator[data-progress="true"]::after {
    animation: none;
  }
}