/* ============================================================
   Hero slideshow — crossfading full-bleed image banners with
   overlaid content, arrows + dots. Tokens only. Text is on-dark.
   ============================================================ */

.lh-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-image);
}

/* Height — a content-safe full-bleed banner floor (mobile-first). The merchant
   no longer sets height directly; instead "Background fit" controls how each
   slide image fills this banner (see below). */
.lh-hero { min-height: 480px; }
@media (min-width: 750px) {
  .lh-hero { min-height: 620px; }
}

/* ---- Background fit (mirrors the Difference band image-only setting) ---- */
.lh-hero[data-image-fit="cover"] .lh-hero__img { object-fit: cover; }
.lh-hero[data-image-fit="contain"] .lh-hero__img { object-fit: contain; }
.lh-hero[data-image-fit="fill"] .lh-hero__img { object-fit: fill; }
/* Auto — drop the floor and follow the first slide's natural ratio so the whole
   image shows uncropped. Art-directed desktop/mobile ratios come in as inline
   custom properties; sensible 16:6 / 4:3 fallbacks otherwise. */
.lh-hero[data-image-fit="auto"] {
  min-height: 0;
  aspect-ratio: var(--lh-hero-ar, 16 / 6);
}
.lh-hero[data-image-fit="auto"] .lh-hero__img { object-fit: fill; }
@media (max-width: 749px) {
  .lh-hero[data-image-fit="auto"] { aspect-ratio: var(--lh-hero-ar-m, 4 / 3); }
}

/* ---- Slide stack (crossfade) ---- */
.lh-hero__viewport { position: absolute; inset: 0; }
.lh-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-standard),
              visibility var(--duration-slow) var(--ease-standard);
}
.lh-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Media */
.lh-hero__media { position: absolute; inset: 0; }
.lh-hero__media picture { display: block; height: 100%; }
.lh-hero__img,
.lh-hero__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lh-hero__placeholder-svg { width: 100%; height: 100%; object-fit: cover; }

.lh-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(var(--lh-stone-900-rgb), calc(var(--lh-hero-overlay, 0.4) + 0.15)), rgba(var(--lh-stone-900-rgb), 0) 65%),
    rgba(var(--lh-stone-900-rgb), var(--lh-hero-overlay, 0.4));
}

/* Content */
.lh-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--section-pad-top) var(--section-pad-bottom);
}
.lh-hero__slide--image-only .lh-hero__inner { padding-block: 0; }

/* Whole-slide link (image-only mode) */
.lh-hero__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}
.lh-hero__link:focus-visible {
  outline: none;
  box-shadow: inset var(--ring-focus);
}

.lh-hero__content {
  max-width: 640px;
  color: var(--text-on-dark);
}
.lh-hero__eyebrow {
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.lh-hero__heading {
  margin: 0 0 var(--space-5);
  font-size: var(--font-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-on-dark);
}
.lh-hero__subheading {
  margin: 0 0 var(--space-8);
  max-width: 48ch;
  font-size: var(--font-body-lg);
  line-height: var(--leading-body);
  color: var(--text-on-dark);
  opacity: 0.92;
}
.lh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Per-slide content position */
.lh-hero__slide--center .lh-hero__inner { display: flex; justify-content: center; }
.lh-hero__slide--center .lh-hero__content { text-align: center; }
.lh-hero__slide--center .lh-hero__actions { justify-content: center; }
.lh-hero__slide--right .lh-hero__inner { display: flex; justify-content: flex-end; }

/* ---- Arrows (matched to the Balance "Lovely Slides" hero-arrow exactly:
   34px glass circle, white 0.4 fill + blur(8px), hover lifts to 0.7 + scale) ---- */
.lh-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-body);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
    backdrop-filter var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    scale var(--duration-fast) var(--ease-out);
}
/* Pointer-only: on a phone the swipe-then-tap would leave the arrow swollen. */
@media (hover: hover) and (pointer: fine) {
  .lh-hero__nav:hover {
    background: rgba(var(--lh-white-rgb), 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    transform: translateY(-50%) scale(1.1);
  }
}
.lh-hero__nav .lh-icon,
.lh-hero__nav svg { width: 14px; height: 14px; }
.lh-hero__nav--prev { left: 20px; }
.lh-hero__nav--next { right: 20px; }
.lh-hero--slideshow .lh-hero__nav { display: grid; }

/* Per-breakpoint arrow visibility — merchant toggles "Show arrows on desktop"
   and "Show arrows on mobile" independently (Hero settings). Higher specificity
   than the show rule above so the chosen breakpoint actually hides. */
@media (max-width: 749px) {
  .lh-hero--slideshow .lh-hero__nav.lh-hero__nav--no-mobile { display: none; }
}
@media (min-width: 750px) {
  .lh-hero--slideshow .lh-hero__nav.lh-hero__nav--no-desktop { display: none; }
}

/* ---- Progress dots (Balance "Lovely Slides" style) ---- */
.lh-hero__dots {
  position: absolute;
  /* Each dot's box is 24px tall around a 4px bar (below); offset by the 10px
     of padding so the bar stays where the baked slides' safe area expects it. */
  bottom: calc(var(--space-5) - 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: var(--space-2);
}
.lh-hero__dot {
  position: relative;
  width: 28px;
  height: 24px;
  /* 24px tap target (WCAG 2.5.8) painting only the 4px content strip. */
  padding: 10px 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(var(--lh-white-rgb), 0.4) content-box;
  overflow: hidden;
  cursor: pointer;
  transition: width var(--duration-fast) var(--ease-standard);
}
.lh-hero__dot:hover { background: rgba(var(--lh-white-rgb), 0.6) content-box; }
.lh-hero__dot.is-active { width: 40px; }
.lh-hero__dot-fill {
  position: absolute;
  inset: 10px 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: #fff;
  will-change: transform;
}
@keyframes lh-hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Ken Burns (slow zoom on the active slide image) ---- */
.lh-hero--anim-ken-burns .lh-hero__img { transition: transform 7s var(--ease-out); }
.lh-hero--anim-ken-burns .lh-hero__slide.is-active .lh-hero__img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .lh-hero--anim-ken-burns .lh-hero__slide.is-active .lh-hero__img { transform: none; }
}

/* ---- Breakpoints ---- */
@media (max-width: 749px) {
  .lh-hero__content { max-width: 100%; }
  .lh-hero__actions .lh-button { flex: 1 1 auto; }
  /* Comfortable 44px tap target on touch (desktop keeps the Balance-exact 34px). */
  .lh-hero__nav { width: 44px; height: 44px; }
  .lh-hero__nav .lh-icon,
  .lh-hero__nav svg { width: 16px; height: 16px; }
}

/* Reduced motion — no crossfade */
@media (prefers-reduced-motion: reduce) {
  .lh-hero__slide { transition: opacity var(--duration-fast) linear; }
}