/**
 * Hall of Fame / list V4 — people-card grid styles.
 * Loaded only when ACF flag `use_v4_hof` is true on the page (inc/tour-v4.php).
 *
 * Reuses tour-v4.css tokens + shared components via body aliases:
 *   t4-longread → the t4ge-hero compact hero (same banner as About-Us) + the feedback
 *                 form re-skin (.t4ge-formcard / .t4ge-stage);
 *   t4-catalog  → t4-hcontact contact cards + t4-foot rich footer (home-v4.css).
 * NEW below: the section shell + a re-skin of the legacy people list (.team-list /
 * .employee / .load-more) — markup kept verbatim so load-more (script.js) keeps working.
 */

/* ====================== SECTION SHELL (same as gallery, scoped to body.t4-hof) ====================== */
body.t4-hof .t4-galsec { background: #fff; padding: 64px 0; }
body.t4-hof .t4-galsec--alt { background: var(--t4-bg-1); }
body.t4-hof .t4-galsec__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
}
body.t4-hof .t4-galsec__head { margin-bottom: 30px; max-width: 760px; }
body.t4-hof .t4-galsec__head .t4-kicker { display: block; margin-bottom: 10px; }
body.t4-hof .t4-galsec__lede {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	line-height: 1.6;
	color: var(--t4-body);
	margin: 0;
}

/* ====================== PEOPLE GRID (.team-list / .employee) — poster cards ====================== */
body.t4-hof .t4-hof-wrap { margin: 0; }
body.t4-hof .team-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}
body.t4-hof .employee {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--t4-r-lg);
	overflow: hidden;
	background: var(--t4-bg-1);
	box-shadow: var(--t4-sh-sm);
	transition: transform 300ms var(--t4-ease), box-shadow 300ms var(--t4-ease);
}
body.t4-hof .employee.hidden { display: none; }
body.t4-hof .employee:hover {
	transform: translateY(-4px);
	box-shadow: var(--t4-sh-md);
}
body.t4-hof .employee > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 600ms var(--t4-ease);
}
body.t4-hof .employee:hover > img { transform: scale(1.06); }
/* Gradient scrim so the name/role stay legible over any photo */
body.t4-hof .employee::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,0) 42%, rgba(12,12,12,0.86) 100%);
	pointer-events: none;
}
body.t4-hof .employee__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 16px 16px 18px;
}
body.t4-hof .employee__name {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	line-height: 1.04;
	letter-spacing: 0.01em;
	color: #fff;
}
body.t4-hof .employee__profession {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	margin: 5px 0 0;
	line-height: 1.35;
}

/* ====================== LOAD-MORE BUTTON ====================== */
body.t4-hof .load-more {
	display: block;
	margin: 30px auto 0;
	padding: 13px 30px;
	background: var(--t4-ink);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 200ms var(--t4-ease), transform 150ms var(--t4-ease);
}
body.t4-hof .load-more:hover { background: var(--t4-red); }
body.t4-hof .load-more:active { transform: scale(0.97); }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 768px) {
	body.t4-hof .t4-galsec { padding: var(--t4-sec-sm) 0; }
	body.t4-hof .team-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	body.t4-hof .employee__name { font-size: 22px; }
}
@media (max-width: 420px) {
	body.t4-hof .team-list { grid-template-columns: repeat(2, 1fr); }
}