/* Cinematic column hero — index only (wings + center frame slot) */

.tlr-hero.section {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible !important;
  contain: none;
}

.tlr-hero {
  --hero-card-w: clamp(164px, 12.5vw, 248px);
  --hero-card-gap: 16px;
  --hero-col-gap: 14px;
  --hero-card-ar: 3 / 5.2;
  --hero-card-scale: 1;
  --hero-speed-a: 52s;
  --hero-speed-b: 38s;
  --hero-sticky-h: 88svh;
  --hero-trail: clamp(72px, 11vh, 152px);
  position: relative;
  display: block;
  height: calc(var(--hero-sticky-h) + var(--hero-trail));
  min-height: calc(var(--hero-sticky-h) + var(--hero-trail));
  overflow: visible;
  background: rgb(20, 20, 19);
  color: #faf9f5;
  box-sizing: border-box;
}

.tlr-hero__sticky {
  position: relative;
  z-index: 1;
  height: var(--hero-sticky-h);
  max-height: var(--hero-sticky-h);
  overflow: hidden;
}

.tlr-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 720px) minmax(0, 1fr);
  align-items: start;
  pointer-events: none;
  overflow: hidden;
}

#tlr-hero > .runner-copy {
  position: absolute;
  left: 50%;
  top: 43.5%;
  z-index: 5;
  width: min(760px, 94vw);
  margin: 0;
  padding: 0 16px;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}

.tlr-hero__wing {
  display: grid;
  grid-template-columns: repeat(2, var(--hero-card-w));
  gap: var(--hero-col-gap);
  position: relative;
  width: fit-content;
  max-width: 100%;
  height: 100%;
  min-height: var(--hero-sticky-h);
  max-height: var(--hero-sticky-h);
  opacity: 0.55;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  pointer-events: none;
  box-sizing: border-box;
}

.tlr-hero__wing--left {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  justify-items: stretch;
  padding-right: clamp(8px, 1.2vw, 16px);
}

.tlr-hero__wing--right {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  justify-items: stretch;
  padding-left: clamp(8px, 1.2vw, 16px);
}

.tlr-hero__column {
  width: var(--hero-card-w);
  max-width: var(--hero-card-w);
  overflow: hidden;
  height: 100%;
  min-height: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.tlr-hero__track {
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.tlr-hero__track--up {
  animation: tlr-hero-scroll-up var(--hero-speed-a) linear infinite;
}

.tlr-hero__track--down {
  animation: tlr-hero-scroll-down var(--hero-speed-b) linear infinite;
}

.tlr-hero__column--l2 .tlr-hero__track--down,
.tlr-hero__column--r1 .tlr-hero__track--down {
  --hero-speed-b: 38s;
}

.tlr-hero__column--l1 .tlr-hero__track--up,
.tlr-hero__column--r2 .tlr-hero__track--up {
  --hero-speed-a: 52s;
}

.tlr-hero__set {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  /* Trailing gutter matches inter-card gap so loop duplicate sets stay evenly spaced. */
  padding-bottom: var(--hero-card-gap);
  box-sizing: border-box;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hero-card-gap);
  flex-shrink: 0;
}

.tlr-hero__card {
  flex: 0 0 auto;
  margin: 0;
  width: var(--hero-card-w);
  overflow: hidden;
  border-radius: 9px;
}

.tlr-hero__img {
  display: block;
  width: var(--hero-card-w);
  aspect-ratio: var(--hero-card-ar, 3 / 4);
  object-fit: cover;
  object-position: center;
  border-radius: 9px;
  background: rgb(37, 37, 35);
  transform: scale(var(--hero-card-scale, 1));
  transform-origin: center center;
}

.tlr-hero .runner-copy {
  width: min(760px, 94vw);
  margin-inline: auto;
  text-align: center;
}

@keyframes tlr-hero-scroll-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes tlr-hero-scroll-down {
  from {
    transform: translate3d(0, -50%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 991px) {
  .tlr-hero {
    --hero-card-w: clamp(92px, 11vw, 132px);
    --hero-card-gap: 10px;
    --hero-col-gap: 8px;
    --hero-card-ar: 3 / 4;
    --hero-card-scale: 1;
  }

  .tlr-hero__stage {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr) minmax(0, 1fr);
  }

  .tlr-hero__column--outer {
    display: none;
  }

  .tlr-hero__wing {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .tlr-hero__column {
    width: auto;
    max-width: none;
  }

  .tlr-hero__wing--left {
    justify-items: center;
  }

  .tlr-hero__wing--right {
    justify-items: center;
  }

  /* One column per wing: left scrolls up, right scrolls down */
  .tlr-hero__wing--left .tlr-hero__track--down {
    animation: tlr-hero-scroll-up var(--hero-speed-a) linear infinite;
  }
}

/* Mobile editorial hero — horizontal strip (desktop wings unchanged above 767px) */
.tlr-hero__mobile-strip {
  display: none;
}

@media (max-width: 767px) {
  .tlr-hero.section {
    overflow-x: clip !important;
  }

  .tlr-hero {
    --hero-mobile-tile-w: clamp(96px, 28vw, 124px);
    --hero-mobile-tile-h: clamp(100px, 28vw, 130px);
    --hero-mobile-gap: clamp(8px, 2.5vw, 12px);
    height: auto !important;
    min-height: 0 !important;
    background: #111111;
    overflow-x: clip;
  }

  .tlr-hero.section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .tlr-hero__sticky {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
    padding-top: clamp(32px, 8vh, 52px);
    box-sizing: border-box;
  }

  .tlr-hero__stage {
    display: none !important;
  }

  #tlr-hero > .runner-copy {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 16px 6px;
    transform: none;
    justify-content: flex-start;
  }

  .tlr-hero .runner-copy {
    width: 100%;
    padding-inline: 16px;
  }

  .tlr-hero__mobile-strip {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin-top: clamp(32px, 7.5vw, 44px);
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    pointer-events: none;
  }

  .tlr-hero__mobile-strip-viewport {
    width: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tlr-hero__mobile-strip-viewport::-webkit-scrollbar {
    display: none;
  }

  .tlr-hero__mobile-strip-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: tlr-hero-mobile-marquee 38s linear infinite;
  }

  .tlr-hero__mobile-strip-seq {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--hero-mobile-gap);
    padding-right: var(--hero-mobile-gap);
    flex: 0 0 auto;
  }

  .tlr-hero__mobile-tile {
    flex: 0 0 auto;
    width: var(--hero-mobile-tile-w);
    height: var(--hero-mobile-tile-h);
    border-radius: clamp(13px, 3.5vw, 18px);
    overflow: hidden;
    background: rgb(37, 37, 35);
  }

  .tlr-hero__mobile-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .tlr-hero__mobile-tile--center {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
}

@keyframes tlr-hero-mobile-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 767px) and (min-width: 480px) {
  .tlr-hero {
    --hero-mobile-tile-w: clamp(114px, 19vw, 136px);
    --hero-mobile-tile-h: clamp(118px, 19vw, 142px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlr-hero__track {
    animation: none !important;
    transform: none !important;
  }

  .tlr-hero__track .tlr-hero__set:last-child {
    display: none;
  }

  #tlr-hero > .runner-copy {
    transform: translate3d(-50%, -50%, 0);
  }

  @media (max-width: 767px) {
    #tlr-hero > .runner-copy {
      transform: none;
    }

    .tlr-hero__mobile-strip-track {
      animation: none;
      width: 100%;
      justify-content: center;
      transform: none;
    }

    .tlr-hero__mobile-strip-seq:last-child {
      display: none;
    }

    .tlr-hero__mobile-strip-viewport {
      display: flex;
      justify-content: center;
    }
  }
}