/* CarTraceAI buyer guides, 2026-09-24.
 *
 * A guide is built from the homepage family: the page carries .page-home, so
 * its hero, VIN entry, feature grid, numbered steps, FAQ disclosures and
 * closing band are the homepage's own rules, unchanged. This layer adds only
 * what an article needs on top of them — a breadcrumb and date line, the
 * summary beside the entry, a contents list, reading-width prose, checklists,
 * notes and links to other guides — using the same tokens. */

.page-guide {
    --guide-reading-measure: 44rem;
    --guide-header-offset: 5.5rem;
    /* The root already keeps anchors 4.5rem below the sticky header
       (scroll-padding-top in site-20260823-1.css) and scroll margins add to
       it, so a section only adds the rest of the offset. It then lands level
       with the sticky contents list rather than 5.5rem lower. */
    --guide-anchor-margin: calc(var(--guide-header-offset) - 4.5rem);
}

/* Hero ------------------------------------------------------------------ */

.page-guide .guide-hero {
    padding-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

.page-guide .guide-hero .home-hero__headline {
    font-size: clamp(1.875rem, calc(1.35rem + 1.3vw), 2.5rem);
    line-height: 1.12;
}

.page-guide .guide-hero .lead {
    max-width: 36rem;
}

.page-guide .guide-breadcrumb {
    margin: 0 0 1rem;
}

.page-guide .guide-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--home-muted);
    font-size: var(--public-text-caption);
    line-height: 1.5;
}

.page-guide .guide-breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The separator trails its item, so a crumb that wraps on a phone starts its
   line flush with the first one instead of behind an indented slash. */
.page-guide .guide-breadcrumb li:not(:last-child)::after {
    margin-inline: 0.5rem;
    color: var(--home-line-strong);
    content: "/";
}

.page-guide .guide-breadcrumb a {
    color: var(--home-muted);
    text-decoration: none;
}

.page-guide .guide-breadcrumb a:hover {
    color: var(--home-blue-deep);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.page-guide .guide-breadcrumb [aria-current="page"] {
    color: var(--home-ink);
    font-weight: 600;
}

.page-guide .guide-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: -0.5rem 0 1.25rem;
    color: var(--home-muted);
    font-size: var(--public-text-caption);
    line-height: 1.5;
}

/* The summary sits where the homepage shows its photograph: one quiet
   document surface, never a second call to action. */
.page-guide .guide-summary {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid var(--home-line-strong);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 8px 24px rgb(23 33 43 / 7%);
}

.page-guide main .guide-summary__title {
    margin: 0 0 1rem;
    color: var(--home-ink);
    font-size: 1rem;
    line-height: 1.5;
}

.page-guide .guide-summary__list,
.page-guide .guide-checklist {
    display: grid;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-guide .guide-summary__list li,
.page-guide .guide-checklist li {
    display: grid;
    align-items: start;
    gap: 0.75rem;
    grid-template-columns: var(--icon-size-feature) minmax(0, 1fr);
    color: var(--home-text);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.page-guide .guide-summary__icon,
.page-guide .guide-checklist__icon {
    --ui-icon-size: 1.25rem;
    margin-block-start: 0.125rem;
}

/* Article ---------------------------------------------------------------- */

.page-guide .guide-body {
    background: #ffffff;
}

.page-guide .guide-layout {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

.page-guide .guide-contents {
    min-width: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--home-line);
    border-radius: var(--public-radius-card);
    background: var(--home-soft);
}

.page-guide main .guide-contents__title {
    margin: 0 0 0.5rem;
    color: var(--home-ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.page-guide .guide-contents__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    counter-reset: guide-contents;
    list-style: none;
}

.page-guide .guide-contents__list li {
    counter-increment: guide-contents;
}

.page-guide .guide-contents__list a {
    display: grid;
    min-height: 2.25rem;
    align-items: baseline;
    gap: 0.5rem;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    padding-block: 0.25rem;
    color: var(--home-text);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.page-guide .guide-contents__list a::before {
    color: var(--home-blue-deep);
    content: counter(guide-contents, decimal-leading-zero);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.page-guide .guide-contents__list a:hover {
    color: var(--home-blue-deep);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.page-guide .guide-article {
    min-width: 0;
    max-width: var(--guide-reading-measure);
}

.page-guide .guide-article__intro p,
.page-guide .guide-section > p {
    max-width: 65ch;
    margin: 0 0 1rem;
    color: var(--home-text);
    font-size: 1rem;
    line-height: 1.7;
}

.page-guide .guide-article__intro p:first-child {
    color: var(--home-ink);
    font-size: 1.0625rem;
}

.page-guide .guide-section {
    margin-block-start: clamp(2rem, 3.5vw, 2.75rem);
    padding-block-start: clamp(2rem, 3.5vw, 2.75rem);
    border-block-start: 1px solid var(--home-line);
    scroll-margin-block-start: var(--guide-anchor-margin);
}

.page-guide #faq {
    scroll-margin-block-start: var(--guide-anchor-margin);
}

.page-guide main .guide-section > h2 {
    margin-block-end: 1rem;
}

.page-guide .guide-section > :last-child {
    margin-block-end: 0;
}

.page-guide .guide-steps,
.page-guide .guide-cards {
    margin-block: 1.5rem;
}

.page-guide .guide-section .guide-checklist {
    margin-block: 1.25rem;
}

.page-guide .guide-note {
    display: grid;
    align-items: start;
    gap: 0.625rem;
    grid-template-columns: var(--icon-size-feature) minmax(0, 1fr);
    max-width: 65ch;
    margin: 1.25rem 0 0;
    padding: 0.875rem 1rem;
    border-inline-start: 2px solid var(--home-blue);
    border-radius: 0 var(--public-radius-control) var(--public-radius-control) 0;
    background: var(--home-blue-soft);
    color: var(--home-ink);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.page-guide .guide-note__icon {
    --ui-icon-size: 1.25rem;
    margin-block-start: 0.125rem;
    color: var(--home-blue);
}

.page-guide .guide-section__link {
    margin-block-start: 1rem;
}

/* A translated label can wrap on a phone. In the homepage's flex row the text
   then fills the line and leaves the arrow at the far edge, so here the link
   flows inline and the arrow follows the last word. The padding keeps the
   same 44px target and centres a single line as before. */
.page-guide .guide-section__link a {
    display: inline-block;
    padding-block: calc((2.75rem - 1.5em) / 2);
    line-height: 1.5;
}

.page-guide .guide-section__link a .process-grid__action-icon {
    display: inline-block;
    margin-inline-start: 0.5rem;
}

/* Other guides and the guide index ------------------------------------- */

.page-guide .guide-related {
    border-top: 1px solid var(--home-line);
    background: var(--home-soft);
}

.page-guide .guide-related__heading {
    display: flex;
    max-width: none;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
}

.page-guide .guide-related__heading .coverage-action {
    margin: 0;
}

.page-guide main .guide-index__title {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
}

.page-guide .guide-cards-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-guide .guide-card {
    display: grid;
    height: 100%;
    align-content: start;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    padding: clamp(1.125rem, 2vw, 1.5rem);
    border: 1px solid var(--home-line);
    border-radius: var(--public-radius-card);
    background: #ffffff;
    color: var(--home-text);
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.page-guide .guide-card__meta {
    color: var(--home-muted);
    font-size: var(--public-text-caption);
    line-height: 1.5;
}

.page-guide main .guide-card__title {
    margin: 0;
    color: var(--home-ink);
    font-size: 1.125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.page-guide .guide-card__summary {
    color: var(--home-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.page-guide .guide-card > :not(.guide-card__arrow) {
    grid-column: 1;
}

.page-guide .guide-card__arrow {
    --ui-icon-size: 1.25rem;
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 3;
    color: var(--home-blue-deep);
    transition: transform 140ms ease;
}

.page-guide .guide-card:focus-visible {
    outline: 3px solid rgb(24 120 220 / 32%);
    outline-offset: 3px;
}

.page-guide .guide-hero--index .lead {
    max-width: 40rem;
}

/* Responsive layout ------------------------------------------------------ */

@media (min-width: 48rem) {
    .page-guide .guide-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

    .page-guide .guide-cards-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    /* The homepage's three-step row is too wide for a reading column. */
    .page-guide .guide-article .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-guide .guide-layout {
        grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    }

    .page-guide .guide-contents {
        position: sticky;
        top: var(--guide-header-offset);
    }
}

@media (min-width: 68rem) {
    .page-guide .guide-hero .home-hero__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

@media (max-width: 47.99rem) {
    .page-guide .guide-hero {
        padding-block-end: 2.25rem;
    }

    .page-guide .guide-hero .home-hero__headline {
        font-size: 1.75rem;
    }

    .page-guide .guide-summary {
        border-radius: var(--public-radius-card);
    }
}

:is(:lang(ru), :lang(ka), :lang(hy)) .page-guide .guide-hero .home-hero__headline {
    font-size: clamp(1.625rem, calc(1.3rem + 0.9vw), 2.125rem);
}

@media (max-width: 47.99rem) {
    :is(:lang(ru), :lang(ka), :lang(hy)) .page-guide .guide-hero .home-hero__headline {
        font-size: 1.5rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .page-guide .guide-card:hover {
        border-color: var(--home-line-strong);
        box-shadow: 0 8px 24px rgb(23 33 43 / 6%);
    }

    .page-guide .guide-card:hover .guide-card__title {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .page-guide .guide-card:hover .guide-card__arrow {
        transform: translateX(0.125rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-guide .guide-card,
    .page-guide .guide-card__arrow {
        transition: none;
    }
}

@media (forced-colors: active) {
    .page-guide :is(.guide-summary, .guide-contents, .guide-card, .guide-note) {
        border: 1px solid CanvasText;
    }
}

@media print {
    .page-guide :is(.home-hero__search, .guide-contents, .guide-related, .home-final-cta) {
        display: none;
    }
}