/* Car Tinting Heroes V2 — dedicated Blog page.
 * Load after the global V2 stylesheet. Shared fonts, tokens and .cth-button
 * styles stay owned by the design system. All rules are journal-scoped.
 */

.cth-journal { min-width: 0; background: var(--cth-color-white); }
.cth-journal :where(a,button,input) { touch-action: manipulation; }

/* Light editorial introduction and a real server-side search form. */
.cth-journal .cth-journal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 30px 52px;
  border-bottom: 1px solid var(--cth-color-line);
  background: linear-gradient(125deg,var(--cth-color-paper),var(--cth-color-pale) 62%,var(--cth-color-lavender));
}
.cth-journal .cth-journal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 53%;
  background: color-mix(in srgb,var(--cth-color-white) 32%,transparent);
  clip-path: polygon(33% 0,100% 0,100% 100%,0 100%);
  pointer-events: none;
}
.cth-journal .cth-journal-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 30px;
  color: var(--cth-color-muted);
  font-size: 11px;
  line-height: 1.7;
}
.cth-journal .cth-journal-breadcrumb a { color: var(--cth-color-muted); text-decoration: none; }
.cth-journal .cth-journal-breadcrumb a:hover { color: var(--cth-color-action); text-decoration: underline; }
.cth-journal .cth-journal-breadcrumb [aria-current] { color: var(--cth-color-ink); }
.cth-journal .cth-journal-hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); align-items: end; gap: 64px; }
.cth-journal .cth-journal-hero-grid > * { min-width: 0; }
.cth-journal .cth-journal-hero .cth-kicker { color: var(--cth-color-action); }
.cth-journal .cth-journal-hero h1 { max-width: 720px; margin-top: 18px; color: var(--cth-color-ink); font-size: clamp(36px,3.8vw,50px); font-weight: 800; line-height: 1.12; letter-spacing: -1.65px; text-wrap: balance; }
.cth-journal .cth-journal-intro { max-width: 650px; margin-top: 20px; color: var(--cth-color-muted); font-size: 15px; line-height: 1.85; }
.cth-journal .cth-journal-search { margin: 0; padding: 25px; border: 1px solid var(--cth-color-line); border-top: 3px solid var(--cth-color-red); background: color-mix(in srgb,var(--cth-color-white) 94%,transparent); box-shadow: var(--cth-shadow); }
.cth-journal .cth-journal-search > label { display: block; margin: 0 0 11px; color: var(--cth-color-ink); font-size: 13px; font-weight: 650; line-height: 1.6; }
.cth-journal .cth-journal-search-row { display: flex; align-items: stretch; gap: 9px; min-width: 0; }
.cth-journal .cth-journal-search-row input[type="search"] { display: block; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 49px; margin: 0; padding: 11px 12px; border: 1px solid var(--cth-color-line); border-radius: 2px; background: var(--cth-color-paper); color: var(--cth-color-ink); box-shadow: none; font: inherit; font-size: 14px; line-height: 1.6; }
.cth-journal .cth-journal-search-row input[type="search"]::placeholder { color: var(--cth-color-muted); opacity: 1; }
.cth-journal .cth-journal-search-row input[type="search"]:focus { border-color: var(--cth-color-action); }
.cth-journal .cth-journal-search-row input[type="search"]:focus-visible { outline-offset: 3px; }
.cth-journal .cth-journal-search-row > button { flex: 0 0 auto; }
.cth-journal .cth-journal-search-hint { margin-top: 12px; color: var(--cth-color-muted); font-size: 11px; line-height: 1.75; }

/* The featured story leads the first page; subsequent pages use the grid. */
.cth-journal .cth-journal-list { padding-block: 64px 72px; }
.cth-journal .cth-journal-featured { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; margin: 0 0 62px; border: 1px solid var(--cth-color-line); background: var(--cth-color-paper); }
.cth-journal .cth-journal-featured > * { min-width: 0; }
.cth-journal .cth-journal-featured-image { display: block; align-self: stretch; min-width: 0; overflow: hidden; background: var(--cth-color-lavender); text-decoration: none; }
.cth-journal .cth-journal-featured-image > img { display: block; width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center; border-radius: 0; }
.cth-journal .cth-journal-featured-image:focus-visible { outline-offset: -4px; }
.cth-journal .cth-journal-featured-copy { min-width: 0; padding: 36px 38px; }
.cth-journal .cth-journal-featured-copy > .cth-kicker { margin-bottom: 16px; color: var(--cth-color-action); font-size: 10px; letter-spacing: 1.4px; }
.cth-journal .cth-journal-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; color: var(--cth-color-muted); font-size: 11px; line-height: 1.7; }
.cth-journal .cth-journal-meta > span { display: inline-flex; align-items: baseline; gap: 10px; }
.cth-journal .cth-journal-meta > span + span::before { content: "·"; color: var(--cth-color-muted); }
.cth-journal .cth-journal-meta a { color: inherit; text-decoration: none; }
.cth-journal .cth-journal-meta a:hover { color: var(--cth-color-action); text-decoration: underline; }
.cth-journal .cth-journal-meta time { white-space: nowrap; }
.cth-journal .cth-journal-featured-copy h2 { margin-top: 16px; color: var(--cth-color-ink); font-size: clamp(28px,2.6vw,36px); line-height: 1.22; letter-spacing: -.95px; font-weight: 750; }
.cth-journal .cth-journal-featured-copy h2 > a { color: var(--cth-color-ink); text-decoration: none; overflow-wrap: break-word; }
.cth-journal .cth-journal-featured-copy h2 > a:hover { color: var(--cth-color-action); text-decoration: underline; text-underline-offset: 4px; }
.cth-journal .cth-journal-featured-copy > p { margin-top: 18px; color: var(--cth-color-muted); font-size: 14px; line-height: 1.85; }
.cth-journal .cth-journal-featured-copy > .cth-text-link { margin-top: 21px; font-size: 12px; }
.cth-journal .cth-journal-list .cth-section-head { gap: 30px; margin-bottom: 30px; }
.cth-journal .cth-journal-list .cth-section-head h2 { margin: 0; font-size: 34px; line-height: 1.2; letter-spacing: -1px; }
.cth-journal .cth-journal-list .cth-section-head > p { max-width: none; color: var(--cth-color-muted); font-size: 12px; line-height: 1.8; }

/* Content-height cards keep the excerpt intact and align their reading links. */
.cth-journal .cth-card.cth-journal-card { min-width: 0; padding: 0; overflow: hidden; align-items: stretch; background: var(--cth-color-white); transition: border-color .18s,box-shadow .18s; }
.cth-journal .cth-journal-card:hover,.cth-journal .cth-journal-card:focus-within { border-color: color-mix(in srgb,var(--cth-color-red) 45%,var(--cth-color-line)); box-shadow: var(--cth-shadow); }
.cth-journal .cth-journal-card-image { display: block; width: 100%; margin: 0; overflow: hidden; background: var(--cth-color-lavender); text-decoration: none; }
.cth-journal .cth-journal-card-image > img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: center; border-radius: 0; transition: transform .25s; }
.cth-journal .cth-journal-card-image:hover > img { transform: scale(1.025); }
.cth-journal .cth-journal-card-image:focus-visible { outline-offset: -4px; }
.cth-journal .cth-journal-card-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; width: 100%; min-width: 0; padding: 25px; }
.cth-journal .cth-journal-card-copy .cth-journal-meta { font-size: 10px; }
.cth-journal .cth-journal-card-copy h3 { margin: 14px 0 15px; color: var(--cth-color-ink); font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.55px; }
.cth-journal .cth-journal-card-copy h3 > a { color: var(--cth-color-ink); text-decoration: none; overflow-wrap: break-word; }
.cth-journal .cth-journal-card-copy h3 > a:hover { color: var(--cth-color-action); text-decoration: underline; text-underline-offset: 4px; }
.cth-journal .cth-journal-card-copy > p { margin: 0; color: var(--cth-color-muted); font-size: 13px; line-height: 1.85; overflow-wrap: break-word; }
.cth-journal .cth-journal-card-copy > .cth-text-link { margin-top: auto; padding-top: 22px; font-size: 11px; }
.cth-journal .cth-journal-placeholder { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; isolation: isolate; width: 100%; min-height: 180px; aspect-ratio: 16/10; padding: 30px; overflow: hidden; color: var(--cth-color-ink); background: linear-gradient(130deg,var(--cth-color-paper),var(--cth-color-lavender)); }
.cth-journal .cth-journal-placeholder::before { content: ""; position: absolute; z-index: -1; inset: 16% 21%; border: 1px solid color-mix(in srgb,var(--cth-color-white) 78%,transparent); background: color-mix(in srgb,var(--cth-color-white) 35%,transparent); box-shadow: 20px 14px 0 color-mix(in srgb,var(--cth-color-white) 25%,transparent); transform: skewY(-7deg); }
.cth-journal .cth-journal-placeholder::after { content: ""; position: absolute; bottom: 18%; left: 21%; width: 35px; height: 3px; background: var(--cth-color-red); }
.cth-journal .cth-journal-placeholder > span { color: var(--cth-color-action); font-size: 9px; font-weight: 650; line-height: 1.6; letter-spacing: 1.2px; text-transform: uppercase; }
.cth-journal .cth-journal-placeholder > strong { max-width: 300px; color: var(--cth-color-ink); font-size: 27px; line-height: 1.25; letter-spacing: -.7px; }
.cth-journal .cth-journal-featured-image > .cth-journal-placeholder { height: 100%; min-height: 320px; padding: 42px; }
.cth-journal .cth-journal-featured-image > .cth-journal-placeholder > strong { font-size: 34px; }

/* Native WordPress pagination and a useful, uncluttered empty-search state. */
.cth-journal .cth-journal-pagination { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--cth-color-line); }
.cth-journal .cth-journal-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cth-journal .cth-journal-pagination li { margin: 0; padding: 0; }
.cth-journal .cth-journal-pagination li > :is(a,span) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--cth-color-line); border-radius: 2px; background: var(--cth-color-white); color: var(--cth-color-ink); font-size: 12px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.cth-journal .cth-journal-pagination li > a:hover { background: var(--cth-color-pale); color: var(--cth-color-action); border-color: var(--cth-color-action); }
.cth-journal .cth-journal-pagination li > .current { background: var(--cth-color-action); color: var(--cth-color-white); border-color: var(--cth-color-action); }
.cth-journal .cth-journal-pagination li > .dots { min-width: 24px; padding-inline: 4px; border-color: transparent; background: transparent; color: var(--cth-color-muted); }
.cth-journal .cth-journal-pagination a:focus-visible { outline-offset: 3px; }
.cth-journal .cth-journal-empty { max-width: 760px; margin-inline: auto; padding: 54px 36px; border: 1px solid var(--cth-color-line); border-top: 3px solid var(--cth-color-red); background: var(--cth-color-pale); text-align: center; }
.cth-journal .cth-journal-empty h2 { max-width: 580px; margin-inline: auto; font-size: 34px; line-height: 1.25; letter-spacing: -.9px; overflow-wrap: anywhere; }
.cth-journal .cth-journal-empty p { max-width: 520px; margin: 18px auto 24px; color: var(--cth-color-muted); font-size: 14px; line-height: 1.85; }

@media (max-width:1100px) {
  .cth-journal .cth-journal-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 36px; }
  .cth-journal .cth-journal-hero h1 { font-size: 43px; letter-spacing: -1.4px; }
  .cth-journal .cth-journal-search { padding: 22px; }
  .cth-journal .cth-journal-featured-copy { padding: 28px; }
  .cth-journal .cth-journal-featured-copy h2 { font-size: 30px; }
  .cth-journal .cth-journal-card-copy { padding: 23px; }
}
@media (max-width:900px) {
  .cth-journal .cth-journal-hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .cth-journal .cth-journal-hero h1 { max-width: 760px; font-size: 45px; }
  .cth-journal .cth-journal-intro { max-width: 720px; }
  .cth-journal .cth-journal-search { width: 100%; }
  .cth-journal .cth-journal-featured { grid-template-columns: minmax(0,1fr); margin-bottom: 48px; }
  .cth-journal .cth-journal-featured-image > img { height: auto; aspect-ratio: 16/10; }
  .cth-journal .cth-journal-featured-image > .cth-journal-placeholder { min-height: 0; height: auto; }
  .cth-journal .cth-journal-featured-copy { padding: 30px; }
  .cth-journal .cth-journal-featured-copy h2 { max-width: 720px; font-size: 32px; }
  .cth-journal .cth-journal-list { padding-block: 50px 60px; }
}
@media (max-width:650px) {
  .cth-journal .cth-journal-hero { padding-block: 23px 34px; }
  .cth-journal .cth-journal-breadcrumb { margin-bottom: 24px; font-size: 10px; }
  .cth-journal .cth-journal-hero h1 { margin-top: 16px; font-size: clamp(32px,8.5vw,38px); line-height: 1.15; letter-spacing: -1.15px; }
  .cth-journal .cth-journal-intro { margin-top: 17px; font-size: 14px; line-height: 1.85; }
  .cth-journal .cth-journal-hero-grid { gap: 25px; }
  .cth-journal .cth-journal-search { padding: 21px 18px; }
  .cth-journal .cth-journal-search > label { font-size: 12px; }
  .cth-journal .cth-journal-search-row { gap: 8px; }
  .cth-journal .cth-journal-search-row input[type="search"] { font-size: 16px; padding-inline: 10px; }
  .cth-journal .cth-journal-search-hint { font-size: 10px; }
  .cth-journal .cth-journal-list { padding-block: 36px 48px; }
  .cth-journal .cth-journal-featured { margin-bottom: 38px; }
  .cth-journal .cth-journal-featured-copy { padding: 24px 22px; }
  .cth-journal .cth-journal-featured-copy h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.7px; }
  .cth-journal .cth-journal-featured-copy > p { font-size: 13px; }
  .cth-journal .cth-journal-featured-copy > .cth-kicker { font-size: 9px; }
  .cth-journal .cth-journal-meta { font-size: 10px; }
  .cth-journal .cth-journal-list .cth-section-head { margin-bottom: 25px; }
  .cth-journal .cth-journal-list .cth-section-head h2 { font-size: 29px; letter-spacing: -.8px; }
  .cth-journal .cth-journal-list .cth-section-head > p { margin-top: 11px; font-size: 11px; }
  .cth-journal .cth-journal-card-copy { padding: 23px 22px; }
  .cth-journal .cth-journal-card-copy h3 { font-size: 22px; }
  .cth-journal .cth-journal-featured-image > .cth-journal-placeholder { padding: 30px; }
  .cth-journal .cth-journal-featured-image > .cth-journal-placeholder > strong { font-size: 29px; }
  .cth-journal .cth-journal-pagination { margin-top: 34px; padding-top: 24px; }
  .cth-journal .cth-journal-pagination ul.page-numbers { gap: 6px; }
  .cth-journal .cth-journal-pagination li > :is(a,span) { padding-inline: 12px; font-size: 11px; }
  .cth-journal .cth-journal-empty { padding: 36px 23px; }
  .cth-journal .cth-journal-empty h2 { font-size: 29px; }
  .cth-journal .cth-journal-empty p { font-size: 13px; }
}
@media (prefers-reduced-motion:reduce) {
  .cth-journal .cth-journal-card,.cth-journal .cth-journal-card-image > img { transition: none; }
  .cth-journal .cth-journal-card-image:hover > img { transform: none; }
}
@media (forced-colors:active) {
  .cth-journal .cth-journal-pagination li > .current { border-color: Highlight; }
  .cth-journal .cth-journal-search-row input[type="search"] { border-color: FieldText; }
}