/* ==========================================================================
   Prestige Detailing — subhero (pd-subhero)
   Figma "Subhero" 12:2237 (1728 × 589). Rendered inside #wrap_all, so every
   rule is paired: ".pd-sh .x" + "#top #wrap_all .pd-sh .x".
   Shared from pd-main-nav: --pd-nav-* tokens, font, and the .pd-nav-t cap trim.
   ========================================================================== */

/* ---------- Tokens (ramps: 375 → 1728, the two Figma widths) ---------- */
.pd-sh {
	--pd-sh-dark: 22, 20, 20;                                            /* #161414 */
	--pd-sh-w: 580px;                                                    /* text column */
	--pd-sh-px: var(--pd-nav-px);                                        /* aligns with the nav logo */
	--pd-sh-pt: clamp(140px, calc(113.39px + 7.0953vw), 236px);          /* heading top  */
	--pd-sh-pb: clamp(56px, calc(32.72px + 6.2084vw), 140px);            /* 589 − 449    */
	--pd-sh-l1-fs: clamp(24px, calc(16.24px + 2.0695vw), 52px);
	--pd-sh-l2-fs: clamp(36px, calc(27.13px + 2.3651vw), 68px);
	--pd-sh-l2-lh: clamp(36px, calc(28.79px + 1.9217vw), 62px);
	--pd-sh-title-gap: clamp(10px, calc(8.89px + 0.2956vw), 14px);
	--pd-sh-rule-gap: clamp(32px, calc(27.57px + 1.1826vw), 48px);
	--pd-sh-crumb-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);
	--pd-sh-crumb-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-sh-top-h: clamp(120px, 11.574vw, 200px);                        /* top overlay */
	--pd-sh-tw: min(var(--pd-sh-w), calc(100vw - 2 * var(--pd-sh-px))); /* gradient span */

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

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

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

/* ---------- Enfold's section wrapper (full-width element) ---------- */
.pd-sh-wrap.container_wrap,
#top #wrap_all .pd-sh-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-sh),
#top #wrap_all .avia-section.container_wrap:has(.pd-sh) {
	border-top-width: 0;
}

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

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

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

.pd-sh .pd-sh__img,
#top #wrap_all .pd-sh .pd-sh__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

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

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

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

/* "Overlay_top": keeps the transparent nav legible */
.pd-sh .pd-sh__media::after,
#top #wrap_all .pd-sh .pd-sh__media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--pd-sh-top-h);
	background-image: linear-gradient(180deg, rgb(var(--pd-sh-dark)) 0%, rgba(var(--pd-sh-dark), 0) 100%);
}

/* Phones: the text runs full width, so darken bottom-up instead of left-right */
@media (max-width: 767px) {
	.pd-sh .pd-sh__media::before,
	#top #wrap_all .pd-sh .pd-sh__media::before {
		background-image: linear-gradient(180deg, rgba(var(--pd-sh-dark), 0.2) 0%, rgba(var(--pd-sh-dark), 0.88) 100%);
	}
}

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

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

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

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

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

/* Gradient fill on an INLINE box: its paint area is the font's, not the trimmed block's */
.pd-sh .pd-sh__grad,
#top #wrap_all .pd-sh .pd-sh__grad {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0, var(--pd-nav-white) calc(var(--pd-sh-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-sh .pd-sh__l2,
#top #wrap_all .pd-sh .pd-sh__l2 {
	--fs: var(--pd-sh-l2-fs);
	--lh: var(--pd-sh-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;                     /* −2.72 @ 68 */
	color: var(--pd-nav-white);
}

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

/* ---------- Breadcrumbs ---------- */
.pd-sh .pd-sh__crumbs,
#top #wrap_all .pd-sh .pd-sh__crumbs {
	display: block;
	background-color: transparent;
	font-size: var(--pd-sh-crumb-fs);
	line-height: var(--pd-sh-crumb-lh);
}

.pd-sh .pd-sh__trail,
#top #wrap_all .pd-sh .pd-sh__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 12px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style: none;
}

.pd-sh .pd-sh__crumb,
.pd-sh .pd-sh__sep,
#top #wrap_all .pd-sh .pd-sh__crumb,
#top #wrap_all .pd-sh .pd-sh__sep {
	display: block;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style: none;
	background-image: none;
	color: var(--pd-nav-white);
	opacity: 0.72;
	white-space: nowrap;
}

.pd-sh .pd-sh__crumb-text,
#top #wrap_all .pd-sh .pd-sh__crumb-text {
	--fs: var(--pd-sh-crumb-fs);
	--lh: var(--pd-sh-crumb-lh);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-sh .pd-sh__crumb-link,
#top #wrap_all .pd-sh .pd-sh__crumb-link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-bottom-width: 0;
	transition: color 0.2s ease;
}

.pd-sh .pd-sh__crumb-link:hover,
.pd-sh .pd-sh__crumb-link:focus,
#top #wrap_all .pd-sh .pd-sh__crumb-link:hover,
#top #wrap_all .pd-sh .pd-sh__crumb-link:focus {
	color: var(--pd-nav-white);
	text-decoration: none;
}

.pd-sh .pd-sh__crumb-link:focus-visible,
#top #wrap_all .pd-sh .pd-sh__crumb-link:focus-visible {
	outline: 1px solid var(--pd-nav-white);
	outline-offset: 4px;
}

/* Home: red, full opacity */
.pd-sh .pd-sh__crumb--home,
#top #wrap_all .pd-sh .pd-sh__crumb--home {
	color: var(--pd-nav-red);
	opacity: 1;
}

.pd-sh .pd-sh__crumb--home.pd-sh__crumb--current,
#top #wrap_all .pd-sh .pd-sh__crumb--home.pd-sh__crumb--current {
	color: var(--pd-nav-white);
}

/* Middle crumbs brighten on hover */
.pd-sh .pd-sh__crumb:not(.pd-sh__crumb--home):not(.pd-sh__crumb--current):hover,
#top #wrap_all .pd-sh .pd-sh__crumb:not(.pd-sh__crumb--home):not(.pd-sh__crumb--current):hover {
	opacity: 1;
}