/* =====================================================================
   SERRES DRIVE — car.css
   Per-car detail page (car.html?slug=…) + the live "Serres poster"
   (an HTML/CSS re-theme of the Sicurcars promo posters, in Serres
   silver/chrome instead of Sicurcars gold). Uses tokens from styles.css.
   ===================================================================== */

/* ---------- Detail hero ---------- */
.car-detail{padding-top:calc(var(--nav-h) + clamp(24px,5vh,56px))}
.car-hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);
  align-items:center;margin-top:clamp(20px,3vw,34px);
}
.car-hero-media{
  position:relative;border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;background:#0b0b0d;aspect-ratio:16/11;box-shadow:var(--shadow);
}
.car-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.car-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 8%,transparent 55%,rgba(8,8,10,.6) 100%)}
.car-hero-cat{
  position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;
  padding:6px 12px;border-radius:100px;color:#0c0d11;background:var(--gold-grad);
}

.car-hero-info h1{
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:.94;letter-spacing:-.01em;
}
.car-hero-info .eyebrow{display:block;margin-bottom:10px}
.car-hero-info .tag{color:var(--text-dim);font-size:1.06rem;line-height:1.6;margin-top:16px;max-width:46ch}

.car-hero-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.car-hero-specs .spec{font-size:.86rem;padding:8px 12px;border:1px solid var(--line-2);border-radius:100px}

.car-hero-buy{display:flex;align-items:flex-end;gap:22px;margin-top:26px;flex-wrap:wrap}
.car-hero-price .from{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-mute);font-family:var(--font-head)}
.car-hero-price .amt{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1}
.car-hero-price .amt small{font-size:.42em;color:var(--text-dim);font-weight:500;letter-spacing:.02em}
.car-hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- The live Serres poster ---------- */
.serres-poster{
  position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-2);
  aspect-ratio:4/5;max-width:520px;margin-inline:auto;isolation:isolate;
  box-shadow:var(--shadow);background:#08080a;
}
.serres-poster__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  filter:saturate(1.02) contrast(1.03);
}
.serres-poster::before{ /* darkening + silver vignette */
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(6,6,8,.72) 0%,rgba(6,6,8,.28) 34%,rgba(6,6,8,.34) 60%,rgba(4,4,6,.92) 100%),
    radial-gradient(120% 80% at 50% 0%,rgba(201,205,215,.14),transparent 60%);
}
.serres-poster::after{ /* fine top+bottom hairlines like the source */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-top:2px solid rgba(201,205,215,.5);border-bottom:2px solid rgba(201,205,215,.5);
  mask:linear-gradient(#000,#000);
}
.serres-poster__in{
  position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(20px,4.5%,30px);text-align:center;color:var(--white);
}
.serres-poster__top{display:flex;flex-direction:column;align-items:center;gap:6px}
/* Same lockup as the nav, just centred and sized for the poster. The old
   .b-dot rule here styled a separator that no longer exists in the markup. */
.serres-poster__brandmark{--brand-h:.92rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.62em;line-height:1}
.serres-poster__brandmark .b-mark{display:block;height:var(--brand-h);width:auto;flex:none}
.serres-poster__brandmark .b-drive{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:calc(var(--brand-h) * .82);letter-spacing:.30em;margin-right:-.30em;transform:translateY(.06em)}
.serres-poster__kicker{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.34em;
  font-size:.6rem;color:var(--gold);opacity:.85}
.serres-poster__hairline{width:120px;height:1px;background:var(--gold-line);opacity:.7;margin:2px auto 0}

.serres-poster__mid{margin:auto 0}
.serres-poster__brand{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.3em;
  font-size:clamp(1rem,4vw,1.4rem);color:var(--text);opacity:.9}
.serres-poster__model{font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  font-size:clamp(2.6rem,10vw,3.6rem);line-height:.9;margin:.08em 0 .2em;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.serres-poster__tagline{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.22em;
  font-size:.66rem;color:var(--text-dim)}

.serres-poster__prices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.serres-poster__prices .pk{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.56rem;color:var(--text-mute)}
.serres-poster__prices .pv{font-family:var(--font-head);font-weight:700;font-size:clamp(1.15rem,4.6vw,1.5rem);
  line-height:1.1;margin-top:3px}
.serres-poster__prices .col + .col{border-left:1px solid var(--line-2)}
.serres-poster__loc{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.28em;
  font-size:.6rem;color:var(--text-dim);margin-top:12px;display:inline-flex;gap:.5em;align-items:center;justify-content:center}
.serres-poster__loc svg{width:11px;height:11px;color:var(--gold)}

/* ---------- Spec sheet ---------- */
.spec-sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec-sheet .cell{background:var(--panel);padding:20px 18px}
.spec-sheet .k{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;
  font-size:.66rem;color:var(--text-mute)}
.spec-sheet .v{font-family:var(--font-head);font-weight:700;font-size:1.5rem;margin-top:6px;line-height:1}
.spec-sheet .v small{font-size:.5em;color:var(--text-dim);font-weight:500;margin-left:2px}

/* ---------- Full price table ---------- */
.price-block{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.price-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.price-table th,.price-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.price-table th{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;
  font-size:.72rem;color:var(--text-mute);font-weight:600;background:var(--panel-2)}
.price-table td:last-child{text-align:right;font-family:var(--font-head);font-weight:700;font-size:1.15rem}
.price-table tr:last-child td{border-bottom:0}
.price-aside{border:1px solid var(--line-2);border-radius:var(--radius);padding:24px;background:var(--panel);text-align:center}
.price-aside .dep-k{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--text-mute)}
.price-aside .dep-v{font-family:var(--font-head);font-weight:700;font-size:2rem;margin:6px 0 4px}
.price-aside p{color:var(--text-dim);font-size:.9rem;margin-bottom:18px}
.price-aside .btn{width:100%;justify-content:center}

/* ---------- Highlights ---------- */
.hl-list{display:flex;flex-direction:column;gap:12px}
.hl-list li{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:1.02rem}
.hl-list svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:2px}

/* ---------- Gallery (scrape footage, on-brand cars only) ---------- */
.car-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.car-gallery figure{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:#0b0b0d;aspect-ratio:4/5;margin:0}
.car-gallery img,.car-gallery video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Section rhythm on detail page ---------- */
.car-section{padding-block:clamp(40px,6vw,80px)}
.car-section h2{font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;margin-bottom:8px}
.car-section .sub{color:var(--text-dim);margin-bottom:28px;max-width:60ch}

.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-dim);font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin-bottom:6px}
.back-link:hover{color:var(--white)}
.back-link svg{width:16px;height:16px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .car-hero{grid-template-columns:1fr;gap:28px}
  .serres-poster{order:-1}
  .spec-sheet{grid-template-columns:repeat(2,1fr)}
  .price-block{grid-template-columns:1fr}
}
@media (max-width:520px){
  .spec-sheet{grid-template-columns:1fr 1fr}
}