/* ============================================================
   ui_kits/marketing-site/site.css
   All component styles. Tokens come from ../../colors_and_type.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ------- Buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--cta-height); padding: 0 var(--space-md);
  border: 0; border-radius: var(--radius-none);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  letter-spacing: var(--font-button-track);
  text-transform: uppercase;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary {
  background-color: var(--color-primary);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 42%, rgba(0,0,0,0.08) 100%);
  color: var(--color-on-primary);
}
.btn--primary:hover {
  background-color: var(--color-primary-active);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.10) 100%);
}
.btn--outline-dark { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); }
.btn--outline-dark:hover { background: var(--color-ink); color: var(--color-canvas); }
.btn--outline-light { background: transparent; color: var(--color-body-on-light); border: 1px solid var(--color-body-on-light); }
.btn--outline-light:hover { background: var(--color-body-on-light); color: var(--color-canvas-light); }

.text-link {
  background: transparent; border: 0; padding: 0;
  color: var(--color-ink);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  letter-spacing: var(--font-button-track);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.fcard--light .text-link { color: var(--color-body-on-light); }

/* ------- Badge pill ------- */
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  background: var(--color-canvas-elevated);
  color: var(--color-ink);
}
.pill--red { background: var(--color-primary); color: #fff; }
.pill--outline-light { background: transparent; border: 1px solid var(--color-hairline-on-light); color: var(--color-body-on-light); }
.pill--info { background: var(--color-semantic-info); color: #fff; }

/* ------- TopNav ------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-height); padding: 0 var(--space-md);
  background: var(--color-canvas);
  display: flex; align-items: center; gap: var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}
.topnav__mark { background: transparent; border: 0; display: flex; align-items: center; gap: 10px; color: var(--color-ink); }
.topnav__brand { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
.cavallino { width: 14px; height: 18px; background: var(--color-primary); clip-path: polygon(50% 0, 100% 60%, 75% 100%, 25% 100%, 0 60%); display: inline-block; }
.topnav__links { display: flex; gap: var(--space-md); margin: 0 0 0 var(--space-xs); padding: 0; list-style: none; }
.topnav__link {
  background: transparent; border: 0;
  font-size: var(--font-nav-size);
  font-weight: var(--font-nav-weight);
  letter-spacing: var(--font-nav-track);
  text-transform: uppercase;
  color: var(--color-ink);
  padding: 20px 0;
}
.topnav__link.is-active { color: var(--color-primary); }
.topnav__util { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
.topnav__lang { font-size: 12px; font-weight: 600; letter-spacing: 0.65px; text-transform: uppercase; color: var(--color-body); font-feature-settings: "tnum"; }
.topnav__icon, .topnav__burger { background: transparent; border: 0; color: var(--color-ink); padding: 6px; display: inline-flex; }
.topnav__burger { display: none; }
.topnav__sheet { display: none; }

/* ------- Hero ------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
}
.hero--light { color: var(--color-body-on-light); min-height: 520px; }
.hero__scrim { position: absolute; inset: auto 0 0 0; height: 70%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); }
.hero__content { position: relative; padding: var(--space-xxl) var(--space-md); max-width: var(--content-max); margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  opacity: 0.9;
}
.hero__h1 {
  font-size: var(--font-display-mega-size);
  font-weight: var(--font-display-mega-weight);
  line-height: var(--font-display-mega-lh);
  letter-spacing: var(--font-display-mega-track);
  margin: 0 0 var(--space-xs);
}
.hero__sub { font-size: 18px; line-height: 1.4; max-width: 540px; margin: 0 0 var(--space-sm); opacity: 0.92; }
.hero__ctas { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.hero__pager { position: absolute; right: var(--space-md); bottom: var(--space-md); display: flex; gap: 8px; }
.hero__dot {
  width: 28px; height: 2px; border: 0;
  background: rgba(255,255,255,0.35); cursor: pointer; padding: 8px 0;
  background-clip: content-box;
}
.hero--light .hero__dot { background-color: rgba(0,0,0,0.25); }
.hero__dot.is-active { background-color: var(--color-primary); }

/* ------- Feature grid ------- */
.section {
  padding: var(--space-xxl) var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
}
.section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-lg); gap: var(--space-md); flex-wrap: wrap; }
.section__eyebrow {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body);
  margin-bottom: var(--space-xs);
}
.section__title {
  font-size: var(--font-display-lg-size);
  font-weight: var(--font-display-lg-weight);
  line-height: var(--font-display-lg-lh);
  letter-spacing: var(--font-display-lg-track);
  margin: 0;
}
.section--light { background: var(--color-canvas-light); color: var(--color-body-on-light); }
.section--light-wrap { background: var(--color-canvas-light); }
.section--light .section__eyebrow { color: var(--color-muted); }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.fcard { background: var(--color-canvas); border-radius: 0; overflow: hidden; }
.fcard--light { background: var(--color-canvas-light); color: var(--color-body-on-light); padding-bottom: var(--space-md); }
.fcard__img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.fcard__body { padding: var(--space-sm) 0; }
.fcard--light .fcard__body { padding: var(--space-md); }
.fcard__eyebrow {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body);
  margin-bottom: var(--space-xxs);
}
.fcard__title {
  font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px;
  margin: 0 0 var(--space-xxs);
}
.fcard__desc {
  font-size: var(--font-body-md-size); line-height: 1.5; color: var(--color-body);
  margin: 0 0 var(--space-xs);
}
.fcard--light .fcard__desc { color: var(--color-muted); }

/* ------- Livery band ------- */
.livery { background: var(--gradient-rosso); color: #fff; }
.livery__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-xxl) var(--space-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.livery__eyebrow {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  opacity: 0.9; margin-bottom: var(--space-xs);
}
.livery__title {
  font-size: var(--font-display-lg-size);
  font-weight: var(--font-display-lg-weight);
  line-height: var(--font-display-lg-lh);
  letter-spacing: var(--font-display-lg-track);
  margin: 0; max-width: 640px;
}

/* ------- Driver cards ------- */
.driver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.driver { background: var(--color-canvas-elevated); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.driver__portrait {
  aspect-ratio: 4 / 3; margin: calc(var(--space-sm) * -1); margin-bottom: 0;
  position: relative; overflow: hidden;
}
.driver__bust {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #5a5a5a, #1a1a1a 70%);
}
.driver__shade {
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
}
.driver__bignum {
  position: absolute; right: var(--space-xs); bottom: var(--space-xs);
  font-size: 64px; font-weight: 700;
  color: rgba(255,255,255,0.12);
  line-height: 1; letter-spacing: -1.28px;
  font-feature-settings: "tnum";
}
.driver__meta { padding: var(--space-xs) 0 0; }
.driver__name { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px; }
.driver__sub { display: flex; align-items: baseline; gap: var(--space-xs); margin-top: var(--space-xxs); }
.driver__num { font-size: 28px; font-weight: 700; line-height: 1; color: var(--color-primary); letter-spacing: -0.5px; font-feature-settings: "tnum"; }
.driver__team {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body);
}

/* ------- Spec row ------- */
.spec-row { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.spec { display: flex; flex-direction: column; gap: var(--space-xxs); }
.spec__val {
  font-size: var(--font-number-size);
  font-weight: var(--font-number-weight);
  line-height: var(--font-number-lh);
  letter-spacing: var(--font-number-track);
  font-feature-settings: "tnum";
}
.spec__val--red { color: var(--color-primary); }
.spec__label {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body);
}

/* ------- Race calendar ------- */
.rcal-list { background: var(--color-canvas); }
.rcal {
  display: grid; grid-template-columns: 100px 1fr auto; gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-hairline);
  align-items: center;
}
.rcal:first-child { border-top: 1px solid var(--color-hairline); }
.rcal__date { font-feature-settings: "tnum"; }
.rcal__day { font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.3px; display: block; }
.rcal__mon {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body);
  margin-top: var(--space-xxxs);
  display: block;
}
.rcal__name { font-size: 18px; font-weight: 500; line-height: 1.2; }
.rcal__circuit { font-size: 13px; color: var(--color-body); margin-top: var(--space-xxxs); }
.rcal__result { display: flex; align-items: baseline; gap: var(--space-xs); }
.rcal__pos { font-size: 32px; font-weight: 700; color: var(--color-primary); line-height: 1; letter-spacing: -0.6px; font-feature-settings: "tnum"; }
.rcal__driver {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body);
}
.rcal__upcoming {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ------- Preowned grid ------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.plisting { background: var(--color-canvas-light); color: var(--color-body-on-light); }
.plisting__img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #ebebeb; }
.plisting__body { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xxs); }
.plisting__title { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px; margin: var(--space-xxs) 0 0; }
.plisting__sub { font-size: 13px; color: var(--color-muted); }
.plisting__price { font-size: 16px; font-weight: 500; letter-spacing: 0.08px; margin-top: var(--space-xxxs); font-feature-settings: "tnum"; }

/* ------- Newsletter ------- */
.newsletter { background: var(--color-canvas); padding: var(--space-md); }
.newsletter__inner {
  background: var(--color-canvas-elevated); padding: var(--space-md); border-radius: var(--radius-sm);
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: center;
}
.newsletter__eyebrow {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-body); margin-bottom: var(--space-xxxs);
}
.newsletter__title {
  font-size: var(--font-display-md-size);
  font-weight: var(--font-display-md-weight);
  line-height: var(--font-display-md-lh);
  letter-spacing: var(--font-display-md-track);
  margin: 0;
}
.newsletter__form { display: flex; gap: var(--space-xs); }
.newsletter__input {
  height: var(--cta-height); padding: 0 var(--space-xs);
  background: var(--color-canvas); border: 1px solid var(--color-hairline);
  color: var(--color-ink); border-radius: var(--radius-sm);
  min-width: 280px; font-size: var(--font-body-md-size); font-family: inherit;
}
.newsletter__input:focus { outline: 2px solid var(--color-accent-yellow); outline-offset: 2px; }

/* ------- CTA band + Footer ------- */
.ctaband { background: var(--color-canvas); padding: var(--space-xxl) var(--space-md); text-align: center; }
.ctaband__title {
  font-size: var(--font-display-lg-size);
  font-weight: var(--font-display-lg-weight);
  line-height: var(--font-display-lg-lh);
  letter-spacing: var(--font-display-lg-track);
  max-width: 720px; margin: 0 auto var(--space-md);
}

.footer { background: var(--color-canvas); padding: var(--space-lg) var(--space-md) var(--space-md); border-top: 1px solid var(--color-hairline); }
.footer__cols { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); margin-bottom: var(--space-md); }
.footer__col h4 {
  font-size: var(--font-caption-upper-size);
  font-weight: var(--font-caption-upper-weight);
  letter-spacing: var(--font-caption-upper-track);
  text-transform: uppercase;
  color: var(--color-ink); margin: 0 0 var(--space-xs);
}
.footer__link { display: block; font-size: var(--font-body-sm-size); color: var(--color-body); text-decoration: none; padding: var(--space-xxxs) 0; }
.footer__link:hover { color: var(--color-ink); }
.footer__legal { max-width: var(--content-max); margin: 0 auto; display: flex; justify-content: space-between; padding-top: var(--space-sm); border-top: 1px solid var(--color-hairline); font-size: 12px; color: var(--color-muted); }
.footer__legal-links a { color: var(--color-muted); margin-left: var(--space-xs); text-decoration: none; }

/* ------- Responsive ------- */
@media (max-width: 1024px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .hero__h1 { font-size: 56px; letter-spacing: -1.12px; }
}
@media (max-width: 768px) {
  .topnav__links { display: none; }
  .topnav__burger { display: inline-flex; }
  .topnav__sheet { display: flex; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--color-canvas); border-top: 1px solid var(--color-hairline); padding: var(--space-xs) var(--space-md); gap: var(--space-xxs); }
  .topnav__sheet-link { background: transparent; border: 0; text-align: left; padding: var(--space-xs) 0; font-size: var(--font-nav-size); font-weight: var(--font-nav-weight); letter-spacing: var(--font-nav-track); text-transform: uppercase; color: var(--color-ink); }
  .fgrid, .pgrid, .driver-grid { grid-template-columns: 1fr; }
  .hero { min-height: 480px; }
  .hero__h1 { font-size: 40px; letter-spacing: -0.8px; }
  .newsletter__inner { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__input { min-width: 0; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .topnav__lang { display: none; }
  .section { padding: var(--space-lg) var(--space-md); }
}