/* ==========================================================================
   Prestige Detailing — contact locations (pd-contact)
   Figma: 204:4933 — tab row (88 tall), 96 gap, then map 580 × 400 | heading 225 | details 343 across 1408.
   Rendered inside #wrap_all, so every rule is paired: ".pd-contact .x" + "#top #wrap_all .pd-contact .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim, so it never depends on the nav stylesheet being current.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-contact {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-contact-ink: #161414;
	--pd-contact-ink-on: #242222;           /* idle tab hover, empty map tile */
	--pd-contact-red: #d60c0c;
	--pd-contact-line: rgba(255, 255, 255, 0.2);
	--pd-contact-text: #fff;

	/* Tabs (204:4935 / 204:4937) */
	--pd-contact-tab-fs: 22px;
	--pd-contact-tab-lh: 32px;
	--pd-contact-tab-py: 36px;              /* cap box to edge */
	--pd-contact-tab-px: 28px;
	--pd-contact-arm: 8px;                  /* bracket arm */
	--pd-contact-bar: 2px;                  /* bracket stroke */
	--pd-contact-tab-fs-s: 18px;            /* sections under 700 */
	--pd-contact-tab-lh-s: 24px;
	--pd-contact-tab-py-s: 28px;
	--pd-contact-tab-px-s: 20px;

	/* Tabs → content: 96 at the design's 1408, never under 48 */
	--pd-contact-gap: clamp(48px, 6.818cqw, 96px);

	/* Content row (204:4951) */
	--pd-contact-map-ratio: 580 / 400;
	--pd-contact-map-max: 480px;            /* stacked layouts only */
	--pd-contact-title-w: 225px;
	--pd-contact-info-w: 343px;
	--pd-contact-col-gap: 9.233%;           /* 130 / 1408 */
	--pd-contact-title-fs: 32px;
	--pd-contact-title-lh: 32px;
	--pd-contact-title-ls: -0.03em;         /* -0.96px @ 32 */
	--pd-contact-fs: 18px;
	--pd-contact-addr-lh: 24px;
	--pd-contact-line-lh: 28px;
	--pd-contact-info-gap: 48px;
	--pd-contact-lines-gap: 12px;
	--pd-contact-icon: 24px;
	--pd-contact-icon-gap: 16px;
	--pd-contact-speed: 0.2s;

	/* Margins: inline --pd-contact-mt / --pd-contact-mb from the panel; the ramp only writes -now */
	--pd-contact-mt-now: var(--pd-contact-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-contact.pd-contact--scale { --pd-contact-mt-now: calc(var(--pd-contact-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-contact.pd-contact--scale { --pd-contact-mt-now: calc(var(--pd-contact-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-contact .pd-nav-t,
#top #wrap_all .pd-contact .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-contact { --pd-fb: 1; }
}

/* ---------- Section ---------- */
.pd-contact,
#top #wrap_all .pd-contact {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
	container-name: pd-contact;
	margin-top: var(--pd-contact-mt-f, var(--pd-contact-mt-now));
	margin-bottom: var(--pd-contact-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: var(--pd-contact-text);
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Tabs: the scroller carries the overflow, the inner row carries the width (§7.5) ---------- */
.pd-contact .pd-contact__tabs,
#top #wrap_all .pd-contact .pd-contact__tabs {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pd-contact .pd-contact__tabs::-webkit-scrollbar,
#top #wrap_all .pd-contact .pd-contact__tabs::-webkit-scrollbar {
	display: none;
}

.pd-contact .pd-contact__tablist,
#top #wrap_all .pd-contact .pd-contact__tablist {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: transparent;
}

/* Idle tab: ink, 1px line (inset shadow — no size change between states, §7.5), white corner brackets */
.pd-contact .pd-contact__tab,
#top #wrap_all .pd-contact .pd-contact__tab {
	position: relative;
	display: flex;                          /* a tab stretched by a taller (wrapped) neighbour keeps its label centred */
	flex-direction: column;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-contact-tab-py);
	padding-bottom: var(--pd-contact-tab-py);
	padding-left: var(--pd-contact-tab-px);
	padding-right: var(--pd-contact-tab-px);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	color: var(--pd-contact-text);
	background-color: var(--pd-contact-ink);
	background-image:
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text)),
		linear-gradient(var(--pd-contact-text), var(--pd-contact-text));
	background-size:
		var(--pd-contact-arm) var(--pd-contact-bar), var(--pd-contact-bar) var(--pd-contact-arm),
		var(--pd-contact-arm) var(--pd-contact-bar), var(--pd-contact-bar) var(--pd-contact-arm),
		var(--pd-contact-arm) var(--pd-contact-bar), var(--pd-contact-bar) var(--pd-contact-arm),
		var(--pd-contact-arm) var(--pd-contact-bar), var(--pd-contact-bar) var(--pd-contact-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 0 1px var(--pd-contact-line);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--pd-contact-speed) ease;
}

.pd-contact .pd-contact__tab:hover,
#top #wrap_all .pd-contact .pd-contact__tab:hover {
	color: var(--pd-contact-text);
	background-color: var(--pd-contact-ink-on);
	text-decoration: none;
}

/* Active tab: solid red, no line, no brackets */
.pd-contact .pd-contact__tab.is-active,
#top #wrap_all .pd-contact .pd-contact__tab.is-active {
	color: var(--pd-contact-text);
	background-color: var(--pd-contact-red);
	background-image: none;
	box-shadow: none;
	cursor: default;
}

.pd-contact .pd-contact__tab:focus-visible,
#top #wrap_all .pd-contact .pd-contact__tab:focus-visible {
	outline: 2px solid var(--pd-contact-text);
	outline-offset: -6px;
}

.pd-contact .pd-contact__label,
#top #wrap_all .pd-contact .pd-contact__label {
	--fs: var(--pd-contact-tab-fs);
	--lh: var(--pd-contact-tab-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: inherit;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/* Narrow sections (no phone frame drawn): smaller tabs, so one location name fits a 343 phone column */
@container pd-contact (max-width: 699px) {
	.pd-contact .pd-contact__tab,
	#top #wrap_all .pd-contact .pd-contact__tab {
		padding-top: var(--pd-contact-tab-py-s);
		padding-bottom: var(--pd-contact-tab-py-s);
		padding-left: var(--pd-contact-tab-px-s);
		padding-right: var(--pd-contact-tab-px-s);
		max-width: 100cqw;                  /* a tab never outgrows the section; its label wraps instead */
	}

	.pd-contact .pd-contact__label,
	#top #wrap_all .pd-contact .pd-contact__label {
		--fs: var(--pd-contact-tab-fs-s);
		--lh: var(--pd-contact-tab-lh-s);
		white-space: normal;
		text-wrap: balance;
	}
}

/* ---------- Panels: all shown (stacked) without JS; one at a time once the script has mounted ---------- */
.pd-contact .pd-contact__panels,
#top #wrap_all .pd-contact .pd-contact__panels {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-contact-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-contact.pd-contact--tabs .pd-contact__panels,
#top #wrap_all .pd-contact.pd-contact--tabs .pd-contact__panels {
	margin-top: var(--pd-contact-gap);
}

.pd-contact.pd-contact--ready .pd-contact__panel:not(.is-active),
#top #wrap_all .pd-contact.pd-contact--ready .pd-contact__panel:not(.is-active) {
	display: none;
}

/* Phone: map, heading, details stacked */
.pd-contact .pd-contact__panel,
#top #wrap_all .pd-contact .pd-contact__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "map" "title" "info";
	align-items: start;
	column-gap: 40px;
	row-gap: 40px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	outline: none;
}

.pd-contact .pd-contact__panel--nomap,
#top #wrap_all .pd-contact .pd-contact__panel--nomap {
	grid-template-areas: "title" "info";
}

/* Tablet: map across the top, heading | details below. Follows the SECTION's width (container query). */
@container pd-contact (min-width: 700px) {
	.pd-contact .pd-contact__panel,
	#top #wrap_all .pd-contact .pd-contact__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--pd-contact-info-w));
		grid-template-areas: "map map" "title info";
		row-gap: var(--pd-contact-info-gap);
	}

	.pd-contact .pd-contact__panel--nomap,
	#top #wrap_all .pd-contact .pd-contact__panel--nomap {
		grid-template-areas: "title info";
	}
}

/* Desktop (204:4951): map | heading | details. The map takes what is left, so at 1408 it is exactly 580. */
@container pd-contact (min-width: 1200px) {
	.pd-contact .pd-contact__panel,
	#top #wrap_all .pd-contact .pd-contact__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--pd-contact-title-w)) minmax(0, var(--pd-contact-info-w));
		grid-template-areas: "map title info";
		column-gap: var(--pd-contact-col-gap);
	}

	.pd-contact .pd-contact__panel--nomap,
	#top #wrap_all .pd-contact .pd-contact__panel--nomap {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--pd-contact-info-w));
		grid-template-areas: "title info";
	}

}

/* ---------- Map: a crop box at the design's ratio; the iframe fills it ---------- */
.pd-contact .pd-contact__map,
#top #wrap_all .pd-contact .pd-contact__map {
	position: relative;
	grid-area: map;
	width: 100%;                            /* explicit, or max-height would shrink the width through the ratio */
	aspect-ratio: var(--pd-contact-map-ratio);
	max-height: var(--pd-contact-map-max);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
	background-color: var(--pd-contact-ink-on);
}

.pd-contact .pd-contact__frame,
#top #wrap_all .pd-contact .pd-contact__frame {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
}

/* Desktop: the map keeps the design ratio at every width (after the base rule, which it overrides) */
@container pd-contact (min-width: 1200px) {
	.pd-contact .pd-contact__map,
	#top #wrap_all .pd-contact .pd-contact__map {
		max-height: none;
	}
}

/* ---------- Heading (204:4960) ---------- */
.pd-contact .pd-contact__title,
#top #wrap_all .pd-contact .pd-contact__title {
	--fs: var(--pd-contact-title-fs);
	--lh: var(--pd-contact-title-lh);
	grid-area: title;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: var(--pd-contact-text);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: var(--pd-contact-title-ls);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

@container pd-contact (min-width: 700px) {
	.pd-contact .pd-contact__panel--nomap .pd-contact__title,
	#top #wrap_all .pd-contact .pd-contact__panel--nomap .pd-contact__title {
		max-width: var(--pd-contact-title-w);
	}
}

/* ---------- Details (204:4961): address, 48, phone / email (12 apart), 48, social ---------- */
.pd-contact .pd-contact__info,
#top #wrap_all .pd-contact .pd-contact__info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-contact-info-gap);
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-contact .pd-contact__addr,
.pd-contact .pd-contact__line,
#top #wrap_all .pd-contact .pd-contact__addr,
#top #wrap_all .pd-contact .pd-contact__line {
	--fs: var(--pd-contact-fs);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	color: var(--pd-contact-text);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pd-contact .pd-contact__addr,
#top #wrap_all .pd-contact .pd-contact__addr { --lh: var(--pd-contact-addr-lh); }

.pd-contact .pd-contact__line,
#top #wrap_all .pd-contact .pd-contact__line {
	--lh: var(--pd-contact-line-lh);
	transition: color var(--pd-contact-speed) ease;
}

.pd-contact .pd-contact__lines,
.pd-contact .pd-contact__social,
#top #wrap_all .pd-contact .pd-contact__lines,
#top #wrap_all .pd-contact .pd-contact__social {
	display: flex;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

.pd-contact .pd-contact__lines,
#top #wrap_all .pd-contact .pd-contact__lines {
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-contact-lines-gap);
	max-width: 100%;
}

.pd-contact .pd-contact__social,
#top #wrap_all .pd-contact .pd-contact__social {
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pd-contact-icon-gap);
}

.pd-contact .pd-contact__item,
.pd-contact .pd-contact__net,
#top #wrap_all .pd-contact .pd-contact__item,
#top #wrap_all .pd-contact .pd-contact__net {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

.pd-contact .pd-contact__link,
#top #wrap_all .pd-contact .pd-contact__link {
	display: block;
	width: var(--pd-contact-icon);
	height: var(--pd-contact-icon);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	color: var(--pd-contact-text);
	text-decoration: none;
	transition: color var(--pd-contact-speed) ease;
}

.pd-contact .pd-contact__svg,
#top #wrap_all .pd-contact .pd-contact__svg {
	display: block;
	width: var(--pd-contact-icon);
	height: var(--pd-contact-icon);
}

.pd-contact a.pd-contact__line:hover,
.pd-contact a.pd-contact__line:focus-visible,
.pd-contact .pd-contact__link:hover,
.pd-contact .pd-contact__link:focus-visible,
#top #wrap_all .pd-contact a.pd-contact__line:hover,
#top #wrap_all .pd-contact a.pd-contact__line:focus-visible,
#top #wrap_all .pd-contact .pd-contact__link:hover,
#top #wrap_all .pd-contact .pd-contact__link:focus-visible {
	color: var(--pd-contact-red);
	text-decoration: none;
}

.pd-contact a.pd-contact__line:focus-visible,
.pd-contact .pd-contact__link:focus-visible,
#top #wrap_all .pd-contact a.pd-contact__line:focus-visible,
#top #wrap_all .pd-contact .pd-contact__link:focus-visible {
	outline: 2px solid var(--pd-contact-text);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.pd-contact .pd-contact__tab,
	.pd-contact .pd-contact__line,
	.pd-contact .pd-contact__link,
	#top #wrap_all .pd-contact .pd-contact__tab,
	#top #wrap_all .pd-contact .pd-contact__line,
	#top #wrap_all .pd-contact .pd-contact__link {
		transition-duration: 0s;
	}
}