/* ==========================================================================
   Prestige Detailing — latest posts (pd-latest)
   Figma: desktop 178:3756 (4 × 322, gap 40 = 1408 @ 1728), mobile 204:6453 (300 cards, gap 12, 16 edge @ 375).
   Rendered inside #wrap_all, so every rule is paired: ".pd-lp .x" + "#top #wrap_all .pd-lp .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-lp {
	/* 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-lp-dark: #161414;
	--pd-lp-tile: #242222;
	--pd-lp-chip: rgba(255, 255, 255, 0.2);
	--pd-lp-body: rgba(255, 255, 255, 0.72);

	/* Desktop grid (ramps exact at 1728 by construction) */
	--pd-lp-cols: 4;
	--pd-lp-col-gap: clamp(16px, calc(40px - (1728px - 100vw) * 0.017738), 40px);
	--pd-lp-row-gap: clamp(48px, calc(72px - (1728px - 100vw) * 0.017738), 72px);

	/* Swipe row (below 1280) */
	--pd-lp-card-w: min(300px, calc(100vw - 75px));
	--pd-lp-swipe-gap: 12px;
	--pd-lp-edge: 0px;
	--pd-lp-bleed: 0px;
	--pd-lp-clip: 12px;

	/* Card */
	--pd-lp-card-gap: 32px;
	--pd-lp-text-w: 282px;
	--pd-lp-chip-gap: 8px;
	--pd-lp-chip-px: 8px;
	--pd-lp-chip-py: 6px;
	--pd-lp-chip-fs: 14px;
	--pd-lp-chip-lh: 20px;
	--pd-lp-title-fs: 22px;
	--pd-lp-title-lh: 28px;
	--pd-lp-body-fs: 16px;
	--pd-lp-body-lh: 24px;

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

@media (max-width: 1199px) {
	.pd-lp.pd-lp--scale { --pd-lp-mt-now: calc(var(--pd-lp-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-lp.pd-lp--scale { --pd-lp-mt-now: calc(var(--pd-lp-mt, 0px) * 0.6); }
}
/* Phones and touch tablets: the row runs to the screen edges; the first card lines up with the column
   (never nearer than 16px). Mouse screens keep it inside the column: 100vw would include the scrollbar. */
@media (max-width: 767px), (max-width: 1279px) and (pointer: coarse) {
	.pd-lp {
		--pd-lp-edge: max(16px, calc((100vw - 100cqw) / 2));
		--pd-lp-bleed: calc((100cqw - 100vw) / 2);
	}
}

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

/* ---------- Root ---------- */
.pd-lp,
#top #wrap_all .pd-lp {
	display: block;
	width: 100%;
	container-type: inline-size;          /* 100cqw = the column, for the phone bleed */
	margin-top: var(--pd-lp-mt-f, var(--pd-lp-mt-now));
	margin-bottom: var(--pd-lp-mb, 0px);
	color: var(--pd-nav-white);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

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

/* Lists: normalise margin, padding and list-style */
.pd-lp .pd-lp__row,
.pd-lp .pd-lp__item,
#top #wrap_all .pd-lp .pd-lp__row,
#top #wrap_all .pd-lp .pd-lp__item {
	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;
}

.pd-lp a,
.pd-lp a:hover,
.pd-lp a:focus,
#top #wrap_all .pd-lp a,
#top #wrap_all .pd-lp a:hover,
#top #wrap_all .pd-lp a:focus {
	color: var(--pd-nav-white);
	text-decoration: none;
	border-bottom-width: 0;
}

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

.pd-lp svg,
#top #wrap_all .pd-lp svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Trimmed text: size + line height via --fs / --lh (read by .pd-nav-t) */
.pd-lp .pd-nav-t,
#top #wrap_all .pd-lp .pd-nav-t {
	--fs: 16px;
	--lh: 24px;
	color: inherit;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* ---------- Desktop: four across ---------- */
.pd-lp .pd-lp__row,
#top #wrap_all .pd-lp .pd-lp__row {
	display: grid;
	grid-template-columns: repeat(var(--pd-lp-cols), minmax(0, 1fr));
	column-gap: var(--pd-lp-col-gap);
	row-gap: var(--pd-lp-row-gap);
	align-items: start;
}

/* ---------- Below 1280: one swipe row (native scroll-snap, no script) ---------- */
@media (max-width: 1279px) {
	.pd-lp .pd-lp__scroller,
	#top #wrap_all .pd-lp .pd-lp__scroller {
		margin-left: var(--pd-lp-bleed);
		margin-right: var(--pd-lp-bleed);
		padding-bottom: var(--pd-lp-clip);         /* room for the excerpt's descenders (the trim ends on the baseline) */
		margin-bottom: calc(-1 * var(--pd-lp-clip));
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--pd-lp-edge);
		scroll-padding-right: var(--pd-lp-edge);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pd-lp .pd-lp__scroller::-webkit-scrollbar,
	#top #wrap_all .pd-lp .pd-lp__scroller::-webkit-scrollbar {
		display: none;
	}

	/* The inner row carries the edge padding (a scroller's own end padding is unreliable) */
	.pd-lp .pd-lp__row,
	#top #wrap_all .pd-lp .pd-lp__row {
		display: flex;
		width: max-content;
		column-gap: var(--pd-lp-swipe-gap);
		padding-left: var(--pd-lp-edge);
		padding-right: var(--pd-lp-edge);
	}

	.pd-lp .pd-lp__item,
	#top #wrap_all .pd-lp .pd-lp__item {
		flex: none;
		width: var(--pd-lp-card-w);
		scroll-snap-align: start;
	}
}

/* ---------- Card (the whole card is one link) ---------- */
.pd-lp .pd-lp__card,
#top #wrap_all .pd-lp .pd-lp__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-lp-card-gap);
}

/* Square picture, black & white at rest (Figma: luminosity blend) */
.pd-lp .pd-lp__media,
#top #wrap_all .pd-lp .pd-lp__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--pd-lp-tile);
}

.pd-lp .pd-lp__img,
#top #wrap_all .pd-lp .pd-lp__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

.pd-lp .pd-lp__mark,
#top #wrap_all .pd-lp .pd-lp__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 56%;
	aspect-ratio: 462 / 155;
	transform: translate(-50%, -50%);
	opacity: 0.2;
}

.pd-lp .pd-lp__chips,
#top #wrap_all .pd-lp .pd-lp__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--pd-lp-chip-gap);
	row-gap: var(--pd-lp-chip-gap);
}

/* Padded chip: the trim lives on the inner text, never on the padded box */
.pd-lp .pd-lp__chip,
#top #wrap_all .pd-lp .pd-lp__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--pd-lp-chip-py);
	padding-right: var(--pd-lp-chip-px);
	padding-bottom: var(--pd-lp-chip-py);
	padding-left: var(--pd-lp-chip-px);
	background-color: var(--pd-lp-chip);
	color: var(--pd-nav-white);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pd-lp .pd-lp__chip-t,
#top #wrap_all .pd-lp .pd-lp__chip-t {
	--fs: var(--pd-lp-chip-fs);
	--lh: var(--pd-lp-chip-lh);
	color: inherit;
	white-space: nowrap;
}

.pd-lp .pd-lp__title,
#top #wrap_all .pd-lp .pd-lp__title {
	--fs: var(--pd-lp-title-fs);
	--lh: var(--pd-lp-title-lh);
	width: 100%;
	max-width: var(--pd-lp-text-w);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: var(--pd-nav-white);
	font-weight: 600;
}

.pd-lp .pd-lp__excerpt,
#top #wrap_all .pd-lp .pd-lp__excerpt {
	--fs: var(--pd-lp-body-fs);
	--lh: var(--pd-lp-body-lh);
	width: 100%;
	max-width: var(--pd-lp-text-w);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: var(--pd-lp-body);
}

.pd-lp .pd-lp__dots,
#top #wrap_all .pd-lp .pd-lp__dots {
	color: var(--pd-nav-red);
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Lit state: hover / keyboard focus (desktop 178:3768) ---------- */
.pd-lp .pd-lp__card:hover .pd-lp__img,
.pd-lp .pd-lp__card:focus-visible .pd-lp__img,
#top #wrap_all .pd-lp .pd-lp__card:hover .pd-lp__img,
#top #wrap_all .pd-lp .pd-lp__card:focus-visible .pd-lp__img {
	filter: grayscale(0);
}

.pd-lp .pd-lp__card:hover .pd-lp__chip--cat,
.pd-lp .pd-lp__card:focus-visible .pd-lp__chip--cat,
#top #wrap_all .pd-lp .pd-lp__card:hover .pd-lp__chip--cat,
#top #wrap_all .pd-lp .pd-lp__card:focus-visible .pd-lp__chip--cat {
	background-color: var(--pd-nav-white);
	color: var(--pd-lp-dark);
}

.pd-lp .pd-lp__card:hover .pd-lp__chip--date,
.pd-lp .pd-lp__card:focus-visible .pd-lp__chip--date,
#top #wrap_all .pd-lp .pd-lp__card:hover .pd-lp__chip--date,
#top #wrap_all .pd-lp .pd-lp__card:focus-visible .pd-lp__chip--date {
	background-color: var(--pd-nav-red);
}

/* Touch screens have no hover: every card is lit, as the mobile design draws it (204:6453) */
@media (hover: none) {
	.pd-lp .pd-lp__img,
	#top #wrap_all .pd-lp .pd-lp__img {
		filter: grayscale(0);
	}

	.pd-lp .pd-lp__chip--cat,
	#top #wrap_all .pd-lp .pd-lp__chip--cat {
		background-color: var(--pd-nav-white);
		color: var(--pd-lp-dark);
	}

	.pd-lp .pd-lp__chip--date,
	#top #wrap_all .pd-lp .pd-lp__chip--date {
		background-color: var(--pd-nav-red);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-lp .pd-lp__img,
	.pd-lp .pd-lp__chip,
	#top #wrap_all .pd-lp .pd-lp__img,
	#top #wrap_all .pd-lp .pd-lp__chip {
		transition: none;
	}
}