/*
 * Card components. See /patterns/*.php for the matching block markup.
 *
 *   .sfbbo-card-grid     — flex-wrap container, centers a row/grid of cards
 *     .sfbbo-action-card — round photo + title + description + button
 *     .sfbbo-person-card — square photo + name + role + contact
 *     .sfbbo-link-card   — square photo + title + button
 *
 * Colors come from theme.json palette tokens (single source of truth).
 */

/* ---- Grid container ---- */
.sfbbo-card-grid {
	gap: 24px 36px;
	align-items: flex-start;
}

/* Link-card rows stretch so every card (and its bottom-pinned button) lines up. */
.sfbbo-card-grid:has(.sfbbo-link-card) {
	align-items: stretch;
}

/* ============================================================
 * Action card (round photo + title + description + button)
 * ============================================================ */
.sfbbo-action-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	text-align: center;
	padding: 0 20px 28px;
	width: 280px;
	max-width: 100%;
}

.sfbbo-action-card .sfbbo-action-photo {
	margin: 20px auto 0;
	max-width: 240px;
}

.sfbbo-action-card .sfbbo-action-photo img {
	width: 240px;
	height: 240px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.sfbbo-action-card .sfbbo-action-name {
	color: var(--wp--preset--color--sienna);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	font-weight: 700;
	margin: 16px 0 0;
}

.sfbbo-action-card p {
	color: var(--wp--preset--color--muted);
	margin-top: 12px;
}

/* ============================================================
 * Person card (square photo + name + role + contact)
 * ============================================================ */
.sfbbo-person-card {
	width: 204px;
	max-width: 100%;
	text-align: center;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	overflow: hidden;
	padding: 0 0 20px;
}

/* Photo sits flush to the top and side edges of the card. */
.sfbbo-person-card .sfbbo-person-photo {
	margin: 0;
}

.sfbbo-person-card .sfbbo-person-photo img {
	width: 100%;
	height: 204px;
	object-fit: cover;
	display: block;
}

.sfbbo-person-card .sfbbo-person-name {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-weight: 500;
	margin: 16px 0 0;
	padding: 0 10px;
}

.sfbbo-person-card .sfbbo-person-role {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 8px 0 0;
	padding: 0 10px;
}

.sfbbo-person-card .sfbbo-person-contact {
	font-size: 11px;
	margin: 8px 0 0;
	padding: 0 10px;
	line-height: 1.6;
}

.sfbbo-person-card .sfbbo-person-contact a {
	color: var(--wp--preset--color--link-blue);
	text-transform: uppercase;
	word-break: break-word;
}

/* ============================================================
 * Link card (square photo + title + button)
 * ============================================================ */
.sfbbo-link-card {
	display: flex;
	flex-direction: column;
	width: 204px;
	max-width: 100%;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	overflow: hidden;
	text-align: center;
	padding: 0 0 24px;
}

/* Photo is flush to the top and side edges of the card. */
.sfbbo-link-card .sfbbo-link-photo {
	margin: 0;
}

.sfbbo-link-card .sfbbo-link-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.sfbbo-link-card .sfbbo-link-title {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 18px 0 0;
	padding: 0 16px;
}

/* Pin the button to the bottom so a row of cards aligns. */
.sfbbo-link-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 18px;
}

@media (max-width: 600px) {
	.sfbbo-action-card .sfbbo-action-photo,
	.sfbbo-action-card .sfbbo-action-photo img {
		width: 200px;
		height: 200px;
	}
}