/* 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-card — one plain content CARD inside content-cards.
   Same white/bordered/shadowed card look as framework/step, but with no number
   badge and no arrow, and no top margin (nothing overlaps the top edge). */

.fw-content-card {
	flex: 1 1 260px;
	min-width: 0;
	padding: var(--fw-content-card-padding, 0);
	text-align: left;
}

.fw-content-card__body :is( h2, h3, h4, h5, h6 ) {
	margin: var(--fw-content-card-body-margin, 0);
}
.fw-content-card__body p {
	margin: var(--fw-content-card-body-margin, 0);
}
.fw-content-card__body p:last-child {
	margin-bottom: 0;
}
.fw-content-card__body :is( ul, ol ) {
	margin: var(--fw-content-card-body-margin, 0);
	padding-left: var(--fw-content-card-body-padding-left, 0);
}

/* ---- Optional image + link (added for SCR, 2026-10-13) -------------------
   Mechanics only. A card with an image stacks image then body, body grows to
   fill so the link sits at the bottom of equal-height cards. A linked card is
   position:relative so the link's ::after can stretch over the whole card. */

.fw-content-card--has-image,
.fw-content-card--linked {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fw-content-card--has-image { padding: 0; }

.fw-content-card__image {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: var(--fw-content-card-image-ratio, 8 / 5);
	overflow: hidden;
}

.fw-content-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fw-content-card--has-image .fw-content-card__body,
.fw-content-card--linked .fw-content-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--fw-content-card-body-gap, 0);
	padding: var(--fw-content-card-body-padding, 0);
}

.fw-content-card--linked { position: relative; }

.fw-content-card__link { align-self: flex-start; }

/* The single anchor covers the whole card. */
.fw-content-card--linked .fw-content-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Editor only: image actions overlay. */
.fw-content-card__image-actions {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	gap: 6px;
}
.fw-content-card__add-image { margin: 0 0 12px; }