/**
 * Slider Component Styles
 *
 * Uses Splide.js for track layout, transitions, and pagination.
 * Splide manages .splide__track / .splide__list / .splide__slide.
 *
 * Figma reference: node-id 141:20257
 */

/* -------------------------------------------------------
 * Component-scoped custom properties
 * ------------------------------------------------------- */
.slider {
  --slider-btn-bg:    var(--ambience);
  --slider-btn-hover: var(--ambience-500);
  --slider-progress-bg: linear-gradient(
    90deg,
    rgba(235, 230, 225, 0.3),
    rgba(235, 230, 225, 0.1)
  );
  /*--slider-progress-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);*/
}

/* -------------------------------------------------------
 * Section wrapper
 * ------------------------------------------------------- */
.slider {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-600, 48px);
}

/* -------------------------------------------------------
 * Section heading
 * ------------------------------------------------------- */
.slider__heading {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.021em;
  color: var(--trust, #550a2d);
  font-feature-settings: 'zero';
}

/* Pink marker highlight on <em> */
.slider__heading em {
  background-image: linear-gradient(
    to bottom,
    transparent 0em,
    var(--attitude, #ffa0fa) 0em,
    var(--attitude, #ffa0fa) 1.23em,
    transparent 1.23em
  );
  font-style: normal;
  font-weight: inherit;
  padding-inline: 0.1em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* -------------------------------------------------------
 * Slider container (track + controls stacked vertically)
 * ------------------------------------------------------- */
.slider__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400, 32px);
}

/* -------------------------------------------------------
 * Splide track overrides
 * ------------------------------------------------------- */
.slider .splide__track {
  overflow: hidden;
}

.slider .splide__slide {
  display: grid;
  /*display: flex;*/
  /*flex-direction: column;*/
}

.splide__slide img {
  width: 100%;
  object-fit: contain;
}

/* -------------------------------------------------------
 * Desktop (≥ 1200px)
 * ------------------------------------------------------- */
@media (min-width: 1200px) {
  .slider__heading {
    font-size: var(--h2-size, 48px);
  }
}

/* -------------------------------------------------------
 * Desktop XL (≥ 1920px)
 * ------------------------------------------------------- */
@media (min-width: 1920px) {

  .slider__heading {
    font-size: 76px;
    letter-spacing: -1.748px;
  }
}

/* -------------------------------------------------------
 * Navigation controls
 * ------------------------------------------------------- */
.slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Figma: controls span only the image-panel column (~43% of card width) */
  /*width: calc(0.75 / 1.75 * 100%);*/
  padding-right: var(--spacing-300);

  .surface--ambience_dark & {
    --slider-btn-bg:    var(--ambience-500);
    --slider-btn-hover: var(--ambience-700);
  }

  .slider-dot {
    flex: 1;
    min-width: 0;
  }
}

.slider__buttons {
  display: flex;
  gap: var(--spacing-200, 16px);
  align-items: center;
}

.slider__progress {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /*min-height: 28px;*/
  padding: var(--spacing-150);
  border-radius: var(--border-radius-round);
  background: var(--slider-progress-bg);
  backdrop-filter: blur(calc(var(--blur-medium, 12px) / 2));
  -webkit-backdrop-filter: blur(calc(var(--blur-medium, 12px) / 2));
  /*box-shadow: var(--slider-progress-shadow);*/
}

.slider__progress .slider-dot {
  flex: 0 0 auto;
}

.slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 1000px;
  background-color: var(--slider-btn-bg);
  color: var(--trust, #550a2d);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.slider__btn:hover:not(:disabled) {
  background-color: var(--slider-btn-hover);
}

.slider__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.slider__btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.slider__btn .icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

/**
 * Slider Dot Component
 *
 */

/* ── Colour token ── */

.slider-dot {
  --sd-color: var(--trust, #550a2d);
}

.surface--trust .slider-dot,
.surface--academy .slider-dot,
.slider-dot--on-trust,
.slider-dot--on-academy {
  --sd-color: var(--white, #ffffff);
}



/* ── Layout ── */

.slider-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-150, 12px);
}

/* ── Inactive dot ── */

.slider-dot__item {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-m, 4px);
  background-color: var(--sd-color);
  opacity: var(--opacity-disabled, 0.33);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease, opacity 0.25s ease;
}

.slider-dot__item:focus-visible {
  outline: 2px solid var(--sd-color);
  outline-offset: 3px;
  opacity: 1;
}

/* ── Active bar ── */

.slider-dot__item--active {
  width: 80px;
  opacity: 1;
  position: relative;
  background-color: transparent;

  --active-dot-width: 10%;
}

/* Full-width track */
.slider-dot__item--active::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sd-color);
  opacity: var(--opacity-disabled, 0.33);
  border-radius: var(--border-radius-m, 4px);
}

/* on autoplay off fill indicator */
.slider__container[data-slider-autoplay="0"] .slider-dot__item--active::after {
  opacity: 1;
}

/* Position indicator — JS updates --sd-progress (0…1) to animate */
.slider-dot__item--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--sd-progress, 0) * (100% - 8px));
  width: var(--active-dot-width, 8px);
  height: 8px;
  background-color: var(--sd-color);
  border-radius: var(--border-radius-m, 4px);
  z-index: 1;
}



/* -------------------------------------------------------
 * Slider context: controls overlaid at bottom of text column
 * ------------------------------------------------------- */
.slider:has(.hero-section) {
  .slider__container {
    gap: 0;
  }

  .slider__controls {
    position: absolute;
    bottom: var(--spacing-600);
    left: var(--hero-padding-left);
    right: var(--hero-padding-right);
  }
}