/*
 * UHC Laupen — Team Page Styles
 * Applied only on single 'team' posts via functions.php.
 */

/* ── Shared ──────────────────────────────────────────────────────────────── */

.team-page {
	width: 100%;
}

.team-container {
	max-width: 1640px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* Laptop (1025–1600px): cap content at 80% of the viewport — same as
   .content-container in global.css. Full-width section backgrounds stay
   full-bleed; only the inner content column narrows. */
@media ( min-width: 1025px ) and ( max-width: 1600px ) {
	.team-container {
		max-width: 80vw;
	}
}

@media ( max-width: 768px ) {
	.team-container {
		/* 26px at 390px viewport, fluid */
		padding-left: 6.667vw;
		padding-right: 6.667vw;
	}
}

.team-section {
	padding-top: 72px;
	padding-bottom: 72px;
}

.team-section--grey {
	background-color: #E9E9E9;
}

.team-section--yellow {
	background-color: #DEDC00;
}

/* Section title overrides for dark/light backgrounds */
.section-title--dark {
	border-top-color: #000;
	border-bottom-color: #000;
	color: #000;
}

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */

.team-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 25px;
	box-sizing: border-box;
	background: #fff;
}

.team-hero__frame {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.team-hero__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.team-hero__image--placeholder {
	width: 100%;
	height: 100%;
	background: #222;
	display: block;
}

/* Team name — h1 over the image. Same placement as the hero-section
   site title: fixed 92px from the viewport's left edge, independent of
   the content container. League Gothic, uppercase, white, 146px. */
.team-hero__name-wrap {
	position: absolute;
	top: 92px;
	left: 92px;
	right: 25px;
	z-index: 2;
	pointer-events: none;
}

/* Neutralise the inner container at large sizes — title sits outside it. */
.team-hero__name-wrap .team-container {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Once the viewport is at container width or below, the title snaps
   to the container alignment instead. */
@media ( max-width: 1640px ) {
	.team-hero__name-wrap {
		left: 0;
		right: 0;
	}

	.team-hero__name-wrap .team-container {
		max-width: 1640px;
		margin: 0 auto;
		padding-left: 40px;
		padding-right: 40px;
	}
}

.team-hero__name {
	color: #fff;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Yellow triangle — bottom-left */
.team-hero__triangle {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 180px;
	height: 180px;
	background-color: #DEDC00;
	clip-path: polygon( 0 100%, 100% 100%, 0 0 );
}

.team-hero__logo {
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 80px;
	height: auto;
	object-fit: contain;
	z-index: 1;
}

/* ── Laptop and below (≤1600px) ──────────────────────────────────────
   Team name starts at exactly the menu button's top offset (0.135em
   compensates League Gothic's gap above the caps). Triangle + logo
   match the front-page hero exactly: same proportional size, same
   corner insets (the frame's 25px inset replaces the hero's 25px
   border, so the -25px compensation is identical). */
@media ( max-width: 1600px ) {
	.team-hero__name-wrap {
		top: clamp( 40px, 5vw, 96px );
	}

	.team-hero__name {
		margin-top: -0.135em;
	}

	.team-hero__triangle {
		width: min( 1000px, 23vw );
		height: min( 500px, 19.04vw );
	}

	.team-hero__logo {
		bottom: calc( clamp( 40px, 5vw, 96px ) - 25px );
		left: calc( clamp( 36px, 4.375vw, 84px ) - 25px );
		width: min( 184px, 9.58vw );
	}
}

/* ── 1c. Bildlegende — corner tab on the team image ──────────────────────── */

/*
 * Mirror image of the player cards' hover overlay: a small yellow triangle in
 * the bottom-RIGHT corner labelled "Bildlegende", which on hover/focus opens
 * into a full panel. The two custom properties below are shared by the tab and
 * by the panel's resting clip-path — exactly as --uhc-card-triangle is on the
 * player cards — so the panel always starts out as the very same triangle.
 */
.team-hero__legend {
	--uhc-legend-w: clamp( 240px, 18vw, 340px );
	--uhc-legend-h: clamp( 120px, 9vw, 170px );

	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	cursor: pointer;
}

.team-hero__legend:focus {
	outline: none;
}

/*
 * The tab itself — right angle at the bottom-right corner, in the same
 * frosted-glass treatment as the hero's bottom-right post triangle
 * (blocks/hero-section: rgba white 0.15 over a 6px backdrop blur).
 */
.team-hero__legend-tab {
	position: relative;
	z-index: 1;
	width: var( --uhc-legend-w );
	height: var( --uhc-legend-h );
	background-color: rgba( 255, 255, 255, 0.15 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	clip-path: polygon( 100% 0, 100% 100%, 0 100% );
	/* Cross-fades with the panel so the two blur layers never stack. */
	opacity: 1;
	transition: opacity 0.2s ease;
}

.team-hero__legend:hover .team-hero__legend-tab,
.team-hero__legend:focus-within .team-hero__legend-tab {
	opacity: 0;
}

/* Label styling copied from .hero-section__post-more — including its white,
   which now works because the tab is glass over the photo rather than yellow. */
.team-hero__legend-label {
	position: absolute;
	right: clamp( 14px, 1.1vw, 22px );
	bottom: clamp( 12px, 0.95vw, 20px );
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.45 );
	font-family: 'League Gothic', sans-serif;
	font-size: clamp( 24px, 1.85vw, 35px );
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.team-hero__legend-arrow {
	width: auto;
	height: 18px;
	flex-shrink: 0;
	transform: rotate( 180deg );
}

/*
 * The panel. Same easing and timings as .player-card__overlay, with the
 * polygon mirrored to the bottom-right. min-height/min-width guarantee the
 * resting shape is exactly the tab triangle however short the legend is.
 */
.team-hero__legend-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: min( 820px, 62vw );
	min-width: var( --uhc-legend-w );
	min-height: var( --uhc-legend-h );
	box-sizing: border-box;
	padding: clamp( 24px, 2.1vw, 40px ) clamp( 24px, 2.4vw, 46px );
	background-color: rgba( 255, 255, 255, 0.15 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	color: #fff;
	opacity: 0;
	clip-path: polygon(
		100% 100%,
		calc( 100% - var( --uhc-legend-w ) ) 100%,
		100% calc( 100% - var( --uhc-legend-h ) ),
		100% calc( 100% - var( --uhc-legend-h ) )
	);
	transition:
		clip-path 0.45s cubic-bezier( 0.77, 0, 0.175, 1 ),
		opacity   0.2s ease;
}

.team-hero__legend:hover .team-hero__legend-panel,
.team-hero__legend:focus-within .team-hero__legend-panel {
	opacity: 1;
	clip-path: polygon( 100% 100%, 0 100%, 0 0, 100% 0 );
}

/* Text fades in once the box has opened — same delays as the player cards. */
.team-hero__legend-panel .bildlegende {
	opacity: 0;
	transition: opacity 0.25s ease 0s;
}

.team-hero__legend:hover .bildlegende,
.team-hero__legend:focus-within .bildlegende {
	opacity: 1;
	transition: opacity 0.35s ease 0.22s;
}

/*
 * The legend panel is glass rather than a solid block, so it never hides the
 * club logo triangle in the opposite corner — that triangle stays untouched.
 */

/* Legend text sits on the blurred photo, so it follows the hero's palette:
   white names, muted labels, both with a shadow for contrast. */
.team-hero__legend-panel .bildlegende__reihe {
	color: #fff;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.5 );
}

.team-hero__legend-panel .bildlegende__namen {
	color: #f2f2f2;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.5 );
}

.bildlegende {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 24px;
	margin: 0;
}

.bildlegende__reihe {
	font-family: 'League Gothic', sans-serif;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin: 0;
	white-space: nowrap;
}

.bildlegende__namen {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 20px;
	line-height: 1.4;
	margin: 0;
}

@media ( max-width: 768px ) {
	/*
	 * On a phone the image is only ~56vw tall, and four rows of names never
	 * fit into a corner panel — the frame clips whatever sticks out. So the
	 * open legend covers the whole image instead: the wrapper spans the
	 * frame, the tab stays a corner triangle inside it, and the panel opens
	 * from that same corner across the full picture.
	 */
	.team-hero__legend {
		--uhc-legend-w: 62vw;
		--uhc-legend-h: 30vw;

		inset: 0;
	}

	.team-hero__legend-tab {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.team-hero__legend-panel {
		inset: 0;
		width: auto;
		min-width: 0;
		min-height: 0;
		padding: 12px 14px;
		display: flex;
		align-items: center;
		/* Last resort for a squad list that is longer than the image. */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.team-hero__legend-panel .bildlegende {
		width: 100%;
	}

	.team-hero__legend-label {
		font-size: 5.4vw;
		gap: 6px;
	}

	.team-hero__legend-arrow {
		height: 14px;
	}

	/* Stack label above names so long rows stay readable, and size the text
	   to the picture rather than to the phone: enough rows have to be
	   visible at once for the legend to be worth opening. */
	.bildlegende {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bildlegende__reihe {
		font-size: clamp( 11px, 3.1vw, 17px );
		line-height: 1.15;
		margin-top: 0.8vw;
	}

	.bildlegende__reihe:first-child {
		margin-top: 0;
	}

	.bildlegende__namen {
		font-size: clamp( 11px, 3.1vw, 17px );
		line-height: 1.15;
	}
}

/* ── 2. Kader ────────────────────────────────────────────────────────────── */

.team-players {
	background-color: #fff;
	padding-top: 72px;
	padding-bottom: 72px;
}

.player-group {
	margin-bottom: 56px;
}

.player-group:last-child {
	margin-bottom: 0;
}

/* Sub-section heading: Torhüter / Feldspieler / Staff */
.player-group__heading {
	font-family: 'League Gothic', sans-serif;
	font-size: 1.9rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #1a1a1a;
	margin-bottom: 24px;
	line-height: 1;
	/* No border — only the main KADER section-title gets the 9px border */
}

/* 3-column grid */
.player-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}

@media ( max-width: 900px ) {
	.player-grid { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 540px ) {
	.player-grid { grid-template-columns: 1fr; }
}

/* Player card — 1:1.
   container-type lets the personal-sponsor logos size against the card box
   using container query units (cqw). Card is square, so 25cqw == 25% of the
   card's height as well. */
.player-card {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ccc;
	container-type: inline-size;
	/* Shared by the corner triangle and the hover overlay's resting clip-path;
	   they must stay identical or the open animation looks detached. */
	--uhc-card-triangle: 100px;
	/* The card is an <a> to the player detail page. */
	display: block;
	color: inherit;
	text-decoration: none;
}

.player-card__inner {
	/* Absolute (not flow) so stray wpautop paragraphs in page content
	   can never push the card contents down and clip the bottom. */
	position: absolute;
	inset: 0;
}

/* Neutralise empty paragraphs wpautop injects into card markup. */
.player-card p:empty {
	display: none;
	margin: 0;
}

.player-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.player-card__image--placeholder {
	background: #bbb;
}

/* Name — top-left */
.player-card__name {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.player-card__vorname {
	font-family: 'League Gothic', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.7 );
}

.player-card__nachname {
	font-family: 'League Gothic', sans-serif;
	font-size: 1.35rem;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.7 );
}

/* Number triangle — bottom-left. Kept above the overlay (z-index 4) so the
   number stays visible both at rest and while the details box is open.
   The size is a custom property because the overlay's resting clip-path has
   to match it exactly — see .player-card__overlay below. */
.player-card__triangle {
	position: absolute;
	bottom: 0;
	left: 0;
	width: var( --uhc-card-triangle );
	height: var( --uhc-card-triangle );
	background-color: #DEDC00;
	clip-path: polygon( 0 100%, 100% 100%, 0 0 );
	z-index: 4;
}

.player-card__number {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-family: 'League Gothic', sans-serif;
	font-size: 1.8rem;
	font-weight: 400;
	color: #000;
	line-height: 1;
	z-index: 4;
}

/* Hover overlay — emerges from the bottom-left yellow triangle.
   At rest it is clipped to the same right-triangle as the number triangle (so
   it reads as that triangle); on hover the clip-path morphs into the full
   rectangle. Both polygons have 4 points so clip-path can animate.

   min-height is what makes the resting shape line up: the clip-path measures
   from the *overlay's* bottom, so a short overlay (a Vorstand card has a
   single row, ~67px) put the sloped edge above its own top edge and the
   animation appeared to start from a stub that did not match the triangle.
   Forcing the box to at least the triangle's size makes
   `calc( 100% - var( --uhc-card-triangle ) )` land exactly on the triangle's
   top corner for every card, however little content it has. */
.player-card__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: var( --uhc-card-triangle );
	background-color: #DEDC00;
	color: #000;
	z-index: 5; /* above the number triangle so it covers the number on hover */
	padding: 20px 16px 16px;
	box-sizing: border-box;
	/* At rest: invisible triangle sitting over the number (opacity 0). */
	opacity: 0;
	clip-path: polygon(
		0 100%,
		var( --uhc-card-triangle ) 100%,
		0 calc( 100% - var( --uhc-card-triangle ) ),
		0 calc( 100% - var( --uhc-card-triangle ) )
	);
	transition:
		clip-path 0.45s cubic-bezier( 0.77, 0, 0.175, 1 ),
		opacity   0.2s ease;
}

.player-card:hover .player-card__overlay,
.player-card:focus-visible .player-card__overlay {
	/* On hover: fade in over the number, then morph triangle → rectangle.
	   Touch devices skip this — a tap opens the player page instead. */
	opacity: 1;
	clip-path: polygon( 0 100%, 100% 100%, 100% 0, 0 0 );
}

/* No hover preview on touch devices. */
@media ( hover: none ) {
	.player-card__overlay {
		display: none;
	}
}

/* Text reveals after the box has opened, like the menu's opening transition. */
.player-card__overlay-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.25s ease 0s;
}

.player-card:hover .player-card__overlay-inner,
.player-card:focus-visible .player-card__overlay-inner {
	opacity: 1;
	transition: opacity 0.35s ease 0.22s;
}

/* Personal sponsors — show the logo image instead of the name.
   Capped to 30% of the card width or 25% of the card height. */
.player-card__overlay-sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.player-card__sponsor-logo {
	max-width: 30cqw;
	max-height: 25cqw; /* card is square → 25cqw == 25% of card height */
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.player-card__overlay-row {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.player-card__overlay-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.65;
	font-weight: 600;
}

.player-card__overlay-value {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.3;
}

/* ── 3a. Aktuelle Resultate + Tabelle ────────────────────────────────────── */

.team-results {
	/* API data region — 100px top; 100px gap to the upcoming games below. */
	padding-top: 100px;
	padding-bottom: 0;
	margin-bottom: 100px;
}

.team-results__columns {
	display: flex;
	gap: 64px;
	align-items: flex-start;
}

.team-results__col {
	flex: 1 1 0;
	min-width: 0;
}

/* API/plugin section titles are redundant next to our own column titles. */
.team-results .sfa-section-title,
.team-results__col--standings h3 {
	display: none;
}

/* Same table styling as the standings block on the home page. */
.team-results .team-results__col table {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.team-results .team-results__col table thead {
	background: none;
}

.team-results .team-results__col table thead th {
	font-family: 'League Gothic', sans-serif;
	font-size: 27px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-align: left;
	/* Flush left like the body cells, spacing only towards the next column. */
	padding: 0 11px 0 0;
	/* 0.3em ≈ 8px at the 27px reference size — scales with the header font */
	border-bottom: 0.3em solid #000;
	border-top: none;
	border-left: none;
	border-right: none;
	color: #000;
}

.team-results .team-results__col table tbody td {
	padding: 8px 11px 8px 0;
	border: none;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	vertical-align: middle;
	color: #000;
}

.team-results .team-results__col table tbody tr {
	background: none;
}

.team-results .team-results__col table tbody tr:last-child td {
	border-bottom: none;
}

/* Rankings ("Tabelle"): first column "Rang" in bold. */
.team-results .team-results__col--standings table tbody td:first-child {
	font-weight: 700;
}

/* Games ("Aktuelle Resultate"): the "Datum" column must never wrap —
   it claims the width it needs, the other columns shrink instead. */
.team-results .team-results__col--games table thead th:first-child,
.team-results .team-results__col--games table tbody td:first-child {
	white-space: nowrap;
}

/* Stack "Aktuelle Resultate" and "Tabelle" onto separate rows below 1472px:
   side by side, the games table gets too narrow for its five columns long
   before the tablet breakpoint. */
@media ( max-width: 1472px ) {
	.team-results__columns {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
	}
}

@media ( max-width: 768px ) {

	.team-results .team-results__col table thead th {
		font-size: 21px; /* border follows via the base 0.3em value */
		padding: 0 8px 0 0;
	}

	/* Games ("Aktuelle Resultate"): one grey card per game, rows
	   Datum / Ort / Gastteam / Resultat — same as the standings block. */
	.team-results .team-results__col--games table thead {
		display: none;
	}

	.team-results .team-results__col--games table tbody tr {
		display: flex;
		flex-direction: column;
		background: #E9E9E9;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 20px 16px;
		margin-bottom: 16px;
		transform: none;
	}

	.team-results .team-results__col--games table tbody tr:hover {
		transform: none;
		box-shadow: none;
		background: #E9E9E9;
	}

	.team-results .team-results__col--games table tbody tr::before {
		display: none;
	}

	.team-results .team-results__col--games table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		background: none;
		border: none;
		border-radius: 0;
		padding: 4px 0;
		min-height: 0;
		flex: 1 1 auto;
		font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
		font-stretch: extra-condensed;
		font-size: 16px;
		color: #000;
		text-align: right;
		line-height: 1.3;
	}

	/* Neutralise the plugin's special first/last/even cell styling. */
	.team-results .team-results__col--games table tbody td:first-child,
	.team-results .team-results__col--games table tbody td:last-child,
	.team-results .team-results__col--games table tbody td:nth-child(even) {
		background: none;
		border-radius: 0;
		font-weight: 400;
		font-size: 16px;
		color: #000;
		padding: 4px 0;
	}

	.team-results .team-results__col--games table tbody td::before {
		content: attr( data-label );
		flex: 0 0 auto;
		max-width: none;
		font-family: 'League Gothic', sans-serif;
		font-size: 21px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #000;
		text-align: left;
		margin-right: 0;
		line-height: 1.1;
	}

	.team-results .team-results__col--games table tbody td:nth-child(2) {
		display: none; /* Heimteam — always us */
	}

	.team-results .team-results__col--games table tbody td:nth-child(1) { order: 1; } /* Datum */
	.team-results .team-results__col--games table tbody td:nth-child(4) { order: 2; } /* Ort */
	.team-results .team-results__col--games table tbody td:nth-child(3) { order: 3; } /* Gastteam */
	.team-results .team-results__col--games table tbody td:nth-child(5) { order: 4; } /* Resultat */

	/* Rankings: hide the "Spiele" column on mobile. */
	.team-results .team-results__col--standings table thead th:nth-child(3),
	.team-results .team-results__col--standings table tbody td:nth-child(3) {
		display: none;
	}

	/* Tordifferenz and Punkte values right-aligned in their columns. */
	.team-results .team-results__col--standings table tbody td:nth-child(4),
	.team-results .team-results__col--standings table tbody td:nth-child(5) {
		text-align: right;
	}

	.team-results .team-results__col--standings table tbody td {
		padding: 6px 8px;
		font-size: 0.85rem;
	}
}

/* ── 3b. Nächste Spiele ──────────────────────────────────────────────────── */

.team-next-games {
	padding-top: 0;
	padding-bottom: 100px; /* API data region — 100px bottom */
}

/* Reuse the next-game block layout classes */
.team-next-games .next-game__row {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}

.team-next-games .next-game__matchup {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 32px 24px;
	/* White box with a soft drop shadow instead of the grey fill. */
	background-color: #fff;
	box-shadow: 0 3px 99px rgba( 91, 91, 91, 0.21 );
	box-sizing: border-box;
}

.team-next-games .next-game__teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

.team-next-games .next-game__team {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.team-next-games .next-game__logo {
	max-width: 140px;
	max-height: 140px;
	object-fit: contain;
}

.team-next-games .next-game__logo-placeholder {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.06 );
	border-radius: 4px;
	font-size: 0.8rem;
	text-align: center;
	padding: 8px;
}

.team-next-games .next-game__vs {
	font-family: 'League Gothic', sans-serif;
	font-size: 75px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1;
	/* 0.12em = 9px at the 75px reference size — scales with the font */
	border-top: 0.12em solid #000;
	border-bottom: 0.12em solid #000;
	padding: 6px 0;
	flex-shrink: 0;
}

.team-next-games .next-game__venue {
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-align: center;
}

/* Competition under the venue — same type, a golden ratio smaller. */
.team-next-games .next-game__league {
	font-family: 'League Gothic', sans-serif;
	font-size: calc( 46px / 1.618 );
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-align: center;
}

.team-next-games .next-game__datetime {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-size: 27px;
	text-align: center;
	line-height: 1.2;
}

/* Stack the two game boxes already on tablets. */
@media ( max-width: 1024px ) {
	.team-next-games .next-game__row {
		flex-direction: column;
		align-items: stretch; /* full-width game boxes */
		gap: 24px;
	}

	.team-next-games .next-game__matchup {
		width: 100%;
	}
}

@media ( max-width: 768px ) {

	/* Compact mobile sizes so the grey box no longer overflows. */
	.team-next-games .next-game__vs {
		font-size: 23px;
		border-top-width: 4px;
		border-bottom-width: 4px;
	}

	.team-next-games .next-game__venue {
		font-size: 5.897vw; /* 23px @ 390px, fluid */
	}

	.team-next-games .next-game__league {
		font-size: calc( 5.897vw / 1.618 );
	}

	.team-next-games .next-game__datetime {
		font-size: 4.359vw; /* 17px @ 390px, fluid */
	}

	/* Logos: max 94px at a 390px viewport, fluid (94/390 = 24.103vw). */
	.team-next-games .next-game__logo {
		max-width: 24.103vw;
		max-height: 24.103vw;
	}
}

/* ── 4. Gallerie — grey bg, 2-up slider ──────────────────────────────────── */

.team-gallery {
	/* grey bg via team-section--grey */
	padding-top: 200px;
	padding-bottom: 200px;
}

/* Slider controls sit OUTSIDE the image container; the images fill it. */
.team-gallery__slider {
	position: relative;
	margin-top: 40px;
}

.team-gallery__viewport {
	width: 100%;
	overflow: hidden;
}

.team-gallery__track {
	display: flex;
	gap: 24px;
	transition: transform 0.45s cubic-bezier( 0.77, 0, 0.175, 1 );
}

/* 2 images per view, filling the container (minus the 24px gap) */
.team-gallery__slide {
	flex: 0 0 calc( 50% - 12px );
	box-sizing: border-box;
}

.team-gallery__slide img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* Black chevron arrows, same shape as the hero "Mehr" button —
   absolutely positioned in the section gutter, outside the images. */
.team-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.team-gallery__arrow--prev { left: -36px; }
.team-gallery__arrow--next { right: -36px; }

.team-gallery__arrow svg {
	width: 18px;
	height: auto;
	display: block;
}

.team-gallery__arrow--next svg {
	transform: scaleX( -1 ); /* mirror the left chevron to point right */
}

.team-gallery__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

@media ( max-width: 768px ) {
	.team-gallery {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.team-gallery__slider {
		margin-top: 28px;
	}
	.team-gallery__track {
		gap: 12px;
	}
	/* one image per view on mobile */
	.team-gallery__slide {
		flex-basis: 100%;
	}
	.team-gallery__arrow--prev { left: -6px; }
	.team-gallery__arrow--next { right: -6px; }
	.team-gallery__arrow svg { width: 14px; }
}

/* ── 5. Trainingszeiten — yellow bg, 2-column grouped by location ────────── */

.training-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 56px 80px;
	margin-top: 36px;
}

/* one location = one column; a 3rd location wraps to a new row */
.training-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.training-col__map {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 16 / 9;
}

.training-col__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.training-entry {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.training-entry__day {
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1;
	color: #000;
}

.training-entry__time,
.training-entry__location {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 27px;
	line-height: 1.2;
	color: #000;
}

@media ( max-width: 768px ) {
	.training-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.training-col__map {
		max-width: 100%;
	}
	/* 27px for all training entry lines — families unchanged. */
	.training-entry__day,
	.training-entry__time,
	.training-entry__location {
		font-size: 27px;
	}
}

/* ── Spieler-Detailseite ─────────────────────────────────────────────────── */

.player-page {
	padding-top: 180px;
}

/* Bottom spacing lives on the container, not the page wrapper. */
.player-page .team-container {
	padding-bottom: 180px;
}

.player-detail {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 64px;
	/* stretch (the grid default): the image column takes the same height
	   as the details column next to it */
	align-items: stretch;
}

.player-detail__media {
	position: relative;
	overflow: hidden;
	background: #ccc;
	/* No aspect-ratio here — the height comes from the grid row, i.e.
	   from the details column. */
	min-height: 320px;
}

.player-detail__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.player-detail__image--placeholder {
	background: #bbb;
}

/* Same yellow number triangle as on the team page cards. */
.player-detail__triangle {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 140px;
	height: 140px;
	background-color: #DEDC00;
	clip-path: polygon( 0 100%, 100% 100%, 0 0 );
}

.player-detail__number {
	position: absolute;
	bottom: 14px;
	left: 14px;
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	line-height: 1;
	color: #000;
}

.player-detail__name {
	margin: 0 0 40px;
	line-height: 0.95;
}

.player-detail__vorname {
	display: block;
	font-size: 0.45em;
	line-height: 1.1;
}

.player-detail__nachname {
	display: block;
}

/* Detail table — same look as the fee/API tables (see .content-table). */
.player-detail__facts {
	margin: 0 0 48px;
}

.player-detail__facts td {
	font-size: 25px;
}

.player-detail__facts a {
	color: #000;
	text-decoration: none;
}

.player-detail__facts a:hover,
.player-detail__facts a:focus-visible {
	text-decoration: underline;
}

/* Sponsor logos live in the last row of the detail table. */
.player-detail__sponsor-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 6px 0;
}

.player-detail__sponsor-logo {
	max-width: 220px;
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.player-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'League Gothic', sans-serif;
	font-size: 27px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000;
	text-decoration: none;
	line-height: 1;
}

/* The shared arrow points right — flip it for the back link. */
.player-detail__back .team-news-item__more-icon {
	transform: scaleX( -1 );
}

@media ( max-width: 900px ) {
	.player-detail {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Single column — nothing to match, so the image keeps its 1:1 crop. */
	.player-detail__media {
		aspect-ratio: 1 / 1;
		min-height: 0;
	}
}

@media ( max-width: 768px ) {
	.player-page {
		padding-top: 120px;
	}

	.player-page .team-container {
		padding-bottom: 120px;
	}

	.player-detail__name {
		margin-bottom: 28px;
	}

	/* Both name lines the same size on mobile (no 0.45em first line). */
	.player-detail__vorname,
	.player-detail__nachname {
		font-size: 48px;
	}

	.player-detail__facts {
		gap: 8px 24px;
		margin-bottom: 32px;
	}

	/* Values match the row labels. */
	.player-detail__facts th,
	.player-detail__facts td {
		font-size: 21px;
	}

	.player-detail__triangle {
		width: 100px;
		height: 100px;
	}

	.player-detail__number {
		font-size: 32px;
		bottom: 10px;
		left: 10px;
	}

	.player-detail__back {
		font-size: 22px;
	}

	.player-detail__sponsor-logo {
		max-width: 160px;
		max-height: 70px;
	}
}

/* ── 8. Kontakt — white section, form styling in global.css ─────────────── */

/* ── 6. News — styles shared with post listings, see posts-list.css ─────── */

/* ── Mobile hero — 16:9 image, team name below ─────────────────────────── */

@media ( max-width: 768px ) {
	/* Full-bleed team image — no white frame on mobile. */
	.team-hero {
		height: auto;
		padding: 0;
	}

	.team-hero__frame {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Name flows ABOVE the image — same top offset as the hero
	   section's site title (135px from the viewport top). */
	.team-hero {
		display: flex;
		flex-direction: column;
	}

	.team-hero__name-wrap {
		position: static;
		pointer-events: auto;
		order: -1; /* before the image */
		margin-top: 123px; /* + 12px hero padding = 135px from top */
		padding-bottom: 16px;
	}

	.team-hero__name-wrap .team-container {
		padding-left: 6.667vw;
		padding-right: 6.667vw;
	}

	.team-hero__name {
		color: #000;
	}

	.team-hero__triangle {
		width: 100px;
		height: 100px;
	}

	.team-hero__logo {
		bottom: 16px;
		left: 16px;
		width: 44px;
	}
}