/**
 * Contacts page (page-contacts.php) — the two-column info/form layout,
 * the form card, and the map frame. Everything else on the page (the
 * cover band, .phc-page-section, .phc-defs, .phc-page-ctas-style social
 * row) comes from story-pages.css, enqueued alongside this file — see
 * the is_page_template() list in functions.php. Keeping this file small
 * on purpose: it only holds what's actually new to this page.
 *
 * @package ProfHairClub_shop
 */

.phc-contacts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.4rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 900px) {
	.phc-contacts__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

/* Phone/email are the two links that actually matter on this page —
   underlined in the brand accent rather than left to inherit
   .phc-defs__text's plain graphite, so they read as actionable. */
.phc-contacts__info .phc-defs__text a {
	color: var(--phc-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--phc-yellow-deep);
	text-underline-offset: 3px;
}

.phc-contacts__note {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--phc-stone);
}

.phc-contacts__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 2rem;
}

/* Form card — same white/mist/radius language as .phc-page-door, so it
   reads as part of the same family of "boxed" content on this page
   grammar rather than a one-off component. */
.phc-contacts__form {
	background: var(--phc-white);
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-m);
	padding: clamp(1.6rem, 3.5vw, 2.4rem);
}

.phc-contacts__form-embed {
	margin-top: 1.4rem;
}

.phc-contacts__form-embed p {
	margin-bottom: 1rem;
}

.phc-contacts__form-embed input[type="text"],
.phc-contacts__form-embed input[type="email"],
.phc-contacts__form-embed input[type="tel"],
.phc-contacts__form-embed textarea {
	width: 100%;
}

/* Map -- fixed-ratio frame so the iframe (whatever it decides to render
   at) never pushes the layout around; narrower ratio on small screens so
   the embed doesn't get squeezed into a barely-readable strip. */
.phc-contacts__map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	border-radius: var(--phc-radius-m);
	overflow: hidden;
	border: 1px solid var(--phc-mist);
}

.phc-contacts__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.phc-contacts__map {
		aspect-ratio: 4 / 5;
	}
}