/* =============================================================================
   Cennik — siatka kart z ikonami (Figma 151:4 „Frame 14655")

   Sekcja jest CIEMNA i stoi pod „Moją perspektywą", która też jest ciemna.
   To zamierzone: obie używają `--dk-bg-dark`, więc czytają się jako jeden blok,
   a cennik jest jego domknięciem — po opowieści o podejściu przychodzą liczby.

   Szerokości kolumn są przepisane z makiety CO DO PIKSELA, ale jako `fr`,
   nie jako px. Powód: `fr` dzieli miejsce POZOSTAŁE po odjęciu odstępów, więc
   proporcja 512:648:376 trzyma się przy każdej szerokości okna, a przy sztywnych
   pikselach rozjechałaby się wszędzie poza 1600px.
   ========================================================================== */

.dk-cennik {
	background-color: var(--dk-bg-dark);
	color: var(--dk-on-dark);
	padding-block: clamp(56px, 34px + 2.4vw, 112px);
}

.dk-cennik__siatka {
	display: flex;
	flex-direction: column;
	gap: var(--dk-cennik-gap);
	margin-inline: auto;
	max-width: 1600px;
}

.dk-cennik__rzad {
	display: grid;
	gap: var(--dk-cennik-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Proporcje kolumn 1:1 z makiety. */
.dk-cennik__rzad--a { grid-template-columns: 512fr 648fr 376fr; }
.dk-cennik__rzad--b { grid-template-columns: 240fr 512fr 512fr 240fr; }

.dk-cennik__karta {
	background-color: var(--dk-cennik-karta);
	display: flex;
	flex-direction: column;
	/* Ikona u góry, opis u dołu — w makiecie dzieli je cała wolna wysokość
	   karty, a nie stały odstęp. */
	justify-content: space-between;
	gap: var(--dk-cennik-sp-ikona);
	min-height: var(--dk-cennik-h);
	padding: var(--dk-cennik-pad);
}

/* Ikony są dekoracją — nazwa ubrania stoi obok jako tekst, więc czytnik ekranu
   nie ma czego z nich odczytać (`alt=""` w szablonie). Wysokość wiodąca, bo
   ikony różnią się proporcjami (marynarka 68×72, płaszcz 64×95) i to wysokość
   utrzymuje wspólną linię optyczną. */
.dk-cennik__ikona {
	/* Karta jest kolumną fleksa, a domyślne `align-items: stretch` wyśrodkowywało
	   ikonę w jej szerokości. W makiecie ikona stoi przy LEWEJ krawędzi treści,
	   równo z nazwą i ceną — stąd jawne `flex-start`. */
	align-self: flex-start;
	display: block;
	height: var(--dk-cennik-ikona);
	width: auto;
}

.dk-cennik__opis {
	display: flex;
	flex-direction: column;
	gap: .25em;
}

.dk-cennik__nazwa {
	color: var(--dk-on-dark);
	font-family: var(--dk-font-display);
	font-size: var(--dk-cennik-fs-nazwa);
	font-weight: 600;
	line-height: 1.25;
}

.dk-cennik__cena {
	color: var(--dk-on-dark-accent);
	font-family: var(--dk-font-body);
	font-size: var(--dk-cennik-fs-cena);
	line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Skala
   -------------------------------------------------------------------------- */

.dk-cennik {
	--dk-cennik-karta:     #1f1f22;                        /* Figma 0.1204 */

	/*
	 * Skala liczona PROPORCJĄ DO SZEROKOŚCI OKNA, nie osobnym równaniem dla
	 * każdej wartości. W makiecie blok treści ma 1600px, więc 32px odstępu to
	 * dokładnie 2vw, 360px wysokości karty to 22,5vw i tak dalej. Górny próg
	 * `clamp` jest wartością z Figmy, czyli powyżej ~1600px sekcja przestaje
	 * rosnąć i wygląda 1:1 jak makieta.
	 *
	 * Pierwsza wersja miała każdą wartość policzoną osobnym równaniem
	 * `a + b*vw` i przy 1440px WSZYSTKIE zbijały się do dolnego progu —
	 * karty wychodziły o jedną trzecią za małe. Proporcja jest odporna na taką
	 * pomyłkę, bo ma jeden wspólny mianownik.
	 */
	--dk-cennik-gap:       clamp(16px, 2vw,    32px);      /* Figma 32   */
	--dk-cennik-pad:       clamp(20px, 1.9vw,  30px);      /* Figma 30   */
	--dk-cennik-sp-ikona:  clamp(24px, 3vw,    48px);      /* Figma 48   */
	--dk-cennik-h:         clamp(220px, 22.5vw, 360px);    /* Figma 360  */
	--dk-cennik-ikona:     clamp(52px, 5.1vw,  82px);      /* Figma 81,5 */
	--dk-cennik-fs-nazwa:  clamp(20px, 2vw,    32px);      /* Figma 32   */
	--dk-cennik-fs-cena:   clamp(14px, 1.25vw, 20px);      /* Figma 20   */
}

/* -----------------------------------------------------------------------------
   Zwężanie

   Progi wynikają z tego, kiedy NAJWĘŻSZA karta w rzędzie przestaje mieścić
   dwuwyrazową nazwę w dwóch wierszach, a nie z okrągłych liczb. Przy 240fr
   z 1600px dzieje się to około 1080px.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.dk-cennik__rzad--a,
	.dk-cennik__rzad--b {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.dk-cennik__rzad--a,
	.dk-cennik__rzad--b {
		grid-template-columns: 1fr;
	}

	/* Na telefonie karta nie musi trzymać wysokości makiety — liczy się to,
	   żeby ikona i cena mieściły się bez przewijania w poziomie. */
	.dk-cennik__karta {
		min-height: 0;
	}
}