/**
 * Component: Contact Page
 * Hero, contact info cards, form, and responsive layout.
 *
 * @package Vantage_Journeys
 */

/* ─────────────────────────────────────────────────────────────
   Hero — matches inner page pattern (About / Testimonials)
   ───────────────────────────────────────────────────────────── */
main.site-main--contact {
	padding-top: 0;
}

.vj-contact-hero {
	margin-inline: 8px;
	margin-block-start: var(--space-md, 24px);
	position: relative;
	z-index: 1;
}

.vj-contact-hero__wrapper {
	position: relative;
	z-index: 1;
	background-color: var(--surface-brand-default);
	border-radius: 15px;
	padding-block: var(--padding-xl);
	overflow: hidden;
}

.vj-contact-hero__breadcrumbs {
	font-family: var(--font-family-body);
	font-size: var(--fs-xs, 12px);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-block-end: var(--space-lg);
	color: rgba(255, 255, 255, 0.7);
}

.vj-contact-hero__breadcrumbs a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color var(--transition-fast, 0.2s);
}

.vj-contact-hero__breadcrumbs a:hover {
	color: var(--color-brand-secondary);
}

.vj-contact-hero__breadcrumbs-separator {
	margin-inline: var(--space-2xs);
	color: rgba(255, 255, 255, 0.4);
}

.vj-contact-hero__breadcrumbs-current {
	color: var(--color-white);
	font-weight: 600;
}

.vj-contact-hero__eyebrow {
	display: block;
	font-family: var(--font-family-accent);
	font-size: var(--type-h3);
	font-weight: 700;
	color: var(--color-brand-secondary);
	margin-block-end: var(--space-xs);
}

.vj-contact-hero__title {
	font-family: var(--font-family-primary);
	font-size: clamp(28px, 4.5vw, 56px);
	font-weight: var(--font-weight-extrabold, 800);
	line-height: var(--lh-tight, 1.2);
	color: var(--color-white);
	max-width: 900px;
	margin-inline: auto;
	margin-block-end: var(--space-md);
}

.vj-contact-hero__lead {
	font-family: var(--font-family-body);
	font-size: clamp(16px, 1.25vw, 20px);
	line-height: var(--lh-relaxed, 1.6);
	color: var(--color-neutral-50);
	max-width: 760px;
	margin-inline: auto;
	margin-block-end: 0;
}

/* ─────────────────────────────────────────────────────────────
   Contact Info Cards Section
   ───────────────────────────────────────────────────────────── */
.vj-contact-info {
	padding-block-start: var(--space-2xl);
	padding-block-end: var(--space-xl);
}

.vj-contact-info__header {
	text-align: center;
	margin-block-end: var(--space-xl);
}

.vj-contact-info__eyebrow {
	display: block;
	font-family: var(--font-family-accent);
	font-size: var(--type-h2);
	font-weight: 600;
	letter-spacing: var(--ls-wider);
	color: var(--color-brand-secondary);
	margin-block-end: var(--space-xs);
}

.vj-contact-info__title {
	font-family: var(--font-family-primary);
	font-size: clamp(24px, 3.5vw, 42px);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--lh-tight);
	color: var(--color-brand-primary);
	margin-block-end: var(--space-md);
}

.vj-contact-info__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.vj-contact-info-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: flex-start;
	gap: var(--space-md);
	padding: var(--space-xl) var(--space-lg);
	background-color: var(--surface-grey-subtle);
	border-radius: var(--radius-xl);
	border: 1px solid var(--border-grey-subtle);
	height: 100%;
}

.vj-contact-info-card__icon {
	width: 60px;
	height: 60px;
	background-color: var(--surface-brand-subtle);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand-primary);
	flex-shrink: 0;
}

.vj-contact-info-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
	width: 100%;
}

.vj-contact-info-card__label {
	font-family: var(--font-family-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.vj-contact-info-card__value {
	font-family: var(--font-family-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--color-brand-primary);
	line-height: var(--lh-snug);
	text-decoration: none;
	word-break: break-word;
	transition: color var(--duration-fast) ease;
}

a.vj-contact-info-card__value:hover {
	color: var(--color-brand-secondary);
}

/* ─────────────────────────────────────────────────────────────
   Contact Form Section
   ───────────────────────────────────────────────────────────── */
.vj-contact-form-section {
	padding-block: var(--space-xl);
}

.vj-contact-form__card {
	max-width: 800px;
	margin-inline: auto;
	border-radius: var(--radius-xl);
}

.vj-contact-form__heading {
	font-family: var(--font-family-primary);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	text-align: center;
	margin-block-end: var(--space-xs);
}

.vj-contact-form__subheading {
	font-family: var(--font-family-body);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	text-align: center;
	margin-block-end: var(--space-xl);
	line-height: var(--lh-relaxed);
}

/* ── Honeypot (hidden from humans) ── */
.vj-contact-form__hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/* ── Form Fields ── */
.vj-contact-form__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.vj-contact-form__fields .vj-field {
	margin-bottom: 0;
}

.vj-contact-form__submit {
	margin-block-start: 0;
}

@media screen and (min-width: 768px) {
	.vj-contact-form__fields {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}

	.vj-contact-form__fields .vj-field--textarea,
	.vj-contact-form__submit {
		grid-column: span 2;
	}
}

/* ── Premium Form Field Custom Design ── */
.vj-contact-form .vj-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

.vj-contact-form .vj-field__label {
	font-family: var(--font-family-primary);
	font-size: var(--fs-xs, 12px);
	font-weight: 700;
	letter-spacing: var(--ls-wide, 0.05em);
	text-transform: uppercase;
	color: var(--color-brand-primary);
	margin-bottom: 2px;
	transition: color var(--duration-base) ease;
}

.vj-contact-form .vj-field__control {
	width: 100%;
	min-height: 52px;
	padding: 14px 18px;
	border: 1px solid var(--border-grey-strong, #d3d3d3);
	border-radius: var(--radius-lg, 12px);
	background-color: var(--surface-grey-default, #ffffff);
	color: var(--color-text-primary);
	font-family: var(--font-family-body);
	font-size: var(--fs-base, 15px);
	line-height: 1.5;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01);
	transition: border-color var(--duration-base) var(--ease-standard),
				background-color var(--duration-base) var(--ease-standard),
				box-shadow var(--duration-base) var(--ease-standard);
}

.vj-contact-form .vj-field__control::placeholder {
	color: var(--color-text-muted, #8c8c8c);
	opacity: 0.8;
}

.vj-contact-form .vj-field__control:hover {
	border-color: var(--color-brand-primary);
	background-color: var(--surface-grey-subtle, #f9f9f9);
}

.vj-contact-form .vj-field__control:focus {
	outline: none;
	border-color: var(--color-brand-secondary);
	background-color: var(--color-white, #ffffff);
	box-shadow: 0 0 0 4px rgba(201, 147, 42, 0.12), 0 2px 4px rgba(0, 0, 0, 0.02);
}

.vj-contact-form .vj-field.is-error .vj-field__label {
	color: var(--color-error-default);
}

.vj-contact-form .vj-field.is-error .vj-field__control {
	border-color: var(--color-error-default);
	background-color: #fffafb;
}

.vj-contact-form .vj-field.is-error .vj-field__control:focus {
	box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}

.vj-contact-form .vj-field__error {
	margin-top: 4px;
	color: var(--color-error-default);
	font-size: var(--fs-xs, 12px);
	font-weight: 500;
}

.vj-contact-form .vj-field__control--textarea {
	min-height: 140px;
	resize: vertical;
}

/* ── Success / Error States ── */
.vj-contact-form__success,
.vj-contact-form__error {
	text-align: center;
	padding: var(--space-2xl) var(--space-lg);
}

.vj-contact-form__success-icon {
	width: 64px;
	height: 64px;
	margin-inline: auto;
	margin-block-end: var(--space-md);
	background-color: var(--surface-success-subtle);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-success-default);
}

.vj-contact-form__success-title {
	font-family: var(--font-family-primary);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin-block-end: var(--space-xs);
}

.vj-contact-form__success-desc {
	font-family: var(--font-family-body);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	max-width: 400px;
	margin-inline: auto;
}

.vj-contact-form__error-icon {
	width: 64px;
	height: 64px;
	margin-inline: auto;
	margin-block-end: var(--space-md);
	background-color: var(--surface-error-subtle);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-error-default);
}

.vj-contact-form__error-title {
	font-family: var(--font-family-primary);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin-block-end: var(--space-xs);
}

.vj-contact-form__error-desc {
	font-family: var(--font-family-body);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	max-width: 400px;
	margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────
   Status Modal
   ───────────────────────────────────────────────────────────── */
.vj-contact-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
}

.vj-contact-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.vj-contact-modal__dialog {
	position: relative;
	z-index: 1;
	background: var(--surface-grey-default);
	border-radius: var(--radius-xl);
	padding: var(--space-2xl) var(--space-xl);
	max-width: 440px;
	width: 100%;
	text-align: center;
	box-shadow: var(--shadow-lg);
	transform: scale(0.95);
	opacity: 0;
	transition: transform var(--duration-base) var(--ease-spring),
				opacity var(--duration-base) ease;
}

.vj-contact-modal.is-active .vj-contact-modal__dialog {
	transform: scale(1);
	opacity: 1;
}

.vj-contact-modal__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	background: none;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--duration-fast) ease,
				background var(--duration-fast) ease;
}

.vj-contact-modal__close:hover {
	color: var(--color-text-primary);
	background: var(--surface-grey-muted);
}

.vj-contact-modal__icon {
	width: 72px;
	height: 72px;
	margin-inline: auto;
	margin-block-end: var(--space-lg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vj-contact-modal__icon--success {
	background: var(--surface-success-subtle);
	color: var(--color-success-default);
}

.vj-contact-modal__icon--error {
	background: var(--surface-error-subtle);
	color: var(--color-error-default);
}

.vj-contact-modal__title {
	font-family: var(--font-family-primary);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin-block-end: var(--space-sm);
}

.vj-contact-modal__desc {
	font-family: var(--font-family-body);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	margin-block-end: var(--space-xl);
}

.vj-contact-modal__actions {
	display: flex;
	justify-content: center;
}

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
	.vj-contact-info__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-md);
	}

	.vj-contact-info-card {
		padding: var(--space-lg) var(--space-md);
	}
}

@media screen and (max-width: 767px) {
	.vj-contact-info__grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin-inline: auto;
	}

	.vj-contact-info-card {
		flex-direction: row;
		text-align: start;
		padding: var(--space-lg);
	}
}

@media screen and (max-width: 575px) {
	.vj-contact-hero__wrapper {
		padding-block: var(--padding-xl);
	}

	.vj-contact-form__heading {
		font-size: var(--fs-xl);
	}
}

/* ─────────────────────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.vj-contact-info-card {
		transform: none !important;
		transition: none !important;
	}
}