/* Website (Code)/public/assets/css/guides.css
   v6  ·  2026-10-30 MYT

   The guides (/guides/ and /guides/<slug>/, built by tools/build-guides.mjs) on top of v2.css: an apple.com Newsroom-
   style article (gold eyebrow, balanced 56px headline, sticky "On this page" list beside a 692px reading column at
   19px), plus the index cards and the internal review table. Same tokens as every v2 page. */

.g { padding: 72px 0 var(--pad); }
.g__head { max-width: 820px; margin-bottom: 56px; }
.g__eyebrow { color: var(--gold-ink); font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; margin-bottom: 12px; }
.g__eyebrow a { color: inherit; }
.g__title { font-size: 56px; line-height: 1.07143; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
.g__meta { margin-top: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.g__lede { margin-top: 20px; max-width: 720px; color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.g__draft { margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: #fff8e1; color: #6b4e00; font-size: 14px; line-height: 1.42859; }

.g__layout { display: grid; grid-template-columns: 220px minmax(0, 692px); gap: 64px; align-items: start; }
.g__layout:not(:has(.g__toc)) { grid-template-columns: minmax(0, 692px); }
.g__toc { position: sticky; top: calc(var(--gn-h) + 24px); font-size: 14px; line-height: 1.42859; }
.g__toc-title { color: var(--ink-2); font-weight: 600; margin-bottom: 10px; }
.g__toc ul { display: grid; gap: 10px; border-left: 1px solid var(--hair); padding-left: 16px; }
.g__toc li { position: relative; }
.g__toc a { color: var(--ink-2); transition: color .2s ease; }
.g__toc a:hover { color: var(--link); }
.g__toc a[aria-current="location"] { color: var(--ink); }   /* colour only: bold re-wraps two-line items */
/* One bar on the list's rule. guides.js moves it to the current item and it slides between items. */
.g__toc ul { position: relative; }
.g__toc-bar { position: absolute; left: -1px; top: 0; width: 2px; height: 0; border-radius: 1px; background: var(--ink); opacity: 0;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; pointer-events: none; }
.g__toc a { transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) { .g__toc-bar, .g__toc a { transition: none; } }

.g__body { font-size: 19px; line-height: 1.5789; letter-spacing: .012em; }
.g__body > * + * { margin-top: 1em; }
.g__body h2 { margin-top: 2.2em; font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; scroll-margin-top: calc(var(--gn-h) + 16px); }
.g__body h3 { margin-top: 1.6em; font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; scroll-margin-top: calc(var(--gn-h) + 16px); }
.g__body h2 + *, .g__body h3 + * { margin-top: .6em; }
.g__body ul, .g__body ol { padding-left: 1.2em; }
.g__body ul { list-style: disc; }
.g__body ol { list-style: decimal; }
.g__body li + li { margin-top: .4em; }
.g__body strong { font-weight: 600; }
.g__body .link { color: var(--link); }
.g__body .link:hover { text-decoration: underline; }

.g-table { overflow-x: auto; margin-top: 1.4em; -webkit-overflow-scrolling: touch; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; }
.g-table th, .g-table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.g-table thead th { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: -0.016em; }
.g-table tbody th { font-weight: 600; }

mark.g-check { padding: 1px 6px; border-radius: 6px; background: #ffe08a; color: #4d3800; font-size: .85em; font-weight: 600; }

.g__next { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--hair); }
.g__next-title { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; }
.g__links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 24px; font-size: 17px; }

/* Hero photograph (the car, from VehicleDB) and "More guides" */
.g__hero { max-width: 976px; margin: -16px 0 56px; border-radius: 18px; overflow: hidden; background: var(--platter); aspect-ratio: 16 / 9; }   /* 220 contents list + 64 gap + 692 text */
.g__hero:empty { display: none; }
.g__hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }   /* ui/photoCrop.js has already centred the car */
.g__more { margin-top: 88px; }
.g__more .g__next-title { margin-bottom: 24px; }
.g__more + .g__next { margin-top: 56px; }

/* Index */
.g__group + .g__group { margin-top: 64px; }
.g__group-title { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; margin-bottom: 24px; }
.g__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px; background: var(--bg-alt); color: var(--ink);
    transition: transform .3s var(--ease-hover), box-shadow .3s var(--ease-hover); }
.g__card:hover { transform: scale(1.01); box-shadow: 2px 4px 16px rgba(0, 0, 0, .08); }
.g__card-text { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 28px 28px; }
.g__card-img { display: block; aspect-ratio: 16 / 10; background: var(--platter); }
.g__card-img:empty { display: none; }
.g__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g__card-title { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.g__card-desc { color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.g__card-desc { flex: 1; }
.g__card-meta { margin-top: 6px; color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
.g__card-draft { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: #ffe08a; color: #4d3800; font-size: 12px; line-height: 1.33337; font-weight: 600; }
.g__empty { color: var(--ink-2); font-size: 21px; }
.g__empty .link, .g__draft .link { color: var(--link); }

/* Review (internal) */
.g--review .g-table td ol { padding-left: 1.1em; list-style: decimal; font-size: 14px; }
.g__rv-q { display: block; margin-top: 4px; color: var(--ink-2); font-size: 12px; font-weight: 400; }

@media (max-width: 1068px) {
    .g__layout { grid-template-columns: minmax(0, 692px); }
    .g__toc { position: static; padding: 20px 22px; border-radius: 14px; background: var(--bg-alt); }
    .g__toc ul { border-left: 0; padding-left: 0; }
    .g__toc-bar { display: none; }
    .g__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
    .g { padding-top: 48px; }
    .g__title { font-size: 40px; line-height: 1.1; }
    .g__body { font-size: 17px; line-height: 1.52947; }
    .g__body h2 { font-size: 28px; }
    .g__cards { grid-template-columns: 1fr; }
}