/* ==========================================================================
   RennSport — Page compositions
   Hero · FeaturedVehicle · HowItWorks · VehicleDetail · FinalCTA · Contact
   ========================================================================== */

/* ==========================================================================
   Homepage hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  background: var(--c-carbon);
}
@media (min-width: 1060px) {
  .hero { min-height: clamp(720px, 94svh, 1000px); }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img,
.hero__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 54%; /* keeps the vehicle weighted right of the copy */
}

/* Layered scrim: opaque under the copy, near-clear over the vehicle,
   plus a bottom fade that hands off to the next section. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(11, 2, 2, 0.95) 0%,
      rgba(11, 2, 2, 0.9) 22%,
      rgba(11, 2, 2, 0.58) 46%,
      rgba(11, 2, 2, 0.2) 68%,
      rgba(11, 2, 2, 0.12) 100%
    ),
    linear-gradient(to top, var(--c-carbon) 0%, rgba(11, 2, 2, 0.55) 16%, rgba(11, 2, 2, 0) 46%),
    radial-gradient(60% 50% at 88% 28%, rgba(116, 1, 5, 0.16), transparent 70%);
}

/* On a phone the viewport is taller than the image is tall, so there is no
   vertical crop to play with: the vehicle is lifted into the upper third with
   a transform instead, and the scrim opens up over that band so it reads. */
@media (max-width: 1059px) {
  /* The copy column fills a phone viewport on its own, so the trust rail drops
     below the fold: the hero keeps a full screen for image + copy, and the
     vehicle gets clear space above the headline instead of sitting under it. */
  .hero { min-height: 0; }
  .hero__inner { min-height: 100svh; align-items: end; }

  .hero__media img,
  .hero__media svg { object-position: 50% 50%; }

  .hero__scrim {
    background:
      linear-gradient(to top,
        var(--c-carbon) 4%,
        rgba(11, 2, 2, 0.94) 40%,
        rgba(11, 2, 2, 0.72) 58%,
        rgba(11, 2, 2, 0.16) 76%,
        rgba(11, 2, 2, 0.10) 100%),
      radial-gradient(74% 26% at 58% 14%, rgba(116, 1, 5, 0.26), transparent 74%);
  }
}

/* Tablet keeps the landscape frame, lifted slightly so the car clears the copy */
@media (min-width: 700px) and (max-width: 1059px) {
  .hero__media img,
  .hero__media svg { object-position: 68% 40%; }
}

.hero__inner {
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-7);
}
@media (min-width: 1060px) {
  .hero__inner {
    align-items: center;
    padding-top: var(--header-h);
    padding-bottom: var(--s-8);
  }
}

.hero__content {
  max-width: 640px;
  display: grid;
  gap: var(--s-5);
}
/* Grid items default to min-width:auto, which lets an over-long word push the
   container wider than the viewport. */
.hero__content > * { min-width: 0; overflow-wrap: break-word; }
@media (min-width: 1060px) { .hero__content { max-width: 660px; } }

.hero__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 2px 30px rgba(11, 2, 2, 0.7);
}
/* "PERFORMANCE." is a single 12-character word: below 480px the type has to be
   sized so it fits the content box, or it forces the whole page wider. */
@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(2.1rem, -0.05rem + 10.9vw, 2.9rem);
    letter-spacing: -0.005em;
  }
}
.hero__title span { display: block; }
.hero__title .is-dim { color: var(--c-titanium); }

.hero__copy {
  font-size: var(--fs-body-lg);
  color: var(--c-titanium-lift);
  max-width: 50ch;
  text-shadow: 0 1px 20px rgba(11, 2, 2, 0.8);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-2);
}
@media (max-width: 460px) {
  .hero__ctas { display: grid; gap: var(--s-4); justify-items: start; }
  .hero__ctas .btn--primary { width: 100%; }
}

.hero__rail {
  position: relative;
  background: linear-gradient(to top, var(--c-carbon) 30%, rgba(11, 2, 2, 0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Scroll hint — a slow red filament drawn down the left edge */
.hero__hint {
  position: absolute;
  /* The rail is full-bleed, so a plain gutter offset parked this on the
     viewport edge instead of the content rail — 320px adrift at 1920px. */
  left: max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
  bottom: 100%;
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-titanium-dim);
}
@media (min-width: 1060px) { .hero__hint { display: flex; } }
.hero__hint i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(176, 3, 8, 0), var(--c-red));
  animation: filament 2.8s var(--e-inout) infinite;
  transform-origin: top;
}
@keyframes filament {
  0%, 100% { transform: scaleY(0.25); opacity: 0.35; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* Staggered entrance for the hero copy */
.hero__content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn 900ms var(--e-out) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 120ms; }
.hero__content > *:nth-child(2) { animation-delay: 220ms; }
.hero__content > *:nth-child(3) { animation-delay: 330ms; }
.hero__content > *:nth-child(4) { animation-delay: 440ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__content > * { opacity: 1; transform: none; animation: none; }
  .hero__hint i { animation: none; opacity: 0.8; }
}

/* ==========================================================================
   Inner page hero
   ========================================================================== */

.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem));
  padding-bottom: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
  border-bottom: 1px solid var(--line-hairline);
  background:
    radial-gradient(80% 120% at 78% -20%, rgba(116, 1, 5, 0.26), transparent 62%),
    linear-gradient(180deg, var(--c-oxblood) 0%, var(--c-carbon) 92%);
  overflow: hidden;
}
/* The element is both .container and .page-hero__inner, so the width limit has
   to sit on the children — otherwise .container's auto margins centre it.
   The column is pinned to minmax(0, 1fr): an auto column would grow to the
   max-content width of the headline and overflow on a narrow phone. */
.page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.page-hero__inner > * { max-width: 780px; }
.page-hero__title { font-family: var(--font-headline); font-weight: 700; font-size: var(--fs-h1); line-height: 1.06; text-transform: uppercase; color: var(--c-white); }

/* Faint angled light streak, derived from the logo motif */
.page-hero__streak {
  position: absolute;
  right: -10%;
  top: 50%;
  width: 70%;
  height: 1px;
  transform: rotate(-16deg);
  background: linear-gradient(90deg, transparent, var(--line-red) 45%, rgba(176, 3, 8, 0));
  pointer-events: none;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-titanium-dim);
}
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb__sep { color: var(--c-red-text); }

/* ==========================================================================
   Featured vehicle — one large editorial block, no carousel, no empty states
   ========================================================================== */

.featured {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 1000px) {
  .featured {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  }
}

.vehicle-media {
  position: relative;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-graphite);
  aspect-ratio: 16 / 10;
}
.vehicle-media img,
.vehicle-media svg { width: 100%; height: 100%; object-fit: cover; }
.vehicle-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 2, 2, 0.55), transparent 42%);
}
.vehicle-media__tag {
  position: absolute;
  left: var(--s-4); top: var(--s-4);
  z-index: 2;
}

.featured__body { display: grid; gap: var(--s-5); align-content: center; }
.featured__name { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-h2); line-height: 1.08; text-transform: uppercase; color: var(--c-white); }
.featured__year { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--c-titanium); margin-bottom: var(--s-3); }
.featured__actions { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; }
@media (max-width: 460px) { .featured__actions { display: grid; } .featured__actions .btn--primary { width: 100%; } }

.price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-block: 1px solid var(--line-hairline);
}
.price-block__value { font-family: var(--font-display); font-size: var(--fs-stat); color: var(--c-white); line-height: 1; }
.price-block__unit { font-size: var(--fs-body-sm); color: var(--c-titanium); }

/* Fleet grid ---------------------------------------------------------------- */

.vehicle-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--c-graphite);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.vehicle-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.vehicle-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-ink); }
.vehicle-card__media img,
.vehicle-card__media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--e-out);
}
.vehicle-card:hover .vehicle-card__media img,
.vehicle-card:hover .vehicle-card__media svg { transform: scale(1.02); }
.vehicle-card__body { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); }
.vehicle-card__name { font-family: var(--font-display); font-size: var(--fs-h4); text-transform: uppercase; color: var(--c-white); line-height: 1.35; }
.vehicle-card__desc { font-size: var(--fs-body-sm); color: var(--c-titanium); }
.vehicle-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-hairline);
}

/* One vehicle plus the status note is two items, and a fixed three-track grid
   left the third column empty. auto-fit collapses the unused track so the two
   cards share the row. */
[data-fleet-grid] {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Honest empty state — says what is true, does not invent a fleet */
.fleet-note {
  display: grid;
  gap: var(--s-4);
  align-content: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(23, 17, 19, 0.5);
}

/* ==========================================================================
   Vehicle detail
   ========================================================================== */

.vd-layout { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .vd-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
  }
}

/* Grid children default to min-width:auto, and four 400px-wide thumbnails have
   a min-content width far wider than the column — without this the strip
   overflows under the booking panel. */
.vd-layout > *,
.gallery,
.gallery__thumbs,
.gallery__thumbs > * { min-width: 0; }

.gallery { display: grid; gap: var(--s-3); }
.gallery__main {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--c-graphite);
}
.gallery__main img,
.gallery__main svg { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.gallery__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--c-graphite);
  padding: 0;
  transition: border-color var(--t-fast) linear, opacity var(--t-fast) linear;
  opacity: 0.6;
}
.gallery__thumb img, .gallery__thumb svg { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--c-red); }

.vd-aside {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}
@media (min-width: 1000px) {
  .vd-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.tablist {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--line-hairline);
  margin-bottom: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
/* Five labels had to fit the 1.25fr column or the last one was silently cut
   in half by the scroll container, with no affordance saying it scrolled.
   Dropping the cell padding and easing the tracking buys the ~90px needed;
   overflow-x stays as the graceful fallback on a phone. */
.tab {
  position: relative;
  flex: none;
  padding: var(--s-3) 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-titanium);
  min-height: 44px;
  transition: color var(--t-fast) linear;
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
}
.tab:hover { color: var(--c-white); }
.tab[aria-selected="true"] { color: var(--c-white); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel[hidden] { display: none; }

/* ==========================================================================
   How it works — numbered track with a connecting filament
   ========================================================================== */

.steps { display: grid; gap: var(--s-6); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.step { position: relative; display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-6); }
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: var(--line-hairline);
}
.step::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 1px;
  background: var(--c-red);
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-label);
  color: var(--c-red-text);
}
.step__title { font-family: var(--font-display); font-size: var(--fs-h4); text-transform: uppercase; color: var(--c-white); line-height: 1.4; }
.step__body { font-size: var(--fs-body-sm); color: var(--c-titanium-lift); }

/* ==========================================================================
   Stat / pillar band
   ========================================================================== */

.pillars { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Cross-card alignment
   Each card is its own grid, so a two-line title pushed that card's body copy
   a line lower than its neighbours' and the row lost its horizontal rhythm.
   Subgrid hands the row tracks back to the parent: index, title and body line
   up across the row whatever the title lengths. Row gaps are restated so the
   cards keep their own internal spacing rather than the parent's.
   Multi-column only — in a single-column stack there is nothing to align to.
   ========================================================================== */
@media (min-width: 900px) {
  .pillars > .feature-card,
  .grid--4 > .feature-card {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--s-4);
  }
  .steps > .step {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--s-3);
  }
}
@media (min-width: 680px) and (max-width: 899px) {
  .grid--4 > .feature-card {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--s-4);
  }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 50% 120%, rgba(116, 1, 5, 0.55), transparent 62%),
    linear-gradient(180deg, var(--c-carbon), var(--c-ink));
  border-top: 1px solid var(--line-hairline);
  padding-block: clamp(4rem, 2.6rem + 6vw, 8rem);
  text-align: center;
}
.final-cta__arcs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.final-cta__inner { position: relative; display: grid; gap: var(--s-5); justify-items: center; }
.final-cta .eyebrow { justify-content: center; }
.final-cta__title { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; text-transform: uppercase; color: var(--c-white); }
.final-cta__copy { max-width: 54ch; color: var(--c-titanium-lift); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); justify-content: center; margin-top: var(--s-2); }
@media (max-width: 460px) { .final-cta__actions { display: grid; width: 100%; } }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-layout { display: grid; gap: var(--s-8); }
@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: start;
  }
}
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid .field--full { grid-column: 1 / -1; }

.contact-aside { display: grid; gap: var(--s-6); align-content: start; }
.contact-line { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-hairline); }
.contact-line__key { font-family: var(--font-display); font-size: 0.5625rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-titanium); }
.contact-line__value { color: var(--c-white); font-size: var(--fs-body-sm); }

/* ==========================================================================
   Long-form content (requirements, terms, about)
   ========================================================================== */

.prose { display: grid; gap: var(--s-5); max-width: var(--measure); }
.prose h2 { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-h3); text-transform: uppercase; color: var(--c-white); margin-top: var(--s-4); }
.prose h3 { font-family: var(--font-display); font-size: var(--fs-h4); text-transform: uppercase; color: var(--c-white); }
.prose p { color: var(--c-titanium-lift); }
.prose ul { display: grid; gap: var(--s-3); }
.prose ul li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--fs-body-sm);
  color: var(--c-titanium-lift);
}
/* 2px, not 1px. A hairline landing on a fractional device pixel gets split
   across two rows and renders visibly dimmer, so in a list where the items
   are different heights the markers came out alternating red and grey. */
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 10px; height: 2px;
  background: var(--c-red);
}

/* Two-column editorial split used on About / Why RennSport */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start; }
  .split--media-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}