/**
 * Sekcja: zapis na newsletter.
 * Figma 14557:5007 — pas 1440×466 na tle C1D0E1, panel 1128×310 w granacie,
 * padding 20, zdjęcie 444×270 po lewej, kolumna treści 607 px: tytuł 32/41,6,
 * opis 20/28, wiersz z polem e-mail (obrys biały, radius 8, padding 20)
 * i linkiem „Zapisuję się" w jasnej zieleni, pod nim zgoda 16/24.
 */

.news-cta {
	background-color: var(--color-surface-steel);
	padding-block: 78px;
}

.news-cta__inner {
	max-width: 1128px;
	margin-inline: auto;
}

.news-cta__panel {
	display: grid;
	grid-template-columns: 444px minmax(0, 1fr);
	align-items: end;
	gap: 35px;
	min-height: 310px;
	padding: 20px;
	border-radius: var(--radius-sm);
	background-color: var(--color-navy);
	color: var(--color-white);
}

.news-cta__media {
	overflow: hidden;
}

.news-cta__img {
	display: block;
	width: 100%;
	height: 270px;
	object-fit: cover;
}

.news-cta__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 27px;
}

.news-cta__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-heading);
}

.news-cta__text {
	margin: 0;
	font-size: var(--fs-h6);
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
}

/* --- formularz na granacie --- */

/* CF7 owija treść pola w akapit (wpcf7_autop), więc etykieta i pole nie są
   bezpośrednimi dziećmi flexa z modułu — pole rośnie do 96 px zamiast 67 z makiety.
   Układ wiersza przenosimy na ten akapit; moduł zostaje nietknięty (Q-cf7-autop). */
.news-cta .c-form--newsletter .c-form__field > p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	width: 100%;
	margin: 0;
}

/* Pole i przycisk stoją w jednym wierszu (makieta: pole elastyczne, link 27 px dalej).
   Reszta wyglądu pola idzie z modułu `form` — tu zmieniamy tylko barwy na ciemne tło. */
.news-cta .c-form--newsletter .c-form__row {
	display: flex;
	align-items: center;
	gap: 27px;
}

.news-cta .c-form--newsletter .c-form__field {
	flex: 1 1 auto;
	height: 67px;
	min-height: 67px;
	margin: 0;
	border-color: var(--color-white);
	background-color: transparent;
}

.news-cta .c-form--newsletter .c-form__field:focus-within {
	border-color: var(--color-primary-bright);
}

.news-cta .c-form--newsletter .c-form__label {
	color: var(--color-white);
}

.news-cta .c-form--newsletter input[type="email"] {
	color: var(--color-white);
}

.news-cta .c-form--newsletter ::placeholder {
	color: var(--color-white);
	opacity: 1;
}

.news-cta .c-form--newsletter .c-form__actions {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}

/* CF7 owija submit w <p> (brak ::after na input). Strzałka jak w .btn--text,
   podkreślenie pod tekstem i ikoną (Figma 14557:5023, gap 8, ikona 16). */
.news-cta .c-form--newsletter .c-form__actions > p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 0 3px;
	border-bottom: 1px solid var(--color-primary-bright);
}

.news-cta .c-form--newsletter .c-form__actions > p::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-color: var(--color-primary-bright);
	-webkit-mask: url("../../img/icons/arrow-up-right.svg") center / contain no-repeat;
	mask: url("../../img/icons/arrow-up-right.svg") center / contain no-repeat;
}

.news-cta .c-form--newsletter .wpcf7-spinner {
	position: absolute;
	margin: 0;
}

/* Wysyłka jest linkiem tekstowym z podkreśleniem w jasnej zieleni, nie pastylką. */
.news-cta .c-form--newsletter input[type="submit"] {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--color-primary-bright);
}

.news-cta .c-form--newsletter .c-form__actions > p:hover {
	border-bottom-color: var(--color-white);
}

.news-cta .c-form--newsletter .c-form__actions > p:hover::after {
	background-color: var(--color-white);
}

.news-cta .c-form--newsletter input[type="submit"]:hover,
.news-cta .c-form--newsletter .c-form__actions > p:hover input[type="submit"] {
	background-color: transparent;
	color: var(--color-white);
	border-bottom-color: transparent;
}

/* Kolumna panelu ma w makiecie odstęp 27, moduł daje 24 pod ostatnim polem. */
.news-cta .c-form--newsletter .c-form__consent {
	margin-top: 27px;
	color: var(--color-white);
	white-space: nowrap;
}

.news-cta .c-form--newsletter input[type="checkbox"] {
	accent-color: var(--color-primary-bright);
}

.news-cta .c-form--newsletter .c-form__note,
.news-cta .c-form--newsletter .c-form__missing {
	color: var(--color-white);
}

.news-cta .c-form--newsletter .wpcf7-response-output {
	border-color: var(--color-hairline-light);
}

@media (max-width: 991px) {
	.news-cta .c-form--newsletter .c-form__consent {
		white-space: normal;
	}

	.news-cta {
		padding-block: var(--space-xl);
	}

	.news-cta__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

}

@media (max-width: 767px) {
	.news-cta .c-form--newsletter .c-form__row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm);
	}

	.news-cta .c-form--newsletter .c-form__actions {
		align-self: flex-start;
	}

	.news-cta .c-form--newsletter input[type="submit"] {
		min-height: 44px;
		padding-block: 10px;
	}
}