
/* CarGlossary visual refresh 2026-10 — scope limited to homepage and Cars hub */
.cg-refresh { --cg-bg:#f7fafc; --cg-card:#fff; --cg-edge:#dce4ed; --cg-fg:#152335; --cg-sub:#526579; --cg-blue:#247bd4; }
[data-theme="dark"] .cg-refresh { --cg-bg:#0a111a; --cg-card:#131d2a; --cg-edge:#27374b; --cg-fg:#f4f8fc; --cg-sub:#a6b9cd; --cg-blue:#59b3ff; }
.cg-showcase { background:#08121e; color:#f8fafc; border-bottom:1px solid #253c52; }
.cg-showcase .container { position:relative; }
.cg-showcase-inner { display:grid; grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr); align-items:center; gap:25px; min-height:390px; padding-top:42px; padding-bottom:45px; }
.cg-showcase-copy { z-index:1; }
.cg-showcase-copy .cg-kicker { display:inline-block; color:#91cfff; font-weight:700; font-size:.78rem; border-radius:8px; padding:6px 12px; border:1px solid #375d78; background:#132b40; }
.cg-showcase-copy h1 { color:#fff; font-size:clamp(2.25rem,4.2vw,4.1rem); letter-spacing:-.045em; line-height:1.12; margin:16px 0 11px; }
.cg-showcase-copy h1 span { color:#58b5ff; }
.cg-showcase-lead { color:#e3ebf4; font-size:1.05rem; max-width:510px; line-height:1.55; margin:0 0 10px; }
.cg-showcase-sub { color:#b3c6da; font-size:.93rem; max-width:500px; line-height:1.55; margin:0; }
.cg-showcase-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:21px; }
.cg-showcase-actions a { display:inline-flex; align-items:center; text-decoration:none; border-radius:8px; border:1px solid #5983a5; padding:10px 14px; font-size:.85rem; color:#e8f5ff; font-weight:750; }
.cg-showcase-actions a:first-child { background:#2292eb; color:#fff; border-color:#2292eb; }
.cg-showcase-actions a:hover,.cg-showcase-actions a:focus-visible { outline:2px solid #81c8ff; outline-offset:2px; }
.cg-showcase-art { display:grid; grid-template-columns:1fr 1fr; gap:11px; min-width:0; }
.cg-showcase-art figure { margin:0; position:relative; overflow:hidden; border:1px solid #39536b; border-radius:16px; height:315px; background:#192636; box-shadow:0 18px 40px rgba(0,0,0,.24); }
.cg-showcase-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.cg-showcase-art img.cg-fj-focus,.cg-car-preview-media img.cg-fj-focus { object-position:96% center; } /* Keep Toyota FJ front visible on homepage crops */
.cg-showcase-art figure:after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(4,10,17,.91)); pointer-events:none; }
.cg-showcase-art figcaption { position:absolute; z-index:1; bottom:0; left:0; right:0; padding:28px 13px 13px; font-size:.76rem; color:#cddaea; line-height:1.45; }
.cg-showcase-art figcaption strong { display:block; color:#fff; font-size:.97rem; }
.cg-showcase-search { margin-top:18px; max-width:480px; }
.cg-showcase-search label { display:block; color:#a9bed4; font-size:.75rem; font-weight:800; margin-bottom:5px; }
.cg-showcase-search .search-row { border:1px solid #304860; background:#12263c; box-shadow:none; border-radius:9px; }
.cg-showcase-search input { background:transparent; color:white; }
.cg-showcase-search .search-row button { color:#e9f3ff; background:#284763; }
.cg-showcase-search .search-status { color:#99b2cc; font-size:.73rem; margin:5px 0 0; }
.cg-pathways { background:#0b1521; color:#edf5ff; border-bottom:1px solid #203348; }
.cg-pathways-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding-top:20px; padding-bottom:20px; }
.cg-pathways a { text-decoration:none; display:grid; gap:3px; padding:8px 13px; border-right:1px solid #263a4f; }
.cg-pathways a:last-child { border:0; }
.cg-pathways a:hover strong { color:#6cbdff; }
.cg-pathways .cg-path-icon { font-size:1.55rem; line-height:1.15; color:#55b5ff; }
.cg-pathways strong { color:#f7fbff; font-size:.85rem; }
.cg-pathways small { color:#a8bdd1; font-size:.72rem; }
.cg-featured-section,.cg-compact-brands { padding:33px 0 37px; background:var(--cg-bg); border-bottom:1px solid var(--cg-edge); }
.cg-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:19px; }
.cg-section-heading h2 { margin:2px 0 4px; color:var(--cg-fg); font-size:clamp(1.35rem,2.2vw,1.95rem); }
.cg-section-heading p { margin:0; color:var(--cg-sub); font-size:.83rem; }
.cg-section-heading .cg-overline { color:var(--cg-blue); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.cg-section-heading>a { color:var(--cg-blue); font-size:.83rem; font-weight:800; white-space:nowrap; text-decoration:none; align-self:center; }
.cg-section-heading>a:hover { text-decoration:underline; }
.cg-featured-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.cg-car-preview { display:block; min-width:0; overflow:hidden; text-decoration:none; color:var(--cg-fg); border:1px solid var(--cg-edge); background:var(--cg-card); border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08); transition:transform .18s ease,border-color .18s ease; }
.cg-car-preview:hover { transform:translateY(-4px); border-color:var(--cg-blue); }
.cg-car-preview:focus-visible,.cg-brand-link:focus-visible,.cg-pathways a:focus-visible { outline:2px solid #60b8ff; outline-offset:3px; }
.cg-car-preview-media { position:relative; aspect-ratio:1.48; overflow:hidden; background:linear-gradient(120deg,#263c50,#0e1929); }
.cg-car-preview-media img { display:block; height:100%; width:100%; object-fit:cover; }
.cg-car-preview-media .cg-chip { position:absolute; top:8px; left:8px; background:#f17f2c; color:#fff; font-size:.68rem; font-weight:850; border-radius:6px; padding:2px 7px; }
.cg-car-preview-body { min-height:76px; padding:11px 32px 12px 11px; position:relative; }
.cg-car-preview-body strong { color:var(--cg-fg); display:block; font-size:.82rem; line-height:1.25; }
.cg-car-preview-body small { color:var(--cg-sub); display:block; font-size:.71rem; padding-top:4px; }
.cg-car-preview-body .cg-arrow { position:absolute; top:18px; right:9px; display:grid; place-items:center; height:22px; width:22px; border-radius:50%; color:#80c9ff; background:rgba(79,149,203,.17); }
.cg-brand-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.cg-brand-link { display:flex; align-items:center; justify-content:center; gap:5px; flex-direction:column; min-height:105px; border:1px solid var(--cg-edge); background:var(--cg-card); border-radius:11px; text-decoration:none; }
.cg-brand-link:hover { border-color:var(--cg-blue); }
.cg-brand-link img { width:min(70%,116px); height:50px; object-fit:contain; }
.cg-brand-link .cg-brand-name { color:var(--cg-sub); font-size:.73rem; }
.cg-brand-wordmark { color:var(--cg-fg); font-size:1.3rem; font-weight:900; letter-spacing:.045em; line-height:50px; }
.cg-cars-visual-hero { position:relative; color:#fff; background:#08111d; overflow:hidden; }
.cg-cars-visual-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,11,20,.96),rgba(5,12,22,.86) 58%,rgba(5,12,22,.48)),url('/media/events/sfc-2026/gac-xt80-saudi-falcons-2026-front.jpg') 78% center/cover no-repeat; }
.cg-cars-visual-hero .container { position:relative; }
.cg-cars-visual-hero .article-shell { padding:42px 0 47px; }
.cg-cars-visual-hero h1 { color:white; margin:10px 0; font-size:clamp(2.7rem,5vw,4rem); }
.cg-cars-visual-hero .article-lead { color:#cfdfef; max-width:620px; font-size:1.04rem; }
.cg-cars-visual-hero .breadcrumbs { color:#b8cde1; }
.cg-brand-logo-inline { height:54px; width:135px; object-fit:contain; display:block; margin:0 0 9px; }
[data-theme="dark"] body.cg-visual-page { background-color:#08111b; background-image:linear-gradient(180deg,#070e17,#0c1825); background-attachment:scroll; }
@media(max-width:980px) { .cg-showcase-inner { grid-template-columns:1fr; gap:18px; padding-top:29px; }.cg-showcase-art figure { height:240px; } .cg-featured-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:690px) { .cg-showcase-art img.cg-fj-focus,.cg-car-preview-media img.cg-fj-focus { object-position:100% center; } .cg-showcase-copy h1 { font-size:clamp(2rem,10vw,3.1rem); } .cg-showcase-inner { padding-bottom:27px; } .cg-showcase-art figure { height:197px; } .cg-showcase-art figcaption { padding:20px 9px 8px; font-size:.65rem; } .cg-showcase-art figcaption strong { font-size:.78rem; } .cg-pathways-grid { overflow-x:auto; grid-template-columns:repeat(5,minmax(135px,1fr)); } .cg-featured-section,.cg-compact-brands { padding:25px 0 29px; } .cg-featured-cards { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(190px,58vw); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:11px; } .cg-car-preview { scroll-snap-align:start; } .cg-brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .cg-brand-link { min-height:91px; } .cg-cars-visual-hero .article-shell { padding:31px 0 38px; } .cg-section-heading p { font-size:.75rem; } }
@media(prefers-reduced-motion:reduce) { .cg-car-preview { transition:none; } }
