/*
 * Układy podstron z Figmy (ramki 02-08) jako style bloków edytora, które redakcja wybiera w panelu bloku:
 * lista z ptaszkami, szare panele, szary pas na całą szerokość, tabela z ciemnym nagłówkiem,
 * oraz blok danych projektu wstawiony w treść, a także stronicowanie list. Warstwa components: style bloków rdzenia
 * stoją w warstwie `wp` (do 22.10.2026 plik stał poza warstwą). Reguły treści zaczynają się od .c-content.
 */

@layer components {
	/* Nagłówki sekcji w grupach i kolumnach tym samym stopniem co nagłówki treści (Figma: H3 32,44). */
	.c-content :is(.wp-block-group, .wp-block-column) > h2 { font-size: var(--heading-h3); }
	.c-content :is(.wp-block-group, .wp-block-column) > * + * { margin-block-start: 1rem; }

	/* ---------- Lista z ptaszkami (O projekcie „Planowane działania”) ---------- */
	.c-content ul.is-style-checklist {
		display: grid;
		gap: 1rem;
		padding-inline-start: 0;
		list-style: none;
	}
	.c-content ul.is-style-checklist > li { position: relative; margin: 0; padding-inline-start: 2.25rem; }
	.c-content ul.is-style-checklist > li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0.05em;
		width: 1.5rem;
		height: 1.5rem;
		background: var(--c-accent-surface); /* grafika obok tekstu, nie nośnik treści */
		-webkit-mask: url("../img/ikony/check.svg") center / contain no-repeat;
		mask: url("../img/ikony/check.svg") center / contain no-repeat;
	}

	/* ---------- Szare panele (Grupy docelowe, Rezultaty) ---------- */
	.c-content .wp-block-columns.is-style-panele { gap: 2rem; margin-block-start: 2.5rem; }
	.c-content .wp-block-columns.is-style-panele > .wp-block-column {
		padding: 2rem 1.5rem;
		background: var(--c-bg-soft);
	}
	.c-content .wp-block-columns.is-style-panele > .wp-block-column > :first-child { margin-block-start: 0; }
	@media (min-width: 48em) {
		.c-content .wp-block-columns.is-style-panele > .wp-block-column { padding: 3.5rem; }
	}

	/* ---------- Szary pas na całą szerokość (np. sekcja składu zespołu) ----------
	 * Tło wychodzi poza kolumnę treści cieniem i przycięciem, bez 100vw (to dałoby poziomy pasek przewijania). */
	.c-content .wp-block-group.is-style-pas {
		margin-block-start: var(--section-space);
		padding-block: var(--section-space);
		background: var(--c-bg-soft);
		box-shadow: 0 0 0 100vmax var(--c-bg-soft);
		clip-path: inset(0 -100vmax);
	}
	.c-content > .wp-block-group.is-style-pas:last-child { margin-block-end: calc(-1 * var(--section-space)); }
	.c-content .wp-block-group.is-style-pas > h2 { margin-block-start: 0; }

	/* ---------- Tabela z ciemnym nagłówkiem (ramka, linie); etykiety kolumn na telefonie niżej są z pierwszej realizacji ---------- */
	.c-content .wp-block-table.is-style-sklad { margin-block-start: 1.5rem; }
	.c-content .wp-block-table.is-style-sklad table { background: var(--c-bg); border: 1px solid var(--c-line); }
	.c-content .wp-block-table.is-style-sklad thead th {
		padding: 1rem;
		color: #fff;               /* 15,65 na #202426 */
		font-weight: 400;
		background: var(--secondary-900);
		border: 0;
	}
	.c-content .wp-block-table.is-style-sklad tbody :is(th, td) {
		padding: 1rem;
		font-weight: 400;
		border: 0;
		border-block-end: 1px solid var(--c-line);
	}
	.c-content .wp-block-table.is-style-sklad :is(th, td):first-child { width: 3.5rem; }
	.c-content .wp-block-table.is-style-sklad figcaption { margin-block-start: 0.75rem; }

	/* Poniżej 48em wiersz tabeli jako karta: pierwsza kolumna jako tytuł, pod nim etykiety kolumn (Lp. ukryta).
	   Etykiety w ::before są wpisane na sztywno pod tabelę składu z pierwszej realizacji; u klienta z inną tabelą zmień je tutaj. */
	@media (max-width: 47.999em) {
		.c-content .wp-block-table.is-style-sklad { overflow: visible; }
		.c-content .wp-block-table.is-style-sklad table { border: 0; background: transparent; }
		.c-content .wp-block-table.is-style-sklad :is(table, tbody, tr, th, td) { display: block; width: auto; }
		.c-content .wp-block-table.is-style-sklad thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
		.c-content .wp-block-table.is-style-sklad tbody tr { margin-block-end: 1rem; padding: 1.25rem; background: var(--c-bg); border: 1px solid var(--c-line); }
		.c-content .wp-block-table.is-style-sklad tbody :is(th, td) { padding: 0.125rem 0; border: 0; }
		.c-content .wp-block-table.is-style-sklad tbody td:first-child { display: none; }
		.c-content .wp-block-table.is-style-sklad tbody th { font-family: var(--font-heading); font-size: var(--heading-h6); }
		.c-content .wp-block-table.is-style-sklad tbody td:empty { display: none; }
		.c-content .wp-block-table.is-style-sklad tbody td::before { display: block; margin-block-start: 0.625rem; color: var(--c-text-3); font-size: var(--txt-caption); }
		.c-content .wp-block-table.is-style-sklad tbody td:nth-child(3)::before { content: "Instytucja"; }
		.c-content .wp-block-table.is-style-sklad tbody td:nth-child(4)::before { content: "Stanowisko"; }
		.c-content .wp-block-table.is-style-sklad tbody td:nth-child(5)::before { content: "Reprezentowany sektor"; }
	}

	/* ---------- Dane projektu w treści (O projekcie): szara rama z trzema kartami ---------- */
	.c-content .c-facts.l-section { margin-block-start: 2rem; padding: 1.5rem; }
	.c-content .c-facts .c-facts__list { width: auto; margin-inline: 0; }
	@media (max-width: 47.999em) {
		.c-content .c-facts.l-section { padding: 1rem; } /* mniej szarego pola wokół kart na telefonie (1.10) */
	}

	/* ---------- Przycisk wyśrodkowany pod kartami (Współpraca) ---------- */
	.c-content .wp-block-buttons { margin-block-start: 2rem; }

	/* ---------- Dwie kolumny Kontaktu ---------- */
	.c-content .wp-block-columns.is-style-kontakt { gap: 1.5rem; }
	.c-content .wp-block-columns > .wp-block-column > :first-child { margin-block-start: 0; }
	.c-content .c-hashtag { color: var(--c-accent-text); }

	/* ---------- Kontakt, ramka 08 (pomiar przy 1440); pola formularza w formularz.css ---------- */
	.c-content .c-contact-cards__list { padding-inline-start: 0; }
	.c-content .c-contact-cards .c-icard { max-width: 30.5rem; }            /* karta 488 px */
	.c-content .c-contact-cards li + li { margin-block-start: 0; }
	.c-content .c-contact-cards .c-icard__text a { color: inherit; }
	.c-content .c-contact-cards .c-icard__text { line-height: 1.4; }      /* Figma: krótkie dane, ciaśniej niż akapit */
	.c-content .c-contact-cards .c-icard__title { margin-block-start: 0; }


	/* Kontakt: lewa i prawa kolumna kończą się na tej samej linii. Karty dzielą między siebie wysokość ramki formularza. */
	@media (min-width: 782px) { /* od tej szerokości WordPress stawia kolumny obok siebie */
		.c-content .wp-block-columns.is-style-kontakt { align-items: stretch; }
		.c-content .wp-block-columns.is-style-kontakt > .wp-block-column { display: flex; flex-direction: column; }
		.c-content .wp-block-columns.is-style-kontakt > .wp-block-column > :last-child { flex: 1 1 auto; }
		.c-content .is-style-kontakt .c-contact-cards { display: flex; }
		.c-content .is-style-kontakt .c-contact-cards__list { flex: 1; grid-auto-rows: 1fr; }
		.c-content .is-style-kontakt .wpcf7 { display: flex; }
		.c-content .is-style-kontakt .wpcf7 > .wpcf7-form { flex: 1; align-content: start; }
	}
	.c-content .c-contact-cards .c-icard { align-content: start; }

	/* Linia między sekcjami: 1 px --c-line, od lewej krawędzi tekstu, szerokość tekstu (Figma 992). */
	.c-content .wp-block-separator {
		max-width: 62rem;
		height: 0;
		margin-inline: 0;
		border: 0;
		border-block-start: 1px solid var(--c-line);
		opacity: 1;
	}
	.c-content > .wp-block-separator { margin-block: 2rem; }

	/* Karty w treści: bez wcięcia list z treści; odstęp bloku kart od sąsiadów 48 px (Figma 04). */
	.c-content .c-icards__list { padding-inline-start: 0; }
	.c-content .c-icards__list > li + li { margin-block-start: 0; }
	.c-content > .c-icards,
	.c-content > .c-files { margin-block-start: 3rem; }
	.c-content > .c-icards + * { margin-block-start: 3rem; }

	.c-content .c-files__list { padding-inline-start: 0; }
	.c-content .c-files__list > li + li { margin-block-start: 0; }

	/* Treść na pełną szerokość kontenera (1138 px), jak tabele, pasy i karty. Decyzja Marcina 30.09 (podstrona z tekstem
	   „treści nie na pełny ekran, źle to wygląda”): akapity i linie nie kończą się w pół kolumny. Zdejmuje też 62rem
	   z reguły separatora wyżej i zawężenie akapitów w grupach z układem „constrained” (contentSize rdzenia). */
	.c-content :is(p, li),
	.c-content .wp-block-separator { max-width: none; }

	/* ---------- Stronicowanie list (Figma 05): jedno miejsce od 22.10.2026 (wcześniej pages.css, subpages.css i tutaj) ----------
	 * Odstęp od kart, przyciski w jednym wierszu, strzałka w linii z napisem; bieżąca strona jak przyciski (1.10), z ciemnym
	 * napisem (5,72) i polem 48 px zamiast 44 z Figmy. paginate_links() w index.php drukuje odnośniki bez .nav-links. */
	.c-pagination { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: 2.5rem; }
	.c-pagination .page-numbers {
		display: inline-flex;
		place-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-width: 3rem;
		min-height: 3rem;
		padding-inline: 1rem;
		color: var(--c-text);
		white-space: nowrap;
		text-decoration: none;
		border: 1px solid var(--c-line);
	}
	.c-pagination .page-numbers:not(.current):not(.dots) { border-color: var(--c-text-2); }
	.c-pagination .page-numbers.current {
		background: var(--c-action);
		color: var(--c-on-action);
		border-color: var(--c-action);
	}
	.c-pagination .page-numbers.dots { border: 0; }
	.c-pagination a.page-numbers:hover { background: var(--c-bg-soft); }
	.c-pagination .page-numbers .c-icon { color: var(--c-accent-text); }
	.c-pagination :is(.next, .prev) { min-width: 9.25rem; }                /* Figma 148 px */
	.c-pagination .prev .c-icon { transform: rotate(180deg); }             /* ta sama strzałka co „Następna”, obrócona */
}