/**
 * Horizon Core: THE PERSON PROFILE LAYOUT (HORIZON-20260924-001).
 *
 * ⭐ The FeatureNews entertainer page is the design (Alex, 2026-09-05, and again
 * 2026-09-24: "the design that I made for FeatureNews renders better ... FeatureNews
 * is a paying customer that we are going to have to render the layout as scoped for
 * them anyway"). This file ports its structure from
 * themes/custom-featurenews-vip/assets/css/fnv-single.css, rule for rule
 * (fnv-profile-* -> hp-profile-*; the markup in src/Content/person-profile.php was
 * cloned from that template, so the classes line up one to one).
 *
 * ⭐⭐ WHAT CHANGED, AND WHY IT IS NOT A REVERSAL. The 2026-09-05 rule was
 * "structure is shared, skin is not", with the look left to each theme. In practice
 * each theme then drew its OWN structure (Trashy Imports boxed the sidebar and used a
 * 1fr/300px body; the entertainer theme had no profile CSS at all), so the layout
 * drifted from the design. Now the STRUCTURE lives here, once: grid, proportions,
 * spacing, type scale, the unboxed sidebar with its underlined headings, overlay
 * cards. The SKIN still belongs to the site: every colour and font below is a
 * --hp-* token, so Trashy Imports stays neon, Raven stays her skin, FeatureNews stays
 * gold. Nothing here is a hard-coded colour.
 *
 * HOW IT WINS: enqueued late (src/Content/person-profile.php) and every selector is
 * `body`-prefixed, so it beats a theme's single-class profile rules (Trashy's
 * hp-profile.css) without editing a client theme.
 *
 * Phones: running text is 16px and nothing is under 12px (the signed thresholds);
 * FeatureNews's own 11px button label and 14px hero bio are raised for that reason.
 */

/* ── Hero ─────────────────────────────────────────────────────────────── */
body .hp-profile-hero { padding-block: clamp(40px, 6vw, 72px); }
body .hp-profile-hero__grid {
	display: grid;
	gap: clamp(32px, 5vw, 56px);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
	body .hp-profile-hero__grid { grid-template-columns: 320px minmax(0, 1fr); }
	body .hp-profile-hero__grid--nophoto { grid-template-columns: minmax(0, 1fr); }
}
body .hp-profile-hero__photo {
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	border: 1px solid color-mix(in srgb, var(--hp-gold) 35%, transparent);
	box-shadow: none;
}
body .hp-profile-hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
}
body .hp-profile-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
body .hp-profile-hero__tags .hp-chip,
body .hp-profile-card__tags .hp-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border: 1px solid color-mix(in srgb, var(--hp-gold) 55%, transparent);
	border-radius: 2px;
	background: transparent;
	color: var(--hp-gold);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}
body .hp-profile-hero__name {
	margin: 0 0 16px;
	font-family: var(--hp-font-display);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1.1;
	color: var(--hp-text);
}
body .hp-profile-hero__location {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	letter-spacing: normal;
}
body .hp-profile-hero__location .hp-icon { color: var(--hp-gold); width: 15px; height: 15px; }
/* The tagline: one line, a step up from the bio beneath it. */
body .hp-profile-hero__bio {
	margin: 0 0 16px;
	color: var(--hp-text);
	font-size: var(--hp-text-base);
	line-height: 1.6;
	max-width: 38rem;
}
/* The short bio: the reference design's compact muted paragraph. */
body .hp-profile-hero__bio--long {
	margin: 0 0 28px;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	line-height: 1.7;
}
body .hp-profile-hero__bio:last-of-type { margin-bottom: 28px; }
/* One primary action, outlined, as the reference design draws it. */
body .hp-profile-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 24px;
	border: 1px solid var(--hp-gold);
	border-radius: 2px;
	color: var(--hp-gold);
	background: transparent;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background var(--hp-dur, 0.2s) var(--hp-ease, ease);
}
body .hp-profile-hero__cta:hover {
	background: color-mix(in srgb, var(--hp-gold) 10%, transparent);
	color: var(--hp-gold);
}
body .hp-profile-hero__cta .hp-icon { width: 16px; height: 16px; }

/* ── Body: long bio | sidebar ─────────────────────────────────────────── */
body .hp-profile-body {
	border-top: 1px solid color-mix(in srgb, var(--hp-gold) 12%, transparent);
	padding-block: clamp(40px, 6vw, 64px);
}
body .hp-profile-body__grid {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
}
@media (min-width: 880px) {
	body .hp-profile-body__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
	body .hp-profile-body__grid--noside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	/* No long bio yet: the sidebar blocks sit side by side across the page instead
	   of one boxed column stretched into the space the bio would use (Brett Rossi,
	   Trashy Imports, 2026-09-24). */
	body .hp-profile-body__grid:not(:has(> .hp-profile-body__content)) { grid-template-columns: minmax(0, 1fr); }
	body .hp-profile-body__grid:not(:has(> .hp-profile-body__content)) .hp-profile-body__sidebar {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}
body .hp-profile-body__content {
	color: var(--hp-text-muted);
	font-size: 1rem;
	line-height: 1.8;
	max-width: none;
}
body .hp-profile-body__content p { margin: 0 0 var(--hp-sp-4, 1rem); }
/* ⛔ UNBOXED. The reference sidebar is two headed lists on the page, not a panel. */
body .hp-profile-body__sidebar {
	display: grid;
	gap: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
body .hp-profile-sidebar__title {
	margin: 0 0 20px;
	font-family: var(--hp-font-display);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hp-gold);
}
body .hp-profile-sidebar__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 10px;
	background: var(--hp-gold);
}
body .hp-profile-awards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
body .hp-profile-awards li {
	position: static;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-left: 0;
	color: var(--hp-text);
	font-size: var(--hp-text-sm);
}
body .hp-profile-awards li::before {
	content: "\2726";
	position: static;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--hp-gold);
	font-size: 0.75rem;
	line-height: 1.6;
}
body .hp-profile-links {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 16px;
	margin: 0;
}
body .hp-profile-links dt {
	align-self: center;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}
body .hp-profile-links dt::after { content: ":"; }
body .hp-profile-links dd {
	margin: 0;
	font-size: var(--hp-text-sm);
	overflow-wrap: anywhere;
}
body .hp-profile-links dd a {
	color: var(--hp-gold);
	text-decoration: none;
	transition: color var(--hp-dur, 0.2s) var(--hp-ease, ease);
}
body .hp-profile-links dd a:hover { color: var(--hp-text); }

/* ── More people: overlay cards ───────────────────────────────────────── */
body .hp-profile-related {
	border-top: 1px solid color-mix(in srgb, var(--hp-gold) 12%, transparent);
	padding-block: clamp(40px, 6vw, 64px);
}
body .hp-profile-related__title {
	margin: 0 0 40px;
	font-family: var(--hp-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	color: var(--hp-text);
}
body .hp-profile-related__grid,
body .hp-archive-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* The reference card: the photo IS the card, the words sit on it. */
body .hp-profile-card {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--hp-gold) 18%, transparent);
	border-radius: 2px;
	background: var(--hp-bg-surface);
	text-decoration: none;
}
body .hp-profile-card__media { display: block; aspect-ratio: 4 / 5; }
body .hp-profile-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.6s var(--hp-ease, ease);
}
body .hp-profile-card:hover .hp-profile-card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	body .hp-profile-card:hover .hp-profile-card__media img { transform: none; }
}
body .hp-profile-card__body {
	position: absolute;
	inset: auto 0 0 0;
	display: grid;
	gap: 6px;
	/* The fade starts higher and holds its weight up to the eyebrow, so the accent label reads
	   on a BRIGHT photo too (Delilah, Lauren, Brett on trashyimports: the old 30% stop left the
	   eyebrow on bare picture). Only the fade grows; the words do not move. Core 1.41.9,
	   HORIZON-20260926-070, before/after shown to Alex. No-photo cards override this below. */
	padding: 96px 18px 18px;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--hp-bg) 94%, transparent) 0%,
		color-mix(in srgb, var(--hp-bg) 88%, transparent) 58%,
		color-mix(in srgb, var(--hp-bg) 55%, transparent) 80%,
		transparent 100%);
}
body .hp-profile-card__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hp-gold);
}
body .hp-profile-card__name {
	font-family: var(--hp-font-display);
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--hp-text);
}
body .hp-profile-card__location {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hp-text-muted);
}
body .hp-profile-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
body .hp-profile-card__view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hp-gold);
}

/* ── Phones (the signed thresholds) ───────────────────────────────────── */
@media (max-width: 767.98px) {
	body .hp-profile-hero__bio--long { font-size: var(--hp-text-base); }
	body .hp-profile-awards li,
	body .hp-profile-links dt,
	body .hp-profile-links dd { font-size: var(--hp-text-base); }
	body .hp-profile-links dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Back link (1.29.3): 88x21 on every profile, under the 44px tap floor ── */
body .hp-profile .hp-backlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

/* ── The gap above the profile (1.29.4 -> 1.29.5) ──────────────────────
   Measured at 375 on Trashy Imports and the podcast sample: the header is STICKY
   (it already takes its own space), yet the theme's profile rule still added a
   72px offset (--hp-header-h) meant for a header floating over the page. With
   the back link's padding and the hero's, 200px of nothing sat between the
   header and the photo (Alex, on his phone, 2026-09-24).
   ⛔ PHONES ONLY (1.40.6). hp-base makes the header sticky at <=600px only; above
   that it is fixed/absolute and floats over the page, so the theme's offset is
   what clears it. Zeroing it at every width put "All Hosts" UNDER the header at
   1280 on both podcast sites, unclickable. */
@media (max-width: 600px) {
	body .hp-profile { padding-top: 0; }
}
body .hp-profile .hp-profile__back { padding-top: 16px; padding-bottom: 0; }
body .hp-profile-hero { padding-top: clamp(16px, 3vw, 40px); }

/* ── Phase 4 (HORIZON-20260926-026): portrait fallback, counts, appearances ── */
body .hp-profile-initials {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	font-family: var(--hp-font-display, inherit); font-weight: 600; letter-spacing: 0.06em;
	color: var(--hp-gold, #c9a34e);
	background: linear-gradient(160deg, color-mix(in srgb, var(--hp-gold, #c9a34e) 22%, var(--hp-bg-surface, #111)), var(--hp-bg-surface, #111));
}
body .hp-profile-hero__photo--none { aspect-ratio: 4 / 5; display: block; }
body .hp-profile-hero__photo--none .hp-profile-initials { font-size: clamp(3rem, 8vw, 5rem); }
body .hp-profile-card__media--none .hp-profile-initials { font-size: clamp(2rem, 5vw, 3rem); }
/* ⭐ A card with no photo is a two-row frame, never words laid over initials
   (HORIZON-20260926-041). The reference card lays its words over the bottom of
   the photo; with initials centred in the full 4:5 frame, a tall text block
   (two-line name, tag chips) sat ON the letters: 9 of 15 no-photo cards on
   Trashy's /guests/ at 1280, up to 63px, measured. Top-anchoring the letters
   still collided at the grid's narrowest card (240px). So here the initials
   take whatever space the words leave, the card keeps the photo cards' 4:5
   height, and it grows only if the words need more. The gradient moves to the
   card so the frame reads as one panel. `body .hp-profile-card[hidden]` below
   is more specific and still hides it. */
body .hp-profile-card--no-photo {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, color-mix(in srgb, var(--hp-gold, #c9a34e) 22%, var(--hp-bg-surface, #111)), var(--hp-bg-surface, #111));
}
body .hp-profile-card--no-photo .hp-profile-card__media { aspect-ratio: auto; min-height: 0; background: none; }
body .hp-profile-card--no-photo .hp-profile-initials { background: none; }
body .hp-profile-card--no-photo .hp-profile-card__body { position: static; padding-top: 0; background: none; }
body .hp-profile-card__count { display: block; margin-top: 4px; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }

body .hp-person-appearances, body .hp-person-quotes, body .hp-person-work { padding-block: clamp(24px, 4vw, 48px); }
body .hp-person-appearances__title { font-family: var(--hp-font-display, inherit); font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; }
body .hp-person-appearances__count { font-family: inherit; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); font-weight: 400; }
body .hp-person-appearances .hp-episode-featured { margin-bottom: 24px; }
body .hp-person-appearances__grid { margin-top: 8px; }
body .hp-person-quotes__quote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 2px solid var(--hp-gold, #c9a34e); }
body .hp-person-quotes__quote p { margin: 0 0 6px; font-family: var(--hp-font-display, inherit); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; }
body .hp-person-quotes__quote cite { font-style: normal; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }
body .hp-person-quotes__quote cite a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) { body .hp-person-quotes__quote cite a { min-height: 0; } }
body .hp-person-work__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1px solid color-mix(in srgb, var(--hp-text, #fff) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--hp-text, #fff) 12%, transparent); }
body .hp-person-work__lead { margin: 4px 0 0; color: var(--hp-text-muted, #9a9a9a); }
body .hp-person-work .hp-btn { min-height: 44px; }

/* A two-person index: two feature cards side by side, larger. */
@media (min-width: 640px) { body .hp-person-archive--duo .hp-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; } }
body .hp-person-archive__pitch { margin-top: clamp(24px, 4vw, 40px); padding: 20px; border: 1px solid color-mix(in srgb, var(--hp-gold, #c9a34e) 35%, transparent); border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
body .hp-person-archive__pitch-text { margin: 0; font-family: var(--hp-font-display, inherit); font-size: clamp(1.05rem, 2vw, 1.3rem); }
body .hp-person-archive__pitch .hp-btn { min-height: 44px; }

/* ── Filtering: the card must actually disappear (HORIZON-20260926-027) ──
   hp-person-filters.js hides a non-matching card with the `hidden` attribute.
   `body .hp-profile-card { display:block }` above is an AUTHOR rule, and an
   author rule beats the user-agent `[hidden]{display:none}`, so every card
   stayed visible with the pill lit (Alex, trashyimports.com/guests/: "The
   filters do not work"). Attribute selector: higher specificity, no !important. */
body .hp-profile-card[hidden] { display: none; }

/* ── Phones and portrait tablets: each pill group is ONE swipeable row ────
   Measured at 375px: a search box, eight tag pills and six city pills stacked
   into seven rows of controls before the first guest. A single scrolling strip
   per group (the chip pattern every phone app uses) keeps every pill one tap
   away in two rows. Desktop keeps the wrapped rows the themes draw. */
@media (max-width: 767px) {
	body .hp-archive-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		/* Bleed to the container edge so the strip reads as cut off, not ended. */
		margin-inline: calc(-1 * var(--hp-gutter, 16px));
		padding-inline: var(--hp-gutter, 16px);
		padding-block: 2px;
		/* Fade the trailing edge so the strip announces there is more. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	}
	body .hp-archive-filters::-webkit-scrollbar { display: none; }
	body .hp-archive-filter {
		flex: none;
		scroll-snap-align: start;
		min-height: 40px;
		white-space: nowrap;
	}
}