/* Hero — views/sections/hero.php. Full bleed: the view prints its own containers.
   overlay: slides stacked in one grid cell, text over an image / muted MP4 / the brand gradient with a
   darkening layer (--overlay); split: text beside the image (image first on phones). Heights: auto,
   large, full. Several slides: story-style progress dots (the active one fills over --hero-interval and
   its animationend advances the slide, see hero.js), arrows and a pause button. */

.rr-hero {
  --hero-min: auto;
  --hero-pad: clamp(3rem, 2rem + 4.5vw, 6.5rem);
  position: relative;
  isolation: isolate;
}

.rr-hero--large {
  --hero-min: clamp(30rem, 74svh, 54rem);
}

.rr-hero--full {
  --hero-min: calc(100svh - var(--header-h));
}

/* Under the see-through header: the hero starts at the top of the page and keeps its text clear of it. */
.rr-hero--under-header {
  --hero-top: var(--header-h);
}

.rr-hero--under-header.rr-hero--full {
  --hero-min: 100svh;
}

.rr-hero__slides {
  display: grid;
}

.rr-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  min-height: var(--hero-min);
  overflow: hidden;
}

.rr-hero--slider .rr-hero__slide {
  transition: opacity 700ms var(--ease-out), visibility 0s linear 700ms;
}

.rr-hero--slider .rr-hero__slide:not(.is-active) {
  opacity: 0;
  visibility: hidden;
}

.rr-hero--slider .rr-hero__slide.is-active {
  z-index: 1;
  transition-delay: 0s;
}

.rr-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--hero-top, 0px) + var(--hero-pad));
  padding-bottom: var(--hero-pad);
}

.rr-hero--slider .rr-hero__inner {
  padding-bottom: calc(var(--hero-pad) + 3.25rem);
}

.rr-hero__copy {
  display: grid;
  justify-items: start;
  max-width: 44rem;
}

.rr-hero__header {
  max-width: none;
  margin-bottom: 0;
}

.rr-hero .rr-section__heading {
  max-width: 16ch;
  font-size: var(--step-6);
  line-height: 0.98;
  text-wrap: balance;
}

.rr-hero .rr-section__subheading {
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.5;
}

/* Recording dot before the eyebrow: the store's "live" marker. */
.rr-hero .rr-section__eyebrow::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.rr-hero__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.rr-hero__actions {
  margin-top: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
}

/* Alignment (the Style tab's _align) */
.rr-hero--align-center .rr-hero__copy {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.rr-hero--align-right .rr-hero__copy {
  justify-items: end;
  margin-left: auto;
  text-align: right;
}

.rr-hero--align-center :is(.rr-hero__header, .rr-section__heading, .rr-section__subheading) {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.rr-hero--align-right :is(.rr-hero__header, .rr-section__heading, .rr-section__subheading) {
  margin-left: auto;
  justify-items: end;
  text-align: right;
}

.rr-hero--align-center :is(.rr-hero__buy, .rr-hero__actions) {
  justify-content: center;
}

.rr-hero--align-right :is(.rr-hero__buy, .rr-hero__actions) {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------------------------
   Overlay layout: backdrop, darkening layer, text tone
   --------------------------------------------------------------------------------------------- */
.rr-hero--overlay .rr-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-dark);
}

.rr-hero--overlay .rr-hero__media :where(picture, img, video) {
  display: block;
  width: 100%;
  height: 100%;
}

.rr-hero--overlay .rr-hero__media :where(img, video) {
  object-fit: cover;
  object-position: center;
}

.rr-hero--overlay .rr-hero__slide.has-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 21, 26, 0.18) 0%, transparent 32%),
    rgba(20, 21, 26, var(--overlay, 0.4));
  pointer-events: none;
}

.rr-hero--overlay .rr-hero__slide--dark.has-media::before {
  background: rgba(255, 255, 255, var(--overlay, 0.4));
}

.rr-hero__slide.rr-section--on-dark {
  --rr-bg-solid: var(--color-dark);
}

.rr-hero--overlay .rr-hero__slide--light :is(.rr-section__heading, .rr-section__subheading) {
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.24);
}

.rr-hero--overlay .rr-hero__slide--light .rr-section__subheading {
  color: rgba(255, 255, 255, 0.86);
}

.rr-hero--overlay .rr-hero__slide--dark {
  color: var(--color-text);
}

/* No image: the brand gradient — a dark field lit by the accent, with an editing-timeline ruler. */
.rr-hero--overlay .rr-hero__slide.is-gradient {
  background:
    radial-gradient(70% 90% at 88% 8%, color-mix(in srgb, var(--color-accent) 46%, transparent) 0%, transparent 62%),
    radial-gradient(60% 70% at 4% 100%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--color-dark) 86%, #FFFFFF) 0%, var(--color-dark) 58%);
}

.rr-hero--overlay .rr-hero__slide--dark.is-gradient {
  background:
    radial-gradient(70% 90% at 88% 8%, var(--color-accent-soft) 0%, transparent 62%),
    linear-gradient(160deg, var(--color-surface) 0%, var(--color-secondary) 100%);
}

.rr-hero--overlay .rr-hero__slide.is-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 1.1rem;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 6.25%) left bottom / 100% 0.85rem no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 1.25%) left bottom / 100% 0.4rem no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

/* Background video sits over its poster image, which stays as the reduced-motion / loading frame. */
.rr-hero__video {
  position: absolute;
  inset: 0;
}

.rr-hero__video-toggle {
  position: absolute;
  right: max(var(--gutter), 1rem);
  bottom: 1rem;
  z-index: 3;
}

.rr-hero--slider .rr-hero__video-toggle {
  bottom: 4.75rem;
}

/* Settle-in for the first frame (overlay images only; reduced motion turns it off globally). */
@media (prefers-reduced-motion: no-preference) {
  .rr-hero--overlay .rr-hero__slide.is-active .rr-hero__img {
    animation: rr-hero-settle 1.6s var(--ease-out) both;
  }
}

@keyframes rr-hero-settle {
  from {
    transform: scale(1.045);
  }
}

/* ---------------------------------------------------------------------------------------------
   Split layout: text beside a rounded image (image above the text on phones)
   --------------------------------------------------------------------------------------------- */
.rr-hero--split .rr-hero__slide {
  min-height: 0;
}

.rr-hero--split .rr-hero__slide.has-media {
  display: flex;
  flex-direction: column;
}

.rr-hero--split .rr-hero__media {
  position: relative;
  order: -1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 40rem;
  margin: var(--hero-pad) auto 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-lg);
}

.rr-hero--split .rr-hero__media :where(picture, img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rr-hero--split .rr-hero__slide.has-media .rr-hero__inner {
  padding-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

@media (min-width: 1024px) {
  .rr-hero--split .rr-hero__slide.has-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
    min-height: var(--hero-min);
    margin-inline: auto;
    padding: var(--hero-pad) var(--gutter);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  }

  .rr-hero--split .rr-hero__slide.has-media .rr-hero__inner {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding: 0;
  }

  .rr-hero--split .rr-hero__media {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .rr-hero--split.rr-hero--align-right .rr-hero__slide.has-media .rr-hero__inner {
    grid-column: 2;
  }

  .rr-hero--split.rr-hero--align-right .rr-hero__media {
    grid-column: 1;
  }

  .rr-hero--split .rr-hero__slide.has-media .rr-section__heading {
    font-size: var(--step-5);
  }
}

/* ---------------------------------------------------------------------------------------------
   Slider controls: story-style progress dots, pause, previous / next
   --------------------------------------------------------------------------------------------- */
.rr-hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.85rem, 0.6rem + 1vw, 1.5rem);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.rr-hero__dots,
.rr-hero__arrows {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.rr-hero__dots {
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 21, 26, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.rr-hero__dot {
  position: relative;
  width: clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.rr-hero__dot::before,
.rr-hero__dot-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: var(--radius-pill);
}

.rr-hero__dot::before {
  background: rgba(255, 255, 255, 0.34);
}

.rr-hero__dot-fill {
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
}

.rr-hero__dot.is-active .rr-hero__dot-fill {
  transform: scaleX(1);
}

.rr-hero.is-autoplay .rr-hero__dot.is-active .rr-hero__dot-fill {
  animation: rr-hero-progress var(--hero-interval, 6s) linear forwards;
}

.rr-hero.is-autoplay:not(.is-running) .rr-hero__dot.is-active .rr-hero__dot-fill {
  animation-play-state: paused;
}

.rr-hero__dot:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@keyframes rr-hero-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.rr-hero__arrows {
  gap: 0.4rem;
}

.rr-hero__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 21, 26, 0.42);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.rr-hero__arrow:hover {
  background: rgba(20, 21, 26, 0.64);
}

.rr-hero__arrow:active {
  transform: scale(0.95);
}

.rr-hero__arrow:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.rr-hero__play,
.rr-hero__toggle.is-paused .rr-hero__pause {
  display: none;
}

.rr-hero__toggle.is-paused .rr-hero__play {
  display: inline-block;
}

/* Without hero.js (or with reduced motion) nothing rotates: the toggle has no job. */
.rr-hero:not(.is-autoplay) .rr-hero__toggle {
  display: none;
}

@media (max-width: 479.98px) {
  .rr-hero__arrow:not(.rr-hero__toggle) {
    display: none;
  }

  .rr-hero .rr-section__actions > .btn {
    flex: 1 1 100%;
  }
}