/*
 * Öffentliche Trainingsübersicht. CI ausschließlich über --ice-* Tokens.
 * Grid: Desktop 3, Tablet 2, Smartphone 1. Vergangene Karten entsättigt, nicht
 * klickbar, ohne Hover. Status zusätzlich über Text-Badges (nicht nur Farbe/Grau).
 *
 * v1.8.1: Der blockeigene Intro-/Hero-Bereich wurde entfernt. Der Seiteneinstieg
 * (Branding, Hero-Bild, Seitentitel) liegt in der Theme-Seitenvorlage. Der Block
 * beginnt direkt mit „Aktuelle Trainings"; ein ruhiger Abstand zum darüber liegenden
 * Mini-Hero wird über einen responsiven oberen Innenabstand erzeugt.
 */

.ice-tov {
	color: var(--ice-text);
	/* Abschnittswechsel nach dem Mini-Hero. Der sichtbare Gesamtabstand ergibt sich
	 * aus diesem Innenabstand plus dem Layout-Blockabstand des Themes; abgestimmt auf
	 * Desktop ~40–64px, Tablet ~32–48px, Mobile ~24–36px – ohne riesigen Leerraum. */
	padding-top: clamp(12px, 2.6vw, 34px);
}

/* ---------- Abschnitte / Überschriften ---------- */
.ice-tov-section { margin: 0 0 8px; }
.ice-tov-h2 {
	font-family: var(--ice-font-head, Georgia, serif);
	color: var(--ice-contrast, #2B2B2B); font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 0 0 16px;
}
.ice-tov-divider {
	border: 0; border-top: 1px solid var(--ice-border, #C1A984);
	margin: 36px 0 28px;
}
.ice-tov-empty {
	background: var(--ice-surface-soft, #F3EFE6);
	border: 1px solid var(--ice-border, #C1A984);
	border-radius: var(--ice-radius-md, 14px);
	padding: 22px 20px; color: var(--ice-muted, #7A6E58); font-size: 1.05rem; margin: 0;
}
.ice-tov-stats { color: var(--ice-muted, #7A6E58); margin: -6px 0 16px; font-size: 1rem; }

/* ---------- Grid ---------- */
.ice-tov-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* Desktop: 3 */
}
@media (max-width: 1024px) { .ice-tov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tablet: 2 */
@media (max-width: 640px)  { .ice-tov-grid { grid-template-columns: 1fr; } }                        /* Mobile: 1 */
.ice-tov-col { margin: 0; }
.ice-tov-col--hidden { display: none; }

/* ---------- Karte ---------- */
.ice-tov-card {
	display: flex; flex-direction: column; height: 100%;
	background: var(--ice-surface, #fff);
	border: 1px solid var(--ice-border, #C1A984);
	border-radius: var(--ice-radius-md, 14px);
	overflow: hidden; text-decoration: none; color: inherit;
}
.ice-tov-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--ice-surface-soft, #F3EFE6); }
.ice-tov-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ice-tov-organizer {
	position: absolute; top: 10px; right: 10px; width: clamp(50px, 5vw, 66px); aspect-ratio: 1/1;
	box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0;
	border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--ice-border, #C1A984);
	box-shadow: 0 3px 10px rgba(43,43,43,.14); z-index: 2;
}
.ice-tov-card__media .ice-tov-organizer__img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: center; border-radius: 50%;
}
@media (max-width: 640px) { .ice-tov-organizer { width: 56px; } }
.ice-tov-card__img--ph {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--ice-bg-primary-soft, #E4F0DA), var(--ice-surface-soft, #F3EFE6));
}
.ice-tov-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; flex: 1 1 auto; }
.ice-tov-card__title {
	font-family: var(--ice-font-head, Georgia, serif);
	font-size: 1.25rem; line-height: 1.25; margin: 0; color: var(--ice-contrast, #2B2B2B);
}
.ice-tov-card__loc { color: var(--ice-text, #5B4C36); font-weight: 600; }
.ice-tov-card__date { color: var(--ice-muted, #7A6E58); }
.ice-tov-card__types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ice-tov-chip {
	display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
	background: var(--ice-bg-primary-soft, #E4F0DA); color: var(--ice-accent-strong, #5F7557);
	border: 1px solid var(--ice-bg-primary, #BBDEAD);
}

/* Aktuelle Karte: klickbar, Hover/Fokus. */
.ice-tov-card--current { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.ice-tov-card--current:hover { border-color: var(--ice-accent, #809A77); box-shadow: 0 6px 18px rgba(43,43,43,.10); transform: translateY(-2px); }
.ice-tov-card--current:focus-visible { outline: 3px solid var(--ice-focus, #5F7557); outline-offset: 3px; }

/* Vergangene Karte: entsättigt, reduzierte Opacity, kein Hover, nicht klickbar. */
.ice-tov-card--past { filter: grayscale(1); opacity: .72; cursor: default; }
.ice-tov-card--past .ice-tov-card__title { color: var(--ice-text, #5B4C36); }

/* ---------- Badges (Status zusätzlich als Text, nicht nur Farbe) ---------- */
.ice-tov-badge {
	position: absolute; top: 10px; left: 10px;
	padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800;
	letter-spacing: .02em;
}
.ice-tov-badge--full { background: var(--ice-status-full-bg, #F6E0DE); color: var(--ice-status-full, #B3352C); }
.ice-tov-badge--done { background: var(--ice-surface-soft, #F3EFE6); color: var(--ice-muted, #7A6E58); border: 1px solid var(--ice-border, #C1A984); }
.ice-tov-badge--cancelled { background: var(--ice-status-full-bg, #F6E0DE); color: var(--ice-status-full, #B3352C); }

/* ---------- „Weitere anzeigen" ---------- */
.ice-tov-more { text-align: center; margin: 24px 0 0; }
.ice-tov-morebtn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 10px 24px;
	border-radius: var(--ice-radius-sm, 8px); font-weight: 700; font-size: 1rem; cursor: pointer;
	background: var(--ice-surface, #fff); color: var(--ice-text, #5B4C36);
	border: 1px solid var(--ice-border, #C1A984);
}
.ice-tov-morebtn:hover { background: var(--ice-bg-primary-soft, #E4F0DA); border-color: var(--ice-accent, #809A77); }
.ice-tov-morebtn:focus-visible { outline: 3px solid var(--ice-focus, #5F7557); outline-offset: 2px; }