/*
 * MEPCO theme — Contact route (page-contact.php). Prototype lines 958–1040; every value below is
 * copied from that element's inline style. Shared classes (.kicker, .page-title, .mono-11, .card,
 * .field, .input, .select, .textarea, .btn and the tokens) come from base.css.
 *
 *   .contact__intro              the split header (auto-fit minmax(min(100%,420px),1fr), gap 32/48)
 *   .contact__info / __title     left column (flex, gap 18px, centred)
 *   .contact__blocks / __block   the four detail blocks (auto-fit minmax(200px,1fr), gap 18/32)
 *   .contact__photo / __img      the plant photo (min-height 300px, object-fit cover)
 *   .contact__who                the "WHO TO CALL" row
 *   .contact__people / __person  the contacts grid with the border trick (border-right/bottom)
 *   .contact__send               the "SEND A MESSAGE" band
 *   .contact-form__*             the message form
 *   .contact-sent                the role=status confirmation
 *
 * base.css has no colour token for a validation message (the prototype has no error state), so the
 * route defines --contact-error locally; it is the only value here that is not from the prototype.
 */

.contact {
	--contact-error: #9e2b1a;
}

/* ---------------------------------------------------------------------------
 * Split intro (prototype 961–974)
 * ------------------------------------------------------------------------ */
.contact__intro {
	padding: 56px var(--gutter) 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 48px;
	align-items: stretch;
}
.contact__info {
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}
.contact__title { margin: 0; }
.contact__blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px 32px;
	font-size: 14px;
	color: var(--text-2);
}
.contact__block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.contact__block-value { color: var(--ink); font-weight: 500; }
.contact__block-link {
	color: var(--orange-text);
	font-weight: 600;
	align-self: flex-start;
}
.contact__block-link:hover { color: var(--orange-text); text-decoration: underline; }

.contact__photo {
	position: relative;
	min-height: 300px;
	border: 1px solid var(--line);
	background: var(--line-2);
}
.contact__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------------
 * "WHO TO CALL" row + contacts grid (prototype 975–984)
 * ------------------------------------------------------------------------ */
.contact__who {
	margin: 0 var(--gutter) 12px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.contact__who-hours { font-size: 13px; color: var(--muted); }

.contact__people {
	margin: 0 var(--gutter);
	background: var(--panel);
	border: 1px solid var(--line);
	border-right: 0;
	border-bottom: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.contact__person {
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.contact__person-what { text-transform: uppercase; }
.contact__person-name {
	font: 600 21px/1.1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.contact__person-mail {
	font: 12px var(--font-mono);
	color: var(--orange-text);
	margin-top: auto;
	padding-top: 8px;
	overflow-wrap: anywhere;
	text-decoration: none;
}
.contact__person-mail:hover { color: var(--orange-text); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * "SEND A MESSAGE" band (prototype 985–1039)
 * ------------------------------------------------------------------------ */
.contact__send {
	padding: 48px var(--gutter) 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-start;
}
.contact__send-intro {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.contact__send-title {
	margin: 0;
	font: 700 clamp(30px, 4vw, 40px)/1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.contact__send-text {
	margin: 0;
	color: var(--text-2);
	text-wrap: pretty;
}
.contact__send-link { color: var(--orange-text); font-weight: 600; }
.contact__send-link:hover { color: var(--orange-text); text-decoration: underline; }

.contact__panel {
	flex: 999 1 460px;
	min-width: 0;
	padding: clamp(20px, 3vw, 32px);
}

/*
 * The prototype's inputs inherit only the font FAMILY (prototype line 50), so their weight and
 * line-height stay at the browser default — a 15px control is 45px tall, not 49px. base.css uses
 * `font: inherit` on .input/.select/.textarea, which also inherits the label's 500 weight and the 1.5
 * line-height; both are restored to the prototype's values here.
 */
.contact-form .input,
.contact-form .select,
.contact-form .textarea {
	font-weight: 400;
	line-height: normal;
}

.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 18px 20px;
}
.contact-form__field--wide { grid-column: 1 / -1; }
.contact-form__submit {
	margin-top: 22px;
	padding: 14px 24px;
	background: var(--navy);
	color: #fff;
}
.contact-form__submit:hover { background: var(--band); color: #fff; }

/* Validation messages (no prototype equivalent) */
.contact-form__alert {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--contact-error);
	background: #fff;
	color: var(--contact-error);
	font-size: 13px;
	font-weight: 500;
	border-radius: 2px;
}
.contact-form__error {
	font-size: 12px;
	font-weight: 500;
	color: var(--contact-error);
	text-wrap: pretty;
}
.contact-form .input[aria-invalid=true],
.contact-form .select[aria-invalid=true],
.contact-form .textarea[aria-invalid=true] { border-color: var(--contact-error); }

/* Confirmation (prototype 1034–1038) */
.contact-sent {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}
.contact-sent__title {
	margin: 0;
	font: 700 clamp(28px, 4vw, 36px)/1.05 var(--font-display);
	text-transform: uppercase;
	/* The prototype's confirmation heading declares no text-wrap (unlike the H1 and the
	   "Questions, literature, warranty" H2 above the form), so none is added here. */
}
.contact-sent__again {
	align-self: flex-start;
	padding: 10px 18px;
}

/* Mobile (≤ 899px): 44px tap boxes on the Directions and e-mail links; long addresses break inside
   the narrower cards instead of overflowing. */
@media (max-width: 899.98px) {
	.contact__block-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
	.contact__person-mail { display: inline-block; padding: 15px 0; margin: -15px 0; overflow-wrap: anywhere; }
	/* Two people per row on tablets: three 190px columns broke the longer e-mail addresses mid-word. */
	.contact__people { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}