/*
 * Podstrony PDM (spec-podstrony C do J; Figma 28:2, 29:2, 30:2, 32:2, 32:173). Ładowany po sekcje.css,
 * w kanwie edytora z .c-sekcje zamienionym na .is-root-container (inc/pdm.php, inc/editor.php).
 *
 * Sekcja = grupa rdzenia is-style-s-<nazwa> (pas, wcięcie i odstęp 120/80 z sekcje.css). W środku zwykłe bloki:
 * nagłówek, akapit (B1 = rozmiar „Duży”, B2 = zwykły), kolumny, obraz, przyciski i bloki ACF z blocks/.
 * Układ kolumn liczymy tu, nie w edytorze: kolumny rdzenia stoją obok siebie od 62em (992 px), niżej w pionie.
 * Rdzeń narzuca w warstwie `wp` flex-wrap i align-items z !important, więc wyrównanie robi align-self kolumn.
 *
 * Miary z Figmy 1440: odstęp kolumn 116 (manifest 132), nagłówek sekcji do treści 64 (kroki 72), karty 16.
 * Telefon 390: projekt ze specyfikacji (B6, C1, D1, D2, E1, E4, H3, J1 do J6), nie zawężenie.
 */

@layer components {
	/* ---------- Wspólne wnętrze sekcji ---------- */
	/* Tylko sekcje podstron (strona główna ma własne style w sekcje.css). */
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-wprowadzenie, .is-style-s-kroki, .is-style-s-kroki-bez-numerow, .is-style-s-karty, .is-style-s-manifest, .is-style-s-modele, .is-style-s-lista-ikon, .is-style-s-stanowiska, .is-style-s-formularz) p.has-duzy-font-size { font-size: var(--txt-lead); line-height: var(--leading-lead); }
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-wprowadzenie, .is-style-s-kroki, .is-style-s-kroki-bez-numerow, .is-style-s-karty, .is-style-s-manifest, .is-style-s-modele, .is-style-s-lista-ikon, .is-style-s-stanowiska, .is-style-s-formularz) :is(h2, h3, p) { margin: 0; }
	/* Układ „flow” rdzenia daje każdej grupie poza pierwszą odstęp 24 px u góry; rytm liczą siatki niżej. */
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-wprowadzenie, .is-style-s-kroki, .is-style-s-kroki-bez-numerow, .is-style-s-karty, .is-style-s-manifest, .is-style-s-modele, .is-style-s-lista-ikon, .is-style-s-stanowiska, .is-style-s-formularz) :is(.wp-block-group, .wp-block-columns, .wp-block-buttons, ul) { margin-block: 0; }
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-wprowadzenie, .is-style-s-lista-ikon) .wp-block-image { margin: 0; }
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-lista-ikon) .wp-block-image img { width: 100%; object-fit: cover; border-radius: var(--radius); }
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-modele) .wp-block-buttons { margin: 0; }
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-manifest, .is-style-s-lista-ikon, .is-style-s-stanowiska, .is-style-s-formularz) .wp-block-columns { flex-direction: column; gap: 2rem; margin: 0; }
	.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-manifest, .is-style-s-lista-ikon, .is-style-s-stanowiska, .is-style-s-formularz) .wp-block-column { display: flex; flex-direction: column; gap: 1.25rem; }
	@media (min-width: 62em) {
		.c-sekcje :is(.is-style-s-tekst-zdjecie, .is-style-s-manifest, .is-style-s-lista-ikon, .is-style-s-stanowiska, .is-style-s-formularz) .wp-block-columns {
			flex-direction: row;
			gap: clamp(4rem, -3.3rem + 11.8vw, 7.25rem);
		}
	}

	/* ---------- Tekst i zdjęcie (AA-03, AB-05, IDX-04 z kartą zdjęciową) ---------- */
	.c-sekcje .is-style-s-tekst-zdjecie .wp-block-column { align-self: center; width: 100%; }
	.c-sekcje .is-style-s-tekst-zdjecie .wp-block-column > h2 { margin-block-end: 0.25rem; }
	.c-sekcje .is-style-s-tekst-zdjecie .wp-block-column > .wp-block-buttons { margin-block-start: 0.75rem; }
	.c-sekcje .is-style-s-tekst-zdjecie .wp-block-image img { height: 18.75rem; }                 /* 390: 358 x 300 */
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-tekst-zdjecie .wp-block-image img { height: 37.5rem; }             /* 600 */
		.c-sekcje .is-style-s-tekst-zdjecie .wp-block-column:has(> h2) { max-width: 38.75rem; }   /* tekst 620 */
	}

	/* ---------- Wprowadzenie wyśrodkowane (IDX-02; O nas z panoramą, Kariera bez zdjęcia) ---------- */
	.c-sekcje .is-style-s-wprowadzenie { display: flex; flex-direction: column; gap: 1.75rem; }
	.c-sekcje .is-style-s-wprowadzenie > h2 { max-width: 62.5rem; }
	.c-sekcje .is-style-s-wprowadzenie > p { max-width: var(--wrap-text); }
	.c-sekcje .is-style-s-wprowadzenie > h2.is-style-duzy { font-size: var(--heading-h1); line-height: 1.0625; letter-spacing: var(--track-h1); max-width: 68.75rem; }
	.c-sekcje .is-style-s-wprowadzenie > .wp-block-image { margin-block-start: 1.5rem; }
	/* Łamanie po „zaufanie.” tylko od 48em (spec C4: na telefonie wyłączone). */
	@media (max-width: 47.999em) {
		.c-sekcje .is-style-s-wprowadzenie > h2 br { display: none; }
	}
	@media (min-width: 48em) {
		.c-sekcje .is-style-s-wprowadzenie { align-items: center; text-align: center; }
		.c-sekcje .is-style-s-wprowadzenie > .wp-block-image { align-self: stretch; margin-block-start: 3.5rem; }
	}

	/* ---------- Kroki (SV-06): numery z licznika CSS, wariant bez numerów (Kariera) ---------- */
	.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > h2 { max-width: 50rem; margin-block-end: 2.5rem; }
	.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group {
		display: grid;
		gap: 1.5rem;
		counter-reset: krok;
	}
	.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group > .wp-block-group {
		display: grid;
		grid-template-columns: 3rem 1fr;
		column-gap: 1rem;
		row-gap: 0.5rem;
		align-content: start;
		padding-block-start: 1.5rem;
		border-block-start: 1px solid var(--c-line);
		counter-increment: krok;
	}
	.c-sekcje .is-style-s-kroki > .wp-block-group > .wp-block-group::before {
		content: counter(krok);
		grid-row: span 2;
		color: rgb(255 255 255 / 0.45);       /* 3,48 na primary-800, tekst duży: próg 3 */
		font-family: var(--font-heading);
		font-size: 2.25rem;
		line-height: 1.1;
	}
	.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group > .wp-block-group > * { grid-column: 2; }
	.c-sekcje .is-style-s-kroki-bez-numerow > .wp-block-group > .wp-block-group { grid-template-columns: 1fr; }
	.c-sekcje .is-style-s-kroki-bez-numerow > .wp-block-group > .wp-block-group > * { grid-column: 1; }
	.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) h3 { font-size: var(--heading-h5); line-height: 1.25; letter-spacing: var(--track-h5); }
	.c-sekcje .is-style-s-kroki-bez-numerow h3 { font-size: var(--heading-h4); line-height: var(--leading-h4); }
	.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) h3 + p { font-size: 1rem; line-height: 1.625; }
	@media (min-width: 62em) {
		.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > h2 { margin-block-end: 4.5rem; }
		.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2rem; }
		.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group:has(> :nth-child(5)) { gap: 1.5rem; }
		.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group > .wp-block-group { grid-template-columns: 1fr; row-gap: 1rem; }
		.c-sekcje :is(.is-style-s-kroki, .is-style-s-kroki-bez-numerow) > .wp-block-group > .wp-block-group > * { grid-column: 1; }
		.c-sekcje .is-style-s-kroki > .wp-block-group > .wp-block-group::before { grid-row: auto; font-size: var(--heading-h2); line-height: 1.154; }
	}

	/* ---------- Karty tekstowe (AC-07): siatka 3 x 2, karty białe na primary-50 ---------- */
	.c-sekcje .is-style-s-karty > h2 { max-width: 56.25rem; margin-block-end: 2.5rem; }
	.c-sekcje .is-style-s-karty > .wp-block-group { display: grid; gap: 0.75rem; }
	.c-sekcje .is-style-s-karty > .wp-block-group > .wp-block-group {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1.5rem;
		background: var(--brand-white);
		border-radius: var(--radius);
	}
	.c-sekcje .is-style-s-karty h3 { font-size: var(--heading-h4); line-height: var(--leading-h4); letter-spacing: var(--track-h4); }
	.c-sekcje .is-style-s-karty h3 + p { font-size: 1rem; line-height: 1.625; }
	@media (min-width: 48em) {
		.c-sekcje .is-style-s-karty > .wp-block-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
		.c-sekcje .is-style-s-karty > .wp-block-group > .wp-block-group { padding: 2rem 2rem 2.5rem; }
	}
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-karty > h2 { margin-block-end: 4rem; }
		.c-sekcje .is-style-s-karty > .wp-block-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	/* ---------- Manifest (SV-02): nagłówek 320 obok, akapit Lora 32/38 i akapit B1 ---------- */
	.c-sekcje .is-style-s-manifest h2 { font-size: var(--heading-h5); line-height: 1.25; letter-spacing: var(--track-h5); }
	.c-sekcje .is-style-s-manifest .wp-block-column:last-child { gap: 1.75rem; }
	.c-sekcje .is-style-s-manifest .wp-block-column:last-child > p:first-child {
		color: var(--c-text);
		font-family: var(--font-heading);
		font-size: var(--heading-h5);
		line-height: 1.333;
		letter-spacing: -0.01em;
	}
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-manifest .wp-block-columns { gap: 8.25rem; }
		.c-sekcje .is-style-s-manifest .wp-block-column:first-child { flex: 0 0 20rem; }
		.c-sekcje .is-style-s-manifest h2 { font-size: var(--heading-h4); line-height: var(--leading-h4); letter-spacing: var(--track-h4); }
		.c-sekcje .is-style-s-manifest .wp-block-column:last-child > p:first-child { font-size: var(--heading-h4); line-height: var(--leading-h4); }
	}
	/* Manifest tuż przed wezwaniem „Masz plan inwestycji?” ma dolny odstęp z wezwania (Figma 30:160). */
	.c-sekcje > .is-style-s-manifest:last-child:not(.has-background) { padding-block-end: 0; }

	/* ---------- Modele współpracy (HB-03): nagłówek w rzędzie, karty (blok avg/modele), ciemny pas ---------- */
	.c-sekcje .is-style-s-modele { display: flex; flex-direction: column; gap: 2.5rem; }
	.c-sekcje .is-style-s-modele > .wp-block-group:first-child { display: flex; flex-direction: column; gap: 1rem; }
	.c-sekcje .is-style-s-modele > .wp-block-group.has-background {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: 1.5rem;
		border-radius: var(--radius);
	}
	.c-sekcje .is-style-s-modele > .wp-block-group.has-background > .wp-block-group { display: flex; flex-direction: column; gap: 0.625rem; }
	.c-sekcje .is-style-s-modele > .wp-block-group.has-background h3 { font-size: var(--heading-h4); line-height: var(--leading-h4); letter-spacing: var(--track-h4); }
	.c-sekcje .is-style-s-modele > .wp-block-group.has-background p { color: rgb(255 255 255 / 0.8); }   /* 7,36 */
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-modele { gap: 4rem; }
		.c-sekcje .is-style-s-modele > .wp-block-group:first-child { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 4rem; }
		.c-sekcje .is-style-s-modele > .wp-block-group:first-child > h2 { max-width: 43.75rem; }
		.c-sekcje .is-style-s-modele > .wp-block-group:first-child > p { max-width: 27.5rem; }
		.c-sekcje .is-style-s-modele > .wp-block-group.has-background { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem 2.5rem; }
		.c-sekcje .is-style-s-modele > .wp-block-group.has-background > .wp-block-group { max-width: 47.5rem; }
	}

	/* ---------- Lista z ikonami (IDX-04): lewa kolumna przyklejona, zdjęcie tylko od 48em ---------- */
	.c-sekcje .is-style-s-lista-ikon .wp-block-column:first-child > .wp-block-image { display: none; }
	@media (min-width: 48em) {
		.c-sekcje .is-style-s-lista-ikon .wp-block-column:first-child > .wp-block-image { display: block; margin-block-start: 0.25rem; }
		.c-sekcje .is-style-s-lista-ikon .wp-block-column:first-child > .wp-block-image img { height: 26.25rem; }   /* 560 x 420 */
	}
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-lista-ikon .wp-block-column:first-child {
			position: sticky;
			top: calc(var(--avg-naglowek-wys, 6rem) + 1.5rem);
			flex: 0 0 35rem;
			align-self: flex-start;
			gap: 1.5rem;
		}
		.c-sekcje .is-style-s-lista-ikon .wp-block-column:last-child { align-self: flex-start; }
	}

	/* ---------- Stanowiska (CR-02): lewa 560, lista po prawej ---------- */
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-stanowiska .wp-block-column:first-child { flex: 0 0 35rem; gap: 1.5rem; }
	}

	/* ---------- Formularz z opisem (CJ-02, CB-03): lewa 520, panel z formularzem CF7 ---------- */
	.c-sekcje .is-style-s-formularz { scroll-margin-block-start: var(--avg-naglowek-wys, 6rem); }
	.c-sekcje .is-style-s-formularz .wp-block-column:first-child { gap: 1.25rem; }
	.c-sekcje .is-style-s-formularz .wp-block-column:first-child :is(ul, li) { color: var(--c-text-2); font-size: 1rem; }
	.c-sekcje .is-style-s-formularz .wp-block-column:first-child ul.wp-block-list { margin: 0; }
	.c-sekcje .is-style-s-formularz .wp-block-column:first-child p.has-maly-font-size { font-size: 0.875rem; line-height: 1.43; }
	@media (min-width: 62em) {
		.c-sekcje .is-style-s-formularz .wp-block-column:first-child { flex: 0 0 32.5rem; align-self: flex-start; }
	}

	.c-sekcje .is-style-panel-formularza { padding: 1.25rem; border-radius: var(--radius); }
	@media (min-width: 48em) {
		.c-sekcje .is-style-panel-formularza { padding: 2.5rem; }
	}
	/* Pole kontrastuje z panelem: panel biały = pola primary-50, panel primary-50 = pola białe (spec I1, A5). */
	.c-sekcje .is-style-panel-formularza { --pole-tlo: var(--primary-50); }
	.c-sekcje .is-style-panel-formularza.has-tlo-spokojne-background-color { --pole-tlo: var(--brand-white); }

	/* Formularz CF7 w panelu: etykieta nad polem (Figma), zamiast pływających etykiet formularz.css. */
	.c-sekcje .is-style-panel-formularza .wpcf7-form { gap: 1.25rem; padding: 0; border: 0; }
	.c-sekcje .is-style-panel-formularza .c-form { gap: 1.25rem; }
	.c-sekcje .is-style-panel-formularza .c-form__row { gap: 1.25rem 1rem; }
	.c-sekcje .is-style-panel-formularza .c-form__field,
	.c-sekcje .is-style-panel-formularza .c-form--float .c-form__field { display: grid; gap: 0.5rem; }
	.c-sekcje .is-style-panel-formularza .c-form__field > label,
	.c-sekcje .is-style-panel-formularza .c-form--float .c-form__field > label,
	.c-sekcje .is-style-panel-formularza .c-form--float .c-form__field:is(:focus-within, .is-filled, :has(:autofill)) > label {
		position: static;
		max-width: none;
		padding: 0;
		background: none;
		color: rgb(56 58 112 / 0.8);              /* 5,9 na bieli */
		font-size: 0.875rem;
		line-height: 1.43;
		white-space: normal;
		transform: none;
		transition: none;
	}
	.c-sekcje .is-style-panel-formularza .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
		height: 3.25rem;
		padding: 0.875rem 1rem;
		background: var(--pole-tlo);
		border: 1px solid var(--c-field-border);
		border-radius: var(--radius-ui);
	}
	.c-sekcje .is-style-panel-formularza .wpcf7-form textarea.wpcf7-textarea { height: 9.5rem; min-height: 6rem; }
	.c-sekcje .is-style-panel-formularza .wpcf7-form :is(input, textarea):focus { border-color: var(--primary-500); box-shadow: inset 0 0 0 1px var(--primary-500); }
	.c-sekcje .is-style-panel-formularza .wpcf7-form :is(input, textarea):focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

	/* Pole pliku: przycisk „Wybierz plik” w obrysie pola, nazwa pliku obok. */
	.c-sekcje .is-style-panel-formularza .wpcf7-form input[type="file"] {
		width: 100%;
		min-height: 3.25rem;
		padding: 0.375rem;
		background: var(--pole-tlo);
		color: var(--c-text-2);
		font-size: 0.9375rem;
		border: 1px solid var(--c-field-border);
		border-radius: var(--radius-ui);
		cursor: pointer;
	}
	.c-sekcje .is-style-panel-formularza .wpcf7-form input[type="file"]::file-selector-button {
		min-height: 2.5rem;
		margin-inline-end: 1rem;
		padding: 0.5rem 1rem;
		background: var(--brand-white);
		color: var(--c-text);
		font: 500 0.9375rem/1.25 var(--font-text);
		border: 1px solid var(--c-text);
		border-radius: var(--radius-ui);
		cursor: pointer;
	}
	.c-sekcje .is-style-panel-formularza .c-form__hint { color: var(--c-text-2); font-size: 0.875rem; }
	.c-sekcje .is-style-panel-formularza .c-form__required { margin: 0; color: var(--c-text-2); font-size: 0.875rem; }

	.c-sekcje .is-style-panel-formularza .c-form__check label { gap: 0.75rem; color: var(--c-text-2); font-size: 0.875rem; line-height: 1.43; }
	.c-sekcje .is-style-panel-formularza .c-form__check a { color: var(--c-text); }
	.c-sekcje .is-style-panel-formularza .c-form__check input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-block-start: 0; accent-color: var(--primary-800); }

	/* Przycisk wysyłki: zwykły przycisk PDM (Figma), bez strzałki motyw-start i bez wysokości 60. */
	.c-sekcje .is-style-panel-formularza .c-form__submit .c-button,
	.c-sekcje .is-style-panel-formularza .c-form__submit input.c-button {
		min-width: 0;
		min-height: var(--touch);
		padding: 0.875rem 1.375rem;
		background-image: none;
	}
	@media (max-width: 47.999em) {
		.c-sekcje .is-style-panel-formularza .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"]) { height: 3.25rem; }
		.c-sekcje .is-style-panel-formularza .wpcf7-form input[type="file"]::file-selector-button { display: block; width: 100%; margin: 0 0 0.375rem; }
	}
	@media (min-width: 48em) {
		.c-sekcje .is-style-panel-formularza .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"]) { height: 3.5rem; }
		.c-sekcje .is-style-panel-formularza .wpcf7-form input[type="file"] { min-height: 3.5rem; }
	}

	/* ---------- Pas zdjęcia między dwiema białymi sekcjami (usługa: lista typów, pas, manifest) ---------- */
	.c-sekcje > .wp-block-image.is-style-pas + [class*="is-style-s-"]:not(.has-background) { padding-block-start: 0; }
}