/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

/* Block: framework/content-cards — row of plain content CARDS.
   Same layout family as framework/steps, but no number badges and no arrows
   between cards. Cards share the row, wrap to a new row when they would get
   too narrow, and stack to a single column on mobile. */

.fw-content-cards {
	padding: var(--fw-content-cards-padding, 0);
}

/* Optional section title, centred inside the band above the cards. Inherits the
   theme heading styles from theme.json; this just handles spacing. */
.fw-content-cards__title {
	max-width: var(--fw-content-cards-title-max-width, 0);
	margin: var(--fw-content-cards-title-margin, 0);
	text-align: center;
}

.fw-content-cards__inner {
	max-width: var(--fw-content-cards-inner-max-width, 0);
	margin: var(--fw-content-cards-inner-margin, 0);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--fw-content-cards-inner-gap, 0);
}

/* Each card shares the row (basis 260px), wrapping when they'd get too narrow.
   Front-end children are .fw-content-card (child style.css sets the same flex);
   this covers any non-card direct child too. */
.fw-content-cards__inner > * {
	flex: 1 1 260px;
	min-width: 0;
}

/* Single column on small screens. */
@media ( max-width: 700px ) {
	.fw-content-cards__inner {
	flex-direction: column;
	gap: var(--fw-content-cards-inner-gap, 0);
}
}

/* Optional caption, centred below the cards within the same band. */
.fw-content-cards__caption {
	text-align: center;
	max-width: var(--fw-content-cards-caption-max-width, 0);
	margin: var(--fw-content-cards-caption-margin, 0);
}