/* ============================================================================
   MKKK Schedule — tygodniowa siatka grafiku + hub lokalizacji (redesign).
   Komponenty .ttw / .slot / .loc-card / .loc-meta / .day-filter przeniesione
   z site/design-reference/styles.css do przestrzeni tokenów wtyczki --sched-*.

   Tokeny motywu (--navy, --accent, --paper, --f-*) definiuje motyw; tu są
   podpięte przez var() z fallbackami o wartościach z design-reference, więc
   wtyczka wygląda poprawnie także bez nowego motywu.

   WYJĄTEK: --sched-muted i --sched-line celowo NIE czytają var(--muted) /
   var(--line). Stary (ciemny) motyw definiuje te nazwy jako półprzezroczystą
   BIEL — na białych kartach wtyczki byłyby niewidoczne. Motyw może je
   nadpisać wprost przez --sched-muted / --sched-line.
   ========================================================================= */

.mkkk-sched-scope {
	--sched-white: #fff;
	/* "navy" czytaj jako "ciemny strukturalny": paleta właściciela to
	   near-black (nie #000 — czysta czerń na bieli halowałaby). Nazwy
	   tokenów zostają --navy-* dla zgodności z motywem. */
	/* TUSZ vs WYPELNIENIE - ta sama zasada co w motywie.
	   Granat wylacznie jako kolor liter, czern jako kazde ciemne wypelnienie. */
	--sched-navy: var(--navy, #152341);
	--sched-belt: var(--belt, #0e0e0f);
	--sched-accent: var(--accent, #c5372b);
	--sched-accent-700: var(--accent-700, #a52a20);
	--sched-paper: var(--paper, #f6f4ef);
	--sched-text: var(--text, #17171c);
	--sched-muted: #5c5c66;
	--sched-line: rgba(20, 20, 26, .12);
	--sched-line-2: rgba(20, 20, 26, .22);
	--sched-shadow-sm: 0 4px 14px rgba(20, 20, 26, .07);
	--sched-r: 0;
	--sched-r-sm: 0;
	--sched-ease: cubic-bezier(.2, .7, .3, 1);
	--sched-maxw: var(--maxw, 1200px);
	--sched-axis-w: 64px;
	--sched-f-display: var(--f-display, 'Saira Condensed', 'Archivo Narrow', 'Arial Narrow', sans-serif);
	--sched-f-ui: var(--f-ui, 'Saira', 'Inter', system-ui, sans-serif);
	--sched-f-body: var(--f-body, 'Barlow', 'Inter', system-ui, sans-serif);
	--sched-f-mono: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
}

.mkkk-sched-scope,
.mkkk-sched-scope *,
.mkkk-sched-scope *::before,
.mkkk-sched-scope *::after {
	box-sizing: border-box;
}

.mkkk-sched-scope :focus-visible {
	outline: 2px solid var(--sched-accent);
	outline-offset: 2px;
}

/* Kontener własny wtyczki — niezależny od klas motywu. */
.sched-wrap {
	max-width: var(--sched-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* Tekst tylko dla czytników ekranu (etykiety dni na desktopie). */
.mkkk-sched-scope .sr-only,
.ttw .tt-day-label,
.ttw .tt-none {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Hub: nagłówki grup regionów ---------------------------------------- */

.mkkk-sched-hub {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.hub-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 30px;
}

.hub-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sched-f-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sched-muted);
}

.hub-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--sched-accent);
}

.hub-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sched-f-display);
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: .96;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: var(--sched-navy);
}

/* ---- Karty lokalizacji --------------------------------------------------- */

/* auto-fill: 4 kolumny w pełnej szerokości (1152px), mniej w węższych
   kontenerach motywu — karty nigdy nie są ściśnięte poniżej 240px. */
.loc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.loc-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--sched-white);
	border: 1px solid var(--sched-line);
	border-radius: var(--sched-r);
	padding: 22px;
	text-decoration: none;
	transition: border-color .2s var(--sched-ease), transform .2s var(--sched-ease), box-shadow .2s var(--sched-ease);
}

/* Wyższa specyficzność: wygrywa z regułami motywu typu `.entry-content a`
   (podkreślenia linków w treści strony). Tylko dekoracja tekstu. */
.mkkk-sched-scope a.loc-card,
.mkkk-sched-scope a.loc-card:hover,
.mkkk-sched-scope a.loc-card:focus {
	text-decoration: none;
}

.loc-card:hover {
	border-color: var(--sched-belt);
	transform: translateY(-3px);
	box-shadow: var(--sched-shadow-sm);
}

.loc-card .pin {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sched-f-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sched-accent);
}

.loc-card .pin svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.loc-card h3 {
	margin: 0;
	font-family: var(--sched-f-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sched-navy);
}

.loc-card .addr {
	margin: 0;
	font-family: var(--sched-f-body);
	font-size: 14px;
	color: var(--sched-muted);
	line-height: 1.45;
}

.loc-card .days {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 4px;
}

.loc-card .days span {
	font-family: var(--sched-f-mono);
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--sched-navy);
	background: var(--sched-paper);
	border: 1px solid var(--sched-line);
	border-radius:0;
	padding: 3px 7px;
}

.loc-card .days-note {
	margin: 4px 0 0;
	font-family: var(--sched-f-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* --sched-muted, nie navy-300: mały tekst musi mieć AA (4.5:1). */
	color: var(--sched-muted);
}

.loc-card .go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-family: var(--sched-f-ui);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sched-navy);
}

.loc-card .go svg {
	width: 14px;
	height: 14px;
}

.loc-card:hover .go {
	color: var(--sched-accent);
}

/* ---- Podstrona lokalizacji: hero + meta ---------------------------------- */

.mkkk-dojo-page {
	background: var(--sched-white);
	color: var(--sched-text);
	font-family: var(--sched-f-body);
}

.dojo-hero {
	position: relative;
	overflow: hidden;
	background: var(--sched-belt);
	color: #fff;
}

.dojo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 100% at 85% 0%, rgba(58, 58, 68, .55), transparent 60%);
}

.dojo-hero .sched-wrap {
	position: relative;
	z-index: 1;
	padding-top: 56px;
	padding-bottom: 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dojo-hero .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--sched-f-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.dojo-hero .breadcrumb a {
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
	transition: color .18s var(--sched-ease);
}

.dojo-hero .breadcrumb a:hover {
	color: #fff;
}

.dojo-hero h1 {
	margin: 0;
	font-family: var(--sched-f-display);
	font-weight: 700;
	font-size: clamp(38px, 5.4vw, 68px);
	line-height: .94;
	text-transform: uppercase;
	color: #fff;
}

.dojo-hero .lede {
	margin: 0;
	font-size: 17px;
	color: rgba(255, 255, 255, .8);
	max-width: 60ch;
	line-height: 1.55;
}

.dojo-main {
	/* Tylko pion — poziomy gutter zostaje przy .sched-wrap (24px / 18px ≤620px).
	   Wczesniej shorthand 'padding: 44px 0 88px' zerowal poziom i .dojo-main
	   rozjezdzal sie o gutter wzgledem hero, a na mobile lecial od krawedzi. */
	padding-block: 44px 88px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.sched-h2 {
	margin: 0 0 6px;
	font-family: var(--sched-f-display);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: .96;
	text-transform: uppercase;
	color: var(--sched-navy);
}

.loc-meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--sched-line);
	border-radius: var(--sched-r);
	overflow: hidden;
	background: var(--sched-white);
}

/*
 * Sekcja Z TELEFONEM ma o jeden kafel wiecej (Adres, Godziny, Telefon,
 * Pierwszy trening). Klase dokleja szablon, bo tylko on wie, czy numer jest;
 * liczba kolumn zostaje tutaj, bo to uklad, a nie tresc.
 *
 * Osobna klasa, a NIE `repeat(auto-fit, minmax(...))`: przy auto-fit CSS nie
 * zna numeru kolumny, wiec nie da sie ustawic kresek miedzy kaflami po
 * zawinieciu wiersza (kafel zaczynajacy nowy rzad zostaje z kreska po lewej
 * i bez kreski u gory). Model kresek w tym pasku opiera sie na
 * `border-left` + `:first-child` i ma zostac czytelny.
 */
.loc-meta--tel {
	grid-template-columns: repeat(4, 1fr);
}

/*
 * Pasmo, w ktorym cztery kolumny sie nie mieszcza, a jedna kolumna to jeszcze
 * marnotrawstwo szerokosci: schodzimy na 2x2. Dolna granica rowna progowi,
 * na ktorym caly pasek i tak sklada sie w slupek (patrz blok max-width:760px).
 * Trzy kafle zostaja w trzech kolumnach - to sie miesci i tak bylo dotad.
 */
@media (min-width: 761px) and (max-width: 1080px) {
	.loc-meta--tel {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Kreski dla dwoch kolumn: pionowa tylko miedzy kolumnami, pozioma
	   tylko miedzy rzedami. `:first-child` samo nie wystarczy, bo trzeci
	   kafel takze zaczyna wiersz. */
	.loc-meta--tel .cell:nth-child(odd) {
		border-left: 0;
	}

	.loc-meta--tel .cell:nth-child(n+3) {
		border-top: 1px solid var(--sched-line);
	}
}

.loc-meta .cell {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 22px;
	border-left: 1px solid var(--sched-line);
	min-width: 0;
}

.loc-meta .cell:first-child {
	border-left: 0;
}

.loc-meta .ico {
	width: 42px;
	height: 42px;
	border-radius: 0;
	background: var(--sched-paper);
	color: var(--sched-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.loc-meta .ico svg {
	width: 20px;
	height: 20px;
}

.loc-meta .k {
	font-family: var(--sched-f-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sched-muted);
}

.loc-meta .v {
	font-family: var(--sched-f-ui);
	font-weight: 600;
	font-size: 15px;
	color: var(--sched-navy);
	margin-top: 2px;
	line-height: 1.3;
}

.loc-meta .v a {
	color: inherit;
}

/*
 * KLIKALNY ADRES (kafel „Adres" -> trasa w Mapach Google).
 *
 * Regula wyzej celowo nie rusza wygladu odnosnikow w pasku: numer telefonu
 * w sasiednim kaflu ma sie czytac jak DANA miejsca, a nie jak wezwanie do
 * klikniecia. Adres jest wyjatkiem, bo jego klikniecie robi cos, czego
 * z samego tekstu nie widac — otwiera nawigacje w nowej karcie.
 *
 * KRESKA ZAMIAST KOLORU, ta sama recepta co przy nazwisku trenera w motywie
 * (`.mkkk-trainer-card__name a`): cienkie podkreslenie w kolorze linii siatki,
 * odsuniete od liter, kolor tekstu bez zmian. Pasek meta zostaje pasmem
 * faktow o miejscu i nie zmienia sie w plame akcentu. To NIE jest odnosnik
 * w prozie i celowo nie wyglada jak on.
 *
 * NAJAZD MUSI BYC TUTAJ, nie w motywie, i to jest pomiar, nie ostroznosc:
 * globalne `a:hover { color: var(--accent) }` ma specyficznosc (0,1,1)
 * i PRZEGRYWA z `.loc-meta .v a` (0,2,1) — kolor liter nie drgnie na najezdzie
 * niezaleznie od kolejnosci arkuszy. Jedyna reakcja, jaka odwiedzajacy dostaje,
 * jest ta ponizej, wiec nie wolno jej zostawic motywowi.
 *
 * Fokus z klawiatury rysuje `.mkkk-sched-scope :focus-visible` na gorze pliku
 * (obwodka akcentem) — tu dokladamy tylko to samo wzmocnienie kreski, zeby
 * gest myszy i gest klawiatury wygladaly tak samo.
 */
.loc-meta .v a.loc-addr {
	text-decoration: underline;
	text-decoration-color: var(--sched-line-2);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color .18s var(--sched-ease);
}

.loc-meta .v a.loc-addr:hover,
.loc-meta .v a.loc-addr:focus-visible {
	text-decoration-color: currentColor;
}

/* Notka obiektu (np. "SP Nr 97") — dopisek pod adresem w pasku meta. */
.loc-meta .note {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--sched-muted);
	line-height: 1.5;
}

.loc-meta .note p {
	margin: 0;
	display: inline;
}

.loc-meta .note p + p::before {
	content: " · ";
}

/* ---- Toolbar: legenda + filtr dni ---------------------------------------- */

.tt-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0 0 26px;
}

.tt-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-legend li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sched-f-body);
	font-size: 12.5px;
	color: var(--sched-muted);
}

.tt-legend .leg {
	width: 11px;
	height: 11px;
	border-radius:0;
	background: var(--sched-belt);
}

.tt-legend .leg--boks       { background: #2f7d8c; }
.tt-legend .leg--akro       { background: #9246a3; }
.tt-legend .leg--samoobrona { background: #a95a33; }
.tt-legend .leg--personalne { background: #1971c2; }
.tt-legend .leg--inne       { background: #495057; }

.day-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.day-filter button {
	font-family: var(--sched-f-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 13px;
	border-radius:0;
	border: 1px solid var(--sched-line-2);
	color: var(--sched-navy);
	background: var(--sched-white);
	cursor: pointer;
	transition: background .16s var(--sched-ease), color .16s var(--sched-ease), border-color .16s var(--sched-ease);
}

.day-filter button:hover {
	border-color: var(--sched-belt);
}

.day-filter button.active {
	background: var(--sched-belt);
	color: #fff;
	border-color: var(--sched-belt);
}

/* ---- Grupa filtra z widoczna etykieta ------------------------------------ */
/* Trzy grupy stoja obok siebie i dziela komplet stylow, wiec bez podpisu widzacy
   odwiedzajacy dostawal trzy nierozroznialne rzedy pigulek i musial wywnioskowac
   z tresci, ktory filtruje co. Etykiety istnialy, ale tylko w aria-label, czyli
   wylacznie dla czytnika ekranu. */
.tt-filter-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tt-filter-group__label {
	font-family: var(--sched-f-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sched-muted);
}

/* ---- Legenda jako filtr + filtr poziomu ---------------------------------- */
/* Trzy grupy filtrów mają wyglądać jak JEDNA rodzina kontrolek, bo robią jedną
   rzecz: zawężają grafik. Dlatego .tt-legend--filter i .level-filter dziedziczą
   geometrię i stany po .day-filter zamiast mieć własne. Różnica jest jedna:
   przyciski legendy niosą w środku kwadrat koloru, więc nie mogą być
   uppercase'owanym monospace'em, bo kolor i etykieta przestałyby się czytać
   jako para. */

.tt-legend--filter,
.level-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tt-legend--filter button,
.level-filter button {
	font-family: var(--sched-f-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 13px;
	border-radius: 0;
	border: 1px solid var(--sched-line-2);
	color: var(--sched-navy);
	background: var(--sched-white);
	cursor: pointer;
	transition: background .16s var(--sched-ease), color .16s var(--sched-ease), border-color .16s var(--sched-ease);
}

/* Przycisk dyscypliny rozni sie od pozostalych TYLKO kwadratem koloru.
   Wczesniej mial tez wlasna typografie (tekstowy krój, bez wersalikow), przez co
   jeden rzad filtrow wygladal na inna rodzine kontrolek niz dwa sasiednie.
   Zostaje wylacznie uklad na kwadrat plus odstep. */
.tt-legend--filter button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.tt-legend--filter button:hover,
.level-filter button:hover {
	border-color: var(--sched-belt);
}

.tt-legend--filter button.active,
.level-filter button.active {
	background: var(--sched-belt);
	color: #fff;
	border-color: var(--sched-belt);
}

/* Kwadrat koloru w przycisku. Na stanie aktywnym tło robi się czarne, więc
   kolor dostaje białą obwódkę: bez niej wariant „karate dorośli" (kolor pasa,
   czyli prawie czerń) znikałby dokładnie wtedy, gdy jest wybrany. */
.tt-legend--filter .leg {
	width: 11px;
	height: 11px;
	border-radius: 0;
	background: var(--sched-belt);
	flex: 0 0 auto;
}

.tt-legend--filter .leg--boks       { background: #2f7d8c; }
.tt-legend--filter .leg--akro       { background: #9246a3; }
.tt-legend--filter .leg--samoobrona { background: #a95a33; }
.tt-legend--filter .leg--personalne { background: #1971c2; }
.tt-legend--filter .leg--inne       { background: #495057; }

.tt-legend--filter button.active .leg {
	box-shadow: 0 0 0 1px #fff;
}

/* Slot wygaszony filtrem. display:none, a nie visibility:hidden, bo sloty stoją
   absolutnie w torach policzonych serwerowo: sąsiedzi mają ustalone left/width,
   więc wyjęcie jednego z układu niczego nie przesuwa, a zabiera go też
   czytnikom ekranu. Zniknięcie ma być pełne, nie tylko wizualne. */
.slot.is-hidden {
	display: none;
}

/* Dzień opróżniony przez filtr: pokazujemy to wprost, zamiast zostawiać lukę. */
.ttw-col.is-empty-filtered::after {
	content: "Brak zajęć dla tego wyboru";
	display: block;
	margin-top: 10px;
	font-family: var(--sched-f-body);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--sched-muted);
}

/* ---- Filtr dyscypliny na hubie /zajecia/ ---------------------------------- */
/* Odnosniki, nie przyciski: wybor rozstrzyga serwer, wiec filtr dziala bez JS,
   jest linkowalny (wejscie z karty na /oferta/) i wraca przyciskiem wstecz.
   Wyglad celowo ten sam co filtry w siatce tygodnia: jedna rodzina kontrolek. */
.hub-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 28px;
}

.hub-filter__opt {
	font-family: var(--sched-f-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 13px;
	border-radius: 0;
	border: 1px solid var(--sched-line-2);
	color: var(--sched-navy);
	background: var(--sched-white);
	text-decoration: none;
	transition: background .16s var(--sched-ease), color .16s var(--sched-ease), border-color .16s var(--sched-ease);
}

.hub-filter__opt:hover {
	border-color: var(--sched-belt);
}

.hub-filter__opt.active {
	background: var(--sched-belt);
	color: #fff;
	border-color: var(--sched-belt);
}

.tt-filter-none {
	margin: 0 0 20px;
	font-family: var(--sched-f-body);
	font-size: 14px;
	color: var(--sched-muted);
}

.tt-filter-reset {
	font: inherit;
	color: var(--sched-navy);
	background: none;
	border: 0;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.tt-filter-reset:hover {
	color: var(--sched-accent);
}

/* ---- Proporcjonalna siatka tygodnia -------------------------------------- */
/* Zmienne emitowane serwerowo na .ttw:
   --tt-h    wysokość kolumn = (END-START) * 1.3px
   --tt-hour rozmiar godziny = 78px (1.3px/min * 60)
   --tt-cols szerokości kolumn: oś + dni jako minmax(minimum torów, waga fr
             capowana na 2). Minima pilnują czytelności torów — poniżej nich
             siatka scrolluje poziomo w .ttw zamiast zgniatać treść. */

.ttw {
	overflow-x: auto;
}

.ttw-head,
.ttw-body {
	display: grid;
	grid-template-columns: var(--tt-cols, var(--sched-axis-w) repeat(6, minmax(96px, 1fr)));
	gap: 10px;
}

.ttw-head {
	margin-bottom: 10px;
}

.tt-day {
	font-family: var(--sched-f-display);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--sched-navy);
	padding: 11px 12px;
	background: var(--sched-paper);
	border-radius: var(--sched-r-sm);
	text-align: center;
	letter-spacing: .04em;
}

.ttw-axis {
	position: relative;
	height: var(--tt-h, 819px);
}

.ttw-hr {
	position: absolute;
	right: 8px;
	font-family: var(--sched-f-mono);
	font-size: 11px;
	color: var(--sched-muted);
	white-space: nowrap;
}

.ttw-col {
	position: relative;
	height: var(--tt-h, 819px);
	border-radius: var(--sched-r-sm);
	background-image: linear-gradient(var(--sched-line) 1px, transparent 1px);
	background-size: 100% var(--tt-hour, 78px);
}

/* ---- Slot zajęć ----------------------------------------------------------- */

.slot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* `background-color`, NIE skrot `background`: kolor grupy jedzie nizej jako
	   `background-image` (patrz blok „PLAMA JEST TLEM KAFELKA"), a skrot
	   kasowalby go przy kazdej zmianie kolejnosci regul. Jawna wlasciwosc
	   sprawia, ze te dwie warstwy nie moga sie nawzajem zdmuchnac. */
	background-color: var(--sched-white);
	border: 1px solid var(--sched-line);
	border-left: 4px solid var(--sched-navy);
	border-radius: var(--sched-r-sm);
	padding: 12px 13px;
	transition: box-shadow .16s var(--sched-ease);
}

.slot:hover {
	box-shadow: var(--sched-shadow-sm);
}

.slot .time {
	font-family: var(--sched-f-mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--sched-navy);
	letter-spacing: .02em;
}

.slot .cls {
	font-family: var(--sched-f-ui);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--sched-text);
	line-height: 1.15;
}

.slot .grp,
.slot .lvl,
.slot .ins {
	font-family: var(--sched-f-mono);
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sched-muted);
	line-height: 1.25;
}

.slot .ins {
	text-transform: none;
	letter-spacing: .02em;
}

/* Poziom stoi tuz pod grupa wiekowa i ma ten sam rozmiar, wiec musi sie od niej
   odroznic czyms innym niz wielkoscia: bez wersalikow i w kolorze tuszu.
   Bez tego dwa krotkie napisy pod soba zlewaly sie w jeden ciag. */
.slot .lvl {
	text-transform: none;
	letter-spacing: .02em;
	color: var(--sched-navy);
}

/* PASEK GRUPY TRENINGOWEJ: prawa krawedz slotu.
   Lewa krawedz mowi "co to za zajecia" (dyscyplina), prawa "czyja to grupa"
   (ta sama grupa = ten sam kolor przez caly tydzien). Realizowane cieniem
   wewnetrznym, a nie dodatkowym elementem ani border-right: slot ma policzone
   serwerowo wymiary, wiec zadna dodatkowa ramka nie ma prawa zmienic jego
   szerokosci. Bez zmiennej --grp (zajecie bez rozpoznanej grupy) pasek po prostu
   nie powstaje. */
/* WARIANT POZIOMY (decyzja wlasciciela 2026-08-14): zamiast paska przy prawej
   krawedzi kolor grupy lezy POD TEKSTEM jako szeroka, poltransparentna plama.
   Czyta sie jak podswietlenie calego kafelka, a nie jak ozdobnik na brzegu.

   Dlaczego gradient, a nie tlo:
   - `background-color` na .slot skasowalby biel kafelka i teksty straciłyby
     kontrast; gradient klada sie WARSTWA nad tlem, wiec biel zostaje spodem;
   - `color-mix` z `transparent` daje przezroczystosc BEZ znajomosci skladowych
     koloru, wiec paleta w PHP (group_colors) zostaje jedynym zrodlem barw
     i nie trzeba jej duplikowac w CSS jako wartosci rgba;
   - plama pokrywa CALY kafelek (decyzja wlasciciela: „gradient moze byc na caly
     kafelek, tak bedzie prosciej"). Wczesniej konczyla sie na 86% wysokosci,
     zeby dlugie zajecia nie stawaly sie jednolitym slupkiem - odroznienie
     bierze na siebie samo przejscie tonalne z gory na dol.

   Tekst zostaje nad spodem: .slot ma pozycjonowane dzieci, a tlo idzie
   pseudoelementem z z-index:0, wiec zadna tresc nie wymaga podnoszenia.

   Bez zmiennej --grp (zajecie bez rozpoznanej grupy) plama nie powstaje. */
/* PLAMA JEST TLEM KAFELKA, NIE OSOBNYM ELEMENTEM (zmiana z 2026-08-14).
   Do tej pory kolor grupy klad `.slot::before` z `position:absolute; inset:0`,
   plus `isolation:isolate` na kafelku i `z-index:1` na kazdym dziecku, zeby
   tekst nie wpadl pod plame. Trzy mechanizmy utrzymywane po to, by pomalowac
   tlo.

   Kosztowalo to bledem widocznym na stronie: w widoku mobilnym poswiata
   rozlewala sie na cala kolumne dnia i schodzila z niej dopiero po najechaniu
   na kafelek (czyli po wymuszonym przemalowaniu). Element pozycjonowany
   absolutnie, w kafelku bedacym jednoczesnie kontenerem container queries
   i wlasnym kontekstem izolacji, jest dokladnie tym ukladem, w ktorym
   przegladarki zostawiaja nieodswiezona warstwe.

   `background-image` ROZWIAZUJE to bez zadnego elementu: gradient klada sie
   warstwa NAD `background-color`, wiec biel kafelka zostaje spodem (to byl
   jedyny powod, dla ktorego nie uzyto tu `background-color` z kolorem grupy),
   tekst jest naturalnie nad tlem, a nie ma juz czego zawierac ani izolowac.
   `color-mix` z `transparent` zostaje: dzieki niemu paleta w PHP (group_colors)
   jest jedynym zrodlem barw i nie trzeba jej dublowac w CSS jako rgba.

   Bez zmiennej --grp (zajecie bez rozpoznanej grupy) gradient jest przezroczysty
   i nie widac go wcale. */
.slot {
	background-image: linear-gradient( to bottom, color-mix( in srgb, var(--grp, transparent) 22%, transparent ), color-mix( in srgb, var(--grp, transparent) 7%, transparent ) );
}
.slot:hover { box-shadow: var(--sched-shadow-sm); }

.slot--boks       { border-left-color: #2f7d8c; }
.slot--akro       { border-left-color: #9246a3; }
.slot--samoobrona { border-left-color: #a95a33; }
.slot--personalne { border-left-color: #1971c2; }
.slot--inne       { border-left-color: #495057; }

/* Wariant w siatce: pozycja absolutna + PROGRESYWNE UJAWNIANIE.
   Slot jest kontenerem zapytań (container queries). W wąskich torach widać
   tylko start zajęć i kolor dyscypliny; pełny przedział, nazwa, grupa
   i instruktor wracają wraz z szerokością toru. Twarda zasada: zero
   ucinania tekstu w pół słowa — element mieści się w całości albo jest
   schowany wizualnie (w DOM zostaje dla czytników, wzorzec sr-only).
   Jedyne dopuszczalne skrócenie to line-clamp, który tnie na granicy
   słowa i dokleja wielokropek. */
/* GEOMETRIA Z `--tor-*`, NIE Z WŁAŚCIWOŚCI W ATRYBUCIE (2026-08-17).
   Wysokość i podział na tory liczy serwer i wpisuje je jako zmienne
   (timetable.php), a składamy je tutaj. Dzięki temu reguła `:hover` niżej
   potrafi je przebić zwykłą kaskadą — wartość w atrybucie `style` przegrywa
   wyłącznie z `!important`, więc bez tego kroku rozsuwanie kafelka dałoby się
   napisać tylko krzykiem.
   Domyślki w `var()` to stan „jeden tor": kafelek zajmuje całą kolumnę i PHP
   nie musi wtedy wypisywać niczego. */
.ttw-col .slot {
	position: absolute;
	left: var(--tor-l, 0);
	width: var(--tor-w, 100%);
	height: var(--tor-h);
	overflow: hidden;
	padding: 7px 9px;
	gap: 2px;
	container-type: inline-size;
}

.ttw-col .slot .time {
	font-size: 11.5px;
	line-height: 1.1;
	white-space: nowrap;
}

.ttw-col .slot .cls {
	font-size: 13px;
	line-height: 1.12;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ttw-col .slot .grp,
.ttw-col .slot .lvl,
.ttw-col .slot .ins {
	font-size: 9.5px;
	line-height: 1.15;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Stan bazowy (najwęższe tory oraz przeglądarki bez container queries):
   widoczny tylko start + kolor; reszta sr-only. */
.ttw-col .slot .t-b,
.ttw-col .slot .cls,
.ttw-col .slot .grp,
.ttw-col .slot .lvl,
.ttw-col .slot .ins {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

/* Progi liczone od CONTENT-BOX slotu (container queries mierzą content-box):
   szerokość toru minus padding 2x9px i ramki 1+4px, czyli tor ~101px daje
   kontener ~78px. */

/* Kontener >= 78px (tor ~101px): pełny przedział godzin + nazwa zajęć. */
@container (min-width: 78px) {
	.ttw-col .slot .t-b {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.ttw-col .slot .cls {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: hidden;
		clip: auto;
		clip-path: none;
	}
}

/* Kontener >= 96px (tor ~119px): grupa wiekowa i instruktor. */
@container (min-width: 96px) {
	.ttw-col .slot .grp,
	.ttw-col .slot .lvl,
	.ttw-col .slot .ins {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: hidden;
		clip: auto;
		clip-path: none;
	}
}

/* Krótkie zajęcia (< ~55 min): niezależnie od szerokości bez grupy
   i instruktora (za mało wysokości). Po @container, żeby wygrać kolejnością. */
.ttw-col .slot--s {
	gap: 1px;
	padding: 5px 8px;
}

.ttw-col .slot--s .grp,
.ttw-col .slot--s .lvl,
.ttw-col .slot--s .ins {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.ttw-col .slot--s .cls {
	-webkit-line-clamp: 1;
}

/* ---- Kafelek pod myszką: rozsuwa się i pokazuje komplet ------------------- */

/* PO CO. Przy nakładających się zajęciach kolumna dnia dzieli się na tory, więc
   trzy równoległe grupy dostają po ~⅓ szerokości. Przy takiej szerokości
   container query wyżej chowa WSZYSTKO poza godziną startu — nie ucina tekstu,
   tylko go nie pokazuje (sr-only). Odwiedzający widzi trzy kolorowe prostokąty
   z samą godziną i nie ma jak sprawdzić, które są dla jego dziecka.

   MECHANIZM JUŻ BYŁ, brakowało tylko szerokości: kafelek jest własnym
   kontenerem zapytań, więc poszerzenie go samo odsłania kolejne wiersze. Nie ma
   tu ani jednej nowej reguły widoczności — jest jedna reguła geometrii.

   NA CAŁĄ KOLUMNĘ, a nie „w prawo od własnej krawędzi", i to była decyzja
   właściciela po zmierzeniu przypadku: kafelek w OSTATNIM torze dotyka już
   prawej krawędzi, więc rosnąc w prawo nie zyskałby ani piksela i nie odsłonił
   niczego. Pełna szerokość daje każdemu torowi tę samą, więc każdy przekracza
   oba progi container query.

   ROŚNIE TEŻ W DÓŁ, bo inaczej cała rzecz byłaby pozorna: pełna treść kafelka to
   ~98 px, a zajęcia 60-minutowe mają 78 px wysokości (PX_PER_MIN × 60), więc
   `overflow: hidden` przycięłoby w pionie tekst odsłonięty w poziomie.
   `min-height` trzyma dolną granicę na wysokości z siatki, żeby kafelek nigdy
   się nie SKURCZYŁ i nie odkleił od swojej godziny.

   TYLKO MYSZ (`hover: hover` i `pointer: fine`). Na dotyku `:hover` zostaje
   przyklejony po tapnięciu i kafelek zasłaniałby sąsiadów bez sposobu na
   cofnięcie. Tam czytelność załatwia układ mobilny, który i tak składa siatkę
   w słupek. */
@media (hover: hover) and (pointer: fine) {
	.ttw-col .slot:hover {
		left: 0;
		width: 100%;
		height: auto;
		min-height: var(--tor-h);
		/* Ponad sąsiednimi torami. Rywalami są wyłącznie inne kafelki tej samej
		   kolumny (pozycjonowane, `z-index: auto`), więc dwójka wystarcza —
		   rozsunięty kafelek nigdy nie wychodzi poza własną kolumnę. */
		z-index: 2;
	}

	/* KRÓTKIE ZAJĘCIA TEŻ POKAZUJĄ KOMPLET. `.slot--s` chowa grupę, poziom
	   i trenera „za mało wysokości" — a pod myszką wysokości jest tyle, ile
	   trzeba, więc powód znika razem z ograniczeniem. Bez tej reguły zajęcia
	   45-minutowe rozsuwałyby się i dalej nie pokazywały nic nowego. */
	.ttw-col .slot--s:hover .grp,
	.ttw-col .slot--s:hover .lvl,
	.ttw-col .slot--s:hover .ins {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.ttw-col .slot--s:hover .cls {
		-webkit-line-clamp: 2;
	}
}

/* ---- Filtr dnia (JS dodaje klasy) ---------------------------------------- */

.ttw-col.is-hidden,
.ttw-head .is-hidden {
	display: none;
}

.ttw-head.ttw--filtered,
.ttw-body.ttw--filtered {
	/* 680px: nawet 5 równoległych torów dostaje >=120px, czyli pełne opisy. */
	grid-template-columns: var(--sched-axis-w) minmax(0, 680px);
	justify-content: start;
}

/* ---- Komunikaty / notka --------------------------------------------------- */

.tt-empty {
	border: 1px dashed var(--sched-line-2);
	border-radius: var(--sched-r);
	padding: 32px 24px;
	text-align: center;
	color: var(--sched-muted);
	font-family: var(--sched-f-body);
}

.tt-empty p {
	margin: 0 0 6px;
}

.tt-empty a {
	color: var(--sched-navy);
}

/*
 * Przycisk w zapowiedzi. Nadpisuje kolor z reguly `.tt-empty a` wyzej:
 * bez tego granatowy tekst na czerwonym tle przycisku schodzi do kontrastu,
 * ktorego nie da sie czytac.
 */
/*
 * Od 2026-08-18 stoja tu DWA przyciski (probny trening + kontakt), wiec akapit
 * potrzebuje ukladu. flex zamiast inline-block, bo `gap` dziala miedzy dziecmi
 * bez marginesow po bokach, a przy zawinieciu na waskim ekranie daje ten sam
 * odstep w pionie co w poziomie. Bez `wrap` drugi przycisk wychodzilby poza
 * ramke zapowiedzi na telefonie.
 */
.tt-empty-cta {
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.tt-empty-cta a.btn-primary {
	color: #fff;
}

/*
 * Przycisk drugiego wyboru NIE dostaje nadpisania koloru i to jest zmierzone,
 * a nie przeoczone: `.tt-empty a` (0-1-1) bije `.btn-ghost` (0-1-0), wiec tekst
 * bierze `--sched-navy` zamiast `--navy` - obie zmienne to ten sam granat, a tlo
 * przycisku jest przezroczyste, wiec kontrast sie nie zmienia. Stan najechania
 * ma `.btn-ghost:hover` (0-2-0) i wygrywa sam, wiec bialy tekst na granatowym
 * tle dziala bez naszej pomocy. Zostawiamy to tak, zeby nie mnozyc nadpisan,
 * ktore pozniej trzeba pamietac przy kazdej zmianie palety.
 */

.tt-note {
	margin: 28px 0 0;
	font-size: 14.5px;
	color: var(--sched-muted);
	max-width: 64ch;
	line-height: 1.55;
}

.tt-note strong {
	color: var(--sched-navy);
}

/*
 * Przycisk zapisu pod notka. Odstep od gory wiekszy niz miedzy akapitami,
 * zeby czytalo sie jako osobny krok, a nie dalszy ciag zdania.
 */
.tt-note-cta {
	margin: 18px 0 0;
}

/* ---- Mapa / inne sekcje --------------------------------------------------- */

.dojo-map-section .map-frame {
	border: 1px solid var(--sched-line);
	border-radius: var(--sched-r);
	overflow: hidden;
}

.dojo-map-section .map-actions {
	margin: 14px 0 0;
}

.dojo-others .loc-grid {
	margin-top: 24px;
}

/* ============================ RESPONSYWNOŚĆ ============================== */


@media (max-width: 760px) {
	/* Siatka porzuca pozycjonowanie absolutne: listy per dzień. */
	.ttw {
		overflow: visible;
	}

	.ttw-head {
		display: none;
	}

	.ttw-body {
		display: block;
		min-width: 0;
	}

	.ttw-axis {
		display: none;
	}

	.ttw-col {
		height: auto;
		background: none;
		border-radius: 0;
		border-bottom: 1px solid var(--sched-line);
		padding: 6px 0 16px;
	}

	.ttw-col:last-child {
		border-bottom: 0;
	}

	.ttw-col.is-hidden {
		display: none;
	}

	.ttw-col .slot {
		position: static;
		top: auto !important;
		height: auto !important;
		left: auto !important;
		width: auto !important;
		margin-bottom: 10px;
		padding: 12px 13px;
		gap: 4px;
		overflow: visible;
	}

	/* Lista ma pełną szerokość — wszystkie pola wracają do widoku
	   (odwraca bazowy stan sr-only z progresywnego ujawniania). */
	.ttw-col .slot .t-b,
	.ttw-col .slot .cls,
	.ttw-col .slot .grp,
	.ttw-col .slot .lvl,
	.ttw-col .slot .ins,
	.ttw-col .slot--s .grp,
	.ttw-col .slot--s .lvl,
	.ttw-col .slot--s .ins {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.ttw-col .slot .time {
		font-size: 12.5px;
		white-space: normal;
	}

	.ttw-col .slot .cls {
		font-size: 14.5px;
		display: block;
	}

	.ttw-col .slot .grp,
	.ttw-col .slot .lvl,
	.ttw-col .slot .ins,
	.ttw-col .slot--s .grp,
	.ttw-col .slot--s .lvl,
	.ttw-col .slot--s .ins {
		font-size: 10.5px;
		white-space: normal;
		display: block;
	}

	/* Etykieta dnia wraca do widoku. */
	.ttw .tt-day-label {
		position: static;
		width: auto;
		height: auto;
		margin: 6px 0 12px;
		padding: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: var(--sched-f-display);
		font-weight: 700;
		font-size: 20px;
		text-transform: uppercase;
		color: var(--sched-navy);
	}

	.ttw .tt-day-label::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--sched-line);
	}

	.ttw .tt-none {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 10px;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		font-size: 13px;
		color: var(--sched-muted);
	}

	.tt-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.loc-meta {
		grid-template-columns: 1fr;
	}

	.loc-meta .cell {
		border-left: 0;
		border-top: 1px solid var(--sched-line);
	}

	.loc-meta .cell:first-child {
		border-top: 0;
	}

	.dojo-notes {
		margin-top: -24px;
	}
}

@media (max-width: 620px) {
	.sched-wrap {
		padding: 0 18px;
	}

	.mkkk-sched-hub {
		gap: 44px;
	}

	.dojo-main {
		padding-block: 36px 64px; /* poziom (18px) zostaje przy .sched-wrap */
	}
}