/* Home page hero slider (inc/home-hero.php + js/home-hero.js).
   Slides share one grid cell, so the hero is as tall as its tallest slide. */

.ivh {
  --ivh-head: 96px;
  --ivh-speed: 1.15s;
  --ivh-ease: cubic-bezier(0.77, 0, 0.18, 1);
  --ivh-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ivh-pink: var(--primary-color, #e72d88);
  --ivh-h: clamp(480px, calc(100svh - var(--ivh-head) - 120px), 760px);
  position: relative;
  padding-top: var(--ivh-head);
  background: #1f1d1d;
  color: #fff;
  overflow: hidden;
}

.ivh--h-full {
  --ivh-h: max(480px, calc(100svh - var(--ivh-head)));
}

.ivh__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ivh__stage {
  display: grid;
  position: relative;
  touch-action: pan-y;
}

/* ---------- Slides ---------- */

.ivh__slide {
  grid-area: 1 / 1;
  position: relative;
  visibility: hidden;
  z-index: 0;
  overflow: hidden;
}

.ivh__slide.is-active {
  visibility: visible;
  z-index: 2;
}

.ivh__slide.is-leaving {
  visibility: visible;
  z-index: 1;
}

.ivh__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.ivh__slide.is-leaving::after {
  opacity: 0.5;
  transition: opacity var(--ivh-speed) var(--ivh-ease);
}

.ivh__inner {
  position: relative;
}

.ivh__copy {
  position: relative;
  z-index: 2;
}

.ivh .ivh__title {
  margin-bottom: 24px;
}

.ivh .ivh__text {
  margin-bottom: 32px;
}

/* Per-slide colours ("Custom colours" in the editor); unset ones keep the theme styles */
.ivh__slide[style*="--ivh-c-title"] .ivh__title { color: var(--ivh-c-title); }
.ivh__slide[style*="--ivh-c-hl"] .ivh__title .nw-ban-highlight { color: var(--ivh-c-hl); }
.ivh__slide[style*="--ivh-c-text"] .ivh__text { color: var(--ivh-c-text); }
.ivh__slide[style*="--ivh-c-bg"] .ivh__cta .cmn-btn { background: var(--ivh-c-bg); }
.ivh__slide[style*="--ivh-c-btn-text"] .ivh__cta .cmn-btn,
.ivh__slide[style*="--ivh-c-btn-text"] .ivh__cta .cmn-btn:hover { color: var(--ivh-c-btn-text); }

.ivh__img {
  display: block;
  width: 100%;
  height: auto;
}

.ivh__media {
  margin: 0;
}

/* Full-width image with text on top */
.ivh__slide--full {
  background: var(--ivh-pink);
}

.ivh__slide--full .ivh__inner {
  position: static;
  display: flex;
  align-items: center;
  min-height: var(--ivh-h);
  padding-top: 48px;
  padding-bottom: 120px;
}

.ivh__slide--full .ivh__copy {
  max-width: 640px;
}

.ivh__slide--full .ivh__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ivh__slide--full .ivh__img {
  height: 100%;
  object-fit: cover;
}

.ivh__slide--full .ivh__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ivh__slide--ov-light .ivh__media::after {
  background: linear-gradient(90deg, rgba(20, 16, 18, 0.55) 0%, rgba(20, 16, 18, 0.15) 60%, transparent 100%),
    linear-gradient(0deg, rgba(20, 16, 18, 0.45) 0%, transparent 30%);
}

.ivh__slide--ov-medium .ivh__media::after {
  background: linear-gradient(90deg, rgba(20, 16, 18, 0.78) 0%, rgba(20, 16, 18, 0.35) 60%, rgba(20, 16, 18, 0.1) 100%),
    linear-gradient(0deg, rgba(20, 16, 18, 0.55) 0%, transparent 35%);
}

.ivh__slide--ov-strong .ivh__media::after {
  background: linear-gradient(90deg, rgba(20, 16, 18, 0.88) 0%, rgba(20, 16, 18, 0.55) 100%);
}

.ivh__slide--focus-top .ivh__img { object-position: 50% 0; }
.ivh__slide--focus-bottom .ivh__img { object-position: 50% 100%; }
.ivh__slide--focus-left .ivh__img { object-position: 0 50%; }
.ivh__slide--focus-right .ivh__img { object-position: 100% 50%; }

/* Text left, image right (same look as the original hero) */
.ivh__slide--split {
  background: linear-gradient(110deg, #1a1416 0%, #4b0f2a 25%, #7a0f3f 45%, #b0125d 65%, #ff0a8a 100%);
}

.ivh__slide--split .ivh__inner {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 40px;
  min-height: min(var(--ivh-h), 620px);
  padding-top: 40px;
}

.ivh__slide--split .ivh__copy {
  align-self: center;
  padding-bottom: 110px;
}

.ivh__slide--split .ivh__media {
  grid-column: 2;
  align-self: end;
}

.ivh__slide--split.ivh__slide--bare .ivh__media {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 900px;
}

/* ---------- Motion (only once JS is running) ---------- */

/* Ken Burns on the active image; kept on the leaving slide so it does not jump */
.ivh--ready .ivh__slide--full.is-active .ivh__img,
.ivh--ready .ivh__slide--full.is-leaving .ivh__img {
  animation: ivh-kb calc(var(--ivh-autoplay, 6s) + 3s) linear forwards;
}

.ivh--ready .ivh__slide--split.is-active .ivh__img,
.ivh--ready .ivh__slide--split.is-leaving .ivh__img {
  animation: ivh-rise 1.6s var(--ivh-out) both;
}

@keyframes ivh-kb {
  from { transform: scale(1.14); }
  to { transform: scale(1); }
}

@keyframes ivh-rise {
  from { transform: translateY(40px) scale(1.04); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

/* Outgoing image is pushed away while the next one covers it */
.ivh--ready .ivh__slide.is-leaving .ivh__media {
  transform: translateX(calc(var(--ivh-dir, 1) * -12%));
  transition: transform var(--ivh-speed) var(--ivh-ease);
}

/* Effect: curtain wipe – the image trails the slide, leaving a pink leading edge */
.ivh--fx-wipe .ivh__slide,
.ivh--fx-wipe .ivh__slide .ivh__media {
  clip-path: inset(0 0 0 100%);
}

.ivh--fx-wipe.is-back .ivh__slide,
.ivh--fx-wipe.is-back .ivh__slide .ivh__media {
  clip-path: inset(0 100% 0 0);
}

.ivh.ivh--fx-wipe .ivh__slide.is-active,
.ivh.ivh--fx-wipe .ivh__slide.is-leaving,
.ivh.ivh--fx-wipe .ivh__slide.is-active .ivh__media,
.ivh.ivh--fx-wipe .ivh__slide.is-leaving .ivh__media {
  clip-path: inset(0);
}

.ivh.ivh--fx-wipe.ivh--ready .ivh__slide.is-active {
  transition: clip-path var(--ivh-speed) var(--ivh-ease);
}

.ivh.ivh--fx-wipe.ivh--ready .ivh__slide.is-active .ivh__media {
  transition: clip-path var(--ivh-speed) var(--ivh-ease) 0.06s;
}

/* Effect: circle reveal */
.ivh--fx-circle .ivh__slide {
  clip-path: circle(0% at 85% 55%);
}

.ivh--fx-circle.is-back .ivh__slide {
  clip-path: circle(0% at 15% 55%);
}

.ivh.ivh--fx-circle .ivh__slide.is-active,
.ivh.ivh--fx-circle .ivh__slide.is-leaving {
  clip-path: circle(150% at 85% 55%);
}

.ivh.ivh--fx-circle.is-back .ivh__slide.is-active,
.ivh.ivh--fx-circle.is-back .ivh__slide.is-leaving {
  clip-path: circle(150% at 15% 55%);
}

.ivh.ivh--fx-circle.ivh--ready .ivh__slide.is-active {
  transition: clip-path calc(var(--ivh-speed) + 0.25s) cubic-bezier(0.65, 0, 0.35, 1);
}

/* Effect: cross-fade */
.ivh--fx-fade .ivh__slide {
  opacity: 0;
}

.ivh.ivh--fx-fade .ivh__slide.is-active,
.ivh.ivh--fx-fade .ivh__slide.is-leaving {
  opacity: 1;
}

.ivh.ivh--fx-fade.ivh--ready .ivh__slide.is-active {
  transition: opacity var(--ivh-speed) ease;
}

.ivh--fx-fade .ivh__slide.is-leaving .ivh__media {
  transform: none;
}

/* Heading words rise out of a mask, then the text and button follow */
.ivh--ready .ivh-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.ivh--ready .ivh-w > span {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  transform-origin: 0 100%;
  transition: transform 0.4s ease-in;
}

.ivh--ready .ivh__text,
.ivh--ready .ivh__cta {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.3s ease, transform 0.4s ease-in;
}

.ivh--ready .is-in .ivh-w > span {
  transform: none;
  transition: transform 1s var(--ivh-out) calc(0.45s + var(--i, 0) * 70ms);
}

.ivh--ready .is-in .ivh__text,
.ivh--ready .is-in .ivh__cta {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease var(--ivh-after), transform 1s var(--ivh-out) var(--ivh-after);
}

.ivh__slide {
  --ivh-after: calc(0.6s + var(--n, 0) * 70ms);
}

.ivh--ready .is-in .ivh__cta {
  transition-delay: calc(var(--ivh-after) + 0.15s);
}

/* ---------- Controls ---------- */

.ivh__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 5;
  pointer-events: none;
}

.ivh__ui-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ivh__dots,
.ivh__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: auto;
}

.ivh__nav {
  gap: 10px;
}

.ivh__dot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.3s ease;
}

.ivh__dot:hover,
.ivh__dot.is-active {
  color: #fff;
}

.ivh__bar {
  position: relative;
  width: 44px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.5s var(--ivh-out);
}

.ivh__dot.is-active .ivh__bar {
  width: 88px;
}

.ivh__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivh-pink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.ivh__dot.is-active .ivh__bar::after {
  animation: ivh-progress var(--ivh-autoplay, 6s) linear forwards;
}

.ivh.is-paused .ivh__dot.is-active .ivh__bar::after {
  animation-play-state: paused;
}

@keyframes ivh-progress {
  to { transform: scaleX(1); }
}

.ivh__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(20, 16, 18, 0.25);
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s ease, transform 0.3s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ivh__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ivh-pink);
  transform: scale(0);
  transition: transform 0.4s var(--ivh-out);
}

.ivh__btn:hover {
  border-color: var(--ivh-pink);
}

.ivh__btn:hover::before {
  transform: scale(1);
}

.ivh__btn:active {
  transform: scale(0.94);
}

.ivh__btn svg {
  position: relative;
  width: 20px;
  height: 20px;
}

.ivh__prev svg {
  transform: rotate(180deg);
}

.ivh__dot:focus-visible,
.ivh__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.ivh__icon-play,
.ivh.is-user-paused .ivh__icon-pause {
  display: none;
}

.ivh.is-user-paused .ivh__icon-play {
  display: block;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .ivh__slide--split .ivh__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
  }

  .ivh__slide--split .ivh__copy {
    padding-bottom: 0;
  }

  .ivh__slide--split .ivh__media,
  .ivh__slide--split.ivh__slide--bare .ivh__media {
    grid-column: 1;
  }

  .ivh__slide--full .ivh__inner {
    padding-bottom: 48px;
  }
}

@media (max-width: 767px) {
  .ivh {
    --ivh-h: clamp(440px, calc(100svh - var(--ivh-head) - 150px), 640px);
  }

  .ivh__slide--full .ivh__inner {
    align-items: flex-end;
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .ivh__slide--ov-light .ivh__media::after,
  .ivh__slide--ov-medium .ivh__media::after {
    background: linear-gradient(0deg, rgba(20, 16, 18, 0.85) 0%, rgba(20, 16, 18, 0.35) 55%, rgba(20, 16, 18, 0.1) 100%);
  }

  .ivh__slide--ov-light .ivh__media::after {
    opacity: 0.75;
  }

  /* Controls sit in a strip under the slides instead of over the image */
  .ivh__ui {
    position: relative;
    bottom: auto;
    padding: 14px 0;
    background: #1f1d1d;
  }

  .ivh__ui-inner {
    justify-content: space-between;
    gap: 16px;
  }

  .ivh__dots {
    gap: 12px;
  }

  .ivh__num {
    display: none;
  }

  .ivh__bar {
    width: 22px;
  }

  .ivh__dot.is-active .ivh__bar {
    width: 48px;
  }

  .ivh__btn {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ivh *,
  .ivh *::before,
  .ivh *::after {
    animation: none !important;
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }

  .ivh--ready .ivh-w > span,
  .ivh--ready .ivh__text,
  .ivh--ready .ivh__cta {
    transform: none;
  }
}