/*
 * KD – Homepage fixes
 * ---------------------------------------------------------------------------
 * Drobne korekty wizualne strony głównej kubadzikowski.com, których nie da się
 * (lub nie warto) robić w panelu Elementora.
 *
 * Zakres na teraz:
 *  - Sekcja hero „Postaw na technologię SEO i AI-Driven": pomarańczowy dekor
 *    (pxl_image, layer-4.png), absolutnie pozycjonowany element
 *    `.elementor-element-0d1a2d6`. Na produkcji jest za duży i nachodzi na
 *    zdjęcie eksperta (Kuby). To element CZYSTO DEKORACYJNY w tle, więc:
 *      • desktop  → zmniejszamy i delikatnie odsuwamy (subtelne tło),
 *      • tablet/mobile → mocno zmniejszamy, a na telefonie chowamy całkowicie
 *        (absolutny dekor — ukrycie nie psuje layoutu treści).
 *
 * Założenia breakpointów:
 *  - desktop: powyżej 1024px (reguła bazowa),
 *  - tablet:  do 1024px włącznie (max-width: 1024px),
 *  - mobile:  do 767px włącznie (max-width: 767px) → dekor display:none.
 *
 * Uwaga: Elementor wstrzykuje własne, bardzo specyficzne reguły inline/per-ID
 * dla elementów absolutnych (width, transform, top/left). Dlatego część reguł
 * używa `!important`, by mieć pewność nadpisania bez gonienia za specyficznością.
 * ---------------------------------------------------------------------------
 */

/* ===== Desktop (baza): subtelny dekor, mniejszy i odsunięty ===== */
.elementor-element-0d1a2d6 {
	/* Dekor nie ma przechwytywać kliknięć ani zasłaniać zdjęcia eksperta. */
	pointer-events: none;
	z-index: 1;
}

/* Dekor ma zostać MAŁY (natywnie Elementor daje ~149–210px). Nie rozciągamy go
   — cap ~140px i width:auto, by nie był „wielką dzidą" na desktopie. */
.elementor-element-0d1a2d6 .pxl-image,
.elementor-element-0d1a2d6 img.pxl-image,
.elementor-element-0d1a2d6 .pxl-image-item img,
.elementor-element-0d1a2d6 img {
	max-width: 140px !important;
	width: auto !important;
	height: auto !important;
}

/* ===== Tablet (≤ 1024px): jeszcze mniejszy ===== */
@media (max-width: 1024px) {
	.elementor-element-0d1a2d6 .pxl-image,
	.elementor-element-0d1a2d6 img.pxl-image,
	.elementor-element-0d1a2d6 .pxl-image-item img,
	.elementor-element-0d1a2d6 img {
		max-width: 110px !important;
	}
}

/* ===== Mobile (≤ 767px): chowamy dekor (absolutny, nie wpływa na układ) ===== */
@media (max-width: 767px) {
	.elementor-element-0d1a2d6 {
		display: none !important;
	}
}

/* ===========================================================================
 * Panel narzędzia (BriefBuilder mockup) — POSZERZENIE.
 * ---------------------------------------------------------------------------
 * Diagnoza (pomiar live, viewport 1500px):
 *   .kd-tool ma własne max-width:1320px; width:100% (scoped) — NIE on ogranicza.
 *   Łańcuch przodków:
 *     [0] > .elementor-widget-container        → clientWidth 643px
 *     [1] .elementor-element-b6eaa62 (image)    → clientWidth 643px  ← WINOWAJCA
 *     [2] .elementor-container (flex)           → clientWidth 1438px ← dostępna szer.
 *   Kontener [2] jest flexem, a jego dzieci-rodzeństwo (0044fa8, 03476ed,
 *   70e7d20, 5edca1c, 1fb47bf) mają po 1438px. Nagłówek pxl_heading 211f122
 *   ma własne max-width:1320px (zostawiamy — to NIE panel).
 *   Tylko widget-image `b6eaa62` kurczy się do szerokości zawartości (643px),
 *   bo jako widget obrazka nie rozciąga się na pełną oś poprzeczną flexa.
 *
 * Fix: wymuszamy na widgecie `b6eaa62` pełną szerokość kontenera (flex-stretch),
 *   a wewnętrzny panel ograniczamy do ~1320px i centrujemy — tak jak nagłówek
 *   „AI-Driven" nad nim. Celujemy WYŁĄCZNIE w `b6eaa62` i jego zawartość,
 *   więc nie ruszamy nagłówka 211f122 ani innych sekcji.
 * =========================================================================== */

/* Widget-image z panelem: wypełnij całą szerokość kontenera treści. */
.elementor-element-b6eaa62 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
}

.elementor-element-b6eaa62 > .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
}

/* Sam panel: szeroki (jak nagłówek nad nim), wyśrodkowany. */
.elementor-element-b6eaa62 .kd-tool {
	max-width: 1320px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Tablet (≤1024px): panel wypełnia szerokość kolumny treści. */
@media (max-width: 1024px) {
	.elementor-element-b6eaa62 .kd-tool {
		max-width: 100% !important;
	}
}

/* Mobile (≤767px): pełna szerokość kolumny. */
@media (max-width: 767px) {
	.elementor-element-b6eaa62 .kd-tool {
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* ===========================================================================
 * BEZPIECZNIK ANTY-OVERFLOW (mobile): panel NIE może rozszerzać strony.
 * Niezależnie od wewnętrznego CSS panelu — twardo ucinamy poziome wyjście.
 * =========================================================================== */
@media (max-width: 767px) {
	.elementor-element-b6eaa62,
	.elementor-element-b6eaa62 > .elementor-widget-container,
	.elementor-element-b6eaa62 .kd-tool,
	.elementor-element-b6eaa62 .kd-tool * {
		max-width: 100% !important;
	}
	.elementor-element-b6eaa62 .kd-tool,
	.elementor-element-b6eaa62 > .elementor-widget-container {
		overflow-x: hidden !important;
	}
	/* żadne pole/karta nie wymusza szerokości większej niż ekran */
	.elementor-element-b6eaa62 .kd-tool [class*="kd-tool__"] {
		min-width: 0 !important;
	}
}