/*
 * SP Startseite – Block „Team-Raster“ (sp-startseite/team). Tokens aus spst-basis.css.
 * Referenz: docs/prototyp-team.html (#seite=team). Spalten per Container Query auf den Block:
 * 5 (ab 1040 px), 4 (bis 1039), 3 (bis 1000), 2 (unter 700). Angefangene letzte Reihe mittig.
 * 1040 statt 1180 wie im Prototyp (1.2.1, Tim): Das Seiten-Template auf saberproject.de lässt dem Block 1067 px.
 */

.spst-team__raster {
	--spst-sp: 5;
	--spst-g: 26px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px var(--spst-g);
	margin: 0;
	padding: 0;
	list-style: none;
}
.spst-team__karte {
	position: relative;
	width: calc((100% - (var(--spst-sp) - 1) * var(--spst-g)) / var(--spst-sp));
	margin: 0;
	container: spst-karte / inline-size;
}
@container spst-block (max-width: 1039px) {
	.spst-team__raster { --spst-sp: 4; }
}
@container spst-block (max-width: 1000px) {
	.spst-team__raster { --spst-sp: 3; --spst-g: 20px; row-gap: 24px; }
}
@container spst-block (max-width: 699px) {
	.spst-team__raster { --spst-sp: 2; --spst-g: 14px; row-gap: 16px; }
}

.spst-team__bild {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #101129;
	border: 5px solid var(--spst-rahmen);
	border-radius: var(--spst-radius-kiste);
	box-shadow: var(--spst-schein);
	transition: box-shadow .3s ease;
}
.spst-team__bild img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 20%;
	transition: transform .8s ease;
}
/* Leichter Verlauf von unten, kein blaues Overlay */
.spst-team__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(10, 14, 34, .45) 0, rgba(10, 14, 34, 0) 35%);
}

/* Namens-Kiste: unten rechts, bündig über den Rahmen, links rund (Streifen der Sammelkarte) */
.spst-team .spst-name {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 16px;
	max-width: calc(100% - 14px);
	margin: 0;
	padding: 6px 12px 7px 14px;
	font-family: var(--spst-schrift);
	font-size: clamp(15px, 8.6cqi, 22px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
	background: var(--spst-kiste);
	border-radius: 14px 0 0 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	pointer-events: none;
}

/* Die ganze Karte ist ein Link (Stretched Link). Fokus weiß, der blaue Rahmen hat schon die Akzentfarbe */
.spst-team__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--spst-radius-kiste);
}
.spst .spst-team__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (hover: hover) {
	.spst-team__karte:hover .spst-team__bild,
	.spst-team__karte:focus-within .spst-team__bild {
		box-shadow: 0 0 34px rgba(255, 255, 255, .22), 0 0 22px rgba(42, 125, 225, .85);
	}
	.spst-team__karte:hover .spst-team__bild img,
	.spst-team__karte:focus-within .spst-team__bild img { transform: scale(1.04); }
}

@container spst-block (max-width: 699px) {
	.spst-team__bild {
		border-width: 4px;
		border-radius: 14px;
	}
	.spst-team .spst-name {
		bottom: 12px;
		padding: 5px 9px 6px 11px;
		border-radius: 12px 0 0 12px;
	}
	.spst-team__link { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.spst-team__karte:hover .spst-team__bild img,
	.spst-team__karte:focus-within .spst-team__bild img { transform: none; }
}

/* Hinweis im Editor */
.spst-team-hinweis {
	padding: 12px 16px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-style: italic;
}