/**
 * Coach Detail — Picklemall Widgets
 *
 * Profile page for one coach (markup: Coach_Detail::render). Sticky aside with
 * photo + links beside a main column of brief sections. Colours are --pm-cd-*
 * custom properties set from the Coach Detail widget's Style tab; the defaults
 * match the Coaches Hero / Grid so the pages read as one set.
 */

/*
 * Coach pages: the area behind the fixed navbar (content offset + the navbar's
 * transparent torn edge) is the <body>, so match it to the profile background.
 * single-coach.php re-syncs this to the actual .pm-cd colour at runtime.
 */
body.pm-single-coach {
	background-color: var(--pm-color-primary-d80, #052E2C);
}

.pm-cd {
	--pm-cd-bg: var(--pm-color-primary-d80, #052E2C);
	--pm-cd-surface: var(--pm-color-primary-d40, #063B38);
	--pm-cd-border: rgba(255, 255, 255, 0.1);
	--pm-cd-name: var(--pm-color-white, #FFFFFF);
	--pm-cd-heading: var(--pm-color-white, #FFFFFF);
	--pm-cd-graffiti: var(--pm-color-orange, #E85D22);
	--pm-cd-label: var(--pm-color-secondary-mint, #63D6B0);
	--pm-cd-accent: var(--pm-color-action, #E1FF2B);
	--pm-cd-text: rgba(255, 255, 255, 0.85);
	--pm-cd-max-width: 1280px;
	--pm-cd-sticky-top: 120px;

	width: 100%;
	background-color: var(--pm-cd-bg);
	color: var(--pm-cd-text);
}

.pm-cd__container {
	max-width: var(--pm-cd-max-width);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) var(--pm-gutter, clamp(1rem, 4vw, 2rem)) clamp(3rem, 7vw, 6rem);
	box-sizing: border-box;
}

/* ── Back link ────────────────────────────────────────────────────────────── */

.pm-cd__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-caption, 0.875rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pm-cd-label);
	text-decoration: none;
	transition: color var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.pm-cd__back:hover,
.pm-cd__back:focus-visible {
	color: var(--pm-cd-accent);
}

.pm-cd__back-arrow {
	transition: transform var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.pm-cd__back:hover .pm-cd__back-arrow {
	transform: translateX(-4px);
}

/* ── Two-column layout ────────────────────────────────────────────────────── */

.pm-cd__layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

/* ── Aside ────────────────────────────────────────────────────────────────── */

.pm-cd__aside {
	position: sticky;
	top: var(--pm-cd-sticky-top);
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-6, 1.5rem);
}

.pm-cd__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--pm-radius-lg, 16px);
	background-color: var(--pm-cd-surface);
}

.pm-cd__img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

.pm-cd__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.pm-cd__socials {
	display: flex;
	gap: 8px;
}

.pm-cd__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--pm-radius-full, 9999px);
	background-color: var(--pm-cd-graffiti);
	color: #FFFFFF;
	text-decoration: none;
	transition:
		background-color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
		color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
		transform var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.pm-cd__social:hover,
.pm-cd__social:focus-visible {
	background-color: var(--pm-cd-accent);
	color: var(--pm-cd-bg);
	transform: translateY(-2px);
}

.pm-cd__social svg {
	display: block;
	width: 18px;
	height: 18px;
}

.pm-cd__other-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-cd__other-links a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--pm-cd-border);
	border-radius: var(--pm-radius-full, 9999px);
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-caption, 0.875rem);
	color: var(--pm-cd-text);
	text-decoration: none;
	transition: border-color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
	            color var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.pm-cd__other-links a:hover,
.pm-cd__other-links a:focus-visible {
	border-color: var(--pm-cd-accent);
	color: var(--pm-cd-accent);
}

/* "Known For" sticker */
.pm-cd__known {
	position: relative;
	padding: 20px 22px;
	border-radius: var(--pm-radius-lg, 16px);
	background-color: var(--pm-cd-surface);
	border: 1px solid var(--pm-cd-border);
	border-left: 4px solid var(--pm-cd-accent);
}

.pm-cd__known-text {
	margin: 8px 0 0;
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-body, 1.125rem);
	font-weight: var(--pm-weight-medium, 500);
	line-height: var(--pm-leading-body, 1.5);
	color: var(--pm-cd-name);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.pm-cd__header {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--pm-cd-border);
}

.pm-cd__name {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-xxlarge, clamp(2.625rem, 1.529rem + 4.494vw, 5.125rem));
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pm-cd-name);
	margin: 0;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.pm-cd__graffiti {
	font-family: var(--pm-font-graffiti, 'TheGraffitiFont', cursive);
	font-size: 1.05em;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--pm-cd-graffiti);
}

.pm-cd__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	padding: 0;
}

.pm-cd__fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 18px;
	border: 1px solid var(--pm-cd-border);
	border-radius: var(--pm-radius-md, 8px);
	background-color: var(--pm-cd-surface);
}

.pm-cd__fact dt,
.pm-cd__label {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-caption, 0.875rem);
	font-weight: 400;
	line-height: var(--pm-leading-snug, 1.2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pm-cd-label);
	margin: 0;
}

.pm-cd__fact dd {
	margin: 0;
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-body, 1.125rem);
	font-weight: var(--pm-weight-semibold, 600);
	color: var(--pm-cd-name);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.pm-cd__section {
	padding: clamp(2rem, 4vw, 3rem) 0;
	border-bottom: 1px solid var(--pm-cd-border);
}

.pm-cd__section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pm-cd__heading {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-medium, clamp(1.5rem, 1.062rem + 1.798vw, 2.5rem));
	font-weight: 400;
	line-height: var(--pm-leading-snug, 1.2);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pm-cd-heading);
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.pm-cd__prose,
.pm-cd__qa-item p,
.pm-cd__list {
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-body, 1.125rem);
	line-height: var(--pm-leading-loose, 1.6);
	color: var(--pm-cd-text);
}

.pm-cd__prose p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.pm-cd__prose p:last-child {
	margin-bottom: 0;
}

/* Philosophy pull-quote */
.pm-cd__quote {
	position: relative;
	margin: 0;
	padding: 0 0 0 clamp(2.75rem, 5vw, 3.75rem);
	border: 0;
}

.pm-cd__quote-mark {
	position: absolute;
	top: -0.12em;
	left: 0;
	font-family: var(--pm-font-graffiti, 'TheGraffitiFont', cursive);
	font-size: clamp(4rem, 8vw, 6rem);
	line-height: 1;
	color: var(--pm-cd-graffiti);
}

.pm-cd__quote p {
	margin: 0;
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-xsmall, clamp(1.125rem, 0.961rem + 0.674vw, 1.5rem));
	font-weight: var(--pm-weight-medium, 500);
	line-height: var(--pm-leading-normal, 1.4);
	color: var(--pm-cd-name);
}

/* Credentials */
.pm-cd__creds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pm-cd__creds-group .pm-cd__label {
	margin-bottom: 12px;
}

.pm-cd__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-cd__list li {
	position: relative;
	padding-left: 28px;
}

/* Lime check-dot bullet */
.pm-cd__list li::before {
	content: '';
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background:
		var(--pm-cd-accent)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23052E2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 100% no-repeat;
}

/* Q&A */
.pm-cd__qa {
	display: grid;
	gap: 16px;
}

.pm-cd__qa-item {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--pm-cd-border);
	border-radius: var(--pm-radius-lg, 16px);
	background-color: var(--pm-cd-surface);
}

.pm-cd__qa-item .pm-cd__label {
	color: var(--pm-cd-accent);
	margin-bottom: 10px;
}

.pm-cd__qa-item p {
	margin: 0;
}

/* ── More coaches ─────────────────────────────────────────────────────────── */

.pm-cd__more {
	margin-top: clamp(3rem, 7vw, 6rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--pm-cd-border);
}

.pm-cd__more-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* ── Tablet ───────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.pm-cd__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.pm-cd__more-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	/*
	 * Flatten aside + main into one column so the name sits right under the
	 * photo instead of after the links and "Known For" block.
	 */
	.pm-cd__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pm-space-6, 1.5rem);
	}

	.pm-cd__aside,
	.pm-cd__main {
		display: contents;
	}

	.pm-cd__photo   { order: 1; }
	.pm-cd__header  { order: 2; }
	.pm-cd__links   { order: 3; }
	.pm-cd__known   { order: 4; }
	.pm-cd__section { order: 5; }

	.pm-cd__photo {
		width: 100%;
		max-width: 420px;
	}

	.pm-cd__name {
		font-size: clamp(2.25rem, 11vw, 3rem);
	}

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