/**
 * css/components/template-event-team.css — Website 2.0 single-event +
 * Team long-tail reskin (#71)
 *
 * single-event.php (7 published `event` singles, all 2021, archived per
 * the theme audit but still indexed) and pages/template-team.php (draft-
 * only "Talent" page, template still maintained). Neither has a dedicated
 * design reference, so both reuse `.cg-case-hero` (css/components/
 * template-single-work.css) for the rule-mark + one real <h1> + banner
 * pattern already established by every other reference-less template
 * (future/social_impact/contact/awards/careers) — only the bits unique to
 * these two templates live here.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ------------------------------------------------------------------ *
 * single-event.php — content/form band
 * ------------------------------------------------------------------ */

.cg-event-content :is( h2, h3, h4 ) {
	font-family: var( --font-serif );
	font-weight: 400;
	color: var( --cg-ink );
}

.cg-event-content__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 34px;
}

.cg-event-sidebar .sidebar-form {
	max-width: 460px;
}

@media ( max-width: 1024px ) {
	.cg-event-sidebar .sidebar-form {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * template-team.php — team grid
 *
 * `.team-item`/`.img-wrap`/`.rollover-video` are KEPT verbatim (JS-
 * coupled: js/jquery.main.js initPlayTeamVideo() hovers `.team-item
 * .img-wrap` and plays the nested <video>; style.css already positions
 * the image/video stack) — the classes below are additive layout/
 * typography only, replacing the retired `list-w-25 list-w-md-50
 * list-w-sm-100 d-flex flex-wrap justify-center` legacy utility grid and
 * the `.bottom-line` rust-bar treatment under each member's position.
 * ------------------------------------------------------------------ */

.cg-team-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 48px 30px;
	margin-top: 44px;
}

/* Neutralize style.css's legacy `.team-item` fluid margin/max-width
   (authored for the retired negative-margin `.team-list` flex-wrap
   container) so each card fills its `.cg-team-grid` track evenly — the
   class itself is kept verbatim for the JS hover hook (js/jquery.main.js
   initPlayTeamVideo()) and style.css's own `.team-item .img-wrap`/
   `.text-wrap` rules, only these two conflicting layout properties are
   overridden. */
.cg-team-grid .team-item {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Out-specified against style.css's `.team-item .name`/`.position`/
   `.desc` (each (0,2,0), loaded AFTER this component sheet in the
   cascade — docs/2.0-system-guide.md §2): a 3-class chain via the
   `.cg-team-grid` ancestor beats a same-order tie unconditionally, same
   convention as css/components/template-single-work.css's
   `body.single-work …` overrides. No `!important`, per the project's
   locked rule. */
.cg-team-grid .team-item .cg-team-card__name {
	margin: 0;
	font-family: var( --font-serif );
	font-weight: 400;
	font-size: 20px;
	line-height: 1.15;
	color: var( --cg-ink );
}

.cg-team-grid .team-item .cg-team-card__position {
	position: relative;
	margin-top: 14px;
	padding-top: 14px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --cg-muted );
}

.cg-team-grid .cg-team-card__position::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 41px;
	height: var( --hairline );
	background: var( --accent );
}

.cg-team-grid .team-item .cg-team-card__desc {
	margin-top: 10px;
	font-size: 13px;
}

@media ( max-width: 1024px ) {
	.cg-team-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 680px ) {
	.cg-team-grid {
		grid-template-columns: 1fr;
	}
}