/*
 * 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 ---- */
/*
 * Zero-specificity default gap so a per-instance Block Spacing value set in the
 * editor (WP emits a single-class .wp-container-* gap rule) can override it.
 * A plain .sfbbo-card-grid rule would tie that on specificity and win on source
 * order, silently discarding the editor setting.
 */
:where(.sfbbo-card-grid) {
	gap: 24px 36px;
}

.sfbbo-card-grid {
	align-items: flex-start;
}

/*
 * Link- and person-card rows stretch so every card in a row is the same height —
 * link cards so their bottom-pinned buttons line up, person cards so a wrapped
 * role or a missing phone extension doesn't leave a short card in the row.
 */
.sfbbo-card-grid:has(.sfbbo-link-card),
.sfbbo-card-grid:has(.sfbbo-person-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, cropped to a square so
 * every card presents the same photo area whatever the source aspect ratio.
 *
 * The anchor needs `display: block` too: where the photo links to the person's
 * bio it wraps the image, and an inline-block link shrink-wraps — the image's
 * `width: 100%` would then resolve against the link's own content-driven width
 * and collapse back to the source aspect ratio.
 */
.sfbbo-person-card .sfbbo-person-photo,
.sfbbo-person-card .sfbbo-person-photo a {
	display: block;
	margin: 0;
}

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

/*
 * Framing overrides for photos whose subject isn't centred in the source image.
 * The square crop keeps the middle of the photo by default; add one of these to
 * the image block's Advanced → "Additional CSS class(es)" field, alongside the
 * `sfbbo-person-photo` class already there, to keep a different part instead.
 */
.sfbbo-person-card .sfbbo-person-photo--focus-top img {
	object-position: center top;
}

.sfbbo-person-card .sfbbo-person-photo--focus-upper img {
	object-position: center 25%;
}

.sfbbo-person-card .sfbbo-person-photo--focus-lower img {
	object-position: center 75%;
}

.sfbbo-person-card .sfbbo-person-photo--focus-bottom img {
	object-position: center bottom;
}

.sfbbo-person-card .sfbbo-person-photo--focus-left img {
	object-position: left center;
}

.sfbbo-person-card .sfbbo-person-photo--focus-right img {
	object-position: right center;
}

.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;
	}
}