/* Podstrona /ausstattung/ — czytelność paska kotwic w hero.
 *
 * Pasek „Rahmen & Wandaufbau ↓ · Fassade ↓ · …" korzysta z komponentu
 * `.mh-category-link`, pożyczonego ze strony głównej. Problem w tym, że sam
 * komponent jest zdefiniowany WYŁĄCZNIE pod `body.page-id-7013`
 * (assets/css/startseite-test-animations.css) — tutaj klasa nie łapała żadnego
 * stylu, więc linki spadały do domyślnego złota motywu (#C8A96E, waga 400)
 * i lądowały na jasnym zdjęciu wnętrza. Kontrast ~2:1, praktycznie nie do
 * odczytania.
 *
 * Zamiast samego przemalowania robimy z nich kafelki na półprzezroczystej
 * bieli: pasek czyta się wtedy niezależnie od tego, w które miejsce zdjęcia
 * trafi, i przeżyje podmianę fotografii przez klientkę.
 *
 * Duplikacja definicji komponentu jest świadoma i tymczasowa — przy trzecim
 * użyciu `.mh-category-link` trzeba go wyjąć do wspólnego pliku zamiast kopiować
 * po raz kolejny.
 */

body.page-id-8147 .mh-category-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	background: rgba(255, 255, 255, .92);
	color: #0F1923;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-bottom: 2px solid #C8A96E;
	transition: background .25s ease, gap .25s ease, color .25s ease;
}

body.page-id-8147 .mh-category-link:hover,
body.page-id-8147 .mh-category-link:focus-visible {
	background: #FFFFFF;
	color: #8C6C35;
	gap: 14px;
}

/* Strzałka jest ozdobą kierunku, nie treścią — może być cichsza od etykiety. */
body.page-id-8147 .mh-category-link span[aria-hidden] {
	color: #A88750;
}

/**
 * Przyciemnienie zdjęcia w hero. Wzorzec miał białą nakładkę 0,65 — dobraną
 * pod ciemniejsze zdjęcie. Aktualna fotografia to jasne wnętrze z oknem
 * i śniegiem, więc nadtytuł „Ausstattung" i H1 traciły kontrast w lewej
 * części kadru.
 *
 * Selektor celuje w PIERWSZY kontener strony, a nie w wygenerowane
 * `elementor-element-a8a8a1f` — tamto ID zmienia się przy każdej przebudowie
 * strony skryptem.
 */
body.page-id-8147 [data-elementor-type="wp-page"] > *:first-child::before {
	opacity: .78 !important;
}

/**
 * Nadtytuł „Ausstattung" motyw renderował jako szary tekst 16 px (#626B72) —
 * na jasnym zdjęciu ledwo widoczny. Ustawiamy go tak, jak wyglądają nadtytuły
 * na pozostałych stronach procesowych: ciemne złoto, wersaliki, rozstrzelenie.
 *
 * `:not(h1)` jest tu istotne. Bez tego reguła łapała także H1 i trzeba było
 * przywracać mu typografię drugą regułą — a przy okazji `letter-spacing: normal`
 * kasowało ujemne rozstrzelenie z motywu, przez co nagłówek robił się szerszy
 * i łamał na dwie linie.
 */
body.page-id-8147 [data-elementor-type="wp-page"] > *:first-child .elementor-heading-title:not(h1) {
	color: #A88750;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
}

/**
 * Pasek kotwic musi się zawijać.
 *
 * Kontener z Elementora (`.e-div-block-base`, nowy „atomic element") ma
 * `flex-wrap: nowrap` i odstęp 32 px. Na desktopie
 * siedem kafelków mieści się w jednym rzędzie, ale przy 390 px wchodziły
 * w 358 px szerokości i etykiety zostawały ucięte w połowie słowa:
 * „Rahmen Wandau…", „Fassa", „Elektro", „Heizu", „Küch".
 * Zawijanie nic nie zmienia na desktopie, a na telefonie robi z tego czytelną
 * siatkę kafelków zamiast przyciętego paska.
 */
body.page-id-8147 [data-elementor-type="wp-page"] > *:first-child .e-div-block-base {
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 1024px) {
	body.page-id-8147 [data-elementor-type="wp-page"] > *:first-child .e-div-block-base {
		gap: 10px;
	}
}

@media (max-width: 767px) {
	body.page-id-8147 .mh-category-link {
		padding: 9px 12px;
		font-size: 14px;
	}
}