/*
 * patterns/features.css — "Features"
 * Markup: wp-content/themes/fcs/patterns/features.php
 * Root:   .fcs-features
 *
 * A 768px column of numbered steps over blue rules, then a row of buttons.
 * Figma 7989:5683 (Admissions › How to Apply). Each step is a core/group, so an
 * editor adds, removes and reorders them in List View; the numbers are a CSS
 * counter and follow whatever order the steps end up in.
 *
 * MOBILE IS DERIVED. There is no mobile design for this section. The choices:
 *
 *   - the steps column runs full width inside the 20px section gutter
 *     (layout/spacing.css), which is what the 768px cap already does below 768px
 *   - step padding drops from 40/32 to 32/20, so a 350px phone column keeps
 *     ~310px of line length rather than ~286px
 *   - the buttons wrap and stay centred rather than stacking to full width,
 *     matching how Text Banner's button row behaves at Small
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Mobile is pinned in
 * layout/spacing.css. See CLAUDE.md § "Section padding".
 */

/* Steps --------------------------------------------------------------- */

.fcs-features__steps {
	counter-reset: fcs-step;
}

/*
 * The rule under each step is the step's own bottom border, so a deleted step
 * takes its rule with it and a duplicated one brings one along.
 */
.fcs-features__step {
	counter-increment: fcs-step;
	padding: 32px 20px;
	border-bottom: 2px solid var( --wp--preset--color--link );
}

@media ( min-width: 768px ) {
	.fcs-features__step {
		padding: 40px 32px;
	}
}

/*
 * Core resets block margins with zero-specificity :where() rules, but theme.json
 * emits heading margins at a weight a bare child selector cannot beat. The
 * repeated class lifts this to (0,2,0) without !important — the same fix as
 * .fcs-multicolumn__header.
 */
.fcs-features__step.fcs-features__step > * {
	margin-block: 0;
}

/* Figma: 20px between the title and the text. */
.fcs-features__step.fcs-features__step > * + * {
	margin-block-start: 20px;
}

/*
 * The step number. Drawn from the counter rather than typed, so reordering in
 * List View renumbers on its own. It inherits the H4's type — Figma sets "1."
 * in the same bold 24px as the title.
 */
.fcs-features__title::before {
	content: counter( fcs-step ) ".";
	margin-inline-end: 0.3em;
}

/* Buttons ------------------------------------------------------------- */

/* Figma: 40px from the last step's rule to the buttons. */
.fcs-features__actions.fcs-features__actions {
	margin-block-start: 40px;
}