/**
 * Contact page (build phase 4). Form and WhatsApp card sit at equal
 * visual weight on purpose — same width, same vertical position — since
 * WhatsApp is the confirmed primary channel sitewide (copy-contact.md).
 */

.tcc-contact-hero {
	padding: 160px 0 var( --space-3xl );
}
.tcc-contact-hero .tcc-label {
	color: var( --color-primary );
}
.tcc-contact-hero h1 {
	margin: var( --space-2xs ) 0;
	color: var( --text-on-dark );
}
.tcc-contact-hero p {
	margin: 0;
	max-width: 60ch;
	color: var( --text-on-dark-muted );
	font-size: var( --text-body-lg-size );
}

.tcc-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-3xl );
	align-items: stretch;
}

.tcc-contact-form-box,
.tcc-contact-whatsapp-box {
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.tcc-contact-form-box {
	padding: var( --space-lg );
}
.tcc-contact-form-box h2,
.tcc-contact-whatsapp-box__body h2 {
	margin: 0 0 var( --space-2xs );
}
.tcc-contact-form-box > p {
	margin: 0 0 var( --space-md );
	color: var( --text-body );
}

.tcc-contact-notice {
	padding: var( --space-sm ) var( --space-md );
	border-radius: var( --radius-md );
	margin-bottom: var( --space-md );
	font-size: var( --text-body-size );
}
.tcc-contact-notice--success {
	background: var( --tcc-tint-mint );
	color: var( --tcc-green );
}
.tcc-contact-notice--error {
	background: var( --state-error-tint );
	color: var( --state-error );
}

.tcc-contact-form {
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
}
.tcc-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-sm );
}
.tcc-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tcc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tcc-field span {
	font-size: var( --text-label-size );
	font-weight: var( --weight-medium );
	color: var( --text-strong );
}
.tcc-field input,
.tcc-field textarea {
	font-family: var( --font-body );
	font-size: var( --text-body-size );
	color: var( --text-body );
	background: var( --surface-muted );
	border: 1px solid var( --surface-muted );
	border-radius: var( --radius-input );
	padding: 10px 16px;
	height: 48px;
}
.tcc-field textarea {
	height: auto;
	resize: vertical;
}
.tcc-field input:focus,
.tcc-field textarea:focus {
	outline: none;
	border-color: var( --color-primary );
}
.tcc-contact-form .tcc-btn {
	align-self: flex-start;
	margin-top: var( --space-2xs );
}
/* Both boxes sit directly on the white band — gold-on-white contrast fix
   (see theme.css's navbar rule for the full reasoning). */
.tcc-contact-form .tcc-btn--primary:hover,
.tcc-contact-whatsapp-box__body .tcc-btn--primary:hover {
	color: var( --color-brand-deep );
	border-color: var( --color-brand-deep );
}

.tcc-contact-whatsapp-box__photo-wrap {
	position: relative;
}
.tcc-contact-whatsapp-box__photo {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.tcc-contact-whatsapp-box__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 11, 31, 82, 0.75 ), rgba( 11, 31, 82, 0 ) 55% );
	pointer-events: none;
}
.tcc-contact-whatsapp-box__caption {
	position: absolute;
	left: var( --space-md );
	bottom: var( --space-md );
	color: var( --text-on-dark );
	font-family: var( --font-display );
	font-size: var( --text-h6-size );
	font-weight: var( --weight-bold );
}
.tcc-contact-whatsapp-box__body {
	padding: var( --space-lg );
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
	align-items: flex-start;
	flex: 1;
}
.tcc-contact-whatsapp-box__body p {
	margin: 0;
	color: var( --text-body );
}
.tcc-contact-whatsapp-box__info {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-2xs );
}
.tcc-contact-whatsapp-box__info li {
	display: flex;
	align-items: center;
	gap: var( --space-2xs );
	color: var( --text-body );
	font-size: var( --text-body-size );
}
.tcc-contact-whatsapp-box__info svg,
.tcc-contact-whatsapp-box__info [data-lucide] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var( --color-brand-deep );
}
.tcc-contact-whatsapp-box__info a {
	color: var( --text-body );
}
.tcc-contact-whatsapp-box__info a:hover {
	color: var( --color-brand-deep );
}

.tcc-contact-map {
	position: relative;
	border-radius: var( --radius-md );
	overflow: hidden;
	border: var( --elevation-hairline );
}
.tcc-contact-map iframe {
	display: block;
}
.tcc-contact-map__card {
	position: absolute;
	left: var( --space-md );
	bottom: var( --space-md );
	background: var( --surface-canvas );
	border-radius: var( --radius-md );
	padding: var( --space-sm ) var( --space-md );
	max-width: 320px;
	box-shadow: none;
	border: var( --elevation-hairline );
}
.tcc-contact-map__card p {
	margin: 0 0 4px;
	color: var( --text-strong );
	font-size: var( --text-body-size );
}
.tcc-contact-map__card a {
	/* Card is white — gold fails contrast; brand-deep passes. */
	color: var( --color-brand-deep );
	font-weight: var( --weight-medium );
}

@media ( max-width: 767px ) {
	.tcc-contact-grid {
		grid-template-columns: 1fr;
	}
	.tcc-field-row {
		grid-template-columns: 1fr;
	}
	.tcc-contact-map__card {
		position: static;
		margin-top: var( --space-sm );
	}
}