/* pages/contact.css
   Contact page: the form grid, social cards and map embed.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: start;
	padding-top: 76px;
	padding-bottom: 20px;
}

.contact-side { display: flex; flex-direction: column; gap: 22px; }

.contact-block {
	border-top: 1px solid var(--line);
	padding-top: 18px;
	display: flex;
	gap: 16px;
}

/* Centred on the label's 17px line box: (17 - 10) / 2. The old 7px sat it 3.5px low. */
.contact-dot { width: 10px; height: 10px; flex: none; margin-top: 3.5px; }

.contact-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 600;
	color: var(--ink-3);
	margin-bottom: 6px;
}

.contact-body {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.7;
}

.contact-body p { margin: 0 0 0.6em; }

.map-embed { width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--line); margin-top: 6px; }

.social-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	max-width: 820px;
}

.social-card {
	border: 1px solid var(--line);
	padding: 22px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
}

.social-card:hover { border-color: var(--navy); color: var(--navy); }

.social-card.is-ph { color: #6E7488; }

.social-card:hover .social-icon { color: var(--navy); }

.social-card.is-ph .social-icon { color: #C6CCDA; }

/* On the contact panel the values are the content, so give them a little more weight. */
.contact-body .contact-link:hover { color: var(--navy); }

@media (max-width: 980px) {
	.contact-grid {
		grid-template-columns: 1fr; gap: 40px;
	}

	/* The contact page leads straight into the form, so it does not need the 76px the
		   desktop layout uses to clear the hero. Bottom stays at the base 20px. */
	.contact-grid { padding-top: 25px; }
}

@media (max-width: 680px) {
	.social-grid { grid-template-columns: repeat(2, 1fr); }
}