/*
 * Kierunek Fit – Grafik zajęć (strona)
 * Wszystkie reguły są ograniczone do .kfg, żeby nie wpływać na motyw i nie przejmować jego stylów.
 */

.kfg {
	--kfg-bg: #0b0d12;
	--kfg-surface: #141720;
	--kfg-surface-2: #1b1f2a;
	--kfg-line: #272c39;
	--kfg-text: #f4f5f7;
	--kfg-muted: #a3a9b6;
	--kfg-faint: #6e7585;
	--kfg-fit: #e8870e;
	--kfg-fit-ink: #f5a23a;
	--kfg-on-fit: #0b0d12;
	--kfg-fight: #c93b3e;
	--kfg-fight-ink: #f06a6c;
	--kfg-on-fight: #ffffff;
	--kfg-lv-all: #5b9bff;
	--kfg-lv-1: #34c27a;
	--kfg-lv-2: #f2c230;
	--kfg-lv-3: #ff5a5f;
	--kfg-lv-off: #3a4050;
	--kfg-display: "Anton", Impact, "Arial Narrow", sans-serif;
	--kfg-label: "Barlow Condensed", "Arial Narrow", sans-serif;
	--kfg-body: "Barlow", "Segoe UI", system-ui, sans-serif;

	--acc: var(--kfg-fit);
	--acc-ink: var(--kfg-fit-ink);
	--on-acc: var(--kfg-on-fit);

	box-sizing: border-box;
	max-width: 1360px;
	margin: 0 auto;
	padding: 28px 24px 32px;
	background: var(--kfg-bg);
	color: var(--kfg-text);
	font-family: var(--kfg-body);
	font-size: 15px;
	line-height: 1.4;
	border-radius: 16px;
	text-align: left;
	container-type: inline-size;
	container-name: kfg;
}
.kfg[data-zone="fight"] { --acc: var(--kfg-fight); --acc-ink: var(--kfg-fight-ink); --on-acc: var(--kfg-on-fight); }
.kfg *, .kfg *::before, .kfg *::after { box-sizing: border-box; }

/* Reset elementów, które motywy często stylują globalnie */
.kfg h2, .kfg h3, .kfg h4, .kfg p, .kfg dl, .kfg dd, .kfg dt { margin: 0; padding: 0; border: 0; background: none; color: inherit; text-transform: none; letter-spacing: normal; }
.kfg button, .kfg button:hover, .kfg button:focus, .kfg button:active {
	-webkit-appearance: none; appearance: none;
	margin: 0; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; outline: none;
	color: inherit; font: inherit; line-height: inherit;
	text-transform: none; letter-spacing: normal; text-decoration: none;
	min-height: 0; width: auto; cursor: pointer;
}
.kfg a, .kfg a:hover, .kfg a:focus { text-decoration: none; box-shadow: none; }
.kfg :focus-visible,
.kfg button:focus-visible,
.kfg a:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }
.kfg svg { display: block; }

/* Nagłówek i przełącznik stref */
.kfg .kfg-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 22px; }
.kfg .kfg-kicker { font-family: var(--kfg-label); font-weight: 700; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--acc-ink); margin-bottom: 6px; }
.kfg .kfg-title { font-family: var(--kfg-display); font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--kfg-text); }
.kfg .kfg-zones { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--kfg-surface); border: 1px solid var(--kfg-line); border-radius: 12px; width: min(100%, 460px); }
.kfg .kfg-zones .kfg-zone { border-radius: 9px; padding: 12px 18px; min-height: 48px; text-align: center; font-family: var(--kfg-display); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--kfg-muted); transition: background-color .15s, color .15s; }
.kfg .kfg-zones .kfg-zone:hover { color: var(--kfg-text); }
.kfg .kfg-zones .kfg-zone[aria-selected="true"][data-zone="fit"] { background: var(--kfg-fit); color: var(--kfg-on-fit); }
.kfg .kfg-zones .kfg-zone[aria-selected="true"][data-zone="fight"] { background: var(--kfg-fight); color: var(--kfg-on-fight); }

/* Filtr poziomów */
.kfg .kfg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 0; border-top: 1px solid var(--kfg-line); border-bottom: 1px solid var(--kfg-line); margin-bottom: 20px; }
.kfg .kfg-toolbar-label { font-family: var(--kfg-label); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--kfg-muted); margin-right: 4px; }
.kfg .kfg-toolbar .kfg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--kfg-line); font-family: var(--kfg-label); font-weight: 600; font-size: 15px; letter-spacing: .03em; color: var(--kfg-muted); white-space: nowrap; }
.kfg .kfg-toolbar .kfg-chip:hover { color: var(--kfg-text); border-color: var(--kfg-faint); }
.kfg .kfg-toolbar .kfg-chip[aria-pressed="true"] { background: var(--kfg-surface-2); border-color: var(--kfg-text); color: var(--kfg-text); }
.kfg .kfg-count { margin-left: auto; font-family: var(--kfg-label); font-size: 14px; color: var(--kfg-faint); letter-spacing: .04em; }
.kfg .kfg-notes { display: flex; flex-direction: column; gap: 6px; margin: -8px 0 18px; }
.kfg .kfg-notes:empty { display: none; }
.kfg .kfg-level-note, .kfg .kfg-signup-note { font-size: 14px; line-height: 1.45; color: var(--kfg-muted); }
.kfg .kfg-level-note { display: flex; align-items: flex-start; gap: 10px; color: var(--kfg-text); }
.kfg .kfg-mark { flex-shrink: 0; width: 4px; align-self: stretch; min-height: 18px; border-radius: 2px; background: var(--kfg-fit); }
.kfg .kfg-signup-note[hidden] { display: none; }
.kfg .kfg-daydate { font-family: var(--kfg-label); font-weight: 600; font-size: 18px; color: var(--kfg-muted); letter-spacing: .04em; }
.kfg .kfg-signup-note a, .kfg .kfg-phone { color: var(--acc-ink); font-weight: 600; white-space: nowrap; }
.kfg .kfg-signup-note a:hover, .kfg .kfg-phone:hover { color: var(--kfg-text); }

/* Wskaźnik poziomu */
.kfg .kfg-lv { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex-shrink: 0; }
.kfg .kfg-lv i { display: block; width: 5px; border-radius: 1px; background: var(--kfg-lv-off); font-style: normal; }
.kfg .kfg-lv i:nth-child(1) { height: 6px; }
.kfg .kfg-lv i:nth-child(2) { height: 10px; }
.kfg .kfg-lv i:nth-child(3) { height: 14px; }
.kfg .kfg-lv[data-lv="all"] i { background: var(--kfg-lv-all); }
.kfg .kfg-lv[data-lv="1"] i:nth-child(1) { background: var(--kfg-lv-1); }
.kfg .kfg-lv[data-lv="2"] i:nth-child(-n+2) { background: var(--kfg-lv-2); }
.kfg .kfg-lv[data-lv="3"] i { background: var(--kfg-lv-3); }
.kfg .kfg-lv[data-lv=""] { display: none; }

/* Komputer: tydzień w 7 kolumnach */
.kfg .kfg-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.kfg .kfg-dayhead { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--kfg-surface); border: 1px solid var(--kfg-line); }
.kfg .kfg-dayhead b { font-family: var(--kfg-display); font-weight: 400; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.kfg .kfg-dayhead.is-today { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.kfg .kfg-today-tag { font-family: var(--kfg-label); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.kfg .kfg-band { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.kfg .kfg-band span { font-family: var(--kfg-label); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-ink); white-space: nowrap; }
.kfg .kfg-band::after { content: ""; flex: 1; height: 1px; background: var(--kfg-line); }
.kfg .kfg-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kfg .kfg-empty { font-family: var(--kfg-label); font-size: 14px; color: var(--kfg-faint); text-transform: uppercase; letter-spacing: .06em; padding: 10px 4px; }

.kfg .kfg-week .kfg-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 11px 12px 12px; border-radius: 10px; background: var(--kfg-surface); border: 1px solid var(--kfg-line); transition: border-color .15s, background-color .15s; }
.kfg .kfg-week .kfg-card:hover { border-color: var(--acc); background: var(--kfg-surface-2); }
.kfg .kfg-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kfg .kfg-time { font-family: var(--kfg-label); font-weight: 700; font-size: 16px; color: var(--acc-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kfg .kfg-name { display: block; font-family: var(--kfg-label); font-weight: 700; font-size: 17px; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; color: var(--kfg-text); }
.kfg .kfg-trainer { font-size: 14px; color: var(--kfg-muted); font-weight: 500; }
.kfg .kfg-spot { align-self: flex-start; font-family: var(--kfg-label); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--kfg-muted); }
.kfg .kfg-spot.is-full { color: var(--kfg-fight-ink); }

/* Telefon: zakładki dni + lista */
.kfg .kfg-mobile { display: none; }
.kfg .kfg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.kfg .kfg-days .kfg-daytab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; border-radius: 10px; border: 1px solid var(--kfg-line); background: var(--kfg-surface); color: var(--kfg-muted); font-family: var(--kfg-label); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.kfg .kfg-daytab small { font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .85; }
.kfg .kfg-days .kfg-daytab[aria-selected="true"] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.kfg .kfg-daytitle { font-family: var(--kfg-display); font-weight: 400; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.kfg .kfg-list { display: flex; flex-direction: column; gap: 8px; }
.kfg .kfg-list .kfg-band { margin-top: 10px; }
.kfg .kfg-list .kfg-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--kfg-surface); border: 1px solid var(--kfg-line); min-height: 64px; }
.kfg .kfg-list .kfg-row:active { background: var(--kfg-surface-2); }
.kfg .kfg-start { display: block; font-family: var(--kfg-display); font-size: 22px; line-height: 1; color: var(--kfg-text); font-variant-numeric: tabular-nums; }
.kfg .kfg-end { display: block; font-family: var(--kfg-label); font-weight: 600; font-size: 13px; color: var(--acc-ink); margin-top: 3px; }
.kfg .kfg-row .kfg-name { font-size: 18px; }
.kfg .kfg-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kfg .kfg-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kfg .kfg-chevron { width: 16px; height: 16px; color: var(--kfg-faint); }

/* Układ listy, gdy grafik ma mniej niż 1000 px szerokości (telefon albo wąska kolumna motywu). */
@media (max-width: 999px) {
	.kfg { padding: 20px 16px 24px; }
}
@container kfg (max-width: 999px) {
	.kfg .kfg-desktop { display: none; }
	.kfg .kfg-mobile { display: block; }
	.kfg .kfg-count { display: none; }
	.kfg .kfg-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.kfg .kfg-toolbar::-webkit-scrollbar { display: none; }
	.kfg .kfg-toolbar .kfg-chip { flex-shrink: 0; }
}
@container kfg (max-width: 420px) {
	.kfg .kfg-zones .kfg-zone { font-size: 15px; padding: 10px 8px; }
	.kfg .kfg-days .kfg-daytab { font-size: 14px; }
}
/* Przeglądarki bez zapytań kontenerowych: według szerokości ekranu. */
@supports not (container-type: inline-size) {
	@media (max-width: 999px) {
		.kfg .kfg-desktop { display: none; }
		.kfg .kfg-mobile { display: block; }
		.kfg .kfg-count { display: none; }
		.kfg .kfg-toolbar { flex-wrap: nowrap; overflow-x: auto; }
		.kfg .kfg-toolbar .kfg-chip { flex-shrink: 0; }
	}
}

/* Okno szczegółów */
.kfg .kfg-modal { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--kfg-line); border-radius: 16px; background: var(--kfg-surface); color: var(--kfg-text); font-family: var(--kfg-body); overflow: auto; }
.kfg .kfg-modal::backdrop { background: rgba(5, 6, 9, .72); }
.kfg .kfg-modal[data-zone="fit"] { --acc: var(--kfg-fit); --acc-ink: var(--kfg-fit-ink); --on-acc: var(--kfg-on-fit); }
.kfg .kfg-modal[data-zone="fight"] { --acc: var(--kfg-fight); --acc-ink: var(--kfg-fight-ink); --on-acc: var(--kfg-on-fight); }
.kfg .kfg-m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 0; }
.kfg .kfg-m-zone { display: inline-block; font-family: var(--kfg-label); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; background: var(--acc); color: var(--on-acc); padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.kfg .kfg-m-title { font-family: var(--kfg-display); font-weight: 400; font-size: clamp(26px, 6vw, 34px); line-height: 1.05; text-transform: uppercase; color: var(--kfg-text); }
.kfg .kfg-modal .kfg-x { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--kfg-line); color: var(--kfg-text); }
.kfg .kfg-modal .kfg-x:hover { background: var(--kfg-surface-2); }
.kfg .kfg-m-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
.kfg .kfg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--kfg-line); border: 1px solid var(--kfg-line); border-radius: 12px; overflow: hidden; }
.kfg .kfg-fact { background: var(--kfg-bg); padding: 12px 14px; min-width: 0; }
.kfg .kfg-fact.is-wide { grid-column: 1 / -1; }
.kfg .kfg-fact dt { font-family: var(--kfg-label); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--kfg-muted); margin-bottom: 3px; }
.kfg .kfg-fact dd { font-weight: 600; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--kfg-text); }
.kfg .kfg-fact small { flex-basis: 100%; font-weight: 500; font-size: 13px; color: var(--kfg-muted); }
.kfg .kfg-missing { display: inline-block; font-family: var(--kfg-label); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--kfg-faint); border: 1px dashed var(--kfg-faint); border-radius: 6px; padding: 2px 8px; }
.kfg .kfg-desc h4 { font-family: var(--kfg-label); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--kfg-muted); margin-bottom: 6px; }
.kfg .kfg-desc p { font-size: 16px; line-height: 1.55; max-width: 62ch; color: var(--kfg-text); }
.kfg .kfg-desc p + p { margin-top: 10px; }
.kfg .kfg-m-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.kfg .kfg-modal .kfg-close, .kfg .kfg-modal .kfg-book, .kfg .kfg-modal .kfg-call, .kfg .kfg-modal .kfg-msgr { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; border-radius: 10px; font-family: var(--kfg-display); font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.kfg .kfg-modal .kfg-close { border: 1px solid var(--kfg-line); color: var(--kfg-text); }
.kfg .kfg-modal .kfg-close:hover { background: var(--kfg-surface-2); }
.kfg .kfg-modal .kfg-book { background: var(--acc); color: var(--on-acc); }
.kfg .kfg-modal .kfg-book:hover { filter: brightness(1.08); color: var(--on-acc); }
.kfg .kfg-modal .kfg-call { background: var(--acc); color: var(--on-acc); }
.kfg .kfg-modal .kfg-call:hover { filter: brightness(1.08); color: var(--on-acc); }
.kfg .kfg-modal .kfg-call + .kfg-call { background: transparent; border: 1px solid var(--acc); color: var(--acc-ink); }
.kfg .kfg-modal .kfg-msgr { background: transparent; border: 1px solid var(--acc); color: var(--acc-ink); }
.kfg .kfg-modal .kfg-msgr:hover { background: var(--acc); color: var(--on-acc); }
.kfg .kfg-modal .kfg-book[hidden], .kfg .kfg-modal .kfg-call[hidden], .kfg .kfg-modal .kfg-msgr[hidden] { display: none; }
.kfg .kfg-cancel { align-self: flex-start; display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 4px; background: #E5383B; color: #fff; font-family: var(--kfg-label); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.kfg .is-cancelled .kfg-name, .kfg .is-cancelled .kfg-time, .kfg .is-cancelled .kfg-start { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .65; }
.kfg .kfg-fact.kfg-fact-cancel { background: rgba(229, 56, 59, .14); }
.kfg .kfg-fact.kfg-fact-cancel dt { color: #FF6B6E; }
@media (max-width: 480px) { .kfg .kfg-facts { grid-template-columns: 1fr; } }

html.kfg-lock { overflow: hidden; }

/* „Zadzwoń” i „Wyślij SMS” tylko na urządzeniach dotykowych (telefon, tablet). Na komputerze widać sam numer. */
@media (hover: hover) and (pointer: fine) {
	.kfg .kfg-modal .kfg-call { display: none; }
}

@media (prefers-reduced-motion: reduce) { .kfg * { transition: none !important; } }