/* Faculty Hero Block */

.faculty-hero-preview {
	padding: 16px;
	background: #f0f0f0;
	border: 1px dashed #999999;
	font-size: 12px;
}

/* Section clips horizontal overflow; photo bleeds vertically past content padding */
.faculty-hero {
	position: relative;
	overflow: clip;

	/* Force this element onto its own GPU compositing layer so the browser always
	   rasterizes the multi-layer radial-gradient background (the theme.json
	   "background-glow" preset applied to this section) fresh, instead of reusing
	   a stale/misaligned tile from a previous paint — which shows up as a
	   hard-edged rectangular patch mid-gradient after scroll/resize/animation.
	   Same fix and rationale as the interior and homepage heroes; see
	   3mw-core-child/blocks/hero/style.css. transform: translateZ(0) is the
	   standard layer-promotion hack; backface-visibility silences an occasional
	   Safari flicker that can come with it. */
	transform: translateZ(0);
	backface-visibility: hidden;
}

.faculty-hero .faculty-hero__name {
	font-size: var(--font-size-h2);
}

/* min-height sets the floor for sparse profiles; max-height sets the ceiling so a
   member with an unusually long title list can't produce a runaway hero that
   fills the whole screen. 85vh always leaves a sliver of the Biography section
   visible below the fold, which signals the page is scrollable. Note the height
   here is driven by the CONTENT column (breadcrumbs + name + subheadings +
   program badges) — the photo has its own explicit cap below
   (.faculty-hero__image max-height), independent of this section height. */
.faculty-hero__inner {
	display: flex;
	align-items: stretch;
	gap: var(--space-3xl);
	min-height: clamp(400px, 60vh, 700px);
	max-height: 85vh;
}

/* Content takes remaining width; owns the vertical padding.
   The padding is the slack that absorbs the max-height cap above: when a long
   title list pushes the hero past 85vh, this padding shrinks toward its minimum
   before any text is at risk of being clipped by the section's overflow: clip.
   min-height: 0 lets this flex child actually shrink below its content size
   (flex items default to min-height: auto, which would refuse to shrink and
   overflow the capped parent instead). */
.faculty-hero__content {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(var(--space-lg), 5vh, var(--space-3xl));
}

/* Breadcrumbs rendered inside the hero — suppress block's own vertical padding */
.faculty-hero__content .breadcrumbs {
	padding-block: 0;
	margin-block-end: var(--space-sm);
}

.faculty-hero__subheading {
	font-size: var(--font-size-lead);
	line-height: var(--line-height-normal);
}

.faculty-hero__programs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-lg) 0 0 0;
}

.faculty-hero__program-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border: 1px solid currentcolor;
	background: rgb(255 255 255 / 20%);
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	white-space: nowrap;
}

/* Dark background adaptation — triggered by has-dark-bg class from tmw_core_get_dark_bg_class() */
.faculty-hero.has-dark-bg .faculty-hero__name,
.faculty-hero.has-dark-bg .faculty-hero__subheading,
.faculty-hero.has-dark-bg .faculty-hero__content a {
	color: inherit;
}

.faculty-hero.has-dark-bg .faculty-hero__program-badge {
	border-color: currentcolor;
	background: rgb(255 255 255 / 15%);
}

.faculty-hero.has-dark-bg .breadcrumbs,
.faculty-hero.has-dark-bg .breadcrumbs a {
	color: inherit;
}

/* Photo — right column. Wider basis mirrors the homepage hero's tighter
   framing. The image is capped at max-height: 460px (see .faculty-hero__image)
   and vertically centered in the row rather than stretched, so an oversized
   headshot can't dominate the hero regardless of how tall the content column
   grows. object-fit: contain means the headshot fills its frame naturally
   without cropping. */
.faculty-hero__photo {
	flex: 0 1 44%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-sm);
}

.faculty-hero__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 560px;
	object-fit: contain;
	object-position: center;
	border-radius: var(--radius-card);
}

/* Intermediate breakpoint */
@media (width <= 1200px) {
	.faculty-hero__inner {
		row-gap: var(--space-2xl);
	}
}

/* Tablet — stack vertically, restore natural image sizing */
@media (width <= 768px) {
	/* Release the desktop max-height cap: once content and photo stack vertically
	   the section legitimately needs to grow past 85vh, and keeping the cap here
	   would clip the stacked headshot. Mobile height is instead bounded by the
	   image's own max-height: 45vh / max-width constraints below. */
	.faculty-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		max-height: none;
		-webkit-border-before-width: 0;
		row-gap: 0;
	}

	/* The parent .container's horizontal padding is not reliably applied to this
	   hero on the single profile template (its layout CSS resolves to 0 here), so
	   the block supplies its own inline gutters on mobile. */
	.faculty-hero__content {
		padding-block: var(--space-2xl);
		padding-inline: var(--space-md);
		order: 1;
	}

	/* Photo sits below the content; constrained so a stacked headshot doesn't
	   dominate the viewport on narrow screens. Works for portrait or landscape. */
	.faculty-hero__photo {
		order: 2;
		align-self: flex-start;
		width: 100%;
		max-width: 100%;
		padding-block: 0 var(--space-2xl);
		padding-inline: var(--space-md);
	}

	.faculty-hero__image {
		width: auto;
		max-width: min(100%, 320px);
		height: auto;
		max-height: 45vh;
		object-fit: contain;
		border-radius: var(--radius-card);
	}
}

/* Small phones — allow the constrained headshot to shrink further */
@media (width <= 480px) {
	.faculty-hero__image {
		max-width: min(100%, 240px);
	}
}