/*
 * Sekcje PDM (wersja Avenir). Część 1: mechanizm pasów, wspólny dla wszystkich stron.
 *
 * Treść strony to ciąg pasów. Grupa rdzenia ze stylem is-style-s-* jest pasem na całą szerokość: wcięcie boczne
 * liczy się samo (max(margines, (100% - 1376) / 2)), więc w środku nie trzeba drugiego kontenera.
 * Odstęp pionowy pasa 120 (telefon 80). Bloki poza pasem (strona tekstowa, polityka) mają szerokość tekstu 760.
 *
 * Tło pasa z palety edytora: biały (domyślnie), „Tło kart” (primary-50), „Tło sekcji” (primary-100), „Błękit”
 * (primary-200), „Granat (tekst)” (800) i „Granat głęboki” (900). Na granacie zmienne tekstu przełączają się
 * na biel (6,31 do 14,53), więc każdy blok w środku ciemnego pasa ma właściwy kontrast bez osobnych reguł.
 *
 * Kanwa edytora dostaje ten plik z zamianą .c-sekcje na .is-root-container (inc/editor.php, inc/pdm.php).
 * Część 2 (sekcje strony głównej) niżej; podstrony: podstrony.css; realizacje: realizacje.css.
 */

@layer components {
	/* ---------- Pasy ---------- */
	.c-sekcje { display: flow-root; }
	.c-sekcje > * { width: min(100% - 2 * var(--gutter), var(--wrap-text)); margin-inline: auto; }
	.c-sekcje > :not([class*="is-style-s-"], [class*="wp-block-avg-"], .c-hero, .c-liczby, .wp-block-image.is-style-pas):first-child { margin-block-start: var(--section-space); }
	.c-sekcje > :not([class*="is-style-s-"], [class*="wp-block-avg-"], .c-hero, .c-liczby, .wp-block-image.is-style-pas):last-child { margin-block-end: var(--section-space); }
	.c-sekcje > :is([class*="is-style-s-"], .alignfull, [class*="wp-block-acf-"], [class*="wp-block-avg-"]) {
		width: 100%;
		max-width: none;
		margin-block: 0;
	}
	.c-sekcje > [class*="is-style-s-"] {
		padding: var(--section-space) max(var(--gutter), (100% - var(--wrap-wide)) / 2);
	}
	/* Dwa białe pasy pod sobą: drugi bez górnego odstępu (Figma: sekcja niżej zaczyna się tam, gdzie wyższa ma 120). */
	.c-sekcje > [class*="is-style-s-"]:not(.has-background) + [class*="is-style-s-"]:not(.has-background) { padding-block-start: 0; }

	/* Ciemne tło: zmienne tekstu na biel, fokus biały. */
	.c-sekcje :is(.has-tekst-background-color, .has-tekst-drugi-background-color) {
		--c-text: var(--brand-white);
		--c-text-2: var(--c-on-dark-2);
		--c-line: var(--c-line-on-dark);
		--c-fokus-na-tle: var(--brand-white);
		--c-action: var(--brand-white);
		--c-action-hover: var(--primary-200);
		--c-on-action: var(--primary-800);
		color: var(--c-on-dark-2);
	}
	.c-sekcje .has-tekst-background-color { background-color: var(--primary-800); }
	.c-sekcje .has-tekst-drugi-background-color { background-color: var(--primary-900); }
	.c-sekcje .has-tlo-spokojne-background-color { background-color: var(--primary-50); }
	.c-sekcje .has-tlo-drugie-background-color { background-color: var(--primary-100); }
	.c-sekcje .has-akcent-background-color { background-color: var(--primary-200); }

	/* Wnętrze pasa: rytm z Figmy zamiast domyślnych 24 px układu „flow” rdzenia. */
	.c-sekcje [class*="is-style-s-"] :is(h2, h3, h4) { color: var(--c-text); }
	.c-sekcje [class*="is-style-s-"] p { color: var(--c-text-2); }
	.c-sekcje [class*="is-style-s-"] > h2 { font-size: var(--heading-h2); }
	.c-sekcje .has-lead-font-size,
	.c-sekcje p.is-style-lead { font-size: var(--txt-lead); line-height: var(--leading-lead); }

	/* Strona tekstowa (polityka prywatności): nagłówki o stopień mniejsze, listy z punktorami. */
	.c-sekcje > h2 { margin-block-start: 3rem; font-size: var(--heading-h4); line-height: var(--leading-h4); }
	.c-sekcje > h3 { margin-block-start: 2rem; font-size: var(--heading-h5); }
	.c-sekcje > :is(p, ul, ol) { color: var(--c-text-2); }
	.c-sekcje > :is(p, ul, ol) a { color: var(--c-text); }

	/* Pas zdjęcia W-PAR (core/image is-style-pas): 1376 x 560, promień 12; paralaksa osią przewijania, bez skryptu. */
	.c-sekcje .wp-block-image.is-style-pas { overflow: hidden; height: clamp(15rem, 10.6rem + 18vw, 35rem); margin-block: 0; border-radius: var(--radius); }
	.c-sekcje .wp-block-image.is-style-pas img { width: 100%; height: 124%; object-fit: cover; border-radius: 0; }
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.c-sekcje .wp-block-image.is-style-pas img { animation: pas-paralaksa linear both; animation-timeline: view(); }
		}
	}
	@keyframes pas-paralaksa { from { transform: translateY(-12%); } to { transform: translateY(0); } }

	.c-sekcje > .wp-block-image.is-style-pas { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-block: 0 var(--section-space); }

	@media (max-width: 47.999em) {
		.c-sekcje .wp-block-image.is-style-pas { height: 15rem; }
	}
}

/*
 * Część 2: sekcje strony głównej (Figma 18:2, spec-strona-glowna E1-E7).
 */
@layer components {
	/* Bloki ACF na całą szerokość (hero, liczby) bez wcięcia pasa. */
	.c-sekcje > :is(.c-hero, .c-liczby) { width: 100%; max-width: none; margin-block: 0; }

	/* ---------- E1 Hero z pokazem zdjęć: 1440 x 900, gradient granat 900, treść 1000 px na środku ---------- */
	.c-hero {
		--c-fokus-na-tle: var(--brand-white);
		--c-text: var(--brand-white);
		position: relative;
		display: grid;
		place-items: center;
		height: 100svh;
		min-height: 40rem;
		max-height: 75rem;
		padding: calc(var(--avg-naglowek-wys, 6rem) + var(--wp-admin--admin-bar--height, 0px)) var(--gutter) 5rem;
		overflow: hidden;
		background: var(--c-deep);
		color: var(--c-on-dark);
		isolation: isolate;
	}
	.c-hero__slajdy { position: absolute; inset: 0; z-index: -2; }
	.c-hero__zdjecie {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 1s ease-out;
	}
	.c-hero__zdjecie.is-aktywny { opacity: 1; }
	/* Gradient pod nocne zdjęcie z Figmy, środek mocniejszy (0,45 zamiast 0,2) dla dziennych slajdów 2-6 (spec E1). */
	.c-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgb(38 38 69 / 0.55) 0%, rgb(38 38 69 / 0.45) 35%, rgb(38 38 69 / 0.92) 100%);
	}
	.c-hero__tresc { width: min(100%, 62.5rem); text-align: center; }
	/* ACF opakowuje bloki wewnętrzne w .acf-innerblocks-container: układ siatki na opakowaniu. */
	.c-hero__tresc > .acf-innerblocks-container { display: grid; justify-items: center; gap: 1.75rem; }
	.c-hero__tresc h1 { color: var(--c-on-dark); font-size: var(--heading-display); line-height: var(--leading-display); letter-spacing: var(--track-display); }
	.c-hero__tresc p { max-width: 37.5rem; color: rgb(255 255 255 / 0.85); font-size: var(--txt-lead); line-height: var(--leading-lead); }
	.c-hero__tresc .wp-block-buttons { justify-content: center; color: var(--c-on-dark); }
	.c-hero__sterowanie {
		position: absolute;
		right: max(var(--gutter), (100% - var(--wrap-wide)) / 2);
		bottom: 2.5rem;
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}
	.c-hero__kreska,
	.c-hero__pauza {
		display: grid;
		place-items: center;
		min-width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}
	/* Kreski równej długości, aktywna zmienia tylko kolor (Marcin 22.10: rozszerzanie aktywnej wyglądało dziwnie). */
	.c-hero__kreska { min-width: 2.25rem; }
	.c-hero__kreska::before { content: ""; width: 1.75rem; height: 2px; background: rgb(255 255 255 / 0.4); transition: background-color 0.4s ease-out; }
	.c-hero__kreska:hover::before { background: rgb(255 255 255 / 0.7); }
	.c-hero__kreska.is-aktywna::before { background: var(--brand-white); }
	.c-hero__pauza { margin-inline-end: 0.5rem; color: var(--brand-white); }
	.c-hero__pauza-ikona { width: 0.625rem; height: 0.75rem; border-inline: 3px solid currentColor; }
	.c-hero__pauza[aria-pressed="true"] .c-hero__pauza-ikona { width: 0; height: 0; border-inline: 0; border-block: 0.375rem solid transparent; border-inline-start: 0.625rem solid currentColor; }
	:is(.c-hero__kreska, .c-hero__pauza):focus-visible { outline: 2px solid var(--brand-white); outline-offset: 2px; }

	@media (max-width: 47.999em) {
		.c-hero { place-items: end start; padding: calc(4.5rem + var(--wp-admin--admin-bar--height, 0px)) var(--gutter) 4.5rem; }
		.c-hero__zdjecie { object-position: var(--hero-kadr, 50%) 50%; }
		.c-hero::before { background: linear-gradient(180deg, rgb(38 38 69 / 0.4) 0%, rgb(38 38 69 / 0.35) 30%, rgb(38 38 69 / 0.95) 100%); }
		.c-hero__tresc { text-align: start; }
		.c-hero__tresc > .acf-innerblocks-container { justify-items: stretch; gap: 1.25rem; }
		.c-hero__tresc h1 { line-height: 1.08; letter-spacing: -0.03em; }
		.c-hero__tresc .wp-block-buttons { justify-content: stretch; }
		.c-hero__sterowanie { left: var(--gutter); right: auto; bottom: 1.25rem; }
	}

	/* ---------- E2 Wstęp wyśrodkowany: H (styl H1) 1000 px, akapit B1 760 px ---------- */
	.c-sekcje .is-style-s-wstep { display: grid; justify-items: center; gap: 2rem; text-align: center; }
	.c-sekcje--start > .is-style-s-wstep:nth-child(2) { padding-block-start: 10rem; }   /* pod hero 160 (section_home-about) */
	.c-sekcje .is-style-s-wstep > :is(h1, h2) { max-width: 62.5rem; font-size: var(--heading-h1); line-height: 1.0625; letter-spacing: var(--track-h1); }
	.c-sekcje .is-style-s-wstep > p { max-width: var(--wrap-text); font-size: var(--txt-lead); line-height: var(--leading-lead); }
	.c-sekcje .is-style-s-wstep > figure { width: 100%; max-width: none; margin-block-start: 1.5rem; }
	@media (max-width: 47.999em) {
		.c-sekcje .is-style-s-wstep { justify-items: start; text-align: start; }
		.c-sekcje--start > .is-style-s-wstep:nth-child(2) { padding-block-start: 5rem; }
	}

	/* ---------- E4 Firma w liczbach: granat 800, H2 po lewej, siatka 2 x 2 ---------- */
	.c-liczby {
		--c-fokus-na-tle: var(--brand-white);
		display: flex;
		flex-wrap: wrap;
		gap: 3rem 6rem;
		padding: var(--section-space) max(var(--gutter), (100% - var(--wrap-wide)) / 2);
		background: var(--c-dark);
		color: var(--c-on-dark-2);
	}
	.c-liczby__naglowek { flex: 1 1 15rem; }
	.c-liczby__naglowek h2 { max-width: 20rem; color: var(--c-on-dark); font-size: var(--heading-h2); line-height: 1.154; letter-spacing: var(--track-h2); }
	.c-liczby__siatka { flex: 1 1 36rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 2rem; max-width: 60rem; }
	.c-liczba { display: grid; align-content: start; gap: 0.75rem; padding-block-start: 2.25rem; border-block-start: 1px solid var(--c-line-on-dark); }
	.c-liczba__przed { color: var(--c-on-dark-2); }
	.c-liczba__wartosc { color: var(--c-on-dark); font-family: var(--font-heading); font-size: clamp(3.5rem, 5.4vw, 5.5rem);   /* 56 na telefonie, 88 od 1630; przy 1366 komórka mieści „40 000 m³” */ line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
	.c-liczba__opis { max-width: 23.75rem; color: var(--c-on-dark-2); font-size: var(--txt-lead); line-height: var(--leading-lead); }
	@media (max-width: 47.999em) {
		.c-liczby { flex-direction: column; gap: 3rem; }
		.c-liczby__naglowek, .c-liczby__siatka { flex: none; }
		.c-liczby__siatka { grid-template-columns: 1fr; gap: 2.5rem; }
		.c-liczba { padding-block-start: 1.5rem; }
	}

	/* ---------- E5 Specjalizacje: nagłówek na środku, siatka 3 x 2 kart 340 wys., ikona 112 ---------- */
	.c-sekcje .is-style-s-specjalizacje { display: grid; justify-items: center; gap: 4rem; }
	.c-sekcje .is-style-s-specjalizacje > .wp-block-group:first-child { display: grid; justify-items: center; gap: 1.25rem; max-width: 56.25rem; text-align: center; }
	.c-sekcje .is-style-s-specjalizacje > .wp-block-group:first-child p { max-width: 40rem; font-size: var(--txt-lead); line-height: var(--leading-lead); }
	/* Odstępy rdzenia (układ „flow”, 24 px nad drugim i kolejnym dzieckiem) zerowane: rytm daje gap siatki. */
	.c-sekcje :is(.is-style-s-wstep, .is-style-s-specjalizacje, .is-style-siatka-kart, .is-style-karta-spec, .is-style-s-oferta, .is-style-s-oferta > .wp-block-group, .is-style-s-powody) > * { margin-block: 0; }
	.c-sekcje .is-style-siatka-kart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; }
	.c-sekcje .is-style-karta-spec {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		min-height: 21.25rem;
		padding: 2rem;
		background: var(--c-bg-soft);
		border-radius: var(--radius);
		text-align: center;
	}
	.c-sekcje .is-style-karta-spec::after { content: ""; height: 1.5rem; }   /* pusty dół wyrównuje ikonę (Figma) */
	.c-sekcje .is-style-karta-spec :is(h3, h4) { max-width: 20rem; font-size: var(--heading-h5); line-height: 1.25; letter-spacing: var(--track-h5); }
	.c-sekcje .is-style-karta-spec .c-start-ikona { width: 7rem; height: 7rem; color: var(--c-text); }
	.c-sekcje .is-style-karta-spec .c-start-ikona * { vector-effect: non-scaling-stroke; }
	.c-sekcje .is-style-s-specjalizacje > .wp-block-buttons { justify-content: center; color: var(--c-text); }
	@media (max-width: 63.999em) {
		.c-sekcje .is-style-siatka-kart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (max-width: 47.999em) {
		.c-sekcje .is-style-s-specjalizacje { justify-items: stretch; gap: 2.5rem; }
		.c-sekcje .is-style-s-specjalizacje > .wp-block-group:first-child { justify-items: start; text-align: start; }
		/* Telefon: lista, nie slider: wszystkie sześć nazw widać od razu (PRODUCT.md zasada 3). */
		.c-sekcje .is-style-siatka-kart { grid-template-columns: 1fr; gap: 0.75rem; }
		.c-sekcje .is-style-karta-spec { flex-direction: row-reverse; justify-content: flex-end; gap: 1.5rem; min-height: 5.75rem; padding: 1.25rem 1.5rem; text-align: start; }
		.c-sekcje .is-style-karta-spec::after { display: none; }
		.c-sekcje .is-style-karta-spec .c-start-ikona { flex: none; width: 3.5rem; height: 3.5rem; }
	}

	/* ---------- E6 Oferta: lewa kolumna przyklejona 560, talia kart 684 x 544 ze szkłem ---------- */
	.c-sekcje .is-style-s-oferta { display: grid; grid-template-columns: minmax(0, 35rem) minmax(0, 42.75rem); justify-content: space-between; align-items: start; gap: 3rem 8.25rem; }
	.c-sekcje .is-style-s-oferta > :first-child {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem + 2rem);
		display: grid;
		gap: 1.75rem;
	}
	.c-sekcje .is-style-s-oferta > :first-child p { max-width: 30rem; }
	.c-sekcje .is-style-s-oferta > :last-child { display: grid; gap: 1rem; }
	.c-sekcje .wp-block-cover.is-style-karta-szklo {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem + 2rem + var(--i, 0) * 1rem);
		justify-content: flex-start;
		align-items: flex-end;
		min-height: 34rem;
		margin: 0;
		padding: 1rem;
		overflow: hidden;
		border-radius: var(--radius);
	}
	.c-sekcje .is-style-karta-szklo:nth-child(2) { --i: 1; }
	.c-sekcje .is-style-karta-szklo:nth-child(3) { --i: 2; }
	.c-sekcje .is-style-karta-szklo:nth-child(4) { --i: 3; }
	.c-sekcje .is-style-karta-szklo .wp-block-cover__image-background { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
	.c-sekcje .is-style-karta-szklo:hover .wp-block-cover__image-background { transform: scale(1.04); }
	.c-sekcje .is-style-karta-szklo .wp-block-cover__background { background-color: rgb(38 38 69) !important; opacity: 0.15 !important; }
	.c-sekcje .is-style-karta-szklo .wp-block-cover__inner-container {
		--c-text: var(--brand-white);
		--c-fokus-na-tle: var(--brand-white);
		display: grid;
		gap: 0.75rem;
		width: 100%;
		padding: 1.5rem;
		color: rgb(255 255 255 / 0.88);
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
		border-radius: var(--radius);
		box-shadow: inset 0 0 0 1px var(--glass-line);
	}
	@supports not (backdrop-filter: blur(1px)) {
		.c-sekcje .is-style-karta-szklo .wp-block-cover__inner-container { background: rgb(38 38 69 / 0.85); }
	}
	/* Układ „constrained” rdzenia centruje dzieci i ogranicza ich szerokość: w szkle wszystko od lewej, na całą szerokość. */
	.c-sekcje .is-style-karta-szklo .wp-block-cover__inner-container { text-align: start; }
	.c-sekcje .is-style-karta-szklo .wp-block-cover__inner-container > * { max-width: none; margin: 0; }
	.c-sekcje .is-style-karta-szklo :is(h3, h4) { color: var(--brand-white); font-size: var(--heading-h4); line-height: var(--leading-h4); letter-spacing: var(--track-h4); }
	.c-sekcje .is-style-karta-szklo p { color: rgb(255 255 255 / 0.88); }
	.c-sekcje .is-style-karta-szklo a { color: var(--brand-white); }
	/* Cała karta jest odnośnikiem: link „Więcej informacji” rozciągnięty na kartę. */
	.c-sekcje .is-style-karta-szklo .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
	.c-sekcje .is-style-karta-szklo .wp-block-button__link:focus-visible { outline: 0; }
	.c-sekcje .is-style-karta-szklo:has(.wp-block-button__link:focus-visible) { outline: 2px solid var(--c-text); outline-offset: 3px; }
	@media (max-width: 63.999em) {
		.c-sekcje .is-style-s-oferta { grid-template-columns: 1fr; }
		.c-sekcje .is-style-s-oferta > :first-child { position: static; }
		.c-sekcje .wp-block-cover.is-style-karta-szklo { position: relative; top: auto; }
	}
	@media (max-width: 47.999em) {
		/* Przycisk „Poznaj ofertę” pod kartami (szkic 22:2): przycisk nad czterema kartami odsyła, zanim karty zostaną pokazane. */
		.c-sekcje .is-style-s-oferta { display: flex; flex-direction: column; gap: 2rem; }
		.c-sekcje .is-style-s-oferta > :first-child { display: contents; }
		.c-sekcje .is-style-s-oferta > :first-child > .wp-block-buttons { order: 3; }
		.c-sekcje .is-style-s-oferta > :last-child { order: 2; gap: 0.75rem; }
		.c-sekcje .wp-block-cover.is-style-karta-szklo { min-height: 27.5rem; padding: 0.75rem; }
		.c-sekcje .is-style-karta-szklo .wp-block-cover__inner-container { padding: 1.25rem; }
	}

	/* ---------- E7 Dlaczego warto: przyklejony H2 po lewej, lista z liniami Lora H4 ---------- */
	.c-sekcje .is-style-s-powody { display: grid; grid-template-columns: minmax(0, 35rem) minmax(0, 42.75rem); justify-content: space-between; align-items: start; gap: 2rem 8.25rem; }
	.c-sekcje .is-style-s-powody > h2 { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem + 2rem); }
	.c-sekcje .wp-block-list.is-style-lista-linie { margin: 0; padding: 0; list-style: none; }
	.c-sekcje .wp-block-list.is-style-lista-linie li {
		margin: 0;
		padding-block: 1.75rem;
		color: var(--c-text);
		font-family: var(--font-heading);
		font-size: var(--heading-h4);
		line-height: var(--leading-h4);
		letter-spacing: var(--track-h4);
		border-block-start: 1px solid var(--c-line);
	}
	.c-sekcje .wp-block-list.is-style-lista-linie li:first-child { padding-block-start: 0; border-block-start: 0; }
	@media (max-width: 63.999em) {
		.c-sekcje .is-style-s-powody { grid-template-columns: 1fr; }
		.c-sekcje .is-style-s-powody > h2 { position: static; }
		.c-sekcje .wp-block-list.is-style-lista-linie li { padding-block: 1.25rem; }
	}
}