/* ==========================================================================
   Prestige Detailing — blog archive (pd-blog)
   Figma: Blog archive 31:2320 (1728 frame, 1408 content), card hover 31:2110.
   Rendered inside #wrap_all, so every rule is paired: ".pd-blog .x" + "#top #wrap_all .pd-blog .x".
   Shared from pd-main-nav: --pd-nav-* tokens, font, and the .pd-nav-t cap trim.
   No !important, no margin/padding shorthands.
   ========================================================================== */

/* ---------- Shared base (same values as pd-main-nav) ----------
   Declared here too, so this section never depends on pd-main-nav.css being the latest upload.
   The @property registrations stay in pd-main-nav (loaded on every page). */
.pd-blog {
	--pd-nav-bg: #161414;
	--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-blog .pd-nav-t,
#top #wrap_all .pd-blog .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-blog { --pd-fb: 1; }
}

/* ---------- Tokens (ramps: 375 → 1728; exact at 1728) ---------- */
.pd-blog {
	--pd-blog-dark: #161414;
	--pd-blog-tile: #242222;
	--pd-blog-line: rgba(255, 255, 255, 0.2);
	--pd-blog-tab-hover: #292727;                                        /* #161414 + 8% white */
	--pd-blog-chip: rgba(255, 255, 255, 0.2);
	--pd-blog-page-bg: rgba(255, 255, 255, 0.08);
	--pd-blog-page-hover: rgba(255, 255, 255, 0.16);

	--pd-blog-gap: clamp(56px, calc(96px - (1728px - 100vw) * 0.029564), 96px);          /* tabs → grid → pagination */

	--pd-blog-tab-w: clamp(96px, calc(176px - (1728px - 100vw) * 0.059128), 176px);
	--pd-blog-tab-h: clamp(56px, calc(88px - (1728px - 100vw) * 0.023651), 88px);
	--pd-blog-tab-fs: clamp(16px, calc(22px - (1728px - 100vw) * 0.004435), 22px);
	--pd-blog-tab-lh: clamp(24px, calc(32px - (1728px - 100vw) * 0.005913), 32px);
	--pd-blog-arm: 8px;                                                  /* corner bracket arm */
	--pd-blog-bar: 2px;                                                  /* corner bracket stroke */

	--pd-blog-cols: 4;
	--pd-blog-col-gap: clamp(16px, calc(40px - (1728px - 100vw) * 0.017738), 40px);
	--pd-blog-row-gap: clamp(48px, calc(72px - (1728px - 100vw) * 0.017738), 72px);
	--pd-blog-card-gap: clamp(24px, calc(32px - (1728px - 100vw) * 0.005913), 32px);
	--pd-blog-text-w: 87.578%;                                           /* 282 of 322 */

	--pd-blog-chip-gap: 8px;
	--pd-blog-chip-px: 8px;
	--pd-blog-chip-py: 6px;
	--pd-blog-chip-fs: 14px;
	--pd-blog-chip-lh: 20px;
	--pd-blog-title-fs: clamp(18px, calc(22px - (1728px - 100vw) * 0.002956), 22px);
	--pd-blog-title-lh: clamp(24px, calc(28px - (1728px - 100vw) * 0.002956), 28px);
	--pd-blog-body-fs: 16px;
	--pd-blog-body-lh: 24px;

	--pd-blog-page: 48px;
	--pd-blog-page-gap: 8px;
	--pd-blog-page-fs: 18px;
	--pd-blog-page-lh: 28px;
	--pd-blog-arrow: 24px;

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

@media (max-width: 1279px) {
	.pd-blog { --pd-blog-cols: 3; }
}
@media (max-width: 1199px) {
	.pd-blog.pd-blog--scale { --pd-blog-mt-now: calc(var(--pd-blog-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-blog { --pd-blog-cols: 2; }
	.pd-blog.pd-blog--scale { --pd-blog-mt-now: calc(var(--pd-blog-mt, 0px) * 0.6); }
}
@media (max-width: 767px) {
	.pd-blog {
		--pd-blog-page: 40px;
		--pd-blog-page-gap: 6px;
		--pd-blog-page-fs: 16px;
		--pd-blog-page-lh: 24px;
		--pd-blog-arrow: 20px;
	}
}
@media (max-width: 599px) {
	.pd-blog { --pd-blog-cols: 1; }
}

/* ---------- Root ---------- */
.pd-blog,
#top #wrap_all .pd-blog {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-blog-gap);
	width: 100%;
	margin-top: var(--pd-blog-mt-f, var(--pd-blog-mt-now));
	margin-bottom: var(--pd-blog-mb, 0px);
	color: var(--pd-nav-white);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	scroll-margin-top: calc(var(--pd-nav-h, 0px) + var(--pd-nav-top, 0px) + 24px);
}

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

/* Lists: normalise margin, padding and list-style — never display */
.pd-blog .pd-blog__grid,
.pd-blog .pd-blog__item,
.pd-blog .pd-blog__page-list,
.pd-blog .pd-blog__page-list > li,
#top #wrap_all .pd-blog .pd-blog__grid,
#top #wrap_all .pd-blog .pd-blog__item,
#top #wrap_all .pd-blog .pd-blog__page-list,
#top #wrap_all .pd-blog .pd-blog__page-list > li {
	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-blog a,
.pd-blog a:hover,
.pd-blog a:focus,
#top #wrap_all .pd-blog a,
#top #wrap_all .pd-blog a:hover,
#top #wrap_all .pd-blog a:focus {
	color: var(--pd-nav-white);
	text-decoration: none;
	border-bottom-width: 0;
}

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

.pd-blog .pd-blog__results:focus,
#top #wrap_all .pd-blog .pd-blog__results:focus {
	outline: none;
}

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

/* Trimmed text: size + line height via --fs / --lh (read by .pd-nav-t) */
.pd-blog .pd-nav-t,
#top #wrap_all .pd-blog .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;
}

/* ---------- Tabs: a centred row; scrolls sideways when wider than the column ---------- */
.pd-blog .pd-blog__tabs,
#top #wrap_all .pd-blog .pd-blog__tabs {
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	background-color: transparent;
}

.pd-blog .pd-blog__tabs::-webkit-scrollbar,
#top #wrap_all .pd-blog .pd-blog__tabs::-webkit-scrollbar {
	display: none;
}

/* The inner row carries the width (a scroller's own end padding is unreliable) */
.pd-blog .pd-blog__tab-row,
#top #wrap_all .pd-blog .pd-blog__tab-row {
	display: flex;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}

/* Inactive: dark box, 1px inside line (inset shadow: no layout), 8 × 2px corner brackets */
.pd-blog .pd-blog__tab,
#top #wrap_all .pd-blog .pd-blog__tab {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: var(--pd-blog-tab-w);
	height: var(--pd-blog-tab-h);
	padding-top: 0;
	padding-right: 16px;
	padding-bottom: 0;
	padding-left: 16px;
	background-color: var(--pd-blog-dark);
	background-image:
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white)),
		linear-gradient(var(--pd-nav-white), var(--pd-nav-white));
	background-size:
		var(--pd-blog-arm) var(--pd-blog-bar), var(--pd-blog-bar) var(--pd-blog-arm),
		var(--pd-blog-arm) var(--pd-blog-bar), var(--pd-blog-bar) var(--pd-blog-arm),
		var(--pd-blog-arm) var(--pd-blog-bar), var(--pd-blog-bar) var(--pd-blog-arm),
		var(--pd-blog-arm) var(--pd-blog-bar), var(--pd-blog-bar) var(--pd-blog-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-blog-line);
	color: var(--pd-nav-white);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.pd-blog .pd-blog__tab:hover,
#top #wrap_all .pd-blog .pd-blog__tab:hover {
	background-color: var(--pd-blog-tab-hover);
}

/* Lit: solid red, no line, no brackets */
.pd-blog .pd-blog__tab.is-active,
.pd-blog .pd-blog__tab.is-active:hover,
#top #wrap_all .pd-blog .pd-blog__tab.is-active,
#top #wrap_all .pd-blog .pd-blog__tab.is-active:hover {
	background-color: var(--pd-nav-red);
	background-image: none;
	box-shadow: none;
	cursor: default;
}

.pd-blog .pd-blog__tab-t,
#top #wrap_all .pd-blog .pd-blog__tab-t {
	--fs: var(--pd-blog-tab-fs);
	--lh: var(--pd-blog-tab-lh);
	overflow-wrap: normal;
}

/* ---------- Results ---------- */
.pd-blog .pd-blog__results,
#top #wrap_all .pd-blog .pd-blog__results {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-blog-gap);
	transition: opacity 0.2s ease;
}

.pd-blog.pd-blog--loading .pd-blog__results,
#top #wrap_all .pd-blog.pd-blog--loading .pd-blog__results {
	opacity: 0.4;
	pointer-events: none;
}

.pd-blog .pd-blog__grid,
#top #wrap_all .pd-blog .pd-blog__grid {
	display: grid;
	grid-template-columns: repeat(var(--pd-blog-cols), minmax(0, 1fr));
	column-gap: var(--pd-blog-col-gap);
	row-gap: var(--pd-blog-row-gap);
	align-items: start;
}

.pd-blog .pd-blog__empty,
#top #wrap_all .pd-blog .pd-blog__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pd-blog .pd-blog__note,
#top #wrap_all .pd-blog .pd-blog__note {
	--fs: var(--pd-blog-body-fs);
	--lh: var(--pd-blog-body-lh);
	opacity: 0.72;
}

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

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

.pd-blog .pd-blog__img,
#top #wrap_all .pd-blog .pd-blog__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-blog .pd-blog__mark,
#top #wrap_all .pd-blog .pd-blog__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 56%;
	aspect-ratio: 462 / 155;
	transform: translate(-50%, -50%);
	opacity: 0.2;
}

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

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

.pd-blog .pd-blog__chip-t,
#top #wrap_all .pd-blog .pd-blog__chip-t {
	--fs: var(--pd-blog-chip-fs);
	--lh: var(--pd-blog-chip-lh);
	white-space: nowrap;
}

.pd-blog .pd-blog__title,
#top #wrap_all .pd-blog .pd-blog__title {
	--fs: var(--pd-blog-title-fs);
	--lh: var(--pd-blog-title-lh);
	max-width: var(--pd-blog-text-w);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-weight: 600;
}

.pd-blog .pd-blog__excerpt,
#top #wrap_all .pd-blog .pd-blog__excerpt {
	--fs: var(--pd-blog-body-fs);
	--lh: var(--pd-blog-body-lh);
	max-width: var(--pd-blog-text-w);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgba(255, 255, 255, 0.72);
}

.pd-blog .pd-blog__dots,
#top #wrap_all .pd-blog .pd-blog__dots {
	color: var(--pd-nav-red);
}

/* ---------- Card hover / keyboard focus (Figma 31:2110) ---------- */
.pd-blog .pd-blog__card:hover .pd-blog__img,
.pd-blog .pd-blog__card:focus-visible .pd-blog__img,
#top #wrap_all .pd-blog .pd-blog__card:hover .pd-blog__img,
#top #wrap_all .pd-blog .pd-blog__card:focus-visible .pd-blog__img {
	filter: grayscale(0);
}

.pd-blog .pd-blog__card:hover .pd-blog__chip--cat,
.pd-blog .pd-blog__card:focus-visible .pd-blog__chip--cat,
#top #wrap_all .pd-blog .pd-blog__card:hover .pd-blog__chip--cat,
#top #wrap_all .pd-blog .pd-blog__card:focus-visible .pd-blog__chip--cat {
	background-color: var(--pd-nav-white);
	color: var(--pd-blog-dark);
}

.pd-blog .pd-blog__card:hover .pd-blog__chip--date,
.pd-blog .pd-blog__card:focus-visible .pd-blog__chip--date,
#top #wrap_all .pd-blog .pd-blog__card:hover .pd-blog__chip--date,
#top #wrap_all .pd-blog .pd-blog__card:focus-visible .pd-blog__chip--date {
	background-color: var(--pd-nav-red);
}

/* ---------- Pagination: ‹ 1 2 3 4 . . . . 26 › ---------- */
.pd-blog .pd-blog__pages,
#top #wrap_all .pd-blog .pd-blog__pages {
	align-self: center;
	max-width: 100%;
}

.pd-blog .pd-blog__page-list,
#top #wrap_all .pd-blog .pd-blog__page-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: var(--pd-blog-page-gap);
	row-gap: var(--pd-blog-page-gap);
}

.pd-blog .pd-blog__page,
#top #wrap_all .pd-blog .pd-blog__page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pd-blog-page);
	height: var(--pd-blog-page);
	background-color: var(--pd-blog-page-bg);
	color: var(--pd-nav-white);
	transition: background-color 0.2s ease;
}

.pd-blog a.pd-blog__page:hover,
#top #wrap_all .pd-blog a.pd-blog__page:hover {
	background-color: var(--pd-blog-page-hover);
}

.pd-blog .pd-blog__page.is-current,
#top #wrap_all .pd-blog .pd-blog__page.is-current {
	background-color: var(--pd-nav-red);
}

.pd-blog .pd-blog__num,
#top #wrap_all .pd-blog .pd-blog__num {
	--fs: var(--pd-blog-page-fs);
	--lh: var(--pd-blog-page-lh);
	text-align: center;
	white-space: nowrap;
}

.pd-blog .pd-blog__arrow,
#top #wrap_all .pd-blog .pd-blog__arrow {
	display: block;
	width: var(--pd-blog-arrow);
	height: var(--pd-blog-arrow);
	transition: opacity 0.2s ease;
}

.pd-blog .pd-blog__arrow--prev svg,
#top #wrap_all .pd-blog .pd-blog__arrow--prev svg {
	transform: rotate(180deg);
}

.pd-blog a.pd-blog__arrow:hover,
#top #wrap_all .pd-blog a.pd-blog__arrow:hover {
	opacity: 0.72;
}

.pd-blog .pd-blog__arrow.is-disabled,
#top #wrap_all .pd-blog .pd-blog__arrow.is-disabled {
	opacity: 0.2;
}

@media (prefers-reduced-motion: reduce) {
	.pd-blog .pd-blog__img,
	.pd-blog .pd-blog__chip,
	.pd-blog .pd-blog__tab,
	.pd-blog .pd-blog__page,
	.pd-blog .pd-blog__arrow,
	.pd-blog .pd-blog__results,
	#top #wrap_all .pd-blog .pd-blog__img,
	#top #wrap_all .pd-blog .pd-blog__chip,
	#top #wrap_all .pd-blog .pd-blog__tab,
	#top #wrap_all .pd-blog .pd-blog__page,
	#top #wrap_all .pd-blog .pd-blog__arrow,
	#top #wrap_all .pd-blog .pd-blog__results {
		transition: none;
	}
}