/*
 * trioni/hero-carousel (port of prototype/css/components/hero.css) — full-bleed frame (edge to
 * edge at every width, owner decision 28/09) whose text keeps the page column (--hero-inset),
 * text tabs instead of dots, whole slide clickable via stretched CTA, fixed H1 kicker (never rotates).
 * Slides stack in one grid cell so the frame never changes height (no CLS).
 * Loaded only when the block renders (wp_enqueue_block_style).
 */

/* The block's own .wrap does not constrain the frame: it runs from edge to edge. */
.hero > .wrap {
  max-width: none;
  padding-inline: 0;
}

.hero__frame {
  /* Left edge of the page column (.wrap); percentages resolve against the full-width frame. */
  --hero-inset: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Grows with the tallest slide (all slides share one grid cell), never clips a CTA. */
  min-height: clamp(420px, 33vw, 480px);
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  isolation: isolate;
}

.hero__kicker {
  position: absolute;
  top: var(--s-5);
  left: var(--hero-inset);
  z-index: 3;
  max-width: 34rem;
  color: var(--on-ink-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.hero__stage {
  display: grid;
  grid-area: 1 / 1;
  /* A definite track: slide media (e.g. the portrait gift photo) must never size the carousel. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  height: 100%;
}

.hero__slide {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow);
}

.hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 55%;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Stops follow the text column, so the copy keeps its contrast on very wide screens too. */
  background: linear-gradient(
    90deg,
    #191914 0,
    rgba(25, 25, 20, 0.94) calc(var(--hero-inset) + 21rem),
    rgba(25, 25, 20, 0.45) calc(var(--hero-inset) + 43rem),
    rgba(25, 25, 20, 0) calc(var(--hero-inset) + 62rem)
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: calc(var(--hero-inset) + 31rem);
  padding: 56px var(--s-7) calc(56px + var(--s-5)) var(--hero-inset);
}

.hero__content .eyebrow {
  margin-bottom: var(--s-4);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero__title em {
  color: var(--gold-on-ink);
}

.hero__text {
  max-width: 30rem;
  margin: var(--s-4) 0 var(--s-5);
  color: #d9d4c7;
  font-size: var(--fs-md);
  line-height: 1.55;
}

.hero__text strong {
  color: var(--on-ink);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.hero__fine {
  display: block;
  margin-top: var(--s-2);
  color: var(--on-ink-muted);
  font-size: var(--fs-xs);
}

/* Stretched link: the CTA covers the whole slide (controls sit above it). */
.hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__cta {
  position: static;
}

.hero__slide:hover .hero__cta {
  background: var(--gold-hover);
}

.hero__provisional {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  z-index: 3;
  padding: 4px 8px;
  border: 1px dashed rgba(201, 171, 112, 0.7);
  color: var(--gold-on-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--ink-deep);
}

/* Composition: product vitrine (slide 2) */
.hero__media--vitrine {
  background:
    radial-gradient(70% 90% at 72% 50%, rgba(187, 155, 96, 0.22), transparent 70%),
    var(--ink);
}

/* Illustrated media stays above the tab bar so it never covers the controls. */
.hero__media--vitrine,
.hero__media--hallmark,
.hero__media--gift {
  bottom: 56px;
}

.vitrine {
  position: absolute;
  top: 50%;
  right: clamp(24px, 9vw, 150px);
  height: min(84%, 400px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.vitrine::before {
  content: '';
  position: absolute;
  inset: 12% 8% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 171, 112, 0.28), transparent);
  filter: blur(8px);
}

.vitrine__bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-9deg);
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.6));
}

.vitrine__label {
  position: absolute;
  left: 50%;
  bottom: 0;
  color: var(--gold-on-ink);
  background: var(--ink); /* opaque: contrast must not depend on the photo */
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Composition: typographic hallmark (slide 3) */
.hero__media--hallmark {
  display: grid;
  place-items: center end;
  padding-right: clamp(24px, 8vw, 140px);
  background:
    radial-gradient(60% 80% at 75% 45%, rgba(187, 155, 96, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
    var(--ink);
}

.hallmark-xl {
  display: grid;
  place-items: center;
  padding: 0.18em 0.42em;
  border: 2px solid rgba(201, 171, 112, 0.55);
  outline: 2px solid rgba(201, 171, 112, 0.3);
  outline-offset: 10px;
  border-radius: 10px;
  color: transparent;
  font-family: var(--font-serif);
  font-size: clamp(5rem, 11vw, 9.5rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
  -webkit-text-stroke: 1.5px rgba(201, 171, 112, 0.85);
  letter-spacing: 0.04em;
}

/* Composition: gift-card photo (slide 4, portrait 3:4) */
.hero__media--gift {
  display: grid;
  place-items: center end;
  padding-right: clamp(24px, 11vw, 200px);
  background:
    radial-gradient(60% 80% at 72% 50%, rgba(187, 155, 96, 0.2), transparent 70%),
    var(--ink);
}

.hero__media--gift {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

/* Width-driven (never height %): a percentage height here made the grid track size itself
   from the image and, with sizes="auto" on lazy images, blew the carousel up on phones. */
.hero__media > .hero__gift-photo { /* beats the full-bleed .hero__media > img */
  /* Explicit width AND height: until the slide is shown the <img> has no src (data-src),
     and an unloaded image ignores aspect-ratio. */
  --gift-w: clamp(110px, 24vw, 330px);
  width: var(--gift-w);
  height: calc(var(--gift-w) * 4 / 3);
  max-width: none;
  border-radius: 12px;
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.85);
  transform: rotate(-4deg);
}

/* ---------- Controls ---------- */
.hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  min-height: 56px;
  /* The pause icon (16 px centred in its 44 px button) lines up with the text column. */
  padding-inline: max(var(--s-4), calc(var(--hero-inset) - 14px));
  border-top: 1px solid rgba(241, 237, 227, 0.12);
  background: rgba(17, 17, 16, 0.72);
  backdrop-filter: blur(6px);
}

.hero__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  flex: none;
  border: 0;
  background: none;
  color: var(--on-ink);
}

.hero__toggle[hidden] {
  display: none;
}

.hero__toggle svg {
  width: 16px;
  height: 16px;
}

.hero__tabs {
  display: flex;
  flex: 1 1 auto;
  gap: clamp(var(--s-4), 3vw, var(--s-7));
  overflow-x: auto;
  scrollbar-width: none;
}

.hero__tabs::-webkit-scrollbar {
  display: none;
}

.hero__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-ink-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.hero__tab-index {
  color: var(--gold-on-ink);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.hero__tab:hover,
.hero__tab[aria-selected='true'] {
  color: var(--on-ink);
}

.hero__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(241, 237, 227, 0.16);
}

.hero__tab[aria-selected='true']::after {
  background: rgba(201, 171, 112, 0.45);
}

.hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2px;
  background: var(--gold-on-ink);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__tab[aria-selected='true'] .hero__progress {
  transform: scaleX(1);
}

.hero__frame.is-rotating .hero__tab[aria-selected='true'] .hero__progress {
  animation: hero-progress var(--hero-interval, 8000ms) linear forwards;
}

.hero__frame.is-paused .hero__tab[aria-selected='true'] .hero__progress {
  animation-play-state: paused;
}

.hero__stage {
  touch-action: pan-y;
}

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

  to {
    transform: scaleX(1);
  }
}

.hero__counter {
  display: none;
  align-self: center;
  margin-left: auto;
  color: var(--on-ink-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsive ---------- */
@media (max-width: 1179px) {
  .hero__frame {
    max-height: none;
  }
}

/* Tablet band: media takes the right half, text sits on solid ink on the left
   (no overlap with illustrations, text contrast guaranteed over the photo). */
@media (min-width: 760px) and (max-width: 1179px) {
  .hero__media {
    left: 50%;
  }

  .hero__veil {
    background: linear-gradient(90deg, #191914 0%, #191914 50%, rgba(25, 25, 20, 0.55) 58%, rgba(25, 25, 20, 0) 72%);
  }

  /* Height follows the tallest slide (slides share one grid cell, so no CLS). */
  .hero__frame {
    height: auto;
    min-height: 480px;
  }

  .hero__content {
    max-width: 50%;
    padding-right: var(--s-5);
    padding-bottom: calc(56px + var(--s-6));
  }

  /* Keep the H1 in the left text column, clear of the right-half media labels. */
  .hero__kicker {
    max-width: calc(50% - 2 * var(--s-5));
  }

  .hero__text {
    max-width: none;
    font-size: var(--fs-base);
  }

  .vitrine {
    right: 50%;
    transform: translate(50%, -50%);
  }

  .hero__media--hallmark,
  .hero__media--gift {
    place-items: center;
    padding: 0;
  }

  .hallmark-xl {
    font-size: clamp(4rem, 8vw, 6.5rem);
  }
}

@media (max-width: 759px) {
  .hero__frame {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto;
  }

  .hero__kicker {
    position: static;
    grid-row: 1;
    padding: var(--s-3) var(--gutter);
    font-size: var(--fs-2xs);
    line-height: 1.4;
  }

  .hero__stage {
    grid-area: 2 / 1;
  }

  .hero__slide {
    align-items: start;
    grid-template-rows: auto 1fr;
  }

  /* A shorter picture strip (2:1) keeps the whole slide within one phone screen. */
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 2 / 1;
  }

  .hero__veil {
    background: linear-gradient(180deg, rgba(25, 25, 20, 0) 55%, #191914 100%);
    height: auto;
    aspect-ratio: 2 / 1;
    inset: 0 0 auto 0;
    z-index: 0;
  }

  .hero__content {
    max-width: none;
    padding: var(--s-3) var(--gutter) var(--s-5);
  }

  .hero__content .eyebrow {
    margin-bottom: var(--s-2);
  }

  .hero__text {
    margin: var(--s-3) 0 var(--s-4);
    font-size: var(--fs-base);
    line-height: 1.5;
  }

  .hero__content .btn {
    width: 100%;
    justify-content: space-between;
  }

  .hero__media--vitrine,
  .hero__media--hallmark,
  .hero__media--gift {
    bottom: auto;
  }

  .vitrine {
    right: 50%;
    height: 82%;
    transform: translate(50%, -50%);
  }

  .hero__media--hallmark,
  .hero__media--gift {
    place-items: center;
    padding: 0;
  }

  .hallmark-xl {
    font-size: 3.5rem;
    outline-offset: 6px;
  }

  .hero__controls {
    position: static;
    grid-area: 3 / 1;
    padding-inline: var(--gutter);
    background: var(--ink-raised);
    backdrop-filter: none;
  }

  /* All four tabs always visible (no hidden horizontal scroll on phones). */
  .hero__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-4);
    overflow: visible;
  }

  .hero__tab {
    min-height: 44px;
    white-space: normal;
  }

  /* Phones: the placeholder note becomes a caption line under the image (never on top of it). */
  .hero__slide {
    grid-template-rows: auto auto 1fr;
  }

  .hero__provisional {
    position: static;
    justify-self: start;
    margin: var(--s-3) var(--gutter) 0;
  }
}