/*
 * Style modułu prezentów — minimum semantyczne.
 *
 * 🔴 To NIE jest warstwa wizualna wdrożenia. Wygląd rozstrzygają prototypy Coworku
 * (koszyk M4, ekran prezentu G3) odtwarzane przez skórkę klienta, a kryteria
 * PREZ-K-2 i PREZ-E-3 mierzą zgodność z nimi jako wielkość względną kadru.
 * Tutaj są wyłącznie reguły, bez których moduł jest nieczytelny na czystej instalacji.
 *
 * 🔴 DLACZEGO KAŻDA REGUŁA KOMPONENTU JEST ZAGNIEŻDŻONA POD `.dwg-ekran` / `.dwg-prog`
 * Zmierzone na `staging.k-esthetic.pl` 2026-09-11: globalny arkusz Elementora
 * `post-4993.css` niesie regułę `.elementor-kit-4993 button` o specyficzności **(0,1,1)**,
 * która bije pojedynczą klasę `.dwg-kafel__cel` **(0,1,0)** — przycisk kafla dostawał
 * `display:inline-block` i `padding:.5rem 1rem` zamiast `flex`, przez co liczył
 * szerokość z treści (**257 px**) i wychodził poza komórkę siatki (**177 px**).
 * Zagnieżdżenie podnosi specyficzność do (0,2,0) i wygrywa BEZ `!important`.
 * To jest pułapka opisana w `_metoda/instrukcje-specjalistow/web-developer.md` §11a
 * („style przycisków z kitu biją własne klasy") — tu rozwiązana specyficznością,
 * bo `!important` zabrałby możliwość nadpisania wyglądu w skórce.
 *
 * 🔴 SLOTY. Węzły `dwg-*__ikona`, `dwg-*__foto`, `dwg-kafel__znacznik`, `dwg-krok__znak`
 * i `dwg-ekran__ozdoba` są PUSTYMI MIEJSCAMI dla motywu graficznego klienta, dokładanego
 * filtrem `dwg_klasy_slotow`. Domyślnie nie mają wyglądu własnego — i to jest celowe:
 * wtyczka nie zna znaku klienta, więc nie udaje, że go rysuje.
 */

/*
 * ⚠ SPECYFICZNOSC SLOTOW. Reguly slotow (`__miernik`, `__tor`, `__wypelnienie`,
 * `__znak`, `__foto`, `__ozdoba`) celowo mają specyficzność JEDNEJ klasy, a nie
 * dwóch jak reszta tego arkusza. Skórka klienta dokłada do tych samych węzłów
 * swoje klasy motywu (też jedna klasa) i ładuje się PO tym arkuszu — przy remisie
 * wygrywa późniejsza, więc motyw nadpisuje domyślny wygląd bez `!important`.
 * Gdyby sloty miały (0,2,0), skórka nie miałaby jak ich ruszyć.
 */

/* ====================== wiersz komunikatu w koszyku ====================== */

.dwg-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dwg-prog .dwg-prog__tekst { flex: 1 1 12rem; margin: 0; line-height: 1.5; }
.dwg-prog .dwg-prog__ikona { flex: 0 0 auto; display: block; }

/*
 * Miernik jest PIERŚCIENIEM, nie paskiem (`M-2`, `D-375`) — i nie niesie własnej
 * liczby: udział pokazuje kształtem, wartość oddaje czytnikowi przez `aria-valuenow`.
 * `transform` obraca start wypełnienia na godzinę dwunastą.
 */
.dwg-prog__miernik { display: block; width: 64px; height: 64px; transform: rotate(-90deg); }
.dwg-prog__tor { fill: none; stroke: currentColor; stroke-width: 4; opacity: 0.18; }
.dwg-prog__wypelnienie { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: butt; }

.dwg-prog .dwg-prog__akcja { min-height: 44px; display: inline-flex; align-items: center; }

/* ============================== krokowskaz =============================== */

/*
 * Liczba kół = liczba kroków, które NAPRAWDĘ wystąpią (`D-352a`). Krok, który się
 * nie odbędzie, nie jest tu wyszarzony — jego węzła po prostu nie ma, więc nic
 * w tym arkuszu nie może go „schować".
 */
.dwg-kroki {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
}

.dwg-kroki .dwg-krok { display: inline-flex; align-items: center; gap: 8px; }

.dwg-krok__znak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border: 1px solid currentColor;
	font-size: 0.75rem;
	line-height: 1;
}

.dwg-krok.is-now .dwg-krok__znak,
.dwg-krok.is-done .dwg-krok__znak { border-width: 2px; }

/*
 * Na wąskim ekranie etykieta zostaje wyłącznie przy kroku czynnym — inaczej cztery
 * pary „koło + słowo" nie mieszczą się w jednym wierszu i krokowskaz łamie się
 * na dwa, przestając czytać się jak ścieżka.
 */
@media (max-width: 600px) {
	.dwg-kroki .dwg-krok__et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.dwg-kroki .dwg-krok.is-now .dwg-krok__et { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ========================== ekran wyboru prezentu ========================= */

.dwg-ekran { display: block; }
.dwg-ekran .dwg-ekran__nav { margin: 0 0 16px; }
.dwg-ekran .dwg-ekran__head { margin: 0 0 16px; }
.dwg-ekran .dwg-ekran__lead { margin: 0 0 24px; }
.dwg-ekran__ozdoba { display: block; }

.dwg-ekran .dwg-ekran__kafle {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dwg-ekran .dwg-kafel { margin: 0; padding: 0; position: relative; }

/*
 * Cały kafel jest celem, nie sam tytuł (kanon §5b). Cel dotykowy ≥ 44 px.
 * `width:100%` + `box-sizing:border-box` + `min-width:0` — bez tego ostatniego
 * element siatki ma `min-width:auto` i rozpycha się do szerokości własnej treści.
 */
.dwg-ekran .dwg-kafel__cel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 16px;
	background: none;
	border: 1px solid currentColor;
	border-radius: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	/*
	 * `white-space` MUSI być ustawione jawnie. Zmierzone na staging 2026-09-11:
	 * przycisk miał `nowrap` przy rodzicu `normal`, a `white-space` jest dziedziczone,
	 * więc nazwa produktu w `span` nie zawijała się i wychodziła poza kafel — ink
	 * **422 px w pudełku 182 px**, 4 z 9 kafli na 1440 i 1 z 9 na 390.
	 * ⚠ Reguła kitu `.elementor-kit-4993 button` tej własności NIE niesie, więc
	 * nadpisanie samego `display`/`padding` problemu nie ruszyło. Lekcja: gdy reguła
	 * motywu wygrywa na jednej własności, bierz komponent W CAŁOŚCI, zamiast łatać
	 * tę jedną, którą się zauważyło.
	 */
	white-space: normal;
}

.dwg-kafel__foto { display: block; }

/* Obraz wypełnia slot, zamiast wymuszać szerokość kafla treścią. */
.dwg-kafel__foto img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.dwg-ekran .dwg-kafel__nazwa {
	font-weight: 500;
	/* Nazwa produktu bywa dłuższa niż kafel — łamiemy ją, zamiast przelewać. */
	white-space: normal;
	overflow-wrap: anywhere;
}

.dwg-ekran .dwg-kafel--wybrany .dwg-kafel__cel { border-width: 2px; }

/*
 * Stan poza limitem jest OPISANY, nie wygaszony do nieczytelności: kontrast tekstu
 * zostaje ≥ 4,5 : 1, bo to nadal informacja, którą klient ma przeczytać.
 */
.dwg-ekran .dwg-kafel--niedostepny .dwg-kafel__cel {
	cursor: not-allowed;
	opacity: 1;
	border-style: dashed;
}

.dwg-ekran .dwg-kafel__nota { margin: 8px 0 0; }

/* ===================== pasek wyjścia (licznik + CTA) ===================== */

/*
 * Wyjście ma być widoczne w kadrze razem z kaflami (`PREZ-E-1`, `PREZ-E-2`), a pula
 * bywa dłuższa niż ekran — więc pasek jest przylepiony do dolnej krawędzi. Licznik
 * i podpowiedź stoją PRZY kontrolce, której dotyczą, a nie nad listą kafli.
 */
.dwg-ekran .dwg-ekran__pasek {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 16px 0;
	background: inherit;
}

.dwg-ekran .dwg-ekran__licznik { margin: 0; font-weight: 500; }
.dwg-ekran .dwg-ekran__podpowiedz { margin: 0; flex: 1 1 100%; }

.dwg-ekran .dwg-ekran__dalej,
.dwg-ekran .dwg-ekran__powrot {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.dwg-ekran .dwg-ekran__dalej { margin-left: auto; }

@media (max-width: 480px) {
	.dwg-ekran .dwg-ekran__pasek { flex-direction: column; align-items: stretch; }
	.dwg-ekran .dwg-ekran__dalej { margin-left: 0; justify-content: center; }
}