/* Component: CollectionHero ------------------------------------------------ */
@layer components {
  .tp-hero {
    padding: 0 0 26px;
  }

  .tp-hero__image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---- Shared note-card overlay ------------------------------------------
     Geometry (left/top/width/height) is inline from config; type scales with
     the container it sits in (panorama or slice) through cqw. */
  .tp-hero__card {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--tp-color-ink);
    transition: transform 0.35s ease, filter 0.35s ease;
  }

  .tp-hero__card:hover {
    color: var(--tp-color-ink);
    transform: translateY(-6px);
    filter: drop-shadow(var(--tp-shadow-lift));
  }

  .tp-hero__card-no {
    font-family: var(--tp-font-mono);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-hero__card-title {
    font-weight: var(--tp-weight-regular);
    line-height: var(--tp-leading-heading);
    letter-spacing: var(--tp-track-title);
    text-transform: uppercase;
    color: var(--tp-color-ink);
  }

  .tp-hero__card-rule {
    display: block;
    height: 1px;
    background: var(--tp-color-brass-light);
  }

  .tp-hero__card-body {
    font-style: italic;
    font-weight: var(--tp-weight-light);
    line-height: 1.38;
    color: var(--tp-color-text-body);
    text-wrap: pretty;
  }

  .tp-hero__card-cta {
    display: flex;
    align-items: center;
    font-family: var(--tp-font-mono);
    letter-spacing: var(--tp-track-button);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--tp-color-ink);
  }

  .tp-hero__arrow {
    flex: none;
    color: var(--tp-color-cobalt);
  }

  /* ---- Desktop panorama (exported cqw values, container = hero width) ---- */
  .tp-hero__panorama {
    position: relative;
    width: 100%;
    container-type: inline-size;
    animation: tp-fade 0.8s ease both;
  }

  .tp-hero__panorama .tp-hero__card {
    padding: 0.9cqw 0.95cqw;
  }

  .tp-hero__panorama .tp-hero__card-no {
    font-size: max(9px, 0.45cqw);
  }

  .tp-hero__panorama .tp-hero__card-title {
    margin: 0.4cqw 0 0;
    font-size: max(12.5px, 0.8cqw);
  }

  .tp-hero__panorama .tp-hero__card-rule {
    width: 1.6cqw;
    margin: 0.5cqw 0;
  }

  .tp-hero__panorama .tp-hero__card-body {
    font-size: max(10.5px, 0.62cqw);
  }

  .tp-hero__panorama .tp-hero__card-cta {
    gap: 0.5cqw;
    margin-top: 0.7cqw;
    font-size: max(9px, 0.45cqw);
  }

  .tp-hero__panorama .tp-hero__arrow {
    width: max(18px, 1.6cqw);
    height: max(6px, 0.55cqw);
  }

  /* ---- Tablet / mobile carousel ------------------------------------------
     Slices are exact cuts of the panorama: gap 0, no gutters, natural aspect
     (617 × 849) from the width/height attributes, never cropped. */
  .tp-hero__carousel {
    display: none;
    animation: tp-fade 0.8s ease both;
  }

  .tp-hero__rail {
    position: relative;
    display: flex;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tp-hero__rail::-webkit-scrollbar {
    display: none;
  }

  .tp-hero__rail:focus-visible {
    outline-offset: -3px;
  }

  .tp-hero__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    container-type: inline-size;
  }

  /* Card 01 is painted across the first cut, so its overlay reaches into the
     next slice. Earlier slices paint above later ones so it stays on top. */
  .tp-hero__slide:nth-child(1) { z-index: 3; }
  .tp-hero__slide:nth-child(2) { z-index: 2; }
  .tp-hero__slide:nth-child(3) { z-index: 1; }

  /* The note card is the snap target, not the slice. The rail is one
     continuous panorama, so snapping to the card frames it whole at every
     width instead of letting a slice edge cut it. */
  .tp-hero__slide .tp-hero__card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Slice type: the panorama values × 3.0 (1852 / 617), same px minimums. */
  .tp-hero__slide .tp-hero__card {
    padding: 2.7cqw 2.85cqw;
  }

  .tp-hero__slide .tp-hero__card-no {
    font-size: max(9px, 1.35cqw);
  }

  .tp-hero__slide .tp-hero__card-title {
    margin: 1.2cqw 0 0;
    font-size: max(12.5px, 2.4cqw);
  }

  .tp-hero__slide .tp-hero__card-rule {
    width: 4.8cqw;
    margin: 1.5cqw 0;
  }

  .tp-hero__slide .tp-hero__card-body {
    font-size: max(10.5px, 1.86cqw);
  }

  .tp-hero__slide .tp-hero__card-cta {
    gap: 1.5cqw;
    margin-top: 2.1cqw;
    font-size: max(9px, 1.35cqw);
  }

  .tp-hero__slide .tp-hero__arrow {
    width: max(18px, 4.8cqw);
    height: max(6px, 1.65cqw);
  }

  /* Indicator: 01 — 02 — 03, active in ink, others in gold text. */
  .tp-hero__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-wide);
    text-transform: uppercase;
  }

  .tp-hero__dot {
    min-width: var(--tp-tap-target);
    min-height: var(--tp-tap-target);
    padding: 0 6px;
    color: var(--tp-color-gold-text);
    transition: color var(--tp-dur-fast) ease;
  }

  .tp-hero__dot:hover,
  .tp-hero__dot.is-active {
    color: var(--tp-color-ink);
  }

  .tp-hero__indicator-rule {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--tp-color-brass-soft);
  }

  @media (max-width: 1099px) {
    .tp-hero__panorama {
      display: none;
    }

    .tp-hero__carousel {
      display: block;
    }

    /* Tablet: a peek of the next slice keeps the panorama continuous and the
       hero at a sensible height; three distinct snap positions remain. */
    .tp-hero__slide {
      flex-basis: 60%;
    }
  }

  @media (max-width: 699px) {
    .tp-hero {
      padding-bottom: 20px;
    }

    .tp-hero__slide {
      flex-basis: 100%;
    }

    .tp-hero__slide .tp-hero__card-title {
      letter-spacing: 0.04em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tp-hero__rail {
      scroll-behavior: auto;
    }

    .tp-hero__card:hover {
      transform: none;
    }
  }
}