/* ============ Contact page ============ */

.cb-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cb-space-xl); margin-top: var(--cb-space-xl); }
@media (min-width: 1024px) { .cb-contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.cb-contact-form { display: flex; flex-direction: column; gap: var(--cb-space-md); }
.cb-contact-form .cb-field textarea { resize: vertical; }
.cb-contact-form .cb-btn { align-self: flex-start; }

.cb-contact-notice { padding: 0.85rem 1rem; border-radius: var(--cb-radius); font-size: var(--cb-text-body-sm); }
.cb-contact-notice--success { background: color-mix(in srgb, var(--cb-color-dusty-rose) 18%, var(--cb-color-background)); color: var(--cb-color-text); }
.cb-contact-notice--error { background: #fbe6e6; color: #8a2a2a; }

.cb-contact-info {
	display: flex; flex-direction: column; gap: var(--cb-space-lg);
	background: var(--cb-color-surface-alt); border-radius: var(--cb-radius);
	padding: var(--cb-space-lg);
	height: fit-content;
}
.cb-contact-info__item { display: flex; align-items: flex-start; gap: var(--cb-space-sm); }
.cb-contact-info__item svg { flex-shrink: 0; color: var(--cb-color-primary); margin-top: 0.15rem; }
.cb-contact-info__item div { display: flex; flex-direction: column; gap: 0.25rem; }
.cb-contact-info__item .cb-label-caps { color: var(--cb-color-text-muted); }
.cb-contact-info__item a { color: var(--cb-color-text); }
.cb-contact-info__item a:hover { color: var(--cb-color-dusty-rose); }

.cb-contact-info__social { display: flex; flex-direction: column; gap: 0.6rem; padding-top: var(--cb-space-sm); border-top: 1px solid var(--cb-color-border); }
.cb-contact-info__social .cb-label-caps { color: var(--cb-color-text-muted); }
.cb-contact-info__social-links { display: flex; gap: var(--cb-space-sm); }
.cb-contact-info__social-links a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: var(--cb-radius-full);
	background: var(--cb-color-surface); border: 1px solid var(--cb-color-border);
	transition: background var(--cb-transition-fast), color var(--cb-transition-fast);
}
.cb-contact-info__social-links a:hover { background: var(--cb-color-primary); color: var(--cb-color-text); }

.cb-contact-map { border-radius: var(--cb-radius); overflow: hidden; box-shadow: var(--cb-shadow-card); margin-top: var(--cb-space-xl); }
.cb-contact-map iframe { display: block; width: 100%; height: 360px; border: 0; }