/* Hero slider controls styled with MD3 role tokens (no hardcoded colors) */

.jw-hero-slider {
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: clamp(18rem, 52vw, 26rem);
  max-height: 70vh;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-color-surface-container-low);
  /* Ensure readable foreground role colors on media overlays */
  --md-color-on-surface: #ffffff;
  --md-color-on-surface-variant: #e6e6e6;
  --md-color-primary-container: #ffffff;
  --md-color-on-primary-container: #ffffff;
}

.jw-hero-card {
  border-radius: var(--md-sys-shape-corner-large);
}

.jw-hero-media {
  border-radius: var(--md-sys-shape-corner-large);
  overflow: hidden;
}

.jw-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  vertical-align: middle;
}

.jw-hero-overlay {
  background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--md-color-scrim) 20%, transparent) 30%,
      color-mix(in srgb, var(--md-color-scrim) 60%, transparent) 70%,
      color-mix(in srgb, var(--md-color-scrim) 85%, transparent) 100%);
}

.jw-hero-content {
  padding-left: var(--md-sys-spacing-5);
  padding-right: var(--md-sys-spacing-5);
}

.jw-hero-title {
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.jw-hero-excerpt {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.jw-hero-meta {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

.hero-image-wrap {
  aspect-ratio: 16 / 9;
  min-height: var(--md-sys-layout-hero-min-height);
  max-height: var(--md-sys-layout-hero-max-height);
  width: 100%;
}

.jw-hero-slider__viewport {
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.jw-hero-slider__list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;

  /* Flex Row for Slide Effect */
  display: flex;
  flex-wrap: nowrap;

  /* Transition for Slide */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.jw-hero-slider__slide {
  height: 100%;
  width: 100%;
  min-height: 100%;

  /* Flex item specific */
  flex: 0 0 100%;

  position: relative;
  opacity: 1;
  visibility: visible;
}

.jw-hero-slider__slide[aria-hidden="false"] {
  z-index: 1;
}

.jw-hero-slider .jw-hero-card {
  height: 100%;
  min-height: 100%;
}

.jw-hero-slider .jw-hero-excerpt {
  /* Hide excerpt on mobile, show on tablet+ for better content richness */
  display: none;
}

@media (min-width: 768px) {
  .jw-hero-slider .jw-hero-excerpt {
    display: block;
  }
}

.jw-hero-slider .jw-hero-media img {
  filter: saturate(0.8) brightness(0.9);
  /* Reduce noise */
}

.jw-hero-slider .jw-hero-media,
.jw-hero-slider .jw-media-wrap {
  height: 100%;
  width: 100%;
}

.jw-hero-slider .hero-image-wrap,
.jw-hero-slider .jw-hero-media {
  aspect-ratio: unset;
  height: 100%;
}

.jw-hero-slider .hero-image-wrap {
  min-height: 100%;
  max-height: none;
}

.jw-hero-slider img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}

.jw-hero-slider__controls {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
}

.jw-hero-slider__arrow {
  pointer-events: auto;
  width: var(--md-sys-spacing-11);
  height: var(--md-sys-spacing-11);
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-color-scrim) 30%, transparent);
  color: var(--md-color-on-surface);
  border: 1px solid color-mix(in srgb, var(--md-color-outline) 40%, transparent);
  backdrop-filter: blur(2px);

  display: grid;
  place-items: center;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s ease-out;
}

.jw-hero-slider:hover .jw-hero-slider__arrow,
.jw-hero-slider:focus-within .jw-hero-slider__arrow {
  opacity: 0.9;
}

.jw-hero-slider__arrow svg {
  display: block;
  fill: currentColor;
  width: var(--md-sys-spacing-6);
  height: var(--md-sys-spacing-6);
}

.jw-hero-slider__arrow:hover {
  background: color-mix(in srgb, var(--md-color-scrim) 50%, transparent);
  transform: translateY(-50%) scale(1.05);
  border-color: color-mix(in srgb, var(--md-color-outline) 60%, transparent);
}

.jw-hero-slider__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--md-color-primary);
  outline-offset: 2px;
}

.jw-hero-slider__arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.jw-hero-slider__arrow--prev {
  left: var(--md-sys-spacing-6);
}

.jw-hero-slider__arrow--next {
  right: var(--md-sys-spacing-6);
}

/* Dots Pagination */
.jw-hero-slider__dots {
  position: absolute;
  bottom: var(--md-sys-spacing-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  z-index: 4;
  padding: var(--md-sys-spacing-2);
  pointer-events: auto;
  list-style: none;
  margin: 0;
}

.jw-hero-slider__dot {
  width: var(--md-sys-spacing-2);
  height: var(--md-sys-spacing-2);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--md-color-on-surface) 40%, transparent);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--md-color-scrim) 40%, transparent);
}

.jw-hero-slider__dot:hover,
.jw-hero-slider__dot:focus-visible {
  background-color: color-mix(in srgb, var(--md-color-on-surface) 80%, transparent);
  transform: scale(1.1);
}

.jw-hero-slider__dot:focus-visible {
  outline: 2px solid var(--md-color-primary);
  outline-offset: 2px;
}

.jw-hero-slider__dot--active {
  background-color: var(--md-color-on-surface);
  transform: scale(1.3);
  box-shadow: 0 0 8px color-mix(in srgb, var(--md-color-scrim) 40%, transparent);
}

@media (min-width: 640px) {
  .jw-hero-content {
    padding-left: var(--md-sys-spacing-6);
    padding-right: var(--md-sys-spacing-6);
  }

  .jw-hero-title {
    font-size: var(--md-sys-typescale-display-small-size);
    line-height: var(--md-sys-typescale-display-small-line-height);
    font-weight: 500;
  }

  .jw-hero-excerpt {
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
  }

  .jw-hero-meta {
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
  }

  .hero-image-wrap {
    max-height: min(var(--md-sys-layout-hero-max-height), var(--md-sys-spacing-28));
  }

  .jw-hero-slider {
    min-height: clamp(22rem, 45vw, 30rem);
  }

  .jw-hero-content--flexible {
    padding-top: var(--md-sys-spacing-6);
    padding-bottom: var(--md-sys-spacing-6);
  }
}

@media (max-width: 640px) {
  .jw-hero-slider__arrow {
    width: var(--md-sys-spacing-9);
    height: var(--md-sys-spacing-9);
  }

  .jw-hero-slider__arrow--prev {
    left: var(--md-sys-spacing-2);
  }

  .jw-hero-slider__arrow--next {
    right: var(--md-sys-spacing-2);
  }
}

/* Flexible content class for slides with longer content */
.jw-hero-content--flexible {
  min-height: auto;
  padding-top: var(--md-sys-spacing-5);
  padding-bottom: var(--md-sys-spacing-5);
}

@media (min-width: 1024px) {
  .jw-hero-title {
    font-size: var(--md-sys-typescale-display-medium-size);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    font-weight: 500;
  }

  /* Arrow sizing */
  .jw-hero-slider__arrow {
    width: var(--md-sys-spacing-12);
    height: var(--md-sys-spacing-12);
  }

  .jw-hero-slider {
    aspect-ratio: 21 / 9;
    min-height: clamp(26rem, 40vw, 36rem);
    max-height: 75vh;
  }

  .jw-hero-content--flexible {
    padding-top: var(--md-sys-spacing-7);
    padding-bottom: var(--md-sys-spacing-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jw-hero-slider__arrow,
  .jw-hero-slider__dot,
  .jw-hero-slider__list {
    transition: none;
  }
}