/**
 * Styles für den Container-Block "team-grid/team-grid".
 * Wird sowohl im Editor als auch im Frontend geladen.
 */

/* --- Frontend-Container --- */
.team-grid {
	--tgb-gap: 4px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--tgb-gap);
	width: 100%;
}

/* Spalten-Container, die vom Frontend-JS erzeugt werden. */
.team-grid__col {
	display: flex;
	flex-direction: column;
	gap: var(--tgb-gap);
	flex: 1 1 0;
	min-width: 0;
}

/*
 * Fallback ohne JS bzw. bevor das JS läuft:
 * Solange keine .team-grid__col existieren, liegen die Karten direkt im
 * Container. Dann als vertikale Liste (Spalten-Richtung) darstellen, damit
 * nichts überlappt.
 */
.team-grid:not(.is-distributed) {
	flex-direction: column;
}

.team-grid:not(.is-distributed) > .card {
	width: 100%;
}

/* --- Editor-Vorschau ---
 * Karten bekommen eine Mindestbreite (auto-fill + minmax), damit sie im
 * schmalen Editor-Canvas nicht zu Streifen zusammengequetscht werden. Es
 * passen so viele Spalten nebeneinander wie Platz ist – darunter stapeln sie
 * sich sauber, statt unlesbar schmal zu werden. Die exakte Spaltenzahl steuert
 * ohnehin erst das Frontend-JS.
 */
.tgb-editor-grid .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 300px ), 1fr ) );
	gap: var( --tgb-editor-gap, 4px );
	align-items: start;
}

/* Jede Editor-Karte füllt ihre Rasterzelle voll aus. */
.tgb-editor-grid .block-editor-block-list__layout > .wp-block[data-type="team-grid/team-member"] {
	margin: 0;
	max-width: none;
	width: 100%;
}

.tgb-editor-member {
	width: 100%;
}