/* ==========================================================================
   RenewAnyCar blog: listing + single article.  Scoped to .rac-blog.
   Does not depend on the html.rac preview switch (the blog pages are new).
   Layout follows the reference: centred title, category pills, 3-column cards,
   narrow centred article column.
   ========================================================================== */
.rac-blog {
	--b-blue: #25408e;
	--b-blue-dark: #1b2f6b;
	--b-yellow: #ffc829;
	--b-ink: #0f1729;
	--b-body: #3f4756;
	--b-muted: #667085;
	--b-line: #e4e7ec;
	--b-card: #f8f8f8;
	--b-radius: 24px;
	--b-head: "Encode Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--b-font: "Urbanist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-family: var(--b-font);
	font-weight: 500;
	color: var(--b-body);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.rac-blog *, .rac-blog *::before, .rac-blog *::after { box-sizing: border-box; }

/* ---------- listing -------------------------------------------------------- */
.rac-blog__wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(48px, 8vw, 96px);
}
.rac-blog .rac-blog__title {
	margin: 0 0 clamp(24px, 4vw, 40px);
	font-family: var(--b-head);
	font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--b-ink);
	text-align: center;
}

/* category pills */
.rac-blog__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 clamp(28px, 4vw, 48px);
}
.rac-blog__filters[hidden] { display: none; }
.rac-blog .rac-pill {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 12px 22px;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background: #f1f1f1;
	color: var(--b-ink);
	font-family: var(--b-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.rac-blog .rac-pill:hover,
.rac-blog .rac-pill:focus { background: #e3e6ee; color: var(--b-ink); }
.rac-blog .rac-pill.is-active,
.rac-blog .rac-pill.is-active:hover,
.rac-blog .rac-pill.is-active:focus { background: var(--b-blue); color: #fff; }
.rac-blog .rac-pill:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 3px; }

/* card grid */
.rac-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	align-items: stretch;
}
.rac-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--b-card);
	border-radius: var(--b-radius);
	transition: transform .28s ease, box-shadow .28s ease;
}
.rac-card[hidden] { display: none; }
.rac-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16, 24, 40, .12); }
.rac-card:focus-within { outline: 3px solid var(--b-blue); outline-offset: 3px; }
.rac-card__media { display: block; aspect-ratio: 10 / 7; overflow: hidden; background: #e9ecf3; }
.rac-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rac-card:hover .rac-card__img { transform: scale(1.04); }
.rac-card__ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--b-yellow); }
.rac-card__ph img { width: 44%; max-width: 200px; height: auto; }
.rac-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 28px; }
.rac-card__date { align-self: flex-end; font-size: .95rem; color: var(--b-muted); }
.rac-blog .rac-card__title {
	margin: 0;
	font-family: var(--b-head);
	font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}
.rac-blog .rac-card__title a { color: var(--b-ink); text-decoration: none; transition: color .18s ease; }
.rac-blog .rac-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the link */
.rac-blog .rac-card__title a:hover { color: var(--b-blue); }
.rac-blog .rac-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--b-body);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
@media (max-width: 1024px) { .rac-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.rac-blog__grid { grid-template-columns: minmax(0, 1fr); }
	.rac-blog__filters { gap: 8px; }
	.rac-blog .rac-pill { padding: 10px 18px; min-height: 44px; }
}

/* pagination + empty state */
.rac-blog__pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 48px 0 0; padding: 0; list-style: none; }
.rac-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: #f1f1f1;
	color: var(--b-ink);
	font-weight: 600;
	text-decoration: none;
}
.rac-blog__pagination a.page-numbers:hover { background: #e3e6ee; }
.rac-blog__pagination .page-numbers.current { background: var(--b-blue); color: #fff; }
.rac-blog__empty { margin: 40px 0; text-align: center; color: var(--b-muted); font-size: 1.1rem; }

/* ---------- single article ------------------------------------------------- */
.rac-post {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(48px, 8vw, 96px);
}
.rac-post__head { margin: 0 0 clamp(24px, 4vw, 44px); overflow: visible; height: auto; max-height: none; }
.rac-blog .rac-post__title {
	margin: 0;
	font-family: var(--b-head);
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--b-ink);
	text-align: center;
	overflow: visible;
	height: auto;
	max-height: none;
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: balance;      /* long titles break into balanced lines */
}
.rac-post__cover { margin: 0 0 32px; }
.rac-post__cover-img { display: block; width: 100%; height: auto; border-radius: 20px; }

.rac-post__body {
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.8;
	color: var(--b-body);
	overflow-wrap: anywhere;
}
.rac-post__body > * { max-width: 100%; }
.rac-post__body p { margin: 0 0 1.25em; }
.rac-post__body h2, .rac-post__body h3, .rac-post__body h4 {
	margin: 1.9em 0 .6em;
	font-family: var(--b-head);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--b-ink);
}
.rac-post__body h2 { font-size: 1.7rem; }
.rac-post__body h3 { font-size: 1.35rem; }
.rac-post__body h4 { font-size: 1.15rem; }
.rac-post__body > :first-child { margin-top: 0; }
.rac-post__body a { color: var(--b-blue); text-decoration: underline; text-underline-offset: 3px; }
.rac-post__body a:hover { color: var(--b-blue-dark); }
.rac-post__body a:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 2px; border-radius: 3px; }
.rac-post__body img { max-width: 100%; height: auto; border-radius: 14px; }
.rac-post__body p > img:only-child,
.rac-post__body figure { display: block; margin: 1.8em 0; }
.rac-post__body figure { max-width: 100%; }
.rac-post__body figcaption { margin-top: .6em; font-size: .95rem; color: var(--b-muted); text-align: center; }
.rac-post__body ul, .rac-post__body ol { margin: 0 0 1.25em; padding-inline-start: 1.4em; }
.rac-post__body li { margin: 0 0 .4em; }
.rac-post__body blockquote {
	margin: 1.6em 0;
	padding: 6px 0 6px 20px;
	border-left: 4px solid var(--b-yellow);
	color: var(--b-ink);
}
.rac-post__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.rac-post__body th, .rac-post__body td { padding: 10px 14px; border: 1px solid var(--b-line); text-align: left; }
.rac-post__body pre { max-width: 100%; overflow-x: auto; padding: 16px; background: #f4f4f4; border-radius: 12px; font-size: .95rem; }
.rac-post__body iframe, .rac-post__body video, .rac-post__body embed { max-width: 100%; }
.rac-post__body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--b-line); }
.rac-post__body .alignleft { float: left; max-width: 50%; margin: 0 1.4em 1em 0; }
.rac-post__body .alignright { float: right; max-width: 50%; margin: 0 0 1em 1.4em; }
.rac-post__body .aligncenter { display: block; margin-inline: auto; }
.rac-post__body::after { content: ""; display: block; clear: both; }
.rac-post__pages { margin-top: 2em; font-weight: 600; }
@media (max-width: 640px) {
	.rac-post__body .alignleft, .rac-post__body .alignright { float: none; max-width: 100%; margin: 1.2em auto; }
}
@media (prefers-reduced-motion: reduce) {
	.rac-card, .rac-card__img, .rac-blog .rac-pill { transition: none; }
	.rac-card:hover { transform: none; }
	.rac-card:hover .rac-card__img { transform: none; }
}

/* related-services box at the end of an article */
.rac-post__cta {
	margin-top: clamp(32px, 5vw, 56px);
	padding: clamp(20px, 3vw, 32px);
	background: #f6f7fb;
	border: 1px solid var(--b-line);
	border-radius: 20px;
	text-align: center;
}
.rac-post__cta-title { margin: 0 0 16px; font-family: var(--b-head); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 700; line-height: 1.3; color: var(--b-ink); }
.rac-post__cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.rac-post__cta-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--b-line); color: var(--b-blue); font-weight: 700; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.rac-post__cta-links a:hover { background: #eef1f8; border-color: #c5cde3; }
.rac-post__cta-links a.rac-post__cta-wa { background: #0e8a44; border-color: #0e8a44; color: #fff; }
.rac-post__cta-links a.rac-post__cta-wa:hover { background: #0a7038; border-color: #0a7038; }
.rac-post__cta-links a:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 3px; }