/* Pledge bar. Three appearances: a Deep blue band (the Cloud white top border is the
 * horizon line), plain inside another section, or a boarding-pass card: Deep blue at 50 %
 * over the hero image (the one place the theme uses transparency, decision 2026-11-08),
 * Cloud white type, Sweet orange for the small print, the stub with the words,
 * a dashed perforation, the form on the right. The card sits at the foot of the homepage
 * hero, inside the hero's margin. */

.vl-pledge--band,
.vl-pledge--plain {
	border-top: 1px solid var(--vl-cloud-white);
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--60);
}

.vl-pledge--plain {
	padding-bottom: 0;
}

.vl-pledge--plain .vl-pledge__inner,
.vl-pledge--card .vl-pledge__inner {
	max-width: none;
	padding-inline: 0;
}

.vl-pledge--card {
	position: relative;
	z-index: 1;
	border-radius: 24px;
	overflow: hidden;
	background: rgb(0 23 74 / 0.5);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--vl-cloud-white);
	--vl-muted: var(--vl-sweet-orange);
	--vl-field-placeholder: var(--vl-sweet-orange);
	--vl-field-border: var(--vl-sweet-orange);
}

.vl-pledge--card .vl-pledge__inner {
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.vl-pledge--card .vl-pledge__intro {
	display: block;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-right: 2px dashed var(--vl-sweet-orange);
}

.vl-pledge--card .vl-pledge__intro > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.vl-pledge--card .vl-pledge__intro .is-style-label {
	color: var(--vl-sweet-orange);
}

.vl-pledge--card .vl-pledge__intro h2 {
	font-size: var(--wp--preset--font-size--heading-s);
	color: var(--vl-cloud-white);
}

.vl-pledge--card .vl-pledge__note {
	color: var(--vl-cloud-white);
}

.vl-pledge--card .vl-pledge__form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.vl-pledge--card .vl-pledge__fields {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
}

.vl-pledge--card .vl-pledge__form .vl-pledge__note {
	margin: 0;
	color: var(--vl-cloud-white);
}

.vl-pledge--card .vl-pledge__intro .vl-pledge__business {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--vl-cloud-white);
}

.vl-pledge--card .vl-pledge__intro .vl-pledge__business a {
	color: var(--vl-sweet-orange);
}

.vl-pledge--card .vl-field label {
	color: var(--vl-sweet-orange);
}

.vl-pledge--card .vl-form input {
	min-height: 48px;
	border-radius: 999px;
}

.vl-pledge--card .vl-field--submit button {
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: 999px;
	white-space: nowrap;
}

.vl-pledge--card .vl-pledge__foot {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}

.vl-pledge--card .vl-pledge__consent {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--vl-sweet-orange);
}

.vl-pledge__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right);
}

.vl-pledge__intro {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.vl-pledge__intro > * {
	margin-block: 0;
}

.vl-pledge__intro h2 {
	font-size: var(--wp--preset--font-size--heading-m);
	letter-spacing: -0.015em;
	line-height: 1;
}

.vl-pledge__note {
	color: var(--vl-morning-pink);
}

.vl-pledge__fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: end;
}

.vl-field--submit button {
	width: 100%;
	min-height: 52px;
	border-radius: 10px;
}

.vl-pledge__consent {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--vl-morning-pink);
}

.vl-pledge__consent a {
	color: inherit;
}

.vl-pledge__business {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.vl-pledge__business a {
	color: inherit;
}

@media (max-width: 1100px) {
	.vl-pledge__fields,
	.vl-pledge--card .vl-pledge__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vl-field--submit {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.vl-pledge--card .vl-pledge__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vl-pledge--card .vl-pledge__intro {
		padding: var(--wp--preset--spacing--50);
		border-right: 0;
		border-bottom: 2px dashed var(--vl-sweet-orange);
	}

	.vl-pledge--card .vl-pledge__form {
		padding: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	.vl-pledge__fields,
	.vl-pledge--card .vl-pledge__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Editor preview of the form (not interactive). */
.vl-pledge--editor {
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--vl-morning-pink);
	border-radius: 24px;
}

.vl-pledge__preview .vl-field__label {
	display: block;
	font-family: var(--vl-font-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vl-morning-pink);
	margin-bottom: 0.5rem;
}

.vl-pledge__preview .vl-field__box {
	height: 52px;
	border: 1px solid var(--vl-morning-pink);
	border-radius: 10px;
}

.vl-pledge__preview .vl-button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 10px;
	background: var(--vl-cloud-white);
	color: var(--vl-electric-purple);
	font-weight: 500;
}
