/**
 * Leaware — Join Our Community
 *
 * Odwzorowuje sekcję "join our community" z Figmy: desktop 1440 × 705
 * (ramka 1:1156), mobile 360 × 792 (ramka 1:2418).
 *
 * Desktop: ilustracja po lewej, kolumna treści wyrównana do PRAWEJ — tak jest
 *          w projekcie, gdzie nagłówek, opis, formularz i przyciski sklepów
 *          mają różne szerokości, ale wspólną prawą krawędź.
 * Mobile:  ilustracji nie ma w projekcie w ogóle, nadtytuł jest wyśrodkowany,
 *          reszta wyrównana do lewej.
 */

.leaware-jc {
	--lw-jc-columns-gap: 0px;
	--lw-jc-blocks-gap: 48px;
	--lw-jc-hint-gap: 40px;
	--lw-jc-subform-gap: 12px;
	--lw-jc-field-gap: 13px;

	--lw-jc-media-width: 603px;
	--lw-jc-media-column: 525px;
	--lw-jc-media-shift-x: -91px;
	--lw-jc-media-shift-y: -52px;
	--lw-jc-media-gap-mobile: 40px;

	--lw-jc-hint-color: #78909c;
	--lw-jc-heading-color: #000000;
	--lw-jc-lead-color: #000000;

	--lw-jc-lead-width: 646px;
	--lw-jc-form-width: 480px;

	--lw-jc-input-bg: #ffffff;
	--lw-jc-input-border: #d5d7da;
	--lw-jc-input-color: #22273a;
	--lw-jc-input-height: 48px;
	--lw-jc-input-radius: 8px;

	--lw-jc-button-bg: #fec200;
	--lw-jc-button-color: #15192a;
	--lw-jc-button-height: 46px;
	--lw-jc-button-width: 101px;
	--lw-jc-button-radius: 10px;

	--lw-jc-stores-gap: 14px;

	display: flex;
	align-items: flex-start;
	gap: var(--lw-jc-columns-gap);
}

.leaware-jc--media-right {
	flex-direction: row-reverse;
}

/* --- Kolumna z ilustracją ------------------------------------------------ */

/*
 * Ramka "Characters" nie przycina zawartości (clipsContent: false) — postacie
 * wychodzą 91 px w lewo poza kolumnę treści i 52 px ponad nadtytuł. Ujemne
 * marginesy odtwarzają to bez wyrywania obrazu z przepływu, więc kolumna
 * treści nadal wyznacza wysokość sekcji.
 *
 * Szerokość UKŁADU (525) jest mniejsza od szerokości OBRAZU (603): w projekcie
 * opis zaczyna się na x=614, a ilustracja sięga 692 — tekst nachodzi na jej
 * przezroczysty prawy margines. Bez tego rozdzielenia opis zwężałby się
 * z 646 do 562 px i inaczej się łamał.
 */
.leaware-jc__media {
	position: relative;
	z-index: 0;
	flex: 0 0 var(--lw-jc-media-column);
	/* Bez tego `min-width: auto` rozepchałoby kolumnę do szerokości obrazu (603). */
	min-width: 0;
	margin-top: var(--lw-jc-media-shift-y);
	margin-left: var(--lw-jc-media-shift-x);
}

.leaware-jc--media-right .leaware-jc__media {
	margin-right: var(--lw-jc-media-shift-x);
	margin-left: 0;
}

.leaware-jc__media img {
	display: block;
	width: var(--lw-jc-media-width);
	max-width: none;
	height: auto;
}

/* --- Kolumna treści ------------------------------------------------------ */

.leaware-jc__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--lw-jc-blocks-gap);
	min-width: 0;
	text-align: right;
}

.leaware-jc--media-right .leaware-jc__content {
	text-align: left;
}

/*
 * Nadtytuł stoi bliżej nagłówka niż pozostałe bloki (40 px zamiast 48),
 * więc odstęp bierze z własnego marginesu, a nie z gapu kolumny.
 */
.leaware-jc .leaware-jc__hint {
	margin: 0 0 calc(var(--lw-jc-hint-gap) - var(--lw-jc-blocks-gap));
	color: var(--lw-jc-hint-color);
	font-size: 22px;
	font-weight: 500;
	line-height: 26px;
	text-transform: uppercase;
}

/* Zakres (0,2,0) — bije globalną typografię z Global Settings Elementora. */
.leaware-jc .leaware-jc__heading {
	margin: 0;
	color: var(--lw-jc-heading-color);
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -0.96px;
	line-height: 60px;
}

.leaware-jc .leaware-jc__lead {
	max-width: var(--lw-jc-lead-width);
	margin: 0 0 0 auto;
	color: var(--lw-jc-lead-color);
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}

.leaware-jc--media-right .leaware-jc__lead {
	margin-right: auto;
	margin-left: 0;
}

/* --- Formularz i nota ---------------------------------------------------- */

.leaware-jc__subform {
	display: flex;
	flex-direction: column;
	gap: var(--lw-jc-subform-gap);
	width: 100%;
	max-width: var(--lw-jc-form-width);
	margin-left: auto;
}

.leaware-jc--media-right .leaware-jc__subform {
	margin-right: auto;
	margin-left: 0;
}

.leaware-jc .leaware-jc__note {
	margin: 0;
	color: var(--lw-jc-lead-color);
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
}

/*
 * W projekcie odnośnik nie odcina się kolorem — jest czarny jak reszta noty,
 * wyróżnia go samo podkreślenie (styleOverrideTable: textDecoration UNDERLINE,
 * fill #000000). Motyw kolorowałby go na akcent, stąd jawne `color: inherit`.
 */
.leaware-jc .leaware-jc__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.leaware-jc .leaware-jc__note a:hover,
.leaware-jc .leaware-jc__note a:focus {
	color: inherit;
	text-decoration: underline;
	opacity: 0.7;
}

/*
 * Widget Formularz osadzony w szablonie.
 *
 * Elementor generuje dla każdego szablonu własny arkusz (post-NNN.css)
 * z selektorami w rodzaju
 * `.elementor-329 .elementor-element-57cf8f5d .elementor-field-group`
 * o specyficzności (0,4,0). Wtyczka nie ma jak ich przebić samym zakresem,
 * więc geometria i kolory z projektu idą tu z `!important`.
 *
 * Świadomy kompromis: WEWNĄTRZ TEJ SEKCJI ustawienia wyglądu z panelu widgetu
 * Formularz nie zadziałają — sekcja trzyma projekt niezależnie od tego, jak
 * skonfigurowany jest szablon i czy ktoś go później przebuduje. Selektory nie
 * zawierają ID szablonu, więc przebudowa formularza ich nie unieważnia.
 * Formularze poza `.leaware-jc__form` pozostają nietknięte.
 */

.leaware-jc .leaware-jc__form {
	width: 100%;
}

/*
 * Kontenery szablonu wnoszą własne marginesy i padding — w projekcie odstęp
 * między wierszem pól a notą to 12 px, a sam padding kontenera dawał 30 px
 * u góry i u dołu. Zerujemy wszystkie cztery strony; slot ma obejmować
 * formularz, a rytm pionowy sekcji ustawiają zmienne --lw-jc-*.
 *
 * Wcześniej pionowy padding był tu potrzebny, bo `elementor-form-fields-wrapper`
 * ma `margin-bottom: -10px` i wychodził poza rodzica. Reguły wyżej zerują ten
 * margines przez `!important`, więc zapas przestał być potrzebny.
 */
.leaware-jc .leaware-jc__form > .elementor,
.leaware-jc .leaware-jc__form .e-con,
.leaware-jc .leaware-jc__form .e-con-inner {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;

	width: 100%;
	max-width: none;
	margin: 0;
}

/*
 * Szablon niosący własną notę duplikowałby tę z widgetu — chowamy tamtą.
 * Sam widget to za mało: kontener, w którym siedzi, zostawał i dokładał 4 px
 * do odstępu. Chowamy więc kontener z tekstem, ale tylko taki, w którym nie ma
 * formularza — żeby nie zwinąć przypadkiem całego szablonu.
 */
.leaware-jc .leaware-jc__form--has-note .elementor-widget-text-editor {
	display: none;
}

.leaware-jc .leaware-jc__form--has-note .e-con:has(.elementor-widget-text-editor):not(:has(.elementor-widget-form)) {
	display: none;
}

/* --- Wiersz: pole + przycisk, 366 / 13 / 101 jak w projekcie -------------- */

.leaware-jc .leaware-jc__form .elementor-form-fields-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: var(--lw-jc-field-gap) !important;
	margin: 0 !important;
}

.leaware-jc .leaware-jc__form .elementor-field-group {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.leaware-jc .leaware-jc__form .elementor-field-group.e-form__buttons {
	flex: 0 0 auto !important;
}

/* --- Pole tekstowe ------------------------------------------------------- */

.leaware-jc .leaware-jc__form .elementor-field-textual {
	box-sizing: border-box !important;
	width: 100% !important;
	height: var(--lw-jc-input-height) !important;
	min-height: var(--lw-jc-input-height) !important;
	padding: 12px 14px !important;
	border: 1px solid var(--lw-jc-input-border) !important;
	border-radius: var(--lw-jc-input-radius) !important;
	background-color: var(--lw-jc-input-bg) !important;
	box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
	color: var(--lw-jc-input-color) !important;
	font-family: Inter, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	text-align: left !important;
}

.leaware-jc .leaware-jc__form .elementor-field-textual::placeholder {
	color: var(--lw-jc-input-color) !important;
	opacity: 1;
}

.leaware-jc .leaware-jc__form .elementor-field-textual:focus {
	border-color: var(--lw-jc-button-bg) !important;
	box-shadow: 0 0 0 3px rgba(254, 194, 0, 0.25) !important;
	outline: none !important;
}

/* --- Przycisk ------------------------------------------------------------ */

.leaware-jc .leaware-jc__form .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	min-width: var(--lw-jc-button-width) !important;
	min-height: var(--lw-jc-button-height) !important;
	height: var(--lw-jc-button-height) !important;
	padding: 8px 16px !important;
	border: 0 !important;
	border-radius: var(--lw-jc-button-radius) !important;
	background-color: var(--lw-jc-button-bg) !important;
	/* Szablon dokładał twardy cień z przesunięciem — w projekcie go nie ma. */
	box-shadow: none !important;
	color: var(--lw-jc-button-color) !important;
	font-family: Rubik, sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 19px !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

.leaware-jc .leaware-jc__form .elementor-button:hover,
.leaware-jc .leaware-jc__form .elementor-button:focus {
	background-color: var(--lw-jc-button-bg) !important;
	box-shadow: none !important;
	color: var(--lw-jc-button-color) !important;
	filter: brightness(0.95);
}

/* --- Captcha ------------------------------------------------------------- */

/* Turnstile ma własną szerokość — dostaje osobny wiersz pod polem. */
.leaware-jc .leaware-jc__form .elementor-field-type-leaware_turnstile {
	flex: 1 0 100% !important;
}

.leaware-jc .leaware-jc__form .leaware-turnstile {
	display: block;
}

/*
 * reCAPTCHA v3 jest niewidoczna — odznakę Google pozycjonuje względem okna,
 * a pusta grupa pola zajmowałaby miejsce w rzędzie i przesuwała pole e-mail.
 */
.leaware-jc .leaware-jc__form .elementor-field-type-recaptcha_v3 {
	display: none !important;
}

/* --- Przyciski sklepów --------------------------------------------------- */

.leaware-jc__stores {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--lw-jc-stores-gap);
}

.leaware-jc--media-right .leaware-jc__stores {
	justify-content: flex-start;
}

.leaware-jc__store {
	display: inline-flex;
	flex: 0 0 auto;
}

.leaware-jc__store img {
	display: block;
	width: auto;
	height: 40px;
}

/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 1024px) {

	.leaware-jc {
		--lw-jc-media-shift-x: 0px;
		--lw-jc-media-column: var(--lw-jc-media-width);
		--lw-jc-blocks-gap: 32px;
		--lw-jc-columns-gap: 24px;
	}

	.leaware-jc__media img {
		width: 100%;
	}

	.leaware-jc .leaware-jc__heading {
		font-size: 40px;
		line-height: 48px;
	}
}

/* --- Mobile: bez ilustracji, tekst do lewej ------------------------------ */

@media (max-width: 767px) {

	.leaware-jc {
		--lw-jc-blocks-gap: 48px;
		--lw-jc-form-width: 100%;
		/* Na mobile ilustracja stoi w kolumnie, więc przesunięcia z desktopu znikają. */
		--lw-jc-media-shift-x: 0px;
		--lw-jc-media-shift-y: 0px;
	}

	.leaware-jc {
		flex-direction: column;
	}

	/*
	 * Ilustracja JEST w projekcie mobilnym — tyle że w osobnej ramce (1:1978),
	 * stojącej bezpośrednio nad blokiem z tekstem (1:2418). Wcześniej patrzyłem
	 * tylko na tę drugą i błędnie uznałem, że na mobile jej nie ma.
	 *
	 * Wraca więc do przepływu jako pierwszy element kolumny, na pełną szerokość
	 * treści; ramka w projekcie nie przycina zawartości, stąd obraz może wyjść
	 * poza margines sekcji.
	 */
	.leaware-jc__media {
		display: block;
		flex-basis: auto;
		width: 100%;
		max-width: none;
		margin: 0 0 var(--lw-jc-media-gap-mobile);
	}

	.leaware-jc__media img {
		width: 100%;
		max-width: none;
	}

	.leaware-jc__content,
	.leaware-jc--media-right .leaware-jc__content {
		text-align: left;
	}

	/* Jedyny wyśrodkowany element w mobilnej ramce. */
	.leaware-jc .leaware-jc__hint {
		text-align: center;
	}

	.leaware-jc .leaware-jc__lead,
	.leaware-jc__subform {
		margin-right: 0;
		margin-left: 0;
	}

	.leaware-jc .leaware-jc__heading {
		font-size: 48px;
		line-height: 60px;
	}

	.leaware-jc .leaware-jc__note {
		font-size: 10px;
	}

	.leaware-jc__stores {
		justify-content: flex-start;
	}
}