/* ─── CustomerSpotlightCarousel module ───
   Scoped to this module only — relies on the theme's existing
   flex/gap-8/xl:gap-16/justify-center utilities already applied to the
   slide container (unchanged), and only shapes how the four row items
   (prev arrow, photo, text+CTA, next arrow) share that row, including
   wrap behavior (below). No shared/global classes are touched. */

/* The theme's own .flex-wrap utility was removed from this row in the HTML
   because it let the browser's default flex-wrap algorithm split the row
   unpredictably at in-between widths (e.g. ~700px): whichever item didn't
   fit would drop alone to a second line, leaving one arrow vertically
   centered against the photo and the other against the text block instead
   of the two arrows sitting together. Wrapping is now fully controlled
   here: off (single row, items shrink instead) until the deliberate phone
   stack kicks in below. Keep this breakpoint at true phone widths only —
   .csc-content's own max-w-[550px] (set in module.html) means that above
   ~620px of container width, its phone-stack row has leftover space next
   to it that hovers right around a nav arrow's width, so the arrows
   unpredictably join that row instead of stacking together below it
   (the same failure mode this comment already describes, just re-triggered
   at a wider width) if this is pushed any wider. */
.csc-slide {
  flex-wrap: nowrap;
  align-items: center;
}

@media (max-width: 640px) {
  .csc-slide {
    flex-wrap: wrap;
  }
}

.csc-prev-btn,
.csc-next-btn {
  flex: 0 0 auto;
}

/* Photo has a soft 300px target width but shrinks twice as eagerly as the
   text column (flex-shrink: 2 vs 1) and has no min-width floor, so it's the
   column that gives up space first. Centering comes from the row's own
   justify-center, already applied by the theme. aspect-ratio keeps it a
   perfect square at every shrunk size; the field itself no longer lets
   marketers resize away from that (fields.json resizable:false), but this
   also guarantees a square crop regardless of the source photo's own
   proportions. */
.csc-photo {
  flex: 0 2 250px;
  min-width: 96px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.csc-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Text column has a min-width floor so it never gets squished past a
   readable line length — the photo absorbs the shrinkage instead. Once
   even the photo's own min-width can't free up enough room, the row wraps
   to the phone-stacked layout below (this floor is comfortably inside the
   640px breakpoint at every container width above it). 320px (not just
   280px) matches the column's own flex-basis and leaves the CTA enough
   room that it shouldn't need to shrink below its natural single-line
   width before the row hands off to the phone-stacked layout. */
.csc-content {
  flex: 1 1 320px;
  min-width: 320px;
}

/* Sized to its own label (not stretched to the column), but still a single
   block box — not a bare inline <a> — so if the label ever wraps to two
   lines it stays one pill instead of drawing a separate rounded box per
   line. max-width keeps it from overflowing on very narrow screens.
   white-space: nowrap backs that up directly: with .csc-content's floor
   above, the button should never need this, but if a marketer enters an
   unusually long label, this guarantees it never breaks onto a second
   line even so — it overflows the pill horizontally instead, which reads
   better than a lopsided two-line button. */
.csc-cta {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

/* Phone only: give the photo and text their own full-width rows so the
   two arrow buttons end up together on the trailing row, instead of one
   sitting above the photo and the other dropping below everything else.
   Tablet and desktop stay a single row (photo shrinks instead of wrapping). */
@media (max-width: 640px) {
  .csc-photo {
    order: 1;
    max-width: 220px;
  }

  .csc-content {
    order: 2;
    flex-basis: 100%;
  }

  .csc-prev-btn {
    order: 3;
  }

  .csc-next-btn {
    order: 4;
  }
}

/* Plain colored circle instead of the fa-solid fa-circle icon previously used
   here — that icon wasn't rendering (the site's FontAwesome setup is a
   self-hosted JS kit, fonts/FontAwesome/*.min.js, that replaces <i> tags
   with <svg> at runtime; something in that pipeline wasn't picking this one
   up), so the nav dots were invisible. Colors match what the (now-unused,
   svg-targeting) global .page-nav[aria-expanded] rule in src/input.css
   already established for this active/inactive state. */
.csc-page-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: #ffffff;
}

.page-nav[aria-expanded='true'] .csc-page-dot {
  background-color: #fe5f00;
}