/* --------------------------------------------|
|                                              |
| Component Partner list                       |
|                                              |
| Kategorie-Blöcke mit Logo-Raster, wie die    |
| Partner-Sektion der Legacy-Site: Überschrift |
| pro Tier, Logos zentriert auf weißem Grund,  |
| Spaltenzahl pro Tier aus dem Panel           |
| (grid_cols_int → --partner-cols).            |
| Markup: snippets/blocks/partnersection.php   |
| und blocks/partnerlist-embed.php.            |
|                                              |
|-------------------------------------------- */

.partner-section {
	margin-bottom: var(--margin-secondary-vertical-px);
}

/* Tier-Überschriften (In Collaboration with, Platinum, …) mittig über
   ihrem Raster — wie in Legacy. Die große Gesamt-Überschrift des
   Embed-Blocks bringt ihr .hcenter selbst mit. */
.partner-section h2 {
	text-align: center;
}

/* Spaltenzahl kommt pro Tier aus dem Panel: das Snippet setzt
   style="--partner-cols: N". Höhere Tiers = weniger Spalten = größere Logos.

   Bewusst Flex statt Grid: Grid kann eine unvollständige letzte Zeile bis
   heute nicht zentrieren. Mit fester, aus der Spaltenzahl berechneter
   Item-Breite sehen volle Zeilen exakt wie ein Grid aus, und die Restzeile
   zentriert justify-content — ohne dass Items breiter werden. */
.partner-section__grid {
	/* Der Panel-Wert kommt inline als --partner-cols-panel — bewusst unter
	   eigenem Namen, denn Inline-Styles würden jede Media-Query-Umschaltung
	   von --partner-cols überstimmen. */
	--partner-cols: var(--partner-cols-panel, 4);
	--partner-gap: var(--padding-primary-horizontal-px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--padding-primary-vertical-px) var(--partner-gap);
}

.partner-section__grid > .partner-item {
	/* Zeilenbreite = N Items + (N-1) Gaps → exakt N pro Zeile. */
	flex: 0 0 calc((100% - (var(--partner-cols) - 1) * var(--partner-gap)) / var(--partner-cols));
}

@media screen and (max-width: 768px) {
	/* Wie Legacy (col-6): mobil immer zweispaltig, unabhängig vom Tier. */
	.partner-section__grid {
		--partner-cols: 2;
	}
}

/* Logos brauchen echtes Weiß unter sich — als Karte funktioniert das auf
   jedem Sektions-Hintergrund (Pattern, transparent, farbig). */
.partner-item {
	margin: 0; /* figure-Reset */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--color-light);
	padding: var(--padding-primary-horizontal-px);
}

.partner-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.partner-item img {
	max-width: 100%;
	height: auto;
}

.partner-item .placeholder {
	color: var(--color-primary);
	font-size: var(--font-small-size, 14px);
}