/* ==========================================================================
   Content Slide Component
   Two-column layout with image + text content and timeline entries.
   ========================================================================== */

.content-slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  width: calc(100% - 32px);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .content-slide {
    flex-direction: row;
    align-items: center;
    gap: 0;
    justify-content: space-between;
  }

  /* Image-top-aligned variant: align image with the top of the content
     column (e.g. so the image's top sits with the description, not centered
     against the full content height). Keeps the image visible higher in the
     pinned viewport so the bottom of the image is not clipped by the ISI
     tray. */
  .content-slide.content-slide--align-top {
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Layout Variants
   -------------------------------------------------------------------------- */

/* Image on left (default) - image column comes first */
.content-slide--image-left {
  /* Default order: image first, content second */
}

/* Image on right - reverse column order on desktop */
@media (min-width: 768px) {
  .content-slide--image-right {
    flex-direction: row-reverse;
  }
}

/* --------------------------------------------------------------------------
   Image Column — stacked images for crossfade
   -------------------------------------------------------------------------- */

.content-slide__image-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .content-slide__image-col {
    width: 50%;
    max-width: 555px;
  }
}

.content-slide__image-stack {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

@media (max-width: 767.98px) {
  .content-slide__image-stack--mobile {
    padding: 0;
  }
}

.content-slide__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  /* Opacity is controlled directly by GSAP when inside a scroll-triggered
     slider. No CSS transition here — it would fight the scrub animation. */
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .content-slide__image-stack--mobile .content-slide__image {
    position: static;
    width: 100%;
    height: auto;
  }
}

.content-slide__image--active {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Content Column
   -------------------------------------------------------------------------- */

.content-slide__content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  min-width: 0;
  max-width: 555px;
}

/* --------------------------------------------------------------------------
   Eyebrow & Heading
   -------------------------------------------------------------------------- */

.content-slide__eyebrow {
  color: var(--color-navy, #003A70);
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  font-feature-settings: 'liga' off, 'clig' off;
}

.content-slide__heading {
  color: var(--color-navy, #003A70);
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  font-feature-settings: 'liga' off, 'clig' off;
}

/* --------------------------------------------------------------------------
   Top & Bottom Text
   -------------------------------------------------------------------------- */

.content-slide__top-text {
  color: var(--color-text-body, #313131);
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.content-slide__bottom-text {
  color: var(--color-text-body, #313131);
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: var(--space-2, 0.5rem);
}

/* --------------------------------------------------------------------------
   Timeline Entries
   -------------------------------------------------------------------------- */

.content-slide__entries {
  display: flex;
  flex-direction: column;
}

.content-slide__entry {
  display: flex;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Timeline Connector (dot + line)
   -------------------------------------------------------------------------- */

.content-slide__entry-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  padding-top: 6px;
}

.content-slide__entry-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-cyan, #00BCD4);
  background: var(--color-white, #fff);
  flex-shrink: 0;
}

.content-slide__entry-dot--filled {
  background: var(--color-cyan, #00BCD4);
}

.content-slide__entry-line {
  display: block;
  width: 2px;
  flex: 1;
  background-color: var(--color-cyan, #00BCD4);
  min-height: 20px;
}

/* --------------------------------------------------------------------------
   Entry Content
   -------------------------------------------------------------------------- */

.content-slide__entry-content {
  flex: 1;
  min-width: 0;
}

.content-slide__entry--last .content-slide__entry-content {
  padding-bottom: 0;
}

.content-slide__entry-title {
  color: var(--color-navy, #003A70);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: 'liga' off, 'clig' off;
  margin-bottom: var(--space-1, 0.25rem);
}

.content-slide__entry-body {
  color: var(--color-text-body, #313131);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .content-slide__entries:not(:has(.content-slide__entry--active)) .content-slide__entry-body {
    color: var(--color-text-body, #313131);
  }

  .content-slide__entries:has(.content-slide__entry--active) .content-slide__entry-body {
    opacity: 0.7;
  }

  .content-slide__entries .content-slide__entry--active .content-slide__entry-body {
    color: var(--color-blue-dark);
    opacity: 1;
  }

  /* Fade non-active entry titles when any entry is active */
  .content-slide__entries:has(.content-slide__entry--active) .content-slide__entry-title {
    opacity: 0.7;
  }

  .content-slide__entries .content-slide__entry--active .content-slide__entry-title {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   DTC Mode
   Styled numbers (large blue) and active-row card treatment.
   -------------------------------------------------------------------------- */

.content-slide--dtc .content-slide__content-col {
  overflow: visible;
}

.content-slide--dtc .content-slide__entries {
  overflow: visible;
  position: relative;
}

/* @media screen and (min-width: 768px) {
  .content-slide--dtc .content-slide__entries {
    padding: 30px 30px 30px 0;
  }
} */

.content-slide--dtc .content-slide__entry {
  align-items: center;
}

/* --- DTC connector: continuous vertical line behind centred dots --- */

.content-slide--dtc .content-slide__entry-connector {
  align-self: stretch;
  justify-content: center;
  padding-top: 0;
  position: relative;
}

/* Pseudo-element draws the continuous line through the full connector height */
.content-slide--dtc .content-slide__entry-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  top: 0;
  bottom: 0;
  background-color: var(--color-cyan, #00BCD4);
}

/* First entry: line starts at the dot centre (no line above) */
.content-slide--dtc .content-slide__entry--first .content-slide__entry-connector::before {
  top: 50%;
}

/* Last entry: line ends at the dot centre (no line below) */
.content-slide--dtc .content-slide__entry--last .content-slide__entry-connector::before {
  bottom: 50%;
}

/* Hide the per-entry line segment; the pseudo replaces it */
.content-slide--dtc .content-slide__entry-line {
  display: none;
}

/* Dot renders above the pseudo line */
.content-slide--dtc .content-slide__entry-dot {
  position: relative;
  z-index: 1;
}

/* Hardcoded large blue numbers refereced by pe-4 */
.content-slide--dtc .content-slide__entry-body .pe-4 {
  color: var(--color-blue-dark, #003A70);
  text-align: right;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Outfit', sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.2;
  display: inline-block;
  width: 43px;
  flex-shrink: 0;
}

/* Fixed width so 1, 2, 3 all occupy the same space — desktop only to
   avoid pushing content out on narrow mobile screens (#226). */
@media (min-width: 768px) {
  .content-slide--dtc .content-slide__entry-body .pe-4 {
    min-width: 1.2em;
  }
}

/* All DTC entries share the same padding so switching active doesn't jump */
.content-slide--dtc .content-slide__entry-content {
  border-radius: 20px;
}

/* Floating highlight — slides between entries via GSAP */
.content-slide__highlight {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 20px;
  background: #FFF;
  box-shadow: 0 1px 25px 0 rgba(0, 174, 239, 0.32);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  /* Offset to align with .entry-content (skip the connector column) */
  margin-left: 20px;
}

/* Floating active dot — slides down the connector line with the highlight */
.content-slide__floating-dot {
  position: absolute;
  left: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.content-slide__floating-dot-inner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-cyan, #00BCD4);
}

/* --------------------------------------------------------------------------
   Mobile: no scroll lock, no animation, only start image, no connectors.
   Image on top via column-reverse (DOM has image-col first, content-col
   second; on desktop image-right reverses to put image on right, so
   column-reverse puts image on top for mobile).
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Hide entry images — only the start image is shown on mobile */
  .content-slide__image[data-entry-image] {
    display: none;
  }

  /* Start image takes natural position in the stack */
  .content-slide__image[data-start-image] {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide timeline connector (dots + lines) */
  .content-slide__entry-connector {
    display: none;
  }

  /* No active entry styling on mobile */
  .content-slide__entry--active .content-slide__entry-content {
    background: none;
    box-shadow: none;
  }

  /* Hide floating highlight on mobile */
  .content-slide__highlight {
    display: none;
  }

  /* Hide floating dot on mobile */
  .content-slide__floating-dot {
    display: none;
  }
}

/* Prevent CSS transitions from fighting GSAP scrub animation (standalone) */
[data-content-slide-init] .content-slide__image {
  transition: none !important;
}