/*
  Content Block Row — Website Refresh 2026 1e (Figma), "Content Block"
  frame. Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-40007

  These are the full-width page-building blocks: drop one in, in any
  order, to assemble a page. Every variant is built entirely from
  already-verified components (Feature, Card, Testimonial, Case
  Study, Download, Content CTA, Promo CTA Button Pair, typography) —
  nothing new is styled here except the row-level layout: background,
  vertical padding, and the responsive horizontal margin.

  RESPONSIVE HORIZONTAL MARGIN (confirmed by you, not visible in a
  single static Figma frame — Figma only shows the 1440px Desktop
  value):
    >= 1280px : 48px  (Figma's literal value)
    640-1280px: 32px  (minimum)
    < 640px   : 16px

  Figma's "most content constrained to 880px, centred" rows actually
  use a fixed 280px side padding at exactly 1440px (1440 - 280*2 =
  880) — but a fixed px padding doesn't scale down. Implemented
  instead as: the row always gets the responsive margin above, and a
  .rs-content-block-row__inner wrapper (max-width: 880px; margin:
  0 auto) sits inside it. At exactly 1440px this produces the same
  280px visual gap Figma shows (48px margin + 232px of auto-centring
  slack = 280px), and it degrades gracefully at every width below
  that, rather than needing separate breakpoint overrides.

  No overall max-width is applied to the row itself beyond the
  margins — nothing in the brief specifies a cap for very wide
  viewports, so rows are fluid to 100% of the viewport minus margins.
  Flag if an upper cap (e.g. matching the 1440px Desktop canvas) is
  actually wanted.

  Requires tokens.css, typography.css, buttons.css, icons.css,
  image.css, feature.css, card.css, testimonial.css, flash.css,
  case-study-cover.css, case-study.css, download.css, content-cta.css
  all loaded first (this file only adds row-level layout on top of
  them).
*/

.rs-content-block-row {
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-neutral-white-50);
  padding-left: var(--space-48);
  padding-right: var(--space-48);
}

@media (max-width: 1280px) {
  .rs-content-block-row {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
  }
}

@media (max-width: 640px) {
  .rs-content-block-row {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
}

.rs-content-block-row__inner {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* The "full width" variants (Feature Grid, Testimonial Double,
   Global CTA) still shouldn't grow past 1344px (1440px Desktop minus
   the 48px margin on each side) — beyond that they centre with extra
   auto margin rather than keep stretching to the viewport edge. */
.rs-content-block-row__inner--wide {
  max-width: 1344px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- List Block ---------- */
/* Not a named row Type in Figma's Component library — a plain
   grouping frame on the real Features/Metadata page holding
   consecutive .rs-list-block (feature.css) sections with a 48px gap
   between them, confirmed from that page's actual layer spacing. */

.rs-content-block-row--list-block {
  padding-bottom: var(--space-48);
}

/* ---------- Text Block ---------- */
/* Two stacked paragraphs. Figma's own instances here are Body Text,
   not Paragraph — the same mismatch already fixed across the
   Website page's Feature usages, not yet fixed here. Visually
   identical either way, so .rs-paragraph is used in the markup. */

.rs-content-block-row--text-block {
  padding-bottom: var(--space-24);
}

/* Combinable utility: some real pages need extra breathing room
   above the first content block directly under the (dark) Context
   Navigation bar — e.g. Features/AI's Text Block has pt-48 where
   Features/Metadata's equivalent row has none, since Metadata's
   first block is the full-bleed Intro card instead. Not baked into
   --text-block itself since that's instance-specific, not universal
   to the type. */
.rs-content-block-row--pt-48 {
  padding-top: var(--space-48);
}

.rs-content-block-row--pb-72 {
  padding-bottom: var(--space-72);
}

/* ---------- Intro ---------- */
/* A Neutral/100 card spanning the row, split into a 532px Detail
   column (H2 heading, Body/Large text, Promo CTA Button Pair) and a
   flexible Media column holding a 16:9-ish video/image. */

.rs-content-block-row--intro {
  padding-bottom: var(--space-48);
}

/* The real Features/Metadata page instance turned out to be full-
   bleed — the Neutral/100 background runs edge-to-edge with no side
   margin and no rounded corners at all, unlike the isolated "Intro"
   component sample (a rounded, inset card within the row's normal
   48/32/16 responsive padding) that .rs-content-block-row--intro
   above was built from. Needs its own row modifier with NO
   horizontal padding, since the standard row padding is exactly the
   inset this variant doesn't have. */
.rs-content-block-row--intro-full-bleed {
  width: 100%;
  padding-bottom: var(--space-48);
}

.rs-content-block-intro {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-72) var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
}

/* A real page instance (Features/Metadata) uses this same Detail +
   Media layout but with uniform 48px padding (not 72px vertical) and
   an Icon List in place of the single Body/Large paragraph — content
   varies per instance regardless, so only the padding needs a
   modifier here. */
.rs-content-block-intro--compact {
  padding: var(--space-48);
}

.rs-content-block-intro--full-bleed {
  border-radius: 0;
}

.rs-content-block-intro__detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  width: 532px;
  max-width: 100%;
}

.rs-content-block-intro__detail .rs-heading--h2 {
  margin-bottom: var(--space-16);
}

.rs-content-block-intro__detail .rs-body--large {
  margin-bottom: var(--space-36);
}

/* Guarantees 32px above the CTA regardless of what precedes it in
   Detail — a Body/Large paragraph (the isolated "Intro" sample) or
   an Icon List (the real Features/Metadata page instance) both need
   the same fixed gap here, rather than relying on whichever sibling
   happens to be directly above supplying its own bottom margin. */
.rs-content-block-intro__detail .rs-promo-cta {
  margin-top: var(--space-32);
}

.rs-content-block-intro__media {
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;
}

.rs-content-block-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .rs-content-block-intro {
    flex-direction: column;
    align-items: stretch;
  }
  .rs-content-block-intro__detail {
    width: 100%;
  }
  .rs-content-block-intro__media {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 765 / 430;
  }
}

/* ---------- Feature Grid ---------- */
/* A 2x2 grid of Feature/Half cards, 48px gap both axes. Wraps to a
   single column once two 648px cards can no longer fit side by side. */

.rs-content-block-row--feature-grid {
  padding-bottom: var(--space-48);
}

.rs-content-block-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-48);
}

.rs-content-block-feature-grid .rs-feature--half {
  flex: 1 1 552px;
  width: auto;
  max-width: 648px;
}

/* ---------- Single Feature ---------- */

.rs-content-block-row--single-feature {
  padding-bottom: var(--space-72);
}

.rs-content-block-row--single-feature .rs-feature--wide {
  width: 100%;
}

/* ---------- Blog Cards ---------- */
/* Heading, then a Card Grid of Blog cards at their natural 416px
   width, wrapping responsively. Figma's example only ever shows 2,
   but nothing constrains it to exactly 2. */

.rs-content-block-row--blog-cards {
  padding-bottom: var(--space-72);
}

.rs-content-block-blog-cards__heading {
  margin-bottom: var(--space-24);
}

.rs-content-block-blog-cards__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-48);
}

/* ---------- Testimonial Double ---------- */
/* Two Testimonials side by side at an uneven 509:787 split (roughly
   2:3) — full row width (not the 880-centred inner), 48px gap. The
   flex-grow ratio below reproduces that split responsively rather
   than hardcoding the Desktop pixel widths.

   Figma's two example instances use different quote-text sizes (24px
   /H4 on the narrower column, 28px/H3 on the wider one) — the
   standalone 880px Testimonial (Single/Image/+Case Study rows) only
   ever uses the 24px size, so this looks like a one-off manual
   override on this specific instance rather than a confirmed size
   variant. Not reproduced here — both columns use the standard
   .rs-testimonial (24px quote) — flagging rather than guessing at an
   unconfirmed "large" variant. */

.rs-content-block-row--testimonial-double {
  padding-bottom: var(--space-48);
}

.rs-content-block-testimonial-double {
  display: flex;
  gap: var(--space-48);
}

.rs-content-block-testimonial-double .rs-testimonial:first-child {
  flex: 509 1 0%;
}

.rs-content-block-testimonial-double .rs-testimonial:last-child {
  flex: 787 1 0%;
}

@media (max-width: 800px) {
  .rs-content-block-testimonial-double {
    flex-direction: column;
  }
}

/* ---------- Testimonial Single / Image / + Case Study ---------- */

.rs-content-block-row--testimonial-single,
.rs-content-block-row--testimonial-image,
.rs-content-block-row--testimonial-case-study {
  padding-bottom: var(--space-48);
}

/* ---------- Case Study / Download ---------- */

.rs-content-block-row--case-study,
.rs-content-block-row--download {
  padding-bottom: var(--space-48);
}

/* ---------- CTA Button ---------- */

.rs-content-block-row--cta-button {
  padding-bottom: var(--space-48);
}

/* ---------- Global CTA ---------- */
/* The Form CTA card at full row width (not the 880-centred inner —
   same "full width minus the row margin" pattern as Feature Grid/
   Testimonial Double). Figma also has a hidden alternate "Promo CTA"
   row (a simpler Button + Text Links strip) sitting in the same slot
   — kept in the markup with the native hidden attribute, same
   convention as Feature/Wide's optional slots, in case a simpler
   variant is wanted instead of the full form on some page. */

.rs-content-block-row--global-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding-bottom: var(--space-48);
}

@media (max-width: 640px) {
  .rs-content-block-row--global-cta {
    padding-bottom: var(--space-32);
  }
}

.rs-content-block-global-cta-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.rs-content-block-global-cta-promo[hidden] {
  display: none;
}