/* ==========================================================================
   staff_picture_3 — staff / people cards
   --------------------------------------------------------------------------
   Loaded on the front end AND in the block editor (see functions.php), so the
   editor canvas matches the live page.

   HOW TO APPLY (either one works):
     a) "staff_picture_3" in Advanced > Additional CSS class(es) on EACH
        person's Group block. That group becomes a card. (Current markup.)
     b) Once on the outer Grid/Columns block. Every direct child becomes a card.

   OPTIONAL EXTRA CLASS:
     "staff_picture_3_center" — centers the name/title/contact text. Put it on
     the same block as staff_picture_3, or once on the outer Grid to do all.

   WHY THE !important MARGINS BELOW:
     WordPress's constrained layout emits
         .is-layout-constrained > :where(...) {
             max-width: var(--wp--style--global--content-size);
             margin-left: auto !important; margin-right: auto !important; }
     Inside a flex card those auto cross-axis margins ALSO switch off stretch,
     so each inner group shrink-wraps its content: photos render at their
     intrinsic width and short lines of text look centered while long ones
     don't. Core used !important, so overriding it needs !important.

   DARK MODE:
     Colors are WDN 5.3 custom properties, which the parent template re-declares
     under @media (prefers-color-scheme: dark). The value after each comma is
     the light fallback, used by the editor iframe (WDN's CSS isn't loaded in
     there, and editor-style.css forces a light canvas).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tunables — override on .staff_picture_3 to adjust without touching rules
   -------------------------------------------------------------------------- */

.staff_picture_3 {
	/* Photo shape and its ceiling. Every card is the same width, so capping the
	   height keeps every photo identical. Never taller than half the viewport. */
	--sp3-photo-ratio: 4 / 5;
	--sp3-photo-max-height: min(50vh, 26rem);

	/* Inner padding for the text, and text alignment. */
	--sp3-pad: 1.25rem;
	--sp3-text-align: left;

	/* Neutralise theme.json's 88% contentSize inside the card. */
	--wp--style--global--content-size: 100%;
}

.staff_picture_3_center {
	--sp3-text-align: center;
}

/* --------------------------------------------------------------------------
   1. Columns — 3 across, 2 on tablet, 1 on phone.
   WordPress's grid block holds a fixed column count at every width, which
   squeezes the cards on small screens.
   -------------------------------------------------------------------------- */

.staff_picture_3.is-layout-grid,
.is-layout-grid:has(> .staff_picture_3) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.5rem;
}

.staff_picture_3.is-layout-flex,
.is-layout-flex:has(> .staff_picture_3) {
	align-items: stretch;
	gap: 1.5rem;
}

@media (max-width: 62em) {
	.staff_picture_3.is-layout-grid,
	.is-layout-grid:has(> .staff_picture_3) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40em) {
	.staff_picture_3.is-layout-grid,
	.is-layout-grid:has(> .staff_picture_3) {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   2. The card
   Two selectors: class on the person's group (a), or on the wrapper (b).
   -------------------------------------------------------------------------- */

.staff_picture_3:not(.is-layout-grid, .is-layout-flex),
.staff_picture_3:is(.is-layout-grid, .is-layout-flex) > :is(.wp-block-group, .wp-block-column) {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--bg-lightest-gray, #f6f6f5);
	border: 1px solid var(--b-light-gray, #e3e3e2);
	border-radius: 2px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.staff_picture_3:not(.is-layout-grid, .is-layout-flex):hover,
.staff_picture_3:not(.is-layout-grid, .is-layout-flex):focus-within,
.staff_picture_3:is(.is-layout-grid, .is-layout-flex) > :is(.wp-block-group, .wp-block-column):hover,
.staff_picture_3:is(.is-layout-grid, .is-layout-flex) > :is(.wp-block-group, .wp-block-column):focus-within {
	border-color: var(--b-input-hover, #6b6b68);
	box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

/* --------------------------------------------------------------------------
   3. Undo constrained layout inside the card
   This is the rule that makes everything else work. See header note.
   -------------------------------------------------------------------------- */

.staff_picture_3 > *,
.staff_picture_3 > * > *,
.staff_picture_3 > * > * > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
	min-width: 0;
}

/* Inner Group blocks are structural only — no padding, no centering. */
.staff_picture_3 .wp-block-group {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin-block: 0;
}

/* The last inner group absorbs the slack, so cards with short text still line
   their bottom edges up and a contact block placed there sits on the floor. */
.staff_picture_3 > .wp-block-group:last-child {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   4. Photo — identical shape and height on every card
   -------------------------------------------------------------------------- */

.staff_picture_3 figure.wp-block-image {
	display: block;
	width: 100%;
	margin: 0 0 var(--sp3-pad);
	padding: 0;
	overflow: hidden;
	background-color: var(--bg-lighter-gray, #ebebea);
	border-bottom: 1px solid var(--b-light-gray, #e3e3e2);
}

/* Core sets `display: inline-block` here, which shrink-wraps the photo to its
   file's intrinsic width. */
.staff_picture_3 figure.wp-block-image > a {
	display: block;
	width: 100%;
	text-decoration: none;
}

.staff_picture_3 figure.wp-block-image img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: var(--sp3-photo-ratio);
	max-height: var(--sp3-photo-max-height);
	object-fit: cover;
	/* Bias the crop upward — faces sit above centre in most headshots. */
	object-position: center 18%;
	border-radius: 0;
	transition: transform .35s ease;
}

.staff_picture_3 figure.wp-block-image a:hover img,
.staff_picture_3 figure.wp-block-image a:focus-visible img {
	transform: scale(1.03);
}

.staff_picture_3 figure.wp-block-image figcaption {
	margin: 0;
	padding: 0 var(--sp3-pad) .5rem;
	font-size: .8125rem;
	color: var(--figcaption, #6b6b68);
}

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */

.staff_picture_3 :is(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons) {
	padding-inline: var(--sp3-pad);
	max-width: none;
	text-align: var(--sp3-text-align);
}

/* Name */
.staff_picture_3 :is(h2, h3, h4, h5, h6) {
	margin: 0 0 .25rem;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--heading, #242423);
	text-wrap: balance;
}

/* The names are marked up as <h4><strong>, which would double up the weight. */
.staff_picture_3 :is(h2, h3, h4, h5, h6) strong {
	font-weight: inherit;
}

/* Title / unit / college */
.staff_picture_3 p {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--body, #424240);
}

.staff_picture_3 p:last-child {
	margin-bottom: var(--sp3-pad);
}

/* Contact block — email + phone. */
.staff_picture_3 p.staff_contact,
.staff_picture_3 p:has(> a[href^="mailto:"]),
.staff_picture_3 p:has(> a[href^="tel:"]) {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--figcaption, #6b6b68);
	word-break: break-word;
}

/* Sitting directly under the photo (current markup): reads as a caption. */
.staff_picture_3 > .wp-block-group:first-child p.staff_contact,
.staff_picture_3 > .wp-block-group:first-child p:has(> a[href^="mailto:"]) {
	margin-bottom: var(--sp3-pad);
}

/* Moved into the last group: pins to the card floor with a hairline above. */
.staff_picture_3 > .wp-block-group:last-child p.staff_contact,
.staff_picture_3 > .wp-block-group:last-child p:has(> a[href^="mailto:"]) {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: .75rem;
	padding-bottom: var(--sp3-pad);
	border-top: 1px solid var(--b-lighter-gray, #ebebea);
}

/* Empty <a> elements left behind by editing (there is one in this page's
   markup) must not open a gap or grab focus. */
.staff_picture_3 a:empty {
	display: none;
}

.staff_picture_3 a {
	color: var(--link, #d00000);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.staff_picture_3 a:hover,
.staff_picture_3 a:focus-visible {
	color: var(--hover, #9d0000);
}

.staff_picture_3 a:focus-visible {
	outline: 2px solid var(--focus-outline, #007197);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Editor-only plumbing
   The resize handles and block-gap margins must not change the rendered box.
   -------------------------------------------------------------------------- */

.staff_picture_3 .components-resizable-box__container {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.staff_picture_3 .block-editor-block-list__layout > *,
.staff_picture_3 > .wp-block-group > * {
	margin-block-start: 0;
}