/* =============================================================================
   AdStar landing — highlights.css
   Heading + subtitle with prev/next arrows, draggable 4-card carousel.
   ========================================================================== */

.highlights {
  overflow: hidden; /* track can extend full-bleed; clip horizontal spill */
}

.highlights__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---- Head: text block + arrows ------------------------------------------- */
/* Figma "Wrapper": text (486px) + 40px gap + arrows, content-width — the
   arrows sit next to the text, NOT pushed to the right edge of the page. */
.highlights__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
}

.highlights__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  width: 486px;
  max-width: 100%;
}

.highlights__eyebrow {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: 700;
  color: var(--brand-500);
}

.highlights__title {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: 400;
  color: var(--text-primary);
}

/* ---- Arrows -------------------------------------------------------------- */
.highlights__arrows {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.highlights__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--gray-900);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.highlights__arrow:hover { background: var(--gray-800); }
.highlights__arrow:active { transform: scale(0.96); }

.highlights__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.highlights__arrow:disabled:hover { background: var(--gray-900); }

.highlights__arrow-icon {
  width: 12px;
  height: 20px;
}
.highlights__arrow--prev .highlights__arrow-icon { transform: scaleX(-1); }

/* ---- Carousel viewport / track ------------------------------------------- */
/* The viewport breaks out of the 1200 container to span the full browser
   width, but the first card's left edge stays aligned with the content
   column. Right side is allowed to bleed off-screen. */
.highlights__viewport {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed break-out: cards scroll off at x=0 */
}

.highlights__track {
  display: flex;
  gap: 20px;
  /* Leading offset aligns card 1 with the content column; it's scrollable
     content, so cards still scroll past it and off the left page edge.
     (highlights.js pins scrollLeft to 0 to defeat Chromium's start-skip.) */
  padding-left: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
  /* Native fallback when JS/Draggable absent: horizontal scroll-snap. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* No text selection while grabbing — also stops a caption text-drag from
     starting a native drag that would abort the scroll gesture. */
  user-select: none;
  -webkit-user-select: none;
}
.highlights__track::-webkit-scrollbar { display: none; }
.highlights__track.is-dragging { cursor: grabbing; }

/* When JS Draggable drives the track, disable native scroll. */
.highlights__track.is-draggable {
  overflow-x: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}

/* ---- Cards --------------------------------------------------------------- */
.highlights__card {
  flex: 0 0 384px;
  width: 384px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-snap-align: start;
}

.highlights__media {
  position: relative;
  height: 400px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
}

.highlights__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.highlights__overlay {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.highlights__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.highlights__caption {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 600;
  color: var(--gray-200);
}

/* Prevent native image drag interfering with the grab gesture */
.highlights__media img { -webkit-user-drag: none; user-select: none; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .highlights__inner { gap: 32px; }
  .highlights__card,
  .highlights__media { /* keep card width; media height scales below */ }
}

@media (max-width: 767px) {
  .highlights__head {
    align-items: flex-start;
    gap: 24px;
  }
  /* Arrows hide on mobile — finger drag only */
  .highlights__arrows { display: none; }

  .highlights__card {
    flex-basis: 280px;
    width: 280px;
  }
  .highlights__media { height: 300px; }
  .highlights__caption {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
  }

  .highlights__track {
    gap: 16px;
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}