/* highlights.css — Figma "Frame 1621508733" (1920 × 1509) */

.highlightsSection {
  position: relative;
  z-index: 1;
  background: var(--white);
}

.highlightsSection__stage {
  height: auto;
  padding-top: calc(60 * var(--s));
  padding-bottom: calc(20 * var(--s));
}

.highlightsSection__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--s));
  width: calc(1401 * var(--s));
  margin-left: calc(260 * var(--s));
}

.highlightsSection__header .sectionLead {
  width: 100%;
}

.highlightsSection__content {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--s));
  width: calc(1681 * var(--s));
  margin: calc(60 * var(--s)) 0 0 calc(120 * var(--s));
}

.highlightsSection__content .tabBtn--dark:first-child {
  min-width: calc(200 * var(--s));
}

.highlightsGrid {
  display: grid;
  grid-template-columns: repeat(3, calc(547 * var(--s)));
  column-gap: calc(20 * var(--s));
  row-gap: calc(40 * var(--s));
}

.mediaCard {
  display: flex;
  flex-direction: column;
  height: calc(450 * var(--s));
  padding: calc(20 * var(--s));
  border-radius: calc(20 * var(--s));
  background: var(--white);
}

.mediaCard[hidden] {
  display: none;
}

.mediaCard__media {
  position: relative;
  flex-shrink: 0;
  height: calc(279 * var(--s));
  margin-bottom: calc(12 * var(--s));
  border-radius: calc(10 * var(--s));
  overflow: hidden;
}

.mediaCard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mediaCard__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

.mediaCard__img--warmup {
  inset: auto;
  left: -53.13%;
  top: -63.77%;
  width: 193.63%;
  height: 197.92%;
  object-fit: fill;
}

.mediaCard__img--cultural {
  inset: auto;
  left: -0.08%;
  top: -29.8%;
  width: 100%;
  height: 136.42%;
  object-fit: fill;
}

.mediaCard__img--portrait {
  object-position: center 18%;
}
  inset: auto;
  left: -37.52%;
  top: -9.08%;
  width: 153.07%;
  height: 156.46%;
  object-fit: fill;
}

.mediaCard__poster {
  z-index: 1;
}

.mediaCard__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.25);
}

.mediaCard__play {
  z-index: 3;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(80 * var(--s));
  height: calc(82.53 * var(--s));
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.mediaCard__play img {
  width: 100%;
  height: 100%;
}

.mediaCard__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.mediaCard__poster[hidden],
.mediaCard__overlay[hidden],
.mediaCard__play[hidden] {
  display: none;
}

.mediaCard__title {
  margin-bottom: calc(10 * var(--s));
  font-size: calc(20 * var(--s));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: calc(-0.8 * var(--s));
  text-transform: uppercase;
}

.mediaCard__text {
  font-size: calc(20 * var(--s));
  line-height: normal;
  color: var(--ink-soft);
}

.highlightsSection__more {
  position: static;
  display: flex;
  margin: calc(48 * var(--s)) auto 0;
  min-width: calc(215 * var(--s));
}

.highlightsSection__more[hidden] {
  display: none;
}

/* ---------- Tablet & mobile ---------- */
@media (max-width: 1023px) {
  .highlightsSection__stage {
    height: auto;
    padding-block: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .highlightsSection__header {
    width: 100%;
    margin-left: 0;
    gap: 12px;
  }

  .highlightsSection__content {
    width: 100%;
    margin: 28px 0 0;
    gap: 28px;
  }

  .highlightsSection__content .tabBtn--dark:first-child {
    min-width: 0;
  }

  .highlightsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .mediaCard {
    height: auto;
    padding: 0;
  }

  .mediaCard__media {
    height: auto;
    aspect-ratio: 507 / 279;
  }

  .mediaCard__play {
    width: 60px;
    height: 62px;
  }

  .mediaCard__title {
    margin-bottom: 4px;
    font-size: clamp(16px, 2.2vw, 19px);
  }

  .mediaCard__text {
    font-size: clamp(14px, 2vw, 17px);
  }

  .highlightsSection__more {
    position: static;
    margin-top: 36px;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .highlightsGrid {
    display: flex;
    grid-template-columns: none;
    gap: clamp(12px, 3.2vw, 16px);
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px));
    padding-inline: clamp(16px, 4vw, 40px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(16px, 4vw, 40px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .mediaCard {
    flex: 0 0 86%;
    width: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}