/*
  Title Area — Website Refresh 2026 1e (Figma), "Titles" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-43776

  Requires tokens.css, typography.css loaded first.

  Two page types, and they're genuinely different compositions, not
  just the same two pieces re-coloured or reordered:
    - Feature (.rs-title-area--feature): Heading first, then a
      Description sentence below it — e.g. "Security & Permissions" /
      "Protect and secure files with advanced privacy settings".
    - Sector (.rs-title-area--sector): a short Kicker line first,
      then the Heading below it, together forming one sentence —
      e.g. "Digital asset management for" / "Product marketing teams".
  Both share the same Heading/H1 Page Title and Body/xLarge text
  styles (reusing .rs-heading--h1 / .rs-body--xlarge) and the same
  Blue/900 colour and neutral-100 background, but the element that
  comes LAST always carries the bigger 16px bottom spacing while
  whichever comes FIRST carries a smaller, role-specific spacing
  (12px for a leading Heading, 8px for a leading Kicker) — confirmed
  per-type in Figma, not a single shared margin value.

  Kept as its own file/class rather than folded into context-nav.css
  — in practice a page's Context Navigation submenu always sits
  directly under one of these, but they're separate Figma frames, so
  they're separate here too and just placed next to each other in
  markup where both are needed.
*/

.rs-title-area {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-32) var(--space-48) var(--space-16) var(--space-48);
  background-color: var(--color-neutral-100);
}

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

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

.rs-title-area__heading,
.rs-title-area__description,
.rs-title-area__kicker {
  max-width: 880px;
  color: var(--color-blue-900);
}

/* Feature: Heading (leading, 12px below) then Description (trailing, 16px below) */
.rs-title-area__heading {
  margin-bottom: var(--space-12);
}

.rs-title-area__description {
  margin-bottom: var(--space-16);
}

/* Sector: Kicker (leading, 8px below) then Heading (trailing, 16px below) */
.rs-title-area__kicker {
  margin-bottom: var(--space-8);
}

.rs-title-area--sector .rs-title-area__heading {
  margin-bottom: var(--space-16);
}