/* Different card recipe from .stages/.stage (bordered card with a numbered chip, not an icon
   circle) and different responsive behavior (grid wrap, not a horizontal scroll row), so this
   is its own component instead of an edit to stages.css. */

/* This section's own intro paragraph (tt360/section-heading's optional intro, docs/PLAN.md §7's
   own flagged-but-never-resolved open item) caps narrower than section-heading-lg's own 880px —
   the prototype's .full-lifecycle .section-heading .intro sets this directly, plus its own
   charcoal-at-85%-opacity color and line-height, none of which this theme ever had a rule for
   until now (found against the real rendered section height, not assumed). Scoped to a section
   that actually holds .stage-cards, since Platform's Full Lifecycle is the only place this
   theme uses tt360/card-stage at all. */
.tt360-section:has(.stage-cards) .section-heading .intro {
    max-width: 700px;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(var(--charcoal), 0.85);
}

/* The prototype never gives .stage-cards its own bare rule — Platform's own page scopes gap and
   the <ol> reset to .full-lifecycle .stage-cards instead (layout/platform.css: gap: 16px, plus
   padding/list-style since the real markup is a native <ol>/<li>, not a <div>). A reusable
   tt360/card-grid instance can't rely on that ancestor class existing, so this bare rule carries
   the <ol> reset itself (needed anywhere this renders as a real ordered list, not just on
   Platform) plus the one confirmed real gap value as a default.

   The left/right/bottom margin reset is also required here and wasn't in the platform.css
   version either, since that page's own <ol> inherited an implicit margin: 0 from a reset
   elsewhere on the static site that doesn't exist in WordPress: GeneratePress sets ol {
   margin-left: 3em } by default, inset every stage card and narrowing them (confirmed on
   staging, page 51). Every other <ul> this theme renders (footer-column-links,
   footer-mobile-nav, footer-legal, the header's mobile Platform/Insights lists) already sets
   margin explicitly with a real top value and 0 for the rest, which happens to override GP's
   left-margin too — this is the one list that didn't.

   The 55px top value was missing entirely until found against the prototype's own rendered
   height (components/platform.css's own .full-lifecycle .stage-cards carries it, scoped to
   that page, the same situation as module-cards/stat-cards/feature-cards/video-player above). */
.stage-cards {
    gap: 16px;
    margin: 55px 0 0;
    padding: 0;
    list-style: none;
}

.stage-card {
    padding: 24px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 4px;
}

.stage-card .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 6px;
    font-size: 12px;
    color: rgba(var(--warm-gray), 1);
    background-color: rgba(var(--charcoal), 0.06);
    border-radius: 4px;
}

.stage-card .title {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: rgba(var(--dark-green), 1);
}

.stage-card .description {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(var(--charcoal), 1);
}