/* Car pages (/for-sale/<slug>), written 2026-11-09. Uses the site.css tokens. */
.car-top { padding-top: clamp(32px, 5vw, 60px); padding-bottom: clamp(40px, 6vw, 72px); }
.crumb { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.crumb a { color: var(--green-2); text-decoration: none; }
.crumb a:hover, .crumb a:focus-visible { text-decoration: underline; }
.car-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 28px; }
.car-head h1 { font-size: clamp(34px, 5vw, 64px); margin-bottom: 12px; }
.car-head .lede { margin: 0; max-width: 60ch; }
.car-cta { display: grid; gap: 10px; min-width: 260px; }
.car-cta .price { margin: 0 0 4px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 15px; color: var(--green-2); }

.gallery { display: grid; gap: 10px; }
.gallery a { display: block; cursor: zoom-in; }
.gallery a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.g-main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.g-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery:not(.open) .g-grid a:nth-child(n+9) { display: none; }
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.g-hint { font-size: 14px; color: var(--muted); margin: 0; }

.car-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.car-body h2 { margin-bottom: 20px; }
.car-body .specs { margin-top: 0; }
.car-body .specs ul { grid-template-columns: 1fr; }
.car-notes p { max-width: 62ch; }
.car-notes .btn { margin-top: 8px; }

.car-lb { position: fixed; inset: 0; z-index: 100; background: rgba(6, 12, 11, 0.95); color: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.car-lb[hidden] { display: none; }
.clb-bar { position: relative; z-index: 1; background: rgba(6, 12, 11, 0.95); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.clb-title { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.clb-count { font-size: 14px; letter-spacing: 0.1em; color: var(--muted-on-dark); }
.clb-close { background: none; border: 1px solid rgba(240, 240, 235, 0.5); color: var(--paper); font: 500 14px/1 var(--f); letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 16px; cursor: pointer; }
.clb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 72px max(16px, env(safe-area-inset-bottom)); }
.clb-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); object-fit: contain; }
.clb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 1px solid rgba(240, 240, 235, 0.5); background: rgba(2, 51, 48, 0.7); color: var(--paper); font-size: 30px; line-height: 1; cursor: pointer; }
.clb-prev { left: max(12px, env(safe-area-inset-left)); }
.clb-next { right: max(12px, env(safe-area-inset-right)); }
.clb-nav:focus-visible, .clb-close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
body.clb-on { overflow: hidden; }

@media (max-width: 860px) {
  .car-head, .car-body { grid-template-columns: 1fr; }
  .car-cta { min-width: 0; }
  .clb-stage { padding: 0 8px 84px; }
  .clb-stage img { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); }
  .clb-nav { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
}