/*
  4 independent auto-scrolling rows, one per highlight project (matches the
  isolated Figma reference frame node 6672:174 "Highlights" — 4 rows, each its own
  project's own photo set, not one shared set of cards repeated in every row).
  Each row's own images (src/width per _data/highlights.json) loop via
  .highlights__track; offset/reversed per row (nth-child below) just so they don't
  all move in sync. Pausing on hover uses plain CSS (:has()) — no JS needed for any
  of this.
*/
.highlights {
  padding: clamp(148px, 15.42vw, 296px) 0 clamp(48px, 5vw, 96px);
  overflow-x: hidden;
}

.highlights__title {
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-bold);
  font-size: clamp(28px, 2.92vw, 56px);
  letter-spacing: clamp(8px, 1.66vw, 31.92px);
  text-transform: capitalize;
  margin: 0 0 clamp(57px, 5.94vw, 114px); /* Figma 164, minus 50 per user */
}

.highlights__row {
  /*
    `overflow-x: hidden` (to hide the marquee's infinite-loop seam) with
    `overflow-y: visible` doesn't actually work — per the CSS spec, when one axis is
    "hidden" the other computes to "auto" instead of staying "visible", which still
    clips. So instead: `overflow: hidden` on both axes like before, but with enough
    vertical padding that a card scaled up 8% on hover never reaches that edge in
    the first place, so there's nothing left to clip.
  */
  overflow: hidden;
  padding: clamp(10px, 1vw, 20px) 0;
  margin: 0 0 clamp(52px, 6.32vw, 121px);
}

.highlights__track {
  display: flex;
  align-items: center;
  gap: clamp(38px, 3.86vw, 74.094px);
  width: max-content;
  animation: highlights-scroll 36s linear infinite;
}

/* Pause the whole row the moment any card in it is hovered. */
.highlights__track:has(.highlights__card:hover) {
  animation-play-state: paused;
}

.highlights__row--1 .highlights__track {
  animation-direction: reverse;
}
.highlights__row--2 .highlights__track {
  animation-delay: -9s;
}
.highlights__row--3 .highlights__track {
  animation-delay: -18s;
  animation-direction: reverse;
}
.highlights__row--4 .highlights__track {
  animation-delay: -27s;
}

@keyframes highlights-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/*
  Every card in a row shares that project's border color and the same height now
  (the isolated Highlights reference frame — 6672:174 — has all 4 images per row
  within a few px of each other, 366-373px, unlike the earlier mixed-in-page copy
  where the non-hero images read as a shorter/secondary tier). The hero keeps the
  one thing that's still genuinely different in Figma: its drop shadow.
*/
.highlights__card {
  position: relative;
  flex-shrink: 0;
  width: var(--card-w);
  height: clamp(194px, 19.39vw, 372.321px);
  border-radius: clamp(8px, 0.77vw, 14.819px);
  border: clamp(2px, 0.19vw, 3.705px) solid var(--card-border);
  overflow: hidden;
  transition: transform 0.3s var(--ease-standard);
}

.highlights__card--hero {
  box-shadow: 0 clamp(3px, 0.29vw, 5.557px) clamp(5px, 0.48vw, 9.262px) clamp(2px, 0.19vw, 3.705px) rgba(0, 0, 0, 0.15),
    0 clamp(1px, 0.1vw, 1.852px) clamp(1px, 0.14vw, 2.779px) 0 rgba(0, 0, 0, 0.3);
}

/* project without a page yet (no link): not clickable, so no hand cursor */
div.highlights__card {
  cursor: default;
}

.highlights__card:hover {
  transform: scale(1.08);
  z-index: 5;
}

.highlights__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Darken + centered project name, on top of the existing scale-up hover. */
.highlights__card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

.highlights__card:hover .highlights__card-overlay {
  opacity: 1;
}

.highlights__card-title {
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: clamp(18px, 1.67vw, 32px);
  text-align: center;
  padding: 0 clamp(12px, 1.5vw, 28px);
}

/*
  One-line description under each row (Figma 6791:179, text 6800:221–224): x 69,
  29px under the cards, 150px above the next row. Bold project name 32 + regular
  24, 3% tracking. Figma has rows 1 and 4 in light text, but on the site all four
  sit on the light fog (measured stops, hero-motion.js), so all are dark.
*/
.highlights__row:has(+ .highlights__desc) {
  margin-bottom: 0;
}

.highlights__desc {
  margin: clamp(5px, 0.47vw, 9px) 0 clamp(68px, 6.77vw, 130px); /* minus the row's 20px padding */
  padding: 0 clamp(20px, 3.59vw, 69px);
  color: var(--color-bg);
  font-family: var(--font-regular);
  font-size: clamp(12px, 0.9375vw, 18px); /* user: 18 (Figma 24) */
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.highlights__desc strong {
  font-family: var(--font-bold);
  font-weight: normal;
  font-size: clamp(17px, 1.667vw, 32px);
}

/*
  Mouse devices: the description lives in a sticker that follows the cursor over
  each row (assets/js/highlights-tag.js) instead of the static line, so the rows
  keep their original spacing. Touch devices / phones keep the static line.
*/
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .highlights__desc { display: none; }
  .highlights__row:has(+ .highlights__desc) {
    margin-bottom: clamp(52px, 6.32vw, 121px);
  }
}

.highlights-tag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  max-width: clamp(300px, 27vw, 520px);
  padding: clamp(10px, 0.83vw, 16px) clamp(16px, 1.25vw, 24px);
  border-radius: clamp(16px, 1.25vw, 24px);
  background: var(--tag-color, var(--color-pink));
  color: var(--color-bg);
  font-family: var(--font-regular);
  font-size: clamp(13px, 0.9375vw, 18px);
  letter-spacing: 0.03em;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity;
}
.highlights-tag strong {
  display: block;
  font-family: var(--font-bold);
  font-weight: normal;
  font-size: clamp(17px, 1.25vw, 24px);
}

@media (prefers-reduced-motion: reduce) {
  .highlights__track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .highlights__card {
    height: 180px;
  }
  .highlights__desc {
    margin: 4px 0 56px;
    font-size: 0.8rem;
  }
  .highlights__desc strong {
    font-size: 1.05rem;
  }
}