/**
 * ToyTool — Contact page.
 * Mobile-first.
 */

.tt-contact-intro { display: flex; flex-direction: column; gap: 2rem; }
.tt-contact-intro__media {
	border-radius: var(--tt-radius-lg);
	overflow: hidden;
	background: var(--tt-light-background);
}
.tt-contact-intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-contact-intro__content p { color: var(--tt-muted); margin-bottom: 1rem; }
.tt-contact-intro__content .tt-button { margin-top: 0.5rem; }
.tt-contact-intro--no-image .tt-contact-intro__content { max-width: 640px; }
@media (min-width: 768px) {
	.tt-contact-intro { flex-direction: row; align-items: center; gap: 3rem; }
	.tt-contact-intro__media { flex: 1 1 45%; aspect-ratio: 4 / 3; }
	.tt-contact-intro__content { flex: 1 1 55%; }
}

.tt-contact-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding-bottom: 3rem;
}
@media (min-width: 640px) { .tt-contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tt-contact-info-grid { grid-template-columns: repeat(4, 1fr); } }

.tt-contact-info-card {
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius-lg);
	padding: 1.5rem;
	color: var(--tt-primary);
}
.tt-contact-info-card__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tt-muted);
	margin-block: 0.9rem 0.4rem;
}
.tt-contact-info-card p { color: var(--tt-heading); margin: 0; }
.tt-contact-info-card p + p { margin-top: 0.25rem; }
.tt-contact-info-card a { color: var(--tt-heading); }
.tt-contact-info-card a:hover { color: var(--tt-primary); }
.tt-contact-info-card__social { display: flex; gap: 0.6rem; }
.tt-contact-info-card__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tt-light-background);
	color: var(--tt-heading);
}
.tt-contact-info-card__social a:hover { background: var(--tt-primary); color: #fff; }

.tt-contact-form-section { display: flex; flex-direction: column; gap: 2rem; }
.tt-contact-form-intro p { color: var(--tt-muted); margin-top: 0.5rem; }
.tt-contact-form-wrap { max-width: 620px; }
@media (min-width: 1024px) {
	.tt-contact-form-section { flex-direction: row; gap: 3.5rem; }
	.tt-contact-form-intro { flex: 1 1 34%; }
	.tt-contact-form-wrap { flex: 1 1 66%; }
}

.tt-contact-form .tt-form-row { margin-bottom: 1.1rem; }
.tt-contact-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.4rem; color: var(--tt-heading); }
.tt-contact-form input,
.tt-contact-form textarea { width: 100%; }
.tt-contact-form textarea { min-height: 140px; }
.tt-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tt-form-notice {
	border-radius: var(--tt-radius-md);
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
	font-weight: 600;
	font-size: 0.9375rem;
}
.tt-form-notice--success { background: #ECFDF5; color: #065F46; }
.tt-form-notice--error { background: #FEF2F2; color: #991B1B; }