/* Supplied images lead the carousel; the text stays inside a quiet lower gradient. */
.highlights { --slide-width: min(1440px, calc(100vw - 60px)); --slide-gap: 20px; }
.carousel-tabs { min-width: 0; max-width: 100%; flex-wrap: wrap; row-gap: 8px; }
.carousel-tabs button { flex: 0 0 auto; }
.highlight-slide { aspect-ratio: 1672 / 941; min-height: 0; border-radius: 0; }
.highlight-shade {
  background: linear-gradient(180deg, transparent 38%, rgba(9, 13, 18, .1) 52%, rgba(9, 13, 18, .8) 100%);
}
.highlight-caption {
  position: absolute; left: 0; bottom: 0;
  width: min(780px, calc(100% - 170px)); margin: 0;
  padding: clamp(28px, 3.2vw, 48px);
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: #fff; text-shadow: 0 1px 15px rgba(0, 0, 0, .2);
}
.highlight-caption:hover { background: transparent; }
.highlight-caption p { margin-bottom: 12px; font-size: clamp(13px, 1.05vw, 16px); letter-spacing: .04em; line-height: 1.5; }
.highlight-caption h2 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.35; letter-spacing: -.02em; }
.carousel-arrow {
  top: 50%; bottom: auto; transform: translateY(-50%);
  width: 52px; height: 48px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 0;
  background: rgba(25, 29, 35, .35); backdrop-filter: blur(8px);
}
.carousel-prev { left: calc((100% - var(--slide-width)) / 2 + 36px); right: auto; }
.carousel-next { right: calc((100% - var(--slide-width)) / 2 + 36px); }
.carousel-arrow svg { width: 28px; height: 22px; }
.carousel-arrow:hover { background: rgba(255, 255, 255, .22); }
.highlights:not(.is-ready) .carousel-track { padding-inline: 30px; }
@media (max-width: 900px) and (min-width: 701px) {
  .highlight-caption { width: calc(100% - 140px); padding: 28px; }
  .highlight-caption h2 { font-size: 28px; }
  .carousel-arrow { width: 44px; height: 44px; }
  .carousel-prev { left: calc((100% - var(--slide-width)) / 2 + 28px); right: auto; }
  .carousel-next { right: calc((100% - var(--slide-width)) / 2 + 28px); }
}
@media (max-width: 700px) {
  .highlights { --slide-width: calc(100vw - 40px); --slide-gap: 12px; }
  .highlight-slide { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; background: #fff; color: #272a2e; }
  .highlight-image { position: relative; inset: auto; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
  .highlight-shade { display: none; }
  .highlight-caption, .highlight-caption:hover {
    position: relative; inset: auto; flex: 1; width: 100%; margin: 0; padding: 22px 20px 28px;
    background: #fff; color: #272a2e; text-shadow: none;
  }
  .highlight-caption p { font-size: 12px; line-height: 1.5; letter-spacing: .025em; margin-bottom: 12px; }
  .highlight-caption h2 { font-size: clamp(21px, 5.8vw, 26px); line-height: 1.45; letter-spacing: -.025em; }
  .highlight-caption:focus-visible { outline-color: #272a2e; }
  .highlight-slide:has(.highlight-caption:hover) .highlight-image { transform: none; }
  .carousel-arrow {
    top: calc(var(--slide-width) * .2814); bottom: auto; transform: translateY(-50%);
    width: 44px; height: 44px; background: rgba(25, 29, 35, .6); border-color: rgba(255, 255, 255, .45);
  }
  .carousel-prev { left: calc((100% - var(--slide-width)) / 2 + 12px); right: auto; }
  .carousel-next { right: calc((100% - var(--slide-width)) / 2 + 12px); }
  .highlights:not(.is-ready) .carousel-track { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .highlight-slide:has(.highlight-caption:hover) .highlight-image { transform: none; }
}