/* =========================================================================
   Cards-with-image slider (Figma 490:1167 "Industry Use Case Highlights")
   A horizontal carousel of image cards. Each card = navy image + green
   category eyebrow + title + description + "Read Case Study" cta-link.
   The carousel mechanics mirror milestone-slider: viewport clips overflow
   and carries the outer border, the track translates by one card per page,
   the pager below holds prev arrow + JS-generated dots + next arrow + a
   live status line. 3 cards visible at tablet/desktop, 1 at mobile.

   In production the cards will be driven by ACF repeater rows. The HTML
   preview ships 6 hard-coded use cases to demonstrate slider behavior.
   ========================================================================= */

.cards-with-image-slider {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
  /* Focus management lives on the buttons inside; tabindex=0 lets the
     region take focus for arrow-key navigation without a visible ring. */
  outline: none;
}

.cards-with-image-slider__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10); /* 40px between header → viewport → pager cluster */
}

/* ---------------------------------------------------------------
   Section header (same two-column pattern as products)
   --------------------------------------------------------------- */
.cards-with-image-slider__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cards-with-image-slider__eyebrow {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-heading);
}

.cards-with-image-slider__eyebrow-slash {
  color: var(--color-green-2);
  margin-right: 0.25em;
}

.cards-with-image-slider__heading-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

.cards-with-image-slider__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-text-heading);
}

.cards-with-image-slider__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.cards-with-image-slider__subheading {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  color: var(--color-text-body);
}

/* Figma: heading left (659px) + subheading right (585px), top-aligned.
   Same 706/585 ratio as products so the two sections line up. */
@media (min-width: 900px) {
  .cards-with-image-slider__heading-row {
    grid-template-columns: 706fr 585fr;
    column-gap: clamp(var(--space-7), 8vw, 150px);
  }
}

/* ----------- Viewport: clips overflow + carries the outer border ----------- */
.cards-with-image-slider__viewport {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  /* Visible-cards count as a custom property so JS can read it. Media
     queries override per breakpoint; the JS resize handler watches the
     viewport width to know which value applies. */
  --cards-with-image-slider-visible: 3;
  /* Swipe affordance + lock the X axis so pointer drag isn't stolen by
     the browser's horizontal scroll. */
  cursor: grab;
  touch-action: pan-y;
}

.cards-with-image-slider__viewport:active {
  cursor: grabbing;
}

/* Mobile: one card at a time. Tablet + desktop stay at 3 visible. */
@media (max-width: 767px) {
  .cards-with-image-slider__viewport {
    --cards-with-image-slider-visible: 1;
  }
}

/* ----------- Track: holds all cards in one row, translates on update ----------- */
.cards-with-image-slider__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.4s ease-out;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cards-with-image-slider__track {
    transition: none;
  }
}

.cards-with-image-slider__slide {
  /* Each slide takes 1/visible of the viewport width. */
  flex: 0 0 calc(100% / var(--cards-with-image-slider-visible));
  min-width: 0;
  display: flex; /* let the card stretch to full slide height */
}

/* ----------- Card ----------- */
.cards-with-image-slider__card {
  background-color: var(--color-background);
  /* Internal seams between cards: right border on every card. The last
     card's right border would double up with the viewport border, so it's
     removed on the last slide below. */
  border-right: 1px solid var(--color-card-border);
  padding: var(--space-7); /* 32px per Figma */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between image and info */
}

.cards-with-image-slider__slide:last-of-type .cards-with-image-slider__card {
  border-right: 0;
}

/* ----------- Card image ----------- */
.cards-with-image-slider__card-image {
  height: 222px; /* Figma exact */
  background-color: var(--color-navy-blue);
  border-radius: 8px;
  overflow: hidden;
}

.cards-with-image-slider__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ----------- Card text + cta ----------- */
.cards-with-image-slider__card-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between text block and cta-link */
}

.cards-with-image-slider__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px between name and detail */
}

.cards-with-image-slider__card-eyebrow {
  margin: 0 0 var(--space-4_5) 0; /* 16px before the name */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 0.93;
  text-transform: uppercase;
  color: var(--color-green-2);
}

.cards-with-image-slider__card-name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card-title);
  color: var(--color-text-heading);
}

.cards-with-image-slider__card-detail {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  color: var(--color-text-body);
}

/* ----------- Pager: prev arrow + dots + next arrow ----------- */
.cards-with-image-slider__pager {
  display: flex;
  align-items: center;
  gap: 18px; /* Figma gap between arrows and dots cluster */
}

.cards-with-image-slider__arrow {
  width: 70px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-navy-blue);
  border-radius: 40px;
  color: var(--color-navy-blue);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.cards-with-image-slider__arrow:hover:not(:disabled),
.cards-with-image-slider__arrow:focus-visible:not(:disabled) {
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.cards-with-image-slider__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cards-with-image-slider__arrow-icon {
  display: block;
}

/* ----------- Dots ----------- */
.cards-with-image-slider__dots {
  display: flex;
  align-items: center;
  gap: 16px; /* Figma: 14 dot + 16 gap = 30 stride */
}

.cards-with-image-slider__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  background-color: var(--color-teal-50, #A0F0E8); /* Figma "Teal 50%" */
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cards-with-image-slider__dot:hover,
.cards-with-image-slider__dot:focus-visible {
  outline: none;
  transform: scale(1.15);
}

/* Active dot — brand teal. JS toggles aria-current="true". */
.cards-with-image-slider__dot[aria-current="true"] {
  background-color: var(--color-teal);
}

/* ----------- Status text ----------- */
.cards-with-image-slider__status {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-body-copy);
  text-align: center;
}