/* ============================================
   Customer success — related content cards.
   Muted bg matches Key Results, bookending the white article.
   3-up grid of content cards (image + label + title).
   ============================================ */

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

.gs-cs-related__inner {
  max-width: var(--content-frame);
  margin: 0 auto;
}

.gs-cs-related__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Explicit stretch (grid's default, stated for clarity): equalizes
     card height across a row on desktop. Doesn't help once mobile
     collapses to 1-column (each card becomes its own row) — the
     title clamp below is what keeps cards uniform there. */
  align-items: stretch;
  gap: 1.5rem;
}

.gs-cs-card {
  display: flex;
  flex-direction: column;
  /* Fill the grid row's height so all cards in a row match. */
  height: 100%;
  background: var(--color-bg);
  /* No border — these cards rely on the white-vs-muted bg contrast
     for their edge. Larger border-radius for a softer, more
     "content-tile" feel than the bordered system cards. */
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}

/* Hover: small lift + GS-navy-tinted drop shadow. No border change
   (content cards, not interactive system controls — stay out of
   the blue-accent territory). */
.gs-cs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 38, 69, 0.1);
}

.gs-cs-card__media {
  aspect-ratio: 1200 / 627;
  overflow: hidden;
  background: #f0f1f4;
}

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

.gs-cs-card__body {
  padding: 1.75rem 2rem 3rem;
  /* Body fills the remaining card height after the media so all
     cards in a row align their bottom edges. */
  flex: 1;
}

.gs-cs-card__label {
  /* Coral brand-editorial accent — content-type labels that
     introduce each card's narrative. Size 0.8125rem (13px) is the
     documented exception to the type-scale 14px floor — reads as
     "tiny eyebrow label" rather than "fine print." */
  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;
}

/* -webkit-line-clamp (needs display: -webkit-box, a legacy flexbox
   mode) kept failing to produce a uniform height on real iOS Safari
   even after being split from the sizing element - the -webkit-box
   quirks in that layout mode aren't reliable across WebKit versions.
   Dropped entirely in favor of a plain fixed height + overflow:
   hidden. No ellipsis on truncated titles, but a plain block box's
   height is unambiguous on every engine - nothing left to be a
   WebKit-specific quirk. The inner span from the line-clamp era is
   harmless (unstyled) and left in the markup rather than reverting
   8 templates for a no-op removal. */
.gs-cs-card__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  /* Slightly looser than snug — multi-line titles need a bit more
     breathing room than single-line uses of h5. */
  line-height: var(--leading-normal);
  margin: 0;
  height: 4.5em;
  overflow: hidden;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* 1-column on tablet/mobile. Cards cap at 400px, centered via
     margin: auto on the card itself - NOT justify-items: center on
     the grid. justify-items: center makes the grid item (the li)
     shrink-to-fit its content, and the card inside it declares
     width: 100% against that same shrink-to-fit box - a circular
     width reference that different browser engines can resolve
     differently (this is the actual root cause of the sizing
     inconsistency reported on real iOS Safari but not reproducible
     in desktop Chrome's mobile emulation). Leaving justify-items at
     its default (stretch) makes the li an unambiguous full-width
     grid item, so the card's width: 100% has a fixed target to
     resolve against on every engine. */
  .gs-cs-related__cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .gs-cs-card {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .gs-cs-related { padding: 3rem 1.5rem; }

  /* Card titles maintain their desktop --text-h5 size on mobile
     — card-level titles are the entry point to each card and need
     to stay punchy on small screens. */
  .gs-cs-card__title { font-size: 1.125rem; }
}