/* Ported from the prototype's layout/lifecycle.css: only the .stages list rule survives into
   this theme (the padding:96px/background:cream on .lifecycle itself is exactly tt360/section's
   own cream-background default, so this block is meant to sit inside a tt360/section instead of
   carrying that background/padding itself — same pattern as tt360/testimonial and
   tt360/video-player).

   margin/padding/list-style reset is required here (not just a style choice): GeneratePress
   sets ol { margin: 0 0 1.5em 3em } by default, which insets and narrows every stage — same
   real leak already documented and fixed once on .stage-cards in stage-cards-alt.css. */
.stages {
    display: flex;
    gap: 20px;
    margin: 55px 0 0;
    padding: 0;
    list-style: none;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. This block is nested
   inside tt360/section's own InnerBlocks, not root-level, so only GeneratePress's own
   `body .wp-block { max-width: var(--content-width) }` rule reaches it (not Gutenberg's
   separate root-container rule, which only applies to root-level blocks) — confirmed directly:
   .stages measured max-width: calc(1200px - 40px - 40px) = 1120px in the editor before this. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-lifecycle-stages {
    max-width: none;
}

/* md: a stacked list (icon left, name/description beside it) instead of the horizontal row. */
@media (max-width: 767.98px) {
    .stages {
        flex-direction: column;
        gap: 24px;
    }
}