/*
  Feature Icon, Icon Title, Feature — Website Refresh 2026 1e (Figma).
  Feature Icon source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=73-17995
  Feature (renamed from "List Block") source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-37734

  Requires tokens.css, icons.css, typography.css, and image.css (for
  the Media Container / Image Container reused in Feature/Wide's
  optional media slot) to be loaded first.

  Feature Icon has 4 sizes. Sizes 60/48/36 hold a swappable icon glyph
  (Icon Title's instance happens to use "brain-circuit" — treated as
  an example, not a fixed icon); size 24 is the small circular
  checkmark badge already built as .rs-icon-list-item__badge in
  typography.css, not duplicated here as a --24 modifier — its
  component-level default fill (Neutral/300) doesn't actually match
  how it's used in Icon List Item (Neutral/200), so the existing,
  already-verified-in-context implementation is the one being kept.

  Icon glyphs at 44px/32px render size are noticeably thicker than at
  the default 20px .rs-icon size (stroke-width scales with the 24-unit
  Lucide viewBox, not physical pixels — same issue as Controls/Video
  Toggle). Using stroke-width: 1px here for the same reason.
*/

.rs-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs-feature-icon--60 {
  width: 60px;
  height: 60px;
  border-radius: var(--space-8);
  background-color: var(--color-purple-100);
}

.rs-feature-icon--60 .rs-icon {
  width: 44px;
  height: 44px;
  stroke-width: 1px;
}

.rs-feature-icon--48 {
  width: 48px;
  height: 48px;
  border-radius: var(--space-6);
  background-color: var(--color-neutral-300);
}

.rs-feature-icon--48 .rs-icon {
  width: 32px;
  height: 32px;
  stroke-width: 1px;
}

.rs-feature-icon--36 {
  width: 36px;
  height: 36px;
  border-radius: var(--space-6);
  background-color: var(--color-neutral-300);
}

.rs-feature-icon--36 .rs-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.5px;
}

/* ---------- Icon Title ---------- */
/* A Feature Icon (size 60) next to an H3 heading. Row uses
   align-items: flex-start (NOT center) — the heading's own 12px top
   padding is itself the optical-centering offset against the icon's
   top edge (tuned smaller than true geometric centering to account
   for the heading's line-height leading), so combining it with flex
   centering was double-offsetting the heading downward. Heading's
   default 16px bottom margin (from .rs-heading) is reset to 0 since
   it's a row, not a stack.

   The Feature Icon here uses Neutral/300 rather than the Feature
   Icon/Type=60 master component's own default Purple/100 — a
   deliberate override for this usage, not a Figma-match error. */

.rs-icon-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
  padding-bottom: var(--space-12);
}

.rs-icon-title .rs-feature-icon--60 {
  background-color: var(--color-neutral-300);
}

.rs-icon-title__heading {
  flex: 1 1 0%;
  min-width: 0;
  padding-top: var(--space-12);
  margin-bottom: 0;
}

/* ---------- Feature ---------- */
/* Two variants, both a Neutral/100 card: Icon Title, then a
   Paragraph, then an Icon List. Wide adds optional hidden slots for
   more Paragraphs and a Media Container between the first paragraph
   and the Icon List — present in the markup so a real instance can
   just remove the `hidden` attribute (and delete whichever of the
   spare slots aren't needed) rather than rebuilding the structure
   from scratch each time. */

.rs-feature {
  box-sizing: border-box;
  padding: var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
}

.rs-feature--half {
  width: 648px;
}

.rs-feature--wide {
  width: 880px;
}

.rs-feature .rs-paragraph {
  margin-bottom: var(--space-24);
}

/* ---------- List Block ---------- */
/* Same pieces as Feature/Wide (Icon Title, Paragraph(s), optional
   Media, Icon List) but confirmed against real page usage
   (Features/Metadata in Figma) to have NO card chrome at all — no
   padding, no background, no border-radius, just the bare content
   stacked directly on the page. Built as its own lightweight wrapper
   rather than forcing it through .rs-feature/.rs-feature--wide,
   since that card look isn't actually used here.

   Icon background follows a simple rule you defined directly in the
   Feature frame: Neutral/300 when the icon sits inside a panel (the
   Feature card background), Neutral/200 when it sits directly on
   white (List Block, and the Wide Feature variant) — confirmed
   2026-08 against node-id=8064-37734's Half (panel, Neutral/300) vs
   Wide (on white, Neutral/200) instances. Supersedes an earlier,
   now-stale reading of this same frame that had List Block at
   Neutral/100. */

.rs-list-block {
  max-width: 880px;
  margin: 0 auto;
}

.rs-list-block .rs-feature-icon--60 {
  background-color: var(--color-neutral-200);
}