/* ============================================================
   Maxillo Clinic — Contact page
   built on the design system (system.css)
   ============================================================ */

.phead {
	padding-top: clamp(40px, 6vw, 80px);
	padding-bottom: clamp(24px, 4vw, 46px);
}
.phead h1 {
	margin: 0.18em 0 0;
}
.phead .lead {
	margin-top: 22px;
	max-width: 52ch;
}

.contact-page {
	padding-bottom: clamp(48px, 7vw, 96px);
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (max-width: 760px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

.contact-card {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3.5vw, 34px);
	border-radius: var(--radius-l);
	background: var(--surface);
	border: 1px solid var(--line);
}

.contact-card__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	background: rgba(22, 51, 94, 0.06);
	color: var(--ink);
	margin-bottom: 18px;
}
.contact-card__icon svg {
	width: 24px;
	height: 24px;
}
.contact-card__icon--whatsapp {
	background: rgba(52, 196, 91, 0.12);
	color: var(--green-d);
}
.contact-card__icon--instagram {
	background: rgba(22, 51, 94, 0.08);
	color: var(--ink);
}

.contact-card__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	color: var(--ink);
	margin: 0 0 10px;
	line-height: 1.3;
}
.contact-card__text {
	font-size: clamp(1rem, 1.1vw, 1.08rem);
	color: var(--ink-2);
	line-height: 1.85;
	margin: 0;
	flex: 1;
}
.contact-card__link {
	color: var(--green-d);
	border-bottom: 1px solid var(--line);
	transition: border-color 0.25s, color 0.25s;
}
.contact-card__link:hover {
	color: var(--ink);
	border-color: var(--green);
}
.contact-card__action {
	margin-top: 20px;
	align-self: flex-start;
}
.contact-card__action.tlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--green-d);
}
.contact-card__action.tlink:hover {
	color: var(--ink);
}

.contact-cta {
	margin-top: clamp(36px, 5vw, 56px);
	background: var(--ink);
	color: var(--cream);
	border-radius: var(--radius-l);
	padding: clamp(32px, 5vw, 56px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.contact-cta h2 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	margin: 0;
	line-height: 1.1;
}
.contact-cta p {
	color: rgba(238, 243, 251, 0.7);
	margin: 8px 0 0;
	max-width: 42ch;
}
.contact-cta .btn-primary {
	background: #fff;
	color: var(--ink);
}
.contact-cta .btn-primary .arr {
	background: var(--green);
	color: #fff;
}
.contact-cta .btn-primary:hover .arr {
	transform: rotate(-45deg);
}