/*
 * Detail pages: team members (single-abe_team.php) and projects (single-abe_project.php).
 * Title area: template-parts/detail-hero.php. Loaded only on those pages (inc/cpt-team.php).
 * The band and the photo use css/page-title.css.
 *
 * Projects use the team layout (no own design: a project normally opens in the popup of the Project Grid
 * block; this page is for direct visits, shared links and visitors without JavaScript).
 *
 * Design (Figma "About_Bio_Samantha"), at 1728px:
 *   photo     1728 x 778 under the band; the name Bold about 100/100 white, 175px from the left,
 *             its last line about 25px above the bottom of the photo
 *   section   Light grey; "Back" SemiBold 20px 114px under the photo; 1px Steel lines 16px under it,
 *             504px | 19px | 855px (same columns as Split Content); the text 54px under the lines
 *             left: name and credentials Bold 24/32, job title Regular 24/32; LinkedIn icon and email at the bottom
 *             right: bio Regular 18/30, one empty line between paragraphs
 *             about 160px under the last line
 */

/* ------------------------------------------------------------------
 * Name on the photo
 * ------------------------------------------------------------------ */
.detail_hero_image {
	position: relative;
}

/* Shade from the design (Figma layer on the photo, rotated 180°): Charcoal at the bottom fading to nothing,
 * over the lower 651px of the 778px photo, blend mode multiply. It also keeps the white name readable
 * (large text, 3:1 or more, WCAG 1.4.3). */
.detail_hero_image::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 83.7%; /* 651 / 778 */
	/* The design tilts it by 2deg (182deg rotated); straight up here, so its top edge does not show as a line. */
	background: linear-gradient(0deg, #241f21 -5.24%, rgba(255, 255, 255, 0) 98.52%);
	mix-blend-mode: multiply;
	pointer-events: none; /* decorative */
}

.detail_hero_name_wrap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding-bottom: clamp(20px, 2.2vw, 38px);
}

.detail_hero_name_wrap .container {
	margin: 0 auto;
}

.detail_hero_name {
	max-width: 6.6em; /* "Samantha / Ryan" on two lines, as in the design */
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: clamp(40px, 5.79vw, 100px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	overflow-wrap: anywhere; /* long names never cause sideways scrolling (WCAG 1.4.10) */
}

/* Image focus point (Banner Focus Point field). */
.detail_hero .page_title_img.focus-top { object-position: center top; }
.detail_hero .page_title_img.focus-bottom { object-position: center bottom; }
.detail_hero .page_title_img.focus-left { object-position: left center; }
.detail_hero .page_title_img.focus-right { object-position: right center; }

/* No photo yet: a short Charcoal area keeps the name readable. */
.detail_hero--no-image .detail_hero_image {
	aspect-ratio: auto;
	min-height: clamp(200px, 20vw, 340px);
}

/* ------------------------------------------------------------------
 * Section
 * ------------------------------------------------------------------ */
.detail_page {
	padding-top: clamp(48px, 6.6vw, 114px);
	padding-bottom: clamp(60px, 9.2vw, 160px);
	background-color: var(--wp--preset--color--lightgrey);
}

/* "Back" */
.detail_page_back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small-20);
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
}

.detail_page_back .abe-icon {
	font-size: 0.7em;
	transition: transform 0.2s ease;
}

.detail_page_back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.detail_page_back:hover .abe-icon {
	transform: translateX(-3px);
}

/* ------------------------------------------------------------------
 * Columns
 * ------------------------------------------------------------------ */
.detail_page_grid {
	display: grid;
	grid-template-columns: minmax(0, 504fr) minmax(0, 855fr);
	column-gap: 19px;
	margin-top: 16px;
}

.detail_page_meta,
.detail_page_bio {
	padding-top: clamp(32px, 3.1vw, 54px);
	border-top: 1px solid var(--wp--preset--color--steel);
}

.detail_page_meta {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.detail_page_name {
	margin: 0;
	font-size: var(--wp--preset--font-size--small-24);
	font-weight: 400;
	line-height: 32px;
}

.detail_page_name strong {
	font-weight: 700;
}

/* LinkedIn and email at the bottom of the left column (next to the last line of the bio). */
.detail_page_contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: auto;
}

.detail_page_linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px; /* target size (WCAG 2.5.8) */
	min-height: 24px;
	color: var(--wp--preset--color--secondary);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.detail_page_email {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.detail_page_email:hover,
.detail_page_linkedin:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Project facts (Client, Sector, Scope, Codes and standards): label Bold, value Regular, as in the popup. */
.detail_page_facts {
	margin: 24px 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.detail_page_facts div + div {
	margin-top: 4px;
}

.detail_page_facts dt,
.detail_page_facts dd {
	display: inline;
	margin: 0;
}

.detail_page_facts dt {
	font-weight: 800;
}

/* Bio / description */
.detail_page_bio {
	max-width: 855px;
	padding-top: calc(clamp(32px, 3.1vw, 54px) + 4px);
	font-size: var(--wp--preset--font-size--body);
	line-height: 30px;
}

.detail_page_bio > * {
	max-width: 790px;
}

.detail_page_bio p {
	margin: 0 0 30px;
}

.detail_page_bio > :first-child {
	margin-top: 0;
}

.detail_page_bio > :last-child {
	margin-bottom: 0;
}

.detail_page_bio a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.detail_page_back .abe-icon {
		transition: none;
	}

	.detail_page_back:hover .abe-icon {
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Smaller screens: details above the bio, one line on top
 * ------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
	/* The outer container already supplies the mobile gutter. */
	.single-abe_team .detail_page_bio.entry-content > p,
	.single-abe_team .detail_page_bio.entry-content > h2,
	.single-abe_team .detail_page_bio.entry-content > h3,
	.single-abe_team .detail_page_bio.entry-content > h4,
	.single-abe_team .detail_page_bio.entry-content > h5,
	.single-abe_team .detail_page_bio.entry-content > h6 {
		padding-left: 0;
		padding-right: 0;
	}


	.detail_page_grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.detail_page_bio {
		padding-top: 0;
		border-top: 0;
	}

	.detail_page_meta {
		gap: 20px;
	}

	.detail_page_contact {
		margin-top: 0;
	}
}

/* Preserve WYSIWYG paragraphs and explicit breaks in the profile job title. */
.detail_page_job_title p {
	margin: 0;
}
.detail_page_job_title p + p {
	margin-top: 0.5em;
}

/* ------------------------------------------------------------------
 * Bio pages on short laptop screens (Kristy: "the bio pages open awkwardly to the image of a partial head").
 * Wide but short windows: no space above the band title, so more of the photo shows on the first screen.
 * The photo keeps its full height (Kristy: a shorter photo was too short).
 * Only team members (single-abe_team); project pages and the About banner are unchanged.
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1025px) and (max-height: 800px) {
	.single-abe_team .detail_hero .page_title_band .container {
		padding-top: 0;
	}
}