/* ==========================================================================
   Επικοινωνία – templates/page-epikoinonia.php
   reference/Epikoinonia.html. Hero, form, cards, label split and the tinted
   CTA band come from main.css.
   ========================================================================== */

.be_contact-hero {
	padding-top: 32px;
	padding-bottom: 56px;
}

.be_contact-herotext {
	flex: 0 0 auto;
	gap: 24px;
	max-width: 760px;
}

.be_contact-main {
	padding-top: 56px;
	padding-bottom: 0;
}

.be_contact-row {
	gap: 32px;
	align-items: flex-start;
}

/* --- form ---------------------------------------------------------------- */
.be_contact-form {
	flex: 2 1 520px;
	min-width: 0;
	max-width: 760px;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-panel);
	padding: 44px;
}

.be_contact-formtitle {
	font-size: clamp(26px, 2.6vw, 32px);
	margin-bottom: 4px;
}

.be_contact-note {
	margin-top: 4px;
}

/* --- dark contact panel --------------------------------------------------- */
.be_contact-panel {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 420px;
	gap: 28px;
	border-radius: var(--be-r-panel);
	padding: 40px;
}

.be_contact-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.be_contact-phone {
	font-family: var(--be-font-head);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.be_contact-phone--alt {
	font-size: 22px;
	font-weight: 400;
	color: var(--be-on-dark-soft);
}

.be_contact-email {
	font-size: 18px;
	font-weight: 700;
	word-break: break-word;
}

.be_contact-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-weight: 700;
}

/* --- second opinion ------------------------------------------------------- */
.be_contact-second {
	padding-top: 96px;
	padding-bottom: 0;
	scroll-margin-top: 24px;
}

.be_contact-secondtitle {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.12;
}

/* --- practices ------------------------------------------------------------ */
.be_contact-locations,
.be_contact-faq {
	padding-top: 96px;
	padding-bottom: 0;
}

.be_contact-faq {
	padding-bottom: 96px;
}

/* An h3 now, so the default heading margin has to go. */
.be_contact-locname {
	margin: 0;
	font-size: var(--be-h4);
	font-weight: 700;
	line-height: 1.3;
}

.be_contact-locaddress {
	font-style: normal;
	color: var(--be-muted);
}

@media (max-width: 1040px) {
	.be_contact-second,
	.be_contact-locations,
	.be_contact-faq {
		padding-top: 72px;
	}

	.be_contact-faq {
		padding-bottom: 72px;
	}
}

@media (max-width: 860px) {
	.be_contact-hero {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	.be_contact-main {
		padding-top: 40px;
	}

	.be_contact-second,
	.be_contact-locations,
	.be_contact-faq {
		padding-top: 48px;
	}

	.be_contact-faq {
		padding-bottom: 56px;
	}

	.be_contact-form,
	.be_contact-panel {
		padding: 28px 22px;
		border-radius: var(--be-r-card);
	}
}