/* ============================================
   Customer success — article + sidebar layout.
   White bg (the reading zone). 2/3 + 1/3 grid: article body
   (prose) on the left, sidebar (facts card + sidebar CTA) on
   the right.

   Holds all article-internal patterns:
     - Article body (prose, h2, p, ul, links, strong, images,
       capability meta block, inline tags)
     - Pullquote (white card w/ coral left stripe)
     - Facts card (sidebar, static)
     - Sidebar CTA (gradient module)
   ============================================ */

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

.gs-cs-article__inner {
  max-width: var(--content-frame);
  margin: 0 auto;
  display: grid;
  /* 2fr article + 1fr sidebar — close to the live 8/4 span. */
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* ─── Article body (prose) ─────────────── */

.gs-cs-article__body {
  color: var(--color-fg-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  /* Constrain reading width independent of grid column for
     line-length comfort. */
  max-width: 640px;
}

.gs-cs-article__body h2 {
  /* Same size as page-level section headlines. Semantically these
     ARE section headings — they break the article into named parts. */
  font-size: var(--text-h2);
  color: var(--color-fg);
  margin: 3rem 0 1rem;
  line-height: var(--leading-snug);
}

.gs-cs-article__body h2:first-child {
  margin-top: 0;
}

.gs-cs-article__body p {
  margin: 0 0 1.25rem;
}

.gs-cs-article__body ul {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}

.gs-cs-article__body li {
  margin-bottom: 0.6rem;
  line-height: var(--leading-relaxed);
}

.gs-cs-article__body strong {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}

.gs-cs-article__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Inline article images — direct-child selectors restrict the
   rule to images at the article body level (or wrapped in
   p/figure), so it doesn't leak into nested images like the
   pull-quote avatar. */
.gs-cs-article__body > img,
.gs-cs-article__body > p > img,
.gs-cs-article__body > figure > img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 2rem 0 3rem;
}

/* Capability + delivery meta block (inline below an article section). */
.gs-cs-article__meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: var(--text-base);
}

.gs-cs-article__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.gs-cs-article__meta-label {
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin-right: 0.25rem;
}

/* Capability/delivery pills — coral-outlined tags with coral text. */
.gs-cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.75rem;
  border: 1.5px solid var(--color-brand-accent);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-brand-accent);
  line-height: var(--leading-snug);
  white-space: nowrap;
}

/* ─── Pullquote — white card with coral left stripe ─── */

.gs-cs-pullquote {
  margin: 2.5rem 0;
  padding: 1.25rem 2rem 1.25rem 2.25rem;
  background: var(--color-bg);
  border-left: 5px solid var(--color-brand-accent);
  border-radius: 0 12px 12px 0;
}

.gs-cs-pullquote p {
  font-size: var(--text-h5);
  font-style: normal;
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}

.gs-cs-pullquote__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.gs-cs-pullquote__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Fallback when no real photo is available — coral circle with
   the person's initials. */
.gs-cs-pullquote__photo--initials {
  background: var(--color-brand-accent);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-cs-pullquote__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.55;
  min-width: 0;
}

.gs-cs-pullquote__name {
  font-style: normal;
  font-weight: var(--weight-bold);
  color: var(--color-fg-body);
  font-size: var(--text-sm);
}

.gs-cs-pullquote__role {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
}

/* ─── Sidebar ─────────────────────────── */

.gs-cs-article__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Sticks while the article body scrolls (tall viewports). Top
     offset = announcement bar (var --announcement-h: 0 default,
     48px when body.has-announcement) + header (~66px) + breathing
     room. Math: 6rem ≈ 96px = header (66) + breathing (30). Reads
     pinned but not glued to the header. */
  position: sticky;
  top: calc(var(--announcement-h, 0px) + 6rem);
}

/* Facts card (white, static — no hover) */
.gs-cs-facts {
  background: var(--color-bg);
  border: 1.5px solid #e3e6ec;
  border-radius: 16px;
  padding: 2rem;
}

.gs-cs-facts__title {
  font-size: var(--text-h4);
  color: var(--color-fg);
  padding-bottom: 1rem;
  border-bottom: 1.5px solid #e3e6ec;
  margin: 0 0 1.25rem;
}

.gs-cs-facts__list {
  margin: 0;
  padding: 0;
}

.gs-cs-facts__row {
  margin: 0 0 0.75rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.gs-cs-facts__row dt {
  font-weight: var(--weight-bold);
  color: var(--color-fg);
}

.gs-cs-facts__row dd {
  margin: 0;
  color: var(--color-fg-body);
}

/* "Visit their website" CTA — outline pill in heading-dark color. */
.gs-cs-facts__btn {
  margin-top: 0.5rem;
  color: var(--color-fg);
}

/* Sidebar CTA card — gradient bg, "Start Your Success Story". */
.gs-cs-sidebar-cta {
  background: var(--gradient-cta);
  border-radius: 16px;
  padding: 2rem;
  color: #fff;
}

.gs-cs-sidebar-cta__title {
  font-size: var(--text-h4);
  color: #fff;
  margin: 0 0 0.75rem;
}

.gs-cs-sidebar-cta__lede {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.25rem;
}

/* .gs-cs-sidebar-cta__btn — sizing from .gs-btn--sm; color
   inherits via currentColor from parent card (white text). */

@media (max-width: 900px) {
  /* Article + sidebar collapse to single column; sidebar drops its
     sticky positioning and lives below the article. Sidebar cards
     cap at 480px centered — keeps them at a "sidebar-scale" feel
     when stacked under the article. */
  .gs-cs-article__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .gs-cs-article__body { max-width: 100%; }
  .gs-cs-article__sidebar {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    position: static;
    top: auto;
  }
}

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

  /* Pullquote keeps its desktop size on mobile (1.125rem = 18px). */
  .gs-cs-pullquote p { font-size: 1.125rem; }

  /* Facts card rows bump from --text-sm to --text-base on mobile.
     At narrow viewports, 14px reads as fine-print. */
  .gs-cs-facts__row { font-size: var(--text-base); }
}