/* ==========================================================================
   Prestige Detailing — quote CTA (pd-quote-cta)
   Figma "Quote_CTA" 13:3412 (1728 × 606). Rendered inside #wrap_all, so every
   rule is paired: ".pd-qc .x" + "#top #wrap_all .pd-qc .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.
   The button is pd-button's .pd-btn (styled by pd-button.css).
   ========================================================================== */

@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 (ramps: 375 → 1728) ---------- */
.pd-qc {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-red: #d60c0c;
	--pd-nav-white: #fff;
	--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-nav-px: clamp(16px, 9.259vw, 160px);

	--pd-qc-dark: 22, 20, 20;                                            /* #161414 */
	--pd-qc-w: 580px;                                                    /* text column */
	--pd-qc-px: var(--pd-nav-px);                                        /* aligns with the nav logo */
	--pd-qc-py: clamp(64px, calc(37.39px + 7.0953vw), 160px);            /* 160 above + below */
	--pd-qc-l1-fs: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-qc-l2-fs: clamp(32px, calc(27.57px + 1.1826vw), 48px);
	--pd-qc-l2-lh: clamp(32px, calc(28.67px + 0.8869vw), 44px);
	--pd-qc-title-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);
	--pd-qc-rule-gap: clamp(32px, calc(29.78px + 0.5913vw), 40px);
	--pd-qc-text-fs: clamp(16px, calc(15.45px + 0.1478vw), 18px);
	--pd-qc-text-lh: clamp(24px, calc(22.89px + 0.2956vw), 28px);
	--pd-qc-btn-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);
	--pd-qc-tw: min(var(--pd-qc-w), calc(100vw - 2 * var(--pd-qc-px))); /* gradient span */

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

/* Same switch as the nav's mobile bar (16px sides) */
@media (max-width: 989px) {
	.pd-qc { --pd-qc-px: 16px; }
}

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

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-qc .pd-nav-t,
#top #wrap_all .pd-qc .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-qc { --pd-fb: 1; }
}

/* ---------- Enfold's section wrapper (full-width element) ---------- */
.pd-qc-wrap.container_wrap,
#top #wrap_all .pd-qc-wrap.container_wrap {
	border-top-width: 0;
	background-color: transparent;
}

/* Placed in a Color Section instead: drop that section's 1px top border too */
.avia-section.container_wrap:has(.pd-qc),
#top #wrap_all .avia-section.container_wrap:has(.pd-qc) {
	border-top-width: 0;
}

/* ---------- Root ---------- */
.pd-qc,
#top #wrap_all .pd-qc {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: block;
	width: 100%;
	margin-top: var(--pd-qc-mt-f, var(--pd-qc-mt-now));
	margin-bottom: var(--pd-qc-mb, 0px);
	background-color: rgb(var(--pd-qc-dark));
	color: var(--pd-nav-white);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.pd-qc *,
#top #wrap_all .pd-qc * {
	box-sizing: border-box;
}

/* ---------- Image + overlay ---------- */
.pd-qc .pd-qc__media,
#top #wrap_all .pd-qc .pd-qc__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.pd-qc .pd-qc__img,
#top #wrap_all .pd-qc .pd-qc__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 25%;                    /* Figma: 877 tall cover frame, masked to its top 606 */
}

.pd-qc.pd-qc--pos-top .pd-qc__img,
#top #wrap_all .pd-qc.pd-qc--pos-top .pd-qc__img {
	object-position: 50% 0%;
}

.pd-qc.pd-qc--pos-center .pd-qc__img,
#top #wrap_all .pd-qc.pd-qc--pos-center .pd-qc__img {
	object-position: 50% 50%;
}

.pd-qc.pd-qc--pos-bottom .pd-qc__img,
#top #wrap_all .pd-qc.pd-qc--pos-bottom .pd-qc__img {
	object-position: 50% 100%;
}

.pd-qc.pd-qc--mirror .pd-qc__img,
#top #wrap_all .pd-qc.pd-qc--mirror .pd-qc__img {
	transform: scaleX(-1);
}

/* "Overlay": left → right, 90% → 20% at half width */
.pd-qc .pd-qc__media::before,
#top #wrap_all .pd-qc .pd-qc__media::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(90deg, rgba(var(--pd-qc-dark), 0.9) 0%, rgba(var(--pd-qc-dark), 0.2) 50%);
}

/* Tablets: the 580 column covers most of the width, so the fade runs further */
@media (max-width: 989px) {
	.pd-qc .pd-qc__media::before,
	#top #wrap_all .pd-qc .pd-qc__media::before {
		background-image: linear-gradient(90deg, rgba(var(--pd-qc-dark), 0.9) 0%, rgba(var(--pd-qc-dark), 0.35) 85%);
	}
}

/* Phones: the text runs full width, so darken evenly with a heavier bottom */
@media (max-width: 767px) {
	.pd-qc .pd-qc__media::before,
	#top #wrap_all .pd-qc .pd-qc__media::before {
		background-image: linear-gradient(180deg, rgba(var(--pd-qc-dark), 0.6) 0%, rgba(var(--pd-qc-dark), 0.88) 100%);
	}
}

/* ---------- Content ---------- */
.pd-qc .pd-qc__inner,
#top #wrap_all .pd-qc .pd-qc__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: var(--pd-qc-py);
	padding-bottom: var(--pd-qc-py);
	padding-left: 0;
	padding-right: 0;
}

/* A flex column of cap-trimmed boxes: the gaps are the design's numbers */
.pd-qc .pd-qc__head,
#top #wrap_all .pd-qc .pd-qc__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-qc-rule-gap);
}

.pd-qc .pd-qc__title,
.pd-qc .pd-qc__body,
#top #wrap_all .pd-qc .pd-qc__title,
#top #wrap_all .pd-qc .pd-qc__body {
	width: min(var(--pd-qc-w), calc(100% - 2 * var(--pd-qc-px)));
	margin-left: var(--pd-qc-px);
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.pd-qc .pd-qc__title,
#top #wrap_all .pd-qc .pd-qc__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-qc-title-gap);
	font-family: var(--pd-nav-font);
	font-size: var(--pd-qc-l1-fs);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pd-nav-white);
	overflow-wrap: break-word;
}

.pd-qc .pd-qc__l1,
#top #wrap_all .pd-qc .pd-qc__l1 {
	--fs: var(--pd-qc-l1-fs);
	--lh: var(--pd-qc-l1-fs);
	max-width: 100%;
	font-weight: 400;
	letter-spacing: -0.03em;                     /* −0.96 @ 32 */
}

/* Gradient fill on an INLINE box: its paint area is the font's, not the trimmed block's */
.pd-qc .pd-qc__grad,
#top #wrap_all .pd-qc .pd-qc__grad {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0, var(--pd-nav-white) calc(var(--pd-qc-tw) * 0.25));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pd-qc .pd-qc__l2,
#top #wrap_all .pd-qc .pd-qc__l2 {
	--fs: var(--pd-qc-l2-fs);
	--lh: var(--pd-qc-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;                     /* −1.92 @ 48 */
	color: var(--pd-nav-white);
}

/* Rule: from the viewport edge to the end of the text column (0 → 740 @ 1728) */
.pd-qc .pd-qc__rule,
#top #wrap_all .pd-qc .pd-qc__rule {
	display: block;
	flex: none;
	width: min(calc(var(--pd-qc-px) + var(--pd-qc-w)), calc(100% - var(--pd-qc-px)));
	height: 1px;
	background-color: rgba(255, 255, 255, 0.4);
}

/* Text + button */
.pd-qc .pd-qc__body,
#top #wrap_all .pd-qc .pd-qc__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-qc-btn-gap);
}

.pd-qc .pd-qc__text,
#top #wrap_all .pd-qc .pd-qc__text {
	--fs: var(--pd-qc-text-fs);
	--lh: var(--pd-qc-text-lh);
	max-width: 100%;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pd-nav-white);
	opacity: 0.72;
}

/* Only when pd-button is missing: keep the link usable */
.pd-qc .pd-qc__fallback-link,
#top #wrap_all .pd-qc .pd-qc__fallback-link {
	align-self: flex-start;
	color: var(--pd-nav-white);
	text-transform: uppercase;
}