/*
 * Podstrony (okruszki, nagłówek podstrony, treść, filtr, listy, dokumenty, wpis, spis treści).
 * Zastępuje w assets/css/pages.css reguły .c-page-head* (stary prosty pas) i uzupełnia resztę.
 * Tylko role kolorów z tokens.css (--c-*), więc tryb wysokiego kontrastu działa bez dodatkowych reguł.
 * Progi: 40em, 48em, 70em (plan wdrożenia, sekcja 5). Zero cieni, zero gradientów, zero wersalików.
 * Wymiary z projektu pierwszej realizacji (komentarze „Figma”).
 */

@layer components {

	/* ---------- Okruszki w ciemnym nagłówku podstrony (Figma AB-01): Figtree 14/20, biel 60%, separator „/” ---------- */
	.c-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-size: var(--txt-body-2); line-height: 1.43; letter-spacing: 0.007em; }
	.c-crumbs__list li { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; }
	.c-crumbs__list li + li::before { content: "/"; color: rgb(255 255 255 / 0.6); }
	.c-crumbs a { color: rgb(255 255 255 / 0.6); text-decoration: none; }   /* 6,19 na granat 900 */
	.c-crumbs a:hover { color: var(--c-on-dark); text-decoration: underline; }
	.c-crumbs [aria-current] { color: rgb(255 255 255 / 0.85); overflow-wrap: anywhere; }
	.c-crumbs__ikona { display: none; width: 1rem; height: 1rem; }
	@media (max-width: 47.999em) {
		.c-crumbs__ikona { display: block; }
		.c-crumbs__dom-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
		.c-crumbs__dom { display: inline-flex; align-items: center; min-width: 1.5rem; min-height: 1.5rem; }
	}

	/* ---------- Nagłówek podstrony: granat 900 pod belką, tytuł i akapit nad zdjęciem z promieniem 12 ---------- */
	.c-page-head {
		--c-fokus-na-tle: var(--brand-white);
		--zdjecie-wys: 32.5rem;   /* 520 standard (spec-podstrony A9) */
		padding: calc(var(--avg-naglowek-wys, 6rem) + var(--wp-admin--admin-bar--height, 0px) + 5.5rem) var(--gutter) 2rem;
		background: var(--c-deep);
		color: var(--c-on-dark);
	}
	.c-page-head--zwarty { --zdjecie-wys: 27.5rem; }       /* 440: lista realizacji, Kontakt */
	.c-page-head--realizacja { --zdjecie-wys: 38.75rem; }  /* 620: zdjęcie jest treścią */
	.c-page-head__tytul,
	.c-page-head__media,
	.c-kafle-kontakt { max-width: var(--wrap-wide); margin-inline: auto; }
	.c-page-head__tytul {
		display: grid;
		grid-template-columns: minmax(0, 41.5rem) minmax(0, 32.5rem);   /* 664 i 520 (Figma) */
		justify-content: space-between;
		align-items: end;
		gap: 2rem 8.25rem;
		padding-block-end: 4rem;
	}
	.c-page-head__lewa { display: grid; gap: 1.25rem; }
	.c-page-head__title { color: var(--c-on-dark); font-size: var(--heading-h1); line-height: 1.0625; letter-spacing: var(--track-h1); }
	.c-page-head__lead { color: var(--c-on-dark-lead); font-size: var(--txt-lead); line-height: var(--leading-lead); }
	.c-page-head__prawa { justify-self: end; }
	.c-page-head__media { overflow: hidden; height: var(--zdjecie-wys); border-radius: var(--radius); background: var(--primary-800); }
	.c-page-head__img { width: 100%; height: 100%; object-fit: cover; }

	/* Przycisk powrotu na karcie realizacji: biel 12%, obrys biel 30% (Figma 31:173). */
	.c-powrot {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: var(--touch);
		padding: 0 1.375rem;
		color: var(--c-on-dark);
		font-weight: 500;
		text-decoration: none;
		background: rgb(255 255 255 / 0.12);
		border: 1px solid rgb(255 255 255 / 0.3);
		border-radius: var(--radius-ui);
		transition: background-color 0.2s ease-out;
	}
	.c-powrot:hover { background: rgb(255 255 255 / 0.2); }
	.c-powrot:focus-visible { outline: 2px solid var(--brand-white); outline-offset: 2px; }

	/* Kafle kontaktowe (Figma 32:209): trzy kafle 448 x 218, biel 8%, obrys biel 18%, promień 12. */
	.c-kafle-kontakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-end: 4rem; padding: 0; list-style: none; }
	.c-kafel-kontakt {
		display: grid;
		align-content: start;
		gap: 1.25rem;
		padding: 2rem;
		background: rgb(255 255 255 / 0.08);
		border: 1px solid rgb(255 255 255 / 0.18);
		border-radius: var(--radius);
	}
	.c-kafel-kontakt__ikona { width: 2rem; height: 2rem; color: var(--c-on-dark); }
	.c-kafel-kontakt__etykieta { color: rgb(255 255 255 / 0.65); font-size: var(--txt-body-2); line-height: 1.43; }   /* 5,85 */
	.c-kafel-kontakt__wartosc { display: grid; justify-items: start; gap: 0.25rem; color: var(--c-on-dark); font-family: var(--font-heading); font-size: var(--heading-h5); line-height: 1.25; letter-spacing: var(--track-h5); }
	.c-kafel-kontakt__wartosc a { color: inherit; text-decoration: none; }
	.c-kafel-kontakt__wartosc a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

	@media (max-width: 63.999em) {
		.c-page-head__tytul { grid-template-columns: 1fr; gap: 1rem; padding-block-end: 2rem; }
		.c-page-head__prawa { justify-self: start; }
		.c-kafle-kontakt { grid-template-columns: 1fr; gap: 0.75rem; margin-block-end: 2rem; }
	}
	@media (max-width: 47.999em) {
		.c-page-head { padding: calc(4.5rem + var(--wp-admin--admin-bar--height, 0px) + 2rem) var(--gutter) 1rem; }
		.c-page-head__title { line-height: 1.1; letter-spacing: -0.0375em; }
		.c-page-head__lead { font-size: 1.125rem; line-height: 1.45; }
		.c-page-head__media { height: auto; aspect-ratio: 3 / 2; }
		.c-page-head--realizacja .c-page-head__media { aspect-ratio: 4 / 3; }
		.c-page-head__prawa,
		.c-powrot { width: 100%; justify-content: center; }
		.c-kafel-kontakt { grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem 0.75rem; padding: 1.5rem; }
		.c-kafel-kontakt__ikona { width: 1.5rem; height: 1.5rem; }
		.c-kafel-kontakt__wartosc { grid-column: 1 / -1; font-size: 1.375rem; }
		.c-kafel-kontakt__wartosc a { display: inline-flex; align-items: center; min-height: var(--touch); }
	}

	/* ---------- Treść podstron: rytm i stopnie z Figmy ---------- */
	/* Na podstronach nagłówek sekcji ma stopień stylu H3 (32,44), a nie H2 (36,49). */
	.c-page-body .c-content > h2 { font-size: var(--heading-h3); }
	.c-page-body .c-content > h3 { font-size: var(--heading-h5); }
	.c-page-body .c-content > hr,
	.c-page-body .c-content > .wp-block-separator {
		width: 100%;
		border: 0;
		border-block-start: 1px solid var(--c-line);
	}
	/* Szerokość i odstępy linii z bloku Separator są w uklady.css (pełna szerokość, 2rem); tu tylko zwykłe <hr>. */
	.c-page-body .c-content > hr:not(.wp-block-separator) {
		max-width: 62rem;
		margin-block: 1.5rem;
	}

	/* ---------- Filtr kategorii ---------- */
	.c-filter { margin-block-end: 2rem; }
	.c-filter__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-filter__link {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		min-height: var(--touch);
		padding: 0.5rem 1rem;
		color: var(--c-text);
		font-size: var(--txt-body-2);
		text-decoration: none;
		border: 1px solid var(--secondary-500);     /* 5,73 na bieli: granica kontrolki czytelna (1.4.11) */
	}
	.c-filter__link:hover { background: var(--c-bg-soft); text-decoration: underline; }
	.c-filter__link[aria-current] {
		background: var(--c-action);                /* jak przyciski (1.10) */
		color: var(--c-on-action);
		border-color: var(--c-action);
	}
	.c-filter__count { color: inherit; opacity: 0.85; }
	@media (max-width: 39.999em) {
		/* Telefon: jeden pasek tematów przesuwany palcem jak w aplikacji, bez paska przewijania; wygaszenie przy prawej
		   krawędzi mówi, że jest więcej (Marcin 12.10 przy Alfie; zastępuje siatkę dwóch kolumn z 1.10). */
		.c-filter { margin-inline: calc(-1 * var(--gutter)); }
		.c-filter__list {
			flex-wrap: nowrap;
			overflow-x: auto;
			padding-inline: var(--gutter);
			scrollbar-width: none;
			-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
			mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
		}
		.c-filter__list::-webkit-scrollbar { display: none; }
		.c-filter__link { white-space: nowrap; }
	}

	/* ---------- Lista aktualności: 3 kolumny 379 px, odstęp 24, zdjęcie 3:2 ---------- */
	.c-cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
	.c-cards--3 .c-card__media { aspect-ratio: 3 / 2; }
	/* Pojedynczy wpis to zwykła karta w siatce. Karta pozioma na całą szerokość przy jednym wpisie była decyzją
	   pierwszej realizacji (30.09) i psuła listę u Alfy (12.10); klient, który jej chce, dopisuje ją u siebie. */

	/* Stronicowanie: uklady.css (jedno miejsce od 22.10.2026). */

	/* ---------- Publikacje: karty dokumentów, 2 kolumny 559 px, odstęp 20 ---------- */
	.c-docs {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
		gap: 1.25rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-doc {
		position: relative;
		display: flex;
		gap: 1.5rem;
		padding: 1.5rem;
		background: var(--c-bg);
		border: 1px solid var(--c-line);
		border-inline-start: 4px solid var(--c-accent-surface);
	}
	.c-doc__icon { width: 1.75rem; height: 1.75rem; flex: none; color: var(--c-accent-text); }
	.c-doc__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; }
	.c-doc__label { color: var(--c-text-3); font-size: var(--txt-caption); line-height: var(--leading-tight); }
	.c-doc__title { font-size: var(--heading-h6); }
	.c-doc__title a { color: var(--c-text); text-decoration: none; }
	.c-doc__title a:hover { text-decoration: underline; }
	/* Termin konsultacji: jedyne uprawnione miejsce czerwieni (DESIGN.md, prawo 7). */
	.c-doc__deadline { color: var(--danger-700); font-size: var(--txt-body-2); }
	.c-doc .c-more { overflow-wrap: anywhere; }
	@media (min-width: 40em) {
		.c-doc { padding: 2rem; }                     /* Figma 32 px */
	}
	@media (max-width: 39.999em) {
		.c-doc { flex-direction: column; gap: 1rem; }
	}

	/* ---------- Pojedynczy wpis: kolumna 928 px ---------- */
	.c-article { padding-block: var(--section-space); }
	.c-article__col {
		display: flex;
		flex-direction: column;
		gap: 2rem;                                     /* Figma 32 px */
		width: min(100% - 2 * var(--gutter), 58rem);   /* 928 px */
		margin-inline: auto;
	}
	.c-article__head { display: flex; flex-direction: column; gap: 1rem; }
	.c-article__title { font-size: var(--heading-h1); }
	.c-article__lead { color: var(--c-text-2); font-size: 1.125rem; }
	.c-article__image img { width: 100%; height: auto; aspect-ratio: 928 / 432; object-fit: cover; }
	.c-article__image figcaption { margin-block-start: 0.5rem; color: var(--c-text-3); font-size: var(--txt-caption); }
	.c-article__body > h2 { font-size: var(--heading-h4); scroll-margin-block-start: 1.5rem; }
	.c-article__files h2 { font-size: var(--heading-h4); margin-block-end: 1rem; }
	.c-article__files-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

	/* Spis treści: tło primary-50, ramka, numery 01-04 z licznika (w Figmie pomarańcz 2,99, tu --c-accent-text 5,94). */
	.c-toc {
		padding: 1.75rem 2rem;                        /* Figma 28 / 32 */
		background: var(--primary-50);
		border: 1px solid var(--c-line);
	}
	.c-toc__title { font-size: var(--heading-h4); margin-block-end: 1.5rem; }
	.c-toc__list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
	.c-toc__list li { counter-increment: toc; display: flex; align-items: center; gap: 0.875rem; }
	.c-toc__list li::before {
		content: counter(toc, decimal-leading-zero);
		min-width: 1.75rem;
		color: var(--c-accent-text);
		font-size: var(--txt-body-2);
		font-variant-numeric: tabular-nums;
	}
	.c-toc__list a {
		display: inline-flex;
		align-items: center;
		min-height: var(--touch);
		color: var(--c-text-2);
		text-decoration: none;
	}
	.c-toc__list a:hover { color: var(--c-text); text-decoration: underline; }
	:root[data-kontrast="wysoki"] .c-toc { background: var(--c-bg); }

	.c-related__title { margin-block-end: 2rem; font-size: var(--heading-h3); }
}

/*
 * Galeria z bloku rdzenia. Do 22.10.2026 poza warstwą (style rdzenia stały bez warstwy), teraz w components,
 * bo rdzeń stoi w warstwie `wp` (inc/assets.php).
 */

@layer components {
	/* Galeria: blok rdzenia, 2 kolumny po 561 x 305 w pełnej szerokości 1138, bez karuzeli. */
	.c-article__body .wp-block-gallery.has-nested-images { gap: 1rem; }
	.c-article__body .wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 561 / 305; object-fit: cover; }
	/* Formularz Contact Form 7: formularz.css (jedno miejsce od 22.10.2026). */
}