/* =============================================================
   Contact template (templates/template-contact.php).
   Depends on main.css (.dm-form, .dm-formpanel) and landing.css
   (.dm-phero). Loaded only on this template.
   ============================================================= */

/* ---------- Contact detail cards ---------- */
/*
 * Same treatment as the process step cards: the icon sits in a circle centred
 * over the card's top edge, the copy is centred, and a hairline rule separates
 * the label from the value. No step number — these are not a sequence.
 */
.dm-contactcards__grid {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 28px);
}

.dm-contactcard {
	position: relative;
	padding-top: 50px; /* half the 100px icon circle */
	display: flex;
	flex-direction: column;
}
.dm-contactcard__icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--color-bg-footer);
	border: 1px solid var(--color-border-faint);
	display: grid;
	place-items: center;
	color: var(--color-primary);
}
.dm-contactcard__icon svg { width: 40px; height: 40px; }

.dm-contactcard__body {
	flex: 1;
	padding: 74px 24px 34px;
	border: 1px solid var(--color-border-faint);
	border-radius: var(--radius-card);
	background: var(--color-bg-card-alt);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.dm-contactcard__title {
	font-size: clamp(17px, 1.2vw, 22px);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}
.dm-contactcard__title::after {
	content: '';
	display: block;
	margin: 14px auto 0;
	height: 1px;
	width: min(200px, 90%);
	background: linear-gradient(90deg, transparent, rgba(255, 143, 8, .65), transparent);
}
.dm-contactcard__value {
	font-size: clamp(14px, .94vw, 18px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
	overflow-wrap: anywhere;
}
a.dm-contactcard__value:hover { color: var(--color-primary); }

/* ---------- Map ---------- */
.dm-map {
	/* The iframe's intrinsic width is 300px, so the wrapper has to claim the
	   column itself. */
	flex: 1;
	width: 100%;
	background: var(--color-bg-card-alt);
}
.dm-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
	filter: grayscale(35%);
}

@media (max-width: 1024px) {
	.dm-contactcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.dm-map__frame { min-height: 300px; }
}

@media (max-width: 560px) {
	.dm-contactcards__grid { grid-template-columns: minmax(0, 1fr); }
}