/* ==========================================================
   Blue Devils DC
   Trainingszeiten
   ----------------------------------------------------------
   Layout:
   - Standard: 2 Karten nebeneinander
   - Ab mehr als 5 Trainingszeiten: 3 Karten nebeneinander
   - Tablet/Smartphone: 1 Karte pro Zeile
========================================================== */


/* ==========================================================
   Seitenbereich
========================================================== */

.training-section {
	width:min(100% - 40px, 1500px);
	margin:0 auto;
	padding:70px 0 110px;
}


/* ==========================================================
   Grid-Layout
========================================================== */

.training-grid {
	display:grid;
	gap:36px;
	align-items:stretch;
	margin:0 auto;
}

.training-grid--two {
	max-width:1120px;
	grid-template-columns:repeat(2, minmax(0, 1fr));
}

.training-grid--three {
	max-width:1500px;
	grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* Letzte Karte bei ungerader 2er-Anzahl mittig platzieren */

.training-grid--two .training-card:last-child:nth-child(odd) {
	grid-column:1 / -1;
	width:100%;
	max-width:542px;
	justify-self:center;
}


/* ==========================================================
   Karten
========================================================== */

.training-card,
.training-empty {
	position:relative;
	overflow:hidden;
	min-height:255px;
	padding:46px 38px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:28px;
	background:
		linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
		rgba(10,18,40,.78);
	box-shadow:0 28px 80px rgba(0,0,0,.28);
	backdrop-filter:blur(18px);
}

.training-card::before,
.training-empty::before {
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at 20% 0%, rgba(28,140,255,.18), transparent 38%),
		radial-gradient(circle at 90% 100%, rgba(99,180,255,.12), transparent 40%);
	pointer-events:none;
}


/* ==========================================================
   Karten-Inhalt
========================================================== */

.training-card h2,
.training-empty h2 {
	position:relative;
	margin:0 0 34px;
	text-align:center;
	font-size:clamp(2rem, 3vw, 2.6rem);
	line-height:1.1;
	color:#eef4ff;
}

.training-meta {
	position:relative;
	display:grid;
	gap:22px;
	justify-content:center;
}

.training-meta p,
.training-empty p {
	margin:0;
	font-size:1.18rem;
	color:#eef4ff;
}

.training-meta p:last-child,
.training-empty p {
	color:#aebde2;
}

.training-meta span {
	display:inline-flex;
	width:30px;
	margin-right:6px;
	justify-content:center;
}


/* ==========================================================
   Leerer Zustand
========================================================== */

.training-empty {
	max-width:720px;
	margin:0 auto;
	text-align:center;
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:900px) {
	.training-section {
		width:min(100% - 30px, 760px);
		padding:50px 0 80px;
	}

	.training-grid,
	.training-grid--two,
	.training-grid--three {
		max-width:760px;
		grid-template-columns:1fr;
		gap:26px;
	}

	.training-grid--two .training-card:last-child:nth-child(odd) {
		grid-column:auto;
		max-width:none;
	}

	.training-card,
	.training-empty {
		min-height:auto;
		padding:38px 28px;
	}
}


/* ==========================================================
   Smartphone
========================================================== */

@media (max-width:560px) {
	.training-section {
		width:min(100% - 22px, 100%);
		padding:36px 0 65px;
	}

	.training-card,
	.training-empty {
		border-radius:22px;
		padding:34px 22px;
	}

	.training-card h2,
	.training-empty h2 {
		margin-bottom:26px;
		font-size:2rem;
	}

	.training-meta {
		justify-content:start;
	}

	.training-meta p,
	.training-empty p {
		font-size:1.05rem;
	}
}