/*
 * Contact Page — Split info/form + map embed.
 *
 * Layout: constrained inner (breadcrumb + 2-col grid) → full-width map → FAQ.
 * Form: visual placeholder — buyer replaces wp:html with WPForms/CF7/Fluent shortcode.
 *
 * Tokens read:
 *   color.terracotta.500           — kicker
 *   color.neutral.200              — map bg
 *   semantic.color.text.primary    — heading, info values, send button
 *   semantic.color.text.muted      — breadcrumb, body, info labels, form labels
 *   semantic.color.text.inverse    — send button text
 *   semantic.color.bg.inverse      — send button bg
 *   semantic.color.bg.surface      — notice strip bg
 *   semantic.color.border.base     — field underlines, table borders
 *   semantic.typography.display    — heading (Cormorant)
 *   semantic.typography.body       — kicker, body, labels, values (Jost)
 *   space.1 – 10
 */

/* ── Page wrapper ─────────────────────────────────────────────────────── */

.wpdl-contact__inner.wp-block-group {
	padding-block: var(--wp--custom--space--9) var(--wp--custom--space--8);
	margin-block: 0;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */

.wpdl-contact__breadcrumb {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-contact__breadcrumb a {
	color: var(--wp--custom--semantic--color--text--muted);
	text-decoration: none;
}

/* ── 2-col grid ───────────────────────────────────────────────────────── */

.wpdl-contact__grid.wp-block-group {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--wp--custom--space--10);
	align-items: start;
	margin-block: 0;
}

.wpdl-contact__info.wp-block-group,
.wpdl-contact__form-wrap.wp-block-group {
	margin-block: 0;
}

/* ── Info column ──────────────────────────────────────────────────────── */

.wpdl-contact__kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-contact__heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.3125rem, 0.7rem + 2.68vw, 2.25rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--5);
	line-height: 1.2;
}

.wpdl-contact__body {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-contact__info-blocks.wp-block-group {
	gap: var(--wp--custom--space--6);
	margin-block: 0;
}

.wpdl-contact__info-item.wp-block-group {
	gap: var(--wp--custom--space--2);
	margin-block: 0;
}

.wpdl-contact__info-label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-contact__info-value {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

/* Icons via CSS mask — label text stays a plain paragraph, fully buyer-editable.
   -webkit-mask-* prefixes kept for Safari <15.4 compatibility. */
/* stylelint-disable property-no-vendor-prefix */
.wpdl-contact__info-label--studio::before,
.wpdl-contact__info-label--phone::before,
.wpdl-contact__info-label--email::before,
.wpdl-contact__info-label--hours::before {
	content: "";
	display: inline-block;
	width: 0.9375rem;
	height: 0.9375rem;
	vertical-align: -0.25em;
	margin-inline-end: var(--wp--custom--space--3);
	background-color: var(--wp--custom--semantic--color--accent--primary);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.9;
}

.wpdl-contact__info-label--studio::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/><circle cx='12' cy='9' r='2.5'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/><circle cx='12' cy='9' r='2.5'/></svg>");
}

.wpdl-contact__info-label--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/></svg>");
}

.wpdl-contact__info-label--email::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
}

.wpdl-contact__info-label--hours::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
/* stylelint-enable property-no-vendor-prefix */

/* ── Social media links ───────────────────────────────────────────────── */

.wpdl-contact__social.wp-block-group {
	gap: var(--wp--custom--space--4);
	flex-wrap: wrap;
	margin-block: var(--wp--custom--space--7) 0;
}

.wpdl-contact__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--wp--custom--semantic--color--text--primary);
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	text-decoration: none;
	flex-shrink: 0;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
				border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-contact__social-link:hover,
.wpdl-contact__social-link:focus-visible {
	color: var(--wp--custom--semantic--color--accent--primary);
	border-color: var(--wp--custom--semantic--color--accent--primary);
	outline: none;
}

.wpdl-contact__social-link svg {
	display: block;
	flex-shrink: 0;
}

/* ── Form column ──────────────────────────────────────────────────────── */

.wpdl-contact__form-kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--6);
}

/* ── Contact form placeholder ─────────────────────────────────────────── */

.wpdl-contact__pf {
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	padding: var(--wp--custom--space--7);
}

.wpdl-contact__pf-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--space--3);
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--wp--custom--semantic--color--text--muted);
	background-color: var(--wp--custom--semantic--color--surface--primary);
	padding: var(--wp--custom--space--4) var(--wp--custom--space--5);
	margin-block-end: var(--wp--custom--space--7);
}

.wpdl-contact__pf-notice svg {
	flex-shrink: 0;
	margin-block-start: 0.125rem;
	opacity: 0.6;
}

.wpdl-contact__pf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--custom--space--5);
	margin-block-end: var(--wp--custom--space--5);
}

.wpdl-contact__pf-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--2);
	margin-block-end: var(--wp--custom--space--5);
}

.wpdl-contact__pf-row .wpdl-contact__pf-field {
	margin-block-end: 0;
}

.wpdl-contact__pf-label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
}

.wpdl-contact__pf-input {
	block-size: 2rem;
	border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-contact__pf-textarea {
	block-size: 5.5rem;
}

.wpdl-contact__pf-btn {
	display: block;
	width: 100%;
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--inverse);
	background-color: var(--wp--custom--semantic--color--brand--primary);
	border: none;
	padding: var(--wp--custom--space--5) var(--wp--custom--space--7);
	margin-block-start: var(--wp--custom--space--5);
	cursor: default;
}

/* ── Map ──────────────────────────────────────────────────────────────── */

.wpdl-contact__map-wrap {
	width: 100%;
	block-size: 26rem;
	background-color: var(--wp--custom--semantic--color--border--subtle);
	overflow: hidden;
	margin-block-start: var(--wp--custom--space--9);
}

.wpdl-contact__map-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(20%) contrast(1.05);
}

@media (width < 40em) {
	.wpdl-contact__map-wrap {
		block-size: 18rem;
	}
}

/* ── FAQ section ─────────────────────────────────────────────────────── */

.wpdl-contact__faq.wp-block-group {
	padding-block: var(--wp--custom--space--9) var(--wp--custom--space--10);
}

.wpdl-contact__faq-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	opacity: 1;
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-contact__faq-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.125rem, 0.9rem + 1.01vw, 1.5rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-contact__faq-item.wp-block-details {
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	padding-block: var(--wp--custom--space--5);
	margin-block: 0;
}

.wpdl-contact__faq-item.wp-block-details > summary {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--space--5);
}

.wpdl-contact__faq-item.wp-block-details > summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 200;
	color: var(--wp--custom--semantic--color--text--muted);
	flex-shrink: 0;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-contact__faq-item.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.wpdl-contact__faq-item.wp-block-details > p,
.wpdl-contact__faq-item.wp-block-details .wp-block-paragraph {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: var(--wp--custom--space--4) 0;
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-contact__grid.wp-block-group {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--space--8);
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-contact__inner.wp-block-group {
		padding-block: var(--wp--custom--space--7) var(--wp--custom--space--6);
	}

	.wpdl-contact__pf {
		padding: var(--wp--custom--space--5);
	}

	.wpdl-contact__pf-row {
		grid-template-columns: 1fr;
	}

	.wpdl-contact__pf-row .wpdl-contact__pf-field {
		margin-block-end: var(--wp--custom--space--5);
	}
}