/* ============================================
   Customer band — editorial card used on the /customers/ index
   page to list customer stories. Image-left + content-right
   2-col grid; collapses to image-top + content-below on mobile.

   The entire band is a click target (<a>). Includes a "Read full
   story →" cue at the bottom of the content column whose arrow
   slides right on band hover.

   Page hero on /customers/ uses .gs-hero from components/hero-
   homepage.css with the .gs-hero--customers modifier defined
   below (narrower max-widths so the longer customers-index
   headline doesn't wrap to 3 lines).
   ============================================ */

/* ─── Hero modifier (customer-index page) ─── */

.gs-hero--customers .gs-hero__title {
  max-width: 28ch;
  text-wrap: balance;
}

.gs-hero--customers .gs-hero__description {
  max-width: 38rem;
  text-wrap: balance;
}

/* ─── Customer bands list ─────────────────── */

.gs-customers-list {
  background: var(--color-bg-muted);
  padding: 5rem 1.5rem;
}

.gs-customers-list__inner {
  max-width: var(--content-frame);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gs-customer-band {
  display: grid;
  /* 5fr / 7fr — image gets a little less than half. Content needs
     the room for headline + lede + CTA stack. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-bg);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* Minimum height keeps visual weight consistent across all bands
     even if some lede texts are shorter. */
  min-height: 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gs-customer-band:hover {
  /* Same hover recipe as .gs-cs-card (related-content cards). */
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 38, 69, 0.1);
}

.gs-customer-band__media {
  overflow: hidden;
}

.gs-customer-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gs-customer-band__content {
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gs-customer-band__kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: 0.5rem;
}

.gs-customer-band__title {
  font-size: var(--text-h4);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.gs-customer-band__lede {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

/* "Read full story →" cue — uppercase eyebrow in headline color
   (NOT coral). margin-top: auto pushes it to the bottom of the
   content column so all bands align their CTAs. */
.gs-customer-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-fg);
  margin-top: auto;
  transition: color 0.2s ease;
}

/* On band hover: CTA softens from headline-dark to body-grey.
   Subtle "you're activating this" cue. */
.gs-customer-band:hover .gs-customer-band__cta {
  color: var(--color-fg-body);
}

/* Arrow slides right on band hover. Text stays put; the arrow's
   own translate gives a "going somewhere" cue. */
.gs-customer-band__cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.gs-customer-band:hover .gs-customer-band__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  /* Bands stack: image on top, content below. */
  .gs-customer-band {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .gs-customer-band__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .gs-customers-list { padding: 3rem 1.5rem; }
  .gs-customer-band__content {
    padding: 2rem 1.75rem;
  }
}