/* Liverpool Xtra — page Contact. */

.contact__layout { display: grid; gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 80px); }
@media (min-width: 960px) { .contact__layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.contact__intro { margin-bottom: 24px; }

.contact__notice { margin-bottom: 20px; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--paper-2); }
.contact__notice strong { display: block; margin-bottom: 2px; }
.contact__notice--ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--paper)); }
.contact__notice--error { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--paper)); }

.contact-form { display: grid; gap: 20px; }
.contact-form__row { display: grid; gap: 20px; }
@media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form__field { display: grid; gap: 8px; }
.contact-form__field label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--ink);
	font: 16px/1.5 var(--font-ui);
}
.contact-form textarea { min-height: 200px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring, color-mix(in srgb, var(--accent) 25%, transparent)); }
.contact-form ::placeholder { color: var(--ink-3); }
.contact-form__field.is-invalid input, .contact-form__field.is-invalid select, .contact-form__field.is-invalid textarea { border-color: var(--bad); }
.contact-form__error { margin: 0; font-size: 14px; font-weight: 600; color: var(--bad); }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__captcha { min-height: 65px; }
.contact-form__submit { justify-self: start; min-height: 52px; padding: 0 28px; }
.contact-form__privacy { margin: -8px 0 0; font-size: 13px; color: var(--ink-3); }

.contact__side { display: grid; gap: 16px; }
.contact__card { padding: 22px 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.contact__card-title { margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.contact__mail { color: var(--accent-ink); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.contact__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__socials { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact__socials a { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.contact__socials a:hover { color: var(--accent-ink); }
.contact__social-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--paper); flex: none; }
.contact__socials a:hover .contact__social-icon { border-color: var(--accent); }