/* Highlights — black wire grid organizer */

#highlights {
  overflow: visible;
}

#highlights .container {
  overflow: visible;
}

.highlights-board-wrap {
  --hl-cols: 10;
  --hl-rows: 6;
  --hl-frame: clamp(8px, 2.2vw, 15px);
  /* Fallback before container queries; overridden below when cqi is available. */
  --hl-cell: clamp(22px, calc((100vw - 3rem - (var(--hl-frame) * 2)) / var(--hl-cols)), 102px);
  --hl-font: var(--font-body, "Montserrat", "Segoe UI", sans-serif);
  container-type: inline-size;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: clamp(2.75rem, calc(var(--hl-cell) * 1.15), 5.5rem);
  overflow: visible;
}

@supports (width: 1cqi) {
  .highlights-board-wrap {
    --hl-frame: clamp(8px, 2.2cqi, 15px);
    --hl-cell: clamp(22px, calc((100cqi - (var(--hl-frame) * 2)) / var(--hl-cols)), 102px);
  }
}

.highlights-board {
  --cell: var(--hl-cell);
  --board-w: calc(var(--hl-cols) * var(--hl-cell) + var(--hl-frame) * 2);
  --board-h: calc(var(--hl-rows) * var(--hl-cell) + var(--hl-frame) * 2);
  position: relative;
  width: var(--board-w);
  height: var(--board-h);
  max-width: none;
  flex-shrink: 0;
  border-radius: 10px;
  /* Opacity-only: parent transforms make CSS grid hairlines vanish on mobile Safari */
  animation: highlights-settle 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes highlights-settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.highlights-board__frame {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.highlights-board__mesh {
  --hl-line: 1.5px;
  position: absolute;
  inset: var(--hl-frame);
  z-index: 1;
  border-radius: 4px;
  background-image:
    linear-gradient(to right, #1f1f1f var(--hl-line), transparent var(--hl-line)),
    linear-gradient(to bottom, #1f1f1f var(--hl-line), transparent var(--hl-line));
  background-size: var(--hl-cell) var(--hl-cell);
  background-position: 0 0;
  box-shadow: inset 0 0 0 var(--hl-line) #1f1f1f;
  pointer-events: none;
  /* Own compositing layer — avoids disappearing under ancestor transforms */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Don't translate the board wrap — that drop the mesh on iOS after scroll/reveal */
#highlights .highlights-board-wrap[data-reveal="fade-up"] {
  transform: none;
}

#highlights .highlights-board-wrap[data-reveal="fade-up"]:not(.is-visible) {
  opacity: 0;
}

#highlights .highlights-board-wrap[data-reveal="fade-up"].is-visible {
  opacity: 1;
  transform: none;
}

.highlights-board .cards {
  position: absolute;
  inset: var(--hl-frame);
  z-index: 2;
}

.highlights-board .pin-card {
  --tilt: 0deg;
  position: absolute;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-12px) rotate(var(--tilt));
  transform-origin: top center;
  animation: highlights-hang 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  overflow: visible;
  cursor: zoom-in;
}

.highlights-board .pin-card:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 4px;
}

.highlights-board .pin-card__num {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 4;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.82);
  color: #fff;
  font-family: var(--hl-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.highlights-board .pin-card--soon .pin-card__num {
  background: rgba(28, 28, 28, 0.55);
}

.highlights-board .pin-card > img.pin-card__photo,
.highlights-board .pin-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 2px;
  transition: transform 0.4s ease, filter 0.45s ease;
  transform-origin: top center;
  background: #f2f2f2;
  filter: grayscale(1);
}

.highlights-board .pin-card:nth-child(1) { animation-delay: 0.08s; }
.highlights-board .pin-card:nth-child(2) { animation-delay: 0.16s; }
.highlights-board .pin-card:nth-child(3) { animation-delay: 0.24s; }
.highlights-board .pin-card:nth-child(4) { animation-delay: 0.32s; }
.highlights-board .pin-card:nth-child(5) { animation-delay: 0.4s; }

@keyframes highlights-hang {
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt));
  }
}

.highlights-board .pin-card:hover > .pin-card__photo {
  transform: scale(1.015);
  filter: grayscale(0);
}

.highlights-board .pin-card--tl {
  --tilt: 2.2deg;
  top: calc(var(--cell) * -0.015);
  left: calc(var(--cell) * 0.55);
  width: calc(var(--cell) * 3.9);
  height: calc(var(--cell) * 2.35);
}

.highlights-board .pin-card--tr {
  --tilt: -2deg;
  top: calc(var(--cell) * -0.0475);
  right: calc(var(--cell) * 0.45);
  width: calc(var(--cell) * 3.85);
  height: calc(var(--cell) * 1.65);
}

.highlights-board .pin-card--bl {
  --tilt: -1deg;
  bottom: calc(var(--cell) * 0.35);
  left: calc(var(--cell) * 0.896);
  width: calc(var(--cell) * 1.96);
  height: calc(var(--cell) * 2.76);
}

.highlights-board .pin-card--bm {
  --tilt: -2.4deg;
  bottom: calc(var(--cell) * 0.685);
  left: 50%;
  width: calc(var(--cell) * 2.25);
  height: calc(var(--cell) * 3.35);
  margin-left: calc(var(--cell) * -1.0125);
}

.highlights-board .pin-card--br {
  --tilt: 1.2deg;
  bottom: calc(var(--cell) * 0.975);
  right: calc(var(--cell) * 0.55);
  width: calc(var(--cell) * 2.5);
  height: auto;
  aspect-ratio: 4 / 5;
}

.highlights-board .pin-card--soon {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.highlights-board .pin-card--soon:focus-visible {
  outline: none;
}

.highlights-board .pin-card--soon:hover > .pin-card__photo {
  transform: none;
}

.highlights-board .pin-card__soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem;
  text-align: center;
  pointer-events: none;
}

.highlights-board .pin-card__soon-label {
  font-family: var(--hl-font);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.78rem, 1.35vw, 0.95rem);
  color: #6a6a6a;
  letter-spacing: 0.06em;
  text-transform: none;
  line-height: 1.25;
}

.highlights-board .pin-card__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 1.1rem;
}

.highlights-board .pin-card__loader span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #1a1a1a;
  opacity: 0.25;
  animation: highlights-dots-pulse 1.2s ease-in-out infinite;
}

.highlights-board .pin-card__loader span:nth-child(2) {
  animation-delay: 0.18s;
}

.highlights-board .pin-card__loader span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes highlights-dots-pulse {
  0%, 80%, 100% {
    opacity: 0.22;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.highlights-board .peg {
  position: absolute;
  top: calc(var(--hl-cell) * -0.82);
  left: 50%;
  width: calc(var(--hl-cell) * 0.54);
  height: auto;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  transition: transform 0.35s ease;
}

.highlights-board .pin-card:hover .peg {
  transform: translateX(-50%) translateY(-10%);
}

.highlights-board .pin-card--soon:hover .peg {
  transform: translateX(-50%);
}

.highlights-board .peg img {
  display: block;
  width: 100%;
  height: auto;
}

/* Highlights gallery lightbox */
.highlights-lb {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.highlights-lb.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.highlights-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  border: 0;
  cursor: zoom-out;
}

.highlights-lb__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(96vw, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  overflow: visible;
}

.highlights-lb__stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.highlights-lb__frame {
  position: relative;
  width: min(92vw, 1600px);
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: min(82vh, 960px);
  max-width: min(94vw, 100%);
  background: #111;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  line-height: 0;
}

.highlights-lb__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #111;
  user-select: none;
  -webkit-user-drag: none;
}

.highlights-lb__close,
.highlights-lb__nav {
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  cursor: pointer;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.highlights-lb__close:hover,
.highlights-lb__close:focus-visible {
  background: #fff;
  transform: scale(1.06);
  outline: none;
}

.highlights-lb__nav:hover,
.highlights-lb__nav:focus-visible {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
  outline: none;
}

.highlights-lb__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--red);
  z-index: 2;
}

.highlights-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.35rem;
  color: var(--red);
  z-index: 2;
}

.highlights-lb__nav--prev { left: max(15vw, calc(0.75rem + env(safe-area-inset-left, 0px))); }
.highlights-lb__nav--next { right: max(15vw, calc(0.75rem + env(safe-area-inset-right, 0px))); }

.highlights-lb__nav[hidden],
.highlights-lb__counter[hidden] {
  display: none !important;
}

.highlights-lb__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #f2f2f2;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.highlights-lb__counter {
  min-width: 3.5rem;
  text-align: center;
  opacity: 0.85;
}

body.highlights-lb-open {
  overflow: hidden;
}

body.highlights-lb-open .c-cursor {
  z-index: 10110;
}

@media (prefers-reduced-motion: reduce) {
  .highlights-board,
  .highlights-board .pin-card {
    animation: none !important;
    opacity: 1;
    transform: rotate(var(--tilt));
  }

  .highlights-board .pin-card__loader span {
    animation: none !important;
    opacity: 0.55;
  }

  .highlights-lb {
    transition: none;
  }
}

@media (max-width: 768px) {
  .highlights-board__mesh {
    /* Slightly thicker than 1.5px so subpixel rounding can't erase lines */
    --hl-line: 2px;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 720px) {
  #highlights .container {
    width: min(var(--container), 100% - 1.25rem);
  }

  .highlights-board-wrap {
    padding-top: calc(var(--hl-cell) * 1.25);
  }

  .highlights-board .pin-card__soon-label {
    font-size: clamp(0.52rem, 2.4cqi, 0.78rem);
    letter-spacing: 0.04em;
  }

  .highlights-board .pin-card__loader {
    gap: 0.22rem;
    height: 0.85rem;
  }

  .highlights-board .pin-card__loader span {
    width: 0.28rem;
    height: 0.28rem;
  }
}

/* Tablet / mobile (≤1100, covers 768–1024): tap colors the preview,
   then lightbox opens after 0.96s — same flow as phones. */
@media (max-width: 1100px) {
  .highlights-board .pin-card > img.pin-card__photo,
  .highlights-board .pin-card__photo {
    transition: transform 0.44s ease, filter 0.68s ease;
  }

  .highlights-board .pin-card.is-color > .pin-card__photo,
  .highlights-board .pin-card:active > .pin-card__photo {
    transform: scale(1.015);
    filter: grayscale(0);
  }

  .highlights-board .pin-card.is-color .peg {
    transform: translateX(-50%) translateY(-10%);
    transition: transform 0.44s ease;
  }

  /* Photo centered; arrows sit in side gutters and never overlap the image */
  .highlights-lb {
    --hl-lb-nav-gutter: 3.35rem;
    padding-inline: var(--hl-lb-nav-gutter);
    padding-block: 1rem;
  }

  .highlights-lb__panel {
    width: 100%;
    max-width: calc(100vw - 2 * var(--hl-lb-nav-gutter));
  }

  .highlights-lb__frame {
    width: 100%;
    max-width: 100%;
  }

  .highlights-lb__nav {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.125rem;
  }

  .highlights-lb__nav--prev {
    left: calc(-1 * var(--hl-lb-nav-gutter) + 0.35rem);
  }

  .highlights-lb__nav--next {
    right: calc(-1 * var(--hl-lb-nav-gutter) + 0.35rem);
  }
}