/* ============================================================
   Design System — LEXUS brand tokens (PREMIUM — Titanium Restraint)
   Layered on base.css, the SAME structural primitives Toyota uses.
   A Lexus page links base.css + lexus.css (instead of toyota.css).

   Identity: real Lexus restraint — black / white / silver-graphite,
   NO chroma accent. Hierarchy comes from type, space, material and
   motion, not color. Display face: Jost (Nobel-lineage analog).
   See docs/superpowers/specs/2026-06-02-lexus-rz-page-design.md
   ============================================================ */
:root {
  /* CTA — restrained premium dark (Lexus avoids bright red) */
  --red-cta: #1a1a1a;
  --red-hover: #000000;

  /* Section backgrounds */
  --specs-bg: #c9cfd0;        /* Lexus titanium fallback; RZ specs overrides this locally to graphite */
  --mosaic-perf-bg: #2a2f33;  /* graphite */

  /* Accent (token names kept for drop-in) — titanium silver, no chroma */
  --cyan: #c8ccce;
  --cyan-dim: rgba(200,204,206,0.08);
  --cyan-glow: rgba(200,204,206,0.30);
  --metallic: #d6dbdd;
  --metallic-glow: rgba(214,219,221,0.30);

  /* Type */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Jost', 'DM Sans', sans-serif;
}

/* ============================================================
   LEXUS premium component overrides — scoped to body.lexus so
   the shared (Toyota) components stay untouched. Mobile-first.
   Lifts hero text out of the punchy bold register into Lexus's
   light, airy, generously-spaced one.
   ============================================================ */

/* Hero headline: light weight + open tracking + a touch more air */
.lexus .h1-hero {
  font-weight: 300;
  letter-spacing: 0.006em;
  line-height: 1.16;
}

/* Hero eyebrow: a small, widely-tracked label under a thin
   titanium hairline (instead of a heavy 24px badge) */
.lexus .hero-wrapper__badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.26em;
  white-space: nowrap;
  color: rgba(255,255,255,0.74);
  margin-bottom: 20px;
}
.lexus .hero-wrapper__badge::before {
  content: '';
  width: 38px;
  height: 1px;
  background: var(--metallic);
  opacity: 0.55;
}

/* Section titles → light Lexus register (matches the hero, across sections) */
.lexus .heading-02 {
  font-weight: 300;
  letter-spacing: 0;
}

/* Section-group titles (Extérieur, Intérieur, …) → same light register
   (shared component ships them bold/tight for Toyota) */
.lexus .section-group__header .sg-title {
  font-weight: 300;
  letter-spacing: 0;
}

/* Title removed its intro line → the spec-card top-borders collided with the
   headline baseline. Restore the gap the intro paragraph used to provide. */
.lexus .specs-top-row { margin-top: clamp(34px, 3.6vw, 48px); }

/* Interior carousel copy is intentionally editorial on the Lexus page.
   The shared Toyota component caps active descriptions at 100px on desktop;
   lift that cap only for Lexus so the RZ long-form cards remain readable. */
.lexus .int-showcase__card-desc {
  max-width: min(620px, 100%);
}

/* §7 Multimedia — keep brand lockups crisp on dark Lexus cards without
   touching the shared Toyota multimedia component. */
.lexus .mm-brand-logo {
  display: block;
  width: min(260px, 78%);
  height: auto;
  margin: 18px 0 22px;
  filter: invert(1);
  opacity: 0.94;
}

@media (max-width: 767px) {
  .lexus .mm-brand-logo {
    width: min(220px, 74%);
    margin: 16px 0 20px;
  }
}

/* §7 Multimedia — the Palomino/Macadamia gallery asset is 16:9 while the
   bento card is much wider. Reveal the full interior frame instead of
   cropping it into an abstract strip. */
.lexus .mm-tile--palomino {
  background: #090909;
}

.lexus .mm-tile--palomino .mm-tile__media {
  background: linear-gradient(90deg, #070707 0%, #090909 44%, #14100d 100%);
}

.lexus .mm-tile--palomino .mm-tile__media img {
  width: min(68%, 560px);
  height: 100%;
  margin-left: auto;
  object-fit: contain;
  object-position: right center;
}

.lexus .mm-tile--palomino.is-visible .mm-tile__media img {
  transform: none;
}

.lexus .mm-tile--palomino .mm-tile__media::after {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.70) 40%,
    rgba(0,0,0,0.26) 72%,
    rgba(0,0,0,0.06) 100%
  );
}

.lexus .mm-tile--palomino .mm-tile__body {
  max-width: min(500px, 58%);
}

@media (max-width: 767px) {
  .lexus .mm-tile--palomino .mm-tile__media {
    background: #090909;
  }

  .lexus .mm-tile--palomino .mm-tile__media img {
    width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: contain;
    object-position: center center;
  }

  .lexus .mm-tile--palomino .mm-tile__body {
    max-width: none;
  }
}

/* §6 Interior — cards 2/4/5 carry WIDE detail shots (seats ~16:9, drive-selector ~21:9,
   ambient ~16:10). `cover` was discarding 40-60% of their width ("too zoomed-in"). Reveal
   the full frame with `contain` over a graphite letterbox (no chroma — Titanium Restraint).
   Mobile 16:10 box: always. Desktop accordion: only when the card is expanded; inactive
   slivers keep `cover` as teasers. */
.lexus .int-showcase__card:nth-child(2) .int-showcase__card-img,
.lexus .int-showcase__card:nth-child(4) .int-showcase__card-img,
.lexus .int-showcase__card:nth-child(5) .int-showcase__card-img {
  background: #16191c;
}
.lexus .int-showcase__card:nth-child(2) .int-showcase__card-img img,
.lexus .int-showcase__card:nth-child(4) .int-showcase__card-img img,
.lexus .int-showcase__card:nth-child(5) .int-showcase__card-img video {
  object-fit: contain;
  object-position: center top;   /* image anchors high; caption sits below */
}

@media (min-width: 768px) {
  /* accordion slivers: keep cover (teaser strip), centered */
  .lexus .int-showcase__card:nth-child(2) .int-showcase__card-img img,
  .lexus .int-showcase__card:nth-child(4) .int-showcase__card-img img,
  .lexus .int-showcase__card:nth-child(5) .int-showcase__card-img video {
    object-fit: cover;
    object-position: center center;
  }
  /* expanded card: reveal the whole frame, anchored to the top */
  .lexus .int-showcase__card:nth-child(2).active .int-showcase__card-img img,
  .lexus .int-showcase__card:nth-child(4).active .int-showcase__card-img img,
  .lexus .int-showcase__card:nth-child(5).active .int-showcase__card-img video {
    object-fit: contain;
    object-position: center top;
  }
}

@media (min-width: 768px) {
  .lexus .int-showcase__card.active .int-showcase__card-desc {
    max-height: 300px;
  }
  .lexus .int-showcase__card-title {
    font-size: clamp(18px, 2vw, 24px);
  }
  .lexus .int-showcase__card-desc {
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .lexus .int-showcase__card-content {
    padding: 32px 30px;
  }
  .lexus .int-showcase__card.active .int-showcase__card-desc {
    max-height: 340px;
  }
}

@media (min-width: 768px) {
  .lexus .h1-hero { letter-spacing: 0.012em; }
  .lexus .hero-wrapper__badge { font-size: 18px; gap: 16px; margin-bottom: 24px; }
  /* widen so the light headline breaks only at the <br> (2 clean lines) */
  .lexus .hero-wrapper__content { max-width: 1080px; }
}

/* ============================================================
   §3 Still-asset (design statement) — Lexus editorial register.
   Shared component is bold + UPPERCASE (Toyota); here it becomes
   a light, two-line Jost statement over the cinematic side-profile
   still, with a titanium hairline (not a chroma bar) as the accent.
   ============================================================ */
.lexus .still-asset__display {
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.1;
  /* bold widens the glyphs — cap smaller than the light version so the long
     "100% transmission intégrale." line still holds two lines, not three */
  font-size: clamp(20px, 4.6vw, 44px);
  margin-bottom: 22px;
}
/* Accent → 1px titanium hairline, echoing the hero eyebrow rule */
.lexus .still-asset__accent {
  width: 56px;
  height: 1px;
  background: var(--metallic);
  opacity: 0.6;
  margin-bottom: 22px;
}
.lexus .still-asset__heading {
  font-weight: 400;
  letter-spacing: 0;
}
/* Desktop / landscape: cinematic full-bleed overlay — the wide still is at home
   here, container aspect ~matches the image so almost no crop. */
@media (min-width: 769px) {
  .lexus .still-asset { min-height: 68svh; }
  /* generous left inset + bottom air — the sparse statement should breathe, not hug the edge */
  .lexus .still-asset__content { max-width: 760px; padding: 0 24px 64px clamp(40px, 5vw, 88px); }
}
/* Phone + portrait tablet: STACK — wide image band on top, text on the dark card
   below. A tall overlay would center-crop the 2.41:1 still into the car; stacking
   keeps the full side-profile. */
@media (max-width: 768px) {
  .lexus .still-asset {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .lexus .still-asset__bg {
    position: relative;
    height: 50vw;
    min-height: 200px;
  }
  .lexus .still-asset__bg img { opacity: 1; object-position: center center; }
  .lexus .still-asset__bg::before { display: none; }
  .lexus .still-asset__bg::after {
    height: 38%;
    background: linear-gradient(to top, var(--black) 0%, transparent 100%);
  }
  .lexus .still-asset__content {
    position: relative;
    padding: 30px 24px 40px;
    max-width: 100%;
    background: var(--black);
  }
  .lexus .still-asset__heading { color: var(--white); font-size: 16px; margin-bottom: 0; }
}

/* ============================================================
   §2 Chiffres cles — definitive graphite treatment.
   Keep this scoped to body.lexus and the specs section so Toyota's
   shared component CSS stays unchanged. These selectors are intentionally
   specific enough to beat the shared responsive rules loaded after tokens.
   ============================================================ */
.lexus .vehicle-specs-container {
  --specs-bg: var(--mosaic-perf-bg);
  --black: #f5f6f4;
  --mid-gray: rgba(255,255,255,0.74);
  --text-secondary: rgba(255,255,255,0.74);
  --red-cta: rgba(245,246,244,0.82);
  --lexus-specs-primary: #f5f6f4;
  --lexus-specs-secondary: rgba(255,255,255,0.74);
  --lexus-specs-muted: rgba(255,255,255,0.68);
  --lexus-specs-line: rgba(255,255,255,0.14);
  color: var(--lexus-specs-primary);
}

.lexus .vehicle-specs-container .eyebrow,
.lexus .vehicle-specs-container .spec-card__label,
.lexus .vehicle-specs-container .spec-card .body-03,
.lexus .vehicle-specs-container .scb-label,
.lexus .vehicle-specs-container .scb-desc,
.lexus .vehicle-specs-container .scb-stat__unit,
.lexus .vehicle-specs-container .specs-legal {
  color: var(--lexus-specs-secondary);
}

.lexus .vehicle-specs-container .specs-title,
.lexus .vehicle-specs-container .spec-card__value,
.lexus .vehicle-specs-container .scb-value,
.lexus .vehicle-specs-container .scb-stat__val,
.lexus .vehicle-specs-container .specs-cta .link-arrow {
  color: var(--lexus-specs-primary);
}

.lexus .vehicle-specs-container .eyebrow-hr {
  height: 1px;
  background: rgba(245,246,244,0.56);
  box-shadow: none;
}

.lexus .vehicle-specs-container a-waves.specs-waves svg path {
  stroke: rgba(255,255,255,0.045);
}

.lexus .vehicle-specs-container a-waves.specs-waves::before {
  opacity: 0;
}

.lexus .vehicle-specs-container .spec-card {
  border-top-color: var(--lexus-specs-line);
}

.lexus .vehicle-specs-container .spec-card:hover {
  border-top-color: rgba(245,246,244,0.42);
}

.lexus .vehicle-specs-container .specs-charge-block {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-body {
  background: #e9ecee;
  border-color: rgba(255,255,255,0.22);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-cap {
  background: #e9ecee;
}

.lexus .vehicle-specs-container .specs-charge-block .scb-fill {
  --scb-color: #6b7378;
  background: var(--scb-color, #6b7378);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-pct {
  color: #1a1a1a;
}

.lexus .vehicle-specs-container .specs-charge-block .scb-content .spec-card__label {
  color: var(--lexus-specs-secondary);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-side-stats {
  border-color: var(--lexus-specs-line);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-timer__bg {
  stroke: rgba(255,255,255,0.18);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-timer__fill {
  stroke: rgba(245,246,244,0.82);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-timer span {
  color: var(--lexus-specs-muted);
}

.lexus .vehicle-specs-container .specs-charge-block .scb-timer.active span,
.lexus .vehicle-specs-container .specs-charge-block .scb-timer.done span {
  color: var(--lexus-specs-primary);
}

@media (max-width: 479px) {
  .lexus .vehicle-specs-container .specs-charge-block .scb-side-stats {
    display: flex;
    grid-column: 1 / -1;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 0 0;
    border-left: none;
    border-top: 1px solid var(--lexus-specs-line);
  }
}