/*
 * Strona główna z bloków rdzenia (etap 2 edytora, 1.10.2026, decyzja Marcina: edycja wprost w kanwie,
 * jak na pdmconstruction). Nagłówek i kafle to dziś grupy, nagłówki, akapity, przyciski i obraz
 * ze stylami bloków zarejestrowanymi w inc/strona-glowna.php:
 *   - grupa „Nagłówek strony głównej” (is-style-naglowek-startowy),
 *   - grupa „Sekcja z kaflami” (is-style-sekcja-kafli) i w niej grupy „Kafel” (is-style-kafel),
 *   - akapit „Czytaj więcej (etykieta kafla)” (is-style-czytaj-wiecej),
 *   - ikona kafla: mały blok ACF avg/ikona.
 * Wygląd przepisany 1:1 z dawnych bloków ACF hero i kafle (usunięte z motywu startowego).
 *
 * Warstwa components: style rdzenia (obraz, przyciski, grupa) stoją w warstwie `wp` (inc/assets.php), więc
 * reguły motywu wygrywają z nimi bez wychodzenia poza warstwę (do 22.10.2026 cały plik stał poza warstwą).
 * Selektory po strukturze (> .wp-block-group, > .wp-block-image, h1 + p), a nie po klasach
 * dopisanych do bloków: gdy redakcja podmieni zdjęcie albo wstawi nowy akapit, wygląd zostaje.
 */

/*
 * Grupa wstawiona ze wstawiacza dostaje układ „constrained”: rdzeń zawęża dzieci do contentSize i centruje je
 * przez margin-inline: auto !important. W naszych sekcjach układ trzyma siatka, więc to zdejmujemy.
 * Wcięcie w warstwie `base`, celowo: !important rdzenia stoi w warstwie `wp`, a przy !important wygrywa warstwa
 * WCZEŚNIEJSZA, więc z `components` ta deklaracja przegrałaby (sprawdzone zrzutem 22.10.2026). Jedyne !important
 * w tym pliku i jedyna deklaracja komponentu w `base`. Szerokość (zwykła deklaracja) zostaje w `components` niżej.
 */
@layer base {
	.wp-block-group:is(.is-style-naglowek-startowy, .is-style-sekcja-kafli, .is-style-kafel).is-layout-constrained > :not(.wp-block-image),
	.wp-block-group:is(.is-style-naglowek-startowy, .is-style-sekcja-kafli) .wp-block-group.is-layout-constrained > * {
		margin-inline: 0 !important;
	}
}

@layer components {
	/* ---------- Wspólne: sekcja na całą szerokość, treść w kontenerze 1138 px ----------
	 * Wcięcie liczone tak jak .l-wrap: min(100% - 2 * gutter, 1138 px), bez dodatkowego elementu. */
	.wp-block-group:is(.is-style-naglowek-startowy, .is-style-sekcja-kafli) {
		margin: 0;
		padding-block: var(--section-space);
		padding-inline: max(var(--gutter), (100% - var(--wrap-content)) / 2);
	}
	.wp-block-group.is-style-naglowek-startowy { background: var(--c-bg); } /* jak .c-hero; sekcja kafli bez tła, jak .c-tiles */
	.wp-block-group:is(.is-style-naglowek-startowy, .is-style-sekcja-kafli, .is-style-kafel).is-layout-constrained > :not(.wp-block-image),
	.wp-block-group:is(.is-style-naglowek-startowy, .is-style-sekcja-kafli) .wp-block-group.is-layout-constrained > * {
		max-width: none;   /* zawężenie do contentSize z układu „constrained”; wcięcie zdjęte wyżej, w warstwie base */
	}
	.wp-block-group:is(.is-style-naglowek-startowy, .is-style-sekcja-kafli, .is-style-kafel) > *,
	.wp-block-group.is-style-naglowek-startowy > .wp-block-group > *,
	.wp-block-group.is-style-sekcja-kafli > .wp-block-group > * {
		margin: 0;
	}

	/* ---------- Nagłówek strony głównej (dawny blok avg/hero) ---------- */
	.wp-block-group.is-style-naglowek-startowy {
		display: grid;
		gap: 3rem;
		align-items: center;
	}
	.wp-block-group.is-style-naglowek-startowy > .wp-block-group {
		display: grid;
		gap: 1.5rem;
		justify-items: start;
	}
	/* Numer projektu: akapit podpięty do „Dane serwisu” (Block Bindings), pierwszy w kolumnie tekstu. */
	.wp-block-group.is-style-naglowek-startowy > .wp-block-group > p:first-child {
		color: var(--c-accent-text);
		font-size: var(--txt-body-2);
		line-height: var(--leading-tight);
	}
	.wp-block-group.is-style-naglowek-startowy h1 { max-width: 18ch; }
	.wp-block-group.is-style-naglowek-startowy h1 + p { max-width: 36rem; color: var(--c-text-2); }

	/* Zdjęcie w ramie z pierwszej realizacji (dwa zaokrąglone rogi ze znaku klienta) i dwa kwadraty w kolorze akcentu;
	   u nowego klienta ramę zaprojektuj od nowa albo zostaw samo zdjęcie.
	   Kwadraty wystają o swój bok poza zdjęcie, więc zdjęcie zostawia im miejsce w kolumnie,
	   inaczej na telefonie są ucinane przy krawędzi ekranu. */
	.wp-block-group.is-style-naglowek-startowy > .wp-block-image {
		--kwadrat: 2.5rem;
		position: relative;
		justify-self: center;
		width: min(100% - 2 * var(--kwadrat), 21.1rem);
		margin: var(--kwadrat);
	}
	.wp-block-group.is-style-naglowek-startowy > .wp-block-image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 26% 0;
	}
	.wp-block-group.is-style-naglowek-startowy > .wp-block-image::before,
	.wp-block-group.is-style-naglowek-startowy > .wp-block-image::after {
		content: "";
		position: absolute;
		width: var(--kwadrat);
		aspect-ratio: 1;
		background: var(--c-accent-surface);
		border-radius: 17% 0 22% 0;
	}
	.wp-block-group.is-style-naglowek-startowy > .wp-block-image::before { top: calc(-1 * var(--kwadrat)); right: calc(-1 * var(--kwadrat)); }
	.wp-block-group.is-style-naglowek-startowy > .wp-block-image::after { bottom: calc(-1 * var(--kwadrat)); left: calc(-1 * var(--kwadrat)); transform: rotate(180deg); }

	/* Przycisk z edytora w nagłówku i grupach strony głównej: base.css (jedna reguła z przyciskiem w treści, 22.10.2026). */

	/* Telefon i tablet (jedna kolumna, do 70em): zdjęcie nad tekstem, nie pod nim (zasada 62). Rama ze zdjęciem
	   zostaje; pełny wzorzec (zdjęcie na pełną szerokość, panel nachodzi, trójkąt w wcięciu) wymaga zdjęcia bez ramy,
	   więc u nowego klienta, który ramy nie ma, przenieś go z subpages.css (.c-page-head--photo). */
	@media (max-width: 69.999em) {
		.wp-block-group.is-style-naglowek-startowy > .wp-block-image { order: -1; }
	}

	@media (max-width: 39.999em) {
		.wp-block-group.is-style-naglowek-startowy { gap: 1.5rem; }
	}

	@media (min-width: 70em) {
		.wp-block-group.is-style-naglowek-startowy {
			grid-template-columns: minmax(0, 1fr) auto;
			gap: 4rem;
			padding-block: 4.5rem;
		}
		.wp-block-group.is-style-naglowek-startowy h1 { max-width: none; } /* długa nazwa łamie się jak w projekcie, bez sztywnego limitu znaków */
		.wp-block-group.is-style-naglowek-startowy > .wp-block-image {
			--kwadrat: 3.75rem;
			width: 21.1rem;
			margin: var(--kwadrat) var(--kwadrat) var(--kwadrat) 0;
		}
	}

	/* ---------- Sekcja z kaflami (dawny blok avg/kafle) ----------
	 * Pierwsza grupa: nagłówek sekcji i zdanie obok. Grupa z kaflami: siatka 3/2/1 kolumny. */
	.wp-block-group.is-style-sekcja-kafli {
		display: grid;
		gap: 2rem;
	}
	.wp-block-group.is-style-sekcja-kafli > .wp-block-group:not(:has(> .is-style-kafel)) {
		display: grid;
		gap: 1rem 2rem;
		align-items: center;
	}
	.wp-block-group.is-style-sekcja-kafli > .wp-block-group:not(:has(> .is-style-kafel)) > p { color: var(--c-text-2); }
	.wp-block-group.is-style-sekcja-kafli > .wp-block-group:has(> .is-style-kafel) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
		gap: 1.25rem;
	}

	/* Kafel: cały klikalny (rozciągnięty odnośnik z tytułu), ramka zamiast cienia (DESIGN.md, prawo 5). */
	.wp-block-group.is-style-kafel {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin: 0;
		padding: 1.25rem 1.5rem;
		background: var(--c-bg);
		border: 1px solid var(--c-line);
		transition: border-color 0.2s ease-out;
	}
	.wp-block-group.is-style-kafel:hover { border-color: var(--c-accent-surface); }
	/* Ozdobnik obok tytułu (aria-hidden), więc pomarańcz z księgi mimo 2,74: WCAG 1.4.11 nie obejmuje grafik dekoracyjnych. */
	.wp-block-group.is-style-kafel .c-start-ikona { flex: none; width: 1.75rem; height: 1.75rem; color: var(--c-accent-surface); }
	.wp-block-group.is-style-kafel :is(h2, h3, h4) { font-size: var(--heading-h5); }
	.wp-block-group.is-style-kafel :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
	/* Rozciągnięty odnośnik: klik w dowolne miejsce kafla, fokus na obrysie całego kafla.
	   W kanwie edytora wyłączony (editor.css), inaczej nie dałoby się kliknąć w opis. */
	.wp-block-group.is-style-kafel :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; }
	.wp-block-group.is-style-kafel :is(h2, h3, h4) a:focus-visible { outline: none; }
	.wp-block-group.is-style-kafel:has(:is(h2, h3, h4) a:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
	.wp-block-group.is-style-kafel > p { color: var(--c-text-2); line-height: 1.5; }

	/* Etykieta „Czytaj więcej” ze strzałką (jak .c-more), zawsze na dole kafla. */
	.wp-block-group.is-style-kafel > p.is-style-czytaj-wiecej,
	p.is-style-czytaj-wiecej {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 1.5rem;
		color: var(--c-text);
		font-size: var(--txt-body-2);
		line-height: var(--leading-text);
	}
	.wp-block-group.is-style-kafel > p.is-style-czytaj-wiecej { margin-block-start: auto; }
	p.is-style-czytaj-wiecej::after {
		content: "";
		flex: none;
		width: 1rem;
		height: 1rem;
		background: var(--c-accent-text);
		-webkit-mask: url("../img/ikony/strzalka.svg") center / contain no-repeat;
		mask: url("../img/ikony/strzalka.svg") center / contain no-repeat;
		transition: transform 0.2s ease-out;
	}
	.wp-block-group.is-style-kafel:hover p.is-style-czytaj-wiecej { text-decoration: underline; }
	.wp-block-group.is-style-kafel:hover p.is-style-czytaj-wiecej::after { transform: translateX(0.25rem); }

	@media (min-width: 48em) {
		.wp-block-group.is-style-kafel { gap: 1.5rem; padding: 1.75rem; }
		.wp-block-group.is-style-sekcja-kafli > .wp-block-group:not(:has(> .is-style-kafel)) { grid-template-columns: 1fr minmax(0, 30rem); }
		.wp-block-group.is-style-sekcja-kafli > .wp-block-group:not(:has(> .is-style-kafel)) > p { justify-self: end; }
	}
}