/**
 * Public styles for PW Referee cards.
 */

.pw-referee-cards {
	--pw-referee-columns-max: 4;
	--pw-referee-columns: var(--pw-referee-columns-max);
	--pw-referee-gap: 24px;
	--pw-referee-radius: 6px;
	--pw-referee-image-radius: 0px;
	--pw-referee-border-color: #0a285a;
	--pw-referee-card-color: #082a5c;
	--pw-referee-overlay-alpha: 0.72;
	--pw-referee-image-ratio: 1 / 1;
	--pw-referee-card-min: 180px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--pw-referee-gap);
}

.pw-referee-cards__empty {
	width: 100%;
	margin: 0;
	text-align: center;
}

.pw-referee-card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* Wächst/schrumpft; bricht um, sobald min-width nicht mehr in die Zeile passt */
	flex: 1 1 calc((100% - (var(--pw-referee-columns) - 1) * var(--pw-referee-gap)) / var(--pw-referee-columns));
	width: calc((100% - (var(--pw-referee-columns) - 1) * var(--pw-referee-gap)) / var(--pw-referee-columns));
	max-width: calc((100% - (var(--pw-referee-columns) - 1) * var(--pw-referee-gap)) / var(--pw-referee-columns));
	min-width: min(100%, var(--pw-referee-card-min));
	overflow: hidden;
	border: 1px solid var(--pw-referee-border-color);
	border-radius: var(--pw-referee-radius);
	/* Keine deckende Hintergrundfarbe – Farbe kommt nur über das Overlay (Transparenz). */
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.pw-referee-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--pw-referee-card-color);
	opacity: var(--pw-referee-overlay-alpha);
	pointer-events: none;
}

.pw-referee-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 1.25rem 0.75rem 1rem;
}

.pw-referee-card__photo {
	width: 78%;
	aspect-ratio: var(--pw-referee-image-ratio);
	overflow: hidden;
	flex-shrink: 0;
	border-radius: var(--pw-referee-image-radius);
	background: transparent;
}

.pw-referee-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--pw-referee-image-radius);
}

.pw-referee-card__photo--empty {
	background: rgba(255, 255, 255, 0.08);
}

.pw-referee-card__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-top: 0.85rem;
	padding: 0 0.25rem;
}

.pw-referee-card__name {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* Platz für bis zu 3 Zeilen bei langen Namen */
	min-height: calc(1.2em * 2);
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	color: #fff;
	font-family: "Acme", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(0.7rem, 2.1vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.pw-referee-card__role {
	margin: 0.35rem 0 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	color: #fff;
	font-family: "Acme", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(0.6rem, 1.7vw, 0.78rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
}

/* Spalten automatisch reduzieren (respektiert max. Einstellung) */
@media (max-width: 1200px) {
	.pw-referee-cards {
		--pw-referee-columns: min(3, var(--pw-referee-columns-max));
	}
}

@media (max-width: 900px) {
	.pw-referee-cards {
		--pw-referee-columns: min(2, var(--pw-referee-columns-max));
		--pw-referee-card-min: 160px;
	}
}

@media (max-width: 560px) {
	.pw-referee-cards {
		--pw-referee-columns: 1;
		--pw-referee-card-min: 100%;
	}

	.pw-referee-card {
		flex-basis: 100%;
		width: 100%;
		max-width: 320px;
	}
}