/* ==========================================================================
   Contact page. Intro text beside the contact panel.
   ========================================================================== */

.contact-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 440px; gap: 64px; } }

.contact-panel {
	padding: clamp(24px, 4vw, 32px);
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--pop);
	border-radius: var(--r-card);
}
.contact-panel__title { font-size: 1.35rem; }
.contact-panel__email {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	word-break: break-word;
}
.contact-panel__email .ql-icon { width: 24px; height: 24px; color: var(--accent); }
.contact-panel__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }

/* Contact form markup (plugin, M3). */
.contact-panel label { display: block; margin-bottom: 4px; font-weight: 600; font-size: .925rem; }
.contact-panel input,
.contact-panel select,
.contact-panel textarea {
	width: 100%;
	min-height: 46px;
	margin-bottom: 16px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-input);
	background: var(--bg);
	color: var(--fg);
}
.contact-panel textarea { min-height: 140px; resize: vertical; }
.contact-panel input:focus,
.contact-panel select:focus,
.contact-panel textarea:focus { border-color: var(--accent); }

/* Contact form states (plugin, M3). */
.ql-contact__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ql-contact__msg { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-input); font-weight: 600; }
.ql-contact__msg--success { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ok); border: 1px solid var(--ok); }
.ql-contact__msg--error { background: color-mix(in srgb, var(--high) 10%, var(--bg)); color: var(--high); border: 1px solid var(--high); }
.ql-contact__form .btn { width: 100%; margin-top: 4px; }