/* ────────────────────────────────────────────────────────────
   03-staff-collection.css — 4-column staff bio card grid
   Section uses: .staff-collection
   Card uses: .staff-card / .staff-card__body

   Card chrome mirrors card-collection (white fill, shadow,
   flush square photo, centered copy) so mixed layouts read
   as one component family.

   Light bg only by default; dark-bg overrides pin tile text
   back to on-light colors if the style is changed in editor.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.staff-collection {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner: max-width container ───────────────────────────── */
.staff-collection__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* ── Section heading ─────────────────────────────────────── */
.staff-collection h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0 0 var(--spacing-xl) 0;
}

/* ── Grid ─────────────────────────────────────────────────── */
.staff-collection__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-xl);
}

/* ── Staff card ───────────────────────────────────────────── */
/* No padding at card level — image flushes naturally to edges.
   padding lives in .staff-card__body below. */
.staff-card {
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease-in-out;
}

.staff-card:hover {
	box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.09);
}

/* ── Staff photo: square crop, full card width ────────────── */
.staff-card .wp-block-image {
	margin: 0;
	flex-shrink: 0;
}

.staff-card .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
}

/* ── Card body ────────────────────────────────────────────── */
.staff-card__body {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xxs);
	flex-grow: 1;
}

/* ── Name ─────────────────────────────────────────────────── */
.staff-card__name {
	font-family: var(--font-primary);
	font-size: var(--text-heading-md);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0;
}

/* ── Role — visually demoted with muted gray ──────────────── */
.staff-card__role {
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	line-height: var(--line-height-normal);
	color: #6B6B6B;
	text-align: center;
	margin: 0;
}

/* ── Email ────────────────────────────────────────────────── */
.staff-card__email {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-normal);
	color: var(--color-text-body);
	text-align: center;
	margin: 0;
}

/* ── Phone ────────────────────────────────────────────────── */
.staff-card__phone {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-normal);
	color: var(--color-text-body);
	text-align: center;
	margin: 0;
}

/* ── Dark-bg overrides: cards stay white, text re-pinned ─── */
/* 02-style-variations.css inverts all p to white on dark bg.
   These rules restore card interior to dark-text-on-white. */
.is-style-bg-dark .staff-collection h2 {
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .staff-card {
	background-color: var(--color-white);
}

.is-style-bg-dark .staff-card__name {
	color: var(--color-text-heading);
}

.is-style-bg-dark .staff-card__role {
	color: #6B6B6B;
}

.is-style-bg-dark .staff-card__email,
.is-style-bg-dark .staff-card__phone {
	color: var(--color-text-body);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
	.staff-collection__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.staff-collection {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}

	.staff-collection__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Editor: staff card image flush fix ────────────────────────
   Same .wp-block wrapper pattern as card-collection images.
   Reset margins and enforce the square crop.
*/
.editor-styles-wrapper .staff-card .wp-block,
.editor-styles-wrapper .staff-card .wp-block-image,
.editor-styles-wrapper .staff-card .wp-block-image figure {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.editor-styles-wrapper .staff-card .wp-block-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}