/**
 * Estilos das páginas de formulário (specs 007, 008): hero + card + grid.
 * Depende de tokens.css/base.css.
 *
 * @package valquiria-ramos
 */

.vr-form-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 460px;
	padding-top: calc(var(--vr-header-h) + 48px);
	padding-bottom: 200px;
	background: var(--vr-dark) center / cover no-repeat;
	color: var(--vr-cream);
	text-align: center;
}
.vr-form-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.vr-form-hero__inner { position: relative; max-width: 720px; }
.vr-form-hero__title { font-family: var(--vr-font-ui); font-weight: 300; font-size: clamp(26px, 4vw, 36px); color: var(--vr-cream); margin-bottom: var(--vr-space-4); }
.vr-form-hero__sub { color: #dbdbdb; font-size: 18px; max-width: 560px; margin: 0 auto; }

.vr-form-wrap { position: relative; margin-top: -180px; margin-bottom: var(--vr-space-8); }
.vr-form-card {
	max-width: 560px;
	margin: 0 auto;
	background: var(--vr-cream);
	border: 1px solid var(--vr-border);
	border-radius: 20px;
	padding: var(--vr-space-6);
}

.vr-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vr-space-4) 19px; margin-bottom: var(--vr-space-5); }
.vr-form__campo { display: flex; flex-direction: column; gap: var(--vr-space-2); }
.vr-form__campo--full { grid-column: 1 / -1; }
.vr-form__campo span { font-size: 14px; color: var(--vr-text); }
.vr-form__campo input,
.vr-form__campo select,
.vr-form__campo textarea {
	border: 1px solid var(--vr-border);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--vr-text);
	background: transparent;
	width: 100%;
}
.vr-form__campo input:focus,
.vr-form__campo select:focus,
.vr-form__campo textarea:focus { outline: none; border-color: var(--vr-gold); }

/* Seta (chevron) customizada com espaçamento à direita */
.vr-form__campo select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23645c58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 38px;
}
.vr-form__campo textarea { resize: vertical; min-height: 90px; }

@media (max-width: 620px) {
	.vr-form__grid { grid-template-columns: 1fr; }
	.vr-form-wrap { margin-top: -120px; }
}