/* Home page: split hero (light surface, no official poster), model catalogue
   grid, promo band. */

.hero {
  position: relative;
  /* Soft radial gradient, brighter toward the product shot, plus the model
     grid gets its own clear run-in below (80px desktop / 48px phones). */
  background: radial-gradient(ellipse at 70% 50%, #e9f0ff 0%, #f4f6fa 70%);
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .hero { margin-bottom: 8px; } /* + .section's own 40px top padding = 48px */
}
/* A faint ground-plane line behind everything (negative z-index paints before
   any non-positioned content, so it can never sit on top of the car/bike). */
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 1px;
  background: rgba(20, 20, 20, 0.08);
}
.hero__grid { padding-block: 32px; display: grid; gap: 24px; }
.hero__media-wrap { order: -1; position: relative; aspect-ratio: 4 / 3; }
/* The AI scene fills the wrap edge-to-edge (its own <figure>/<img> already
   carry width:100%/height:100% from .ai-figure); everything below still
   applies to the official-render fallback (no scene generated yet/dropped).
   The wrap (not the figure) carries the rounded-card look and the aspect
   ratio, since the figure's own width/height:100% would otherwise override
   any aspect-ratio set directly on it. */
.hero--scene .hero__media-wrap { overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-1); }
.hero--scene .hero__scene, .hero--scene .hero__scene img { width: 100%; height: 100%; }
.hero__car { width: 100%; height: 100%; }
.hero__car img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* Scooter beside the car, sharing its ground line (both bottom: 0), sized to
   ~45% of the car's height, overlapping the car's own (heavily-margined)
   silhouette by a sliver rather than sitting fully clear of it. */
.hero__bike {
  position: absolute;
  z-index: 1;
  left: -2%;
  bottom: 0;
  width: 30%;
}
.hero__bike img { width: 100%; height: auto; object-fit: contain; object-position: left bottom; }
/* One soft elliptical floor shadow under both vehicles — a gradient, not a photo. */
.hero__shadow {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 12%;
  bottom: 1%;
  height: 22px;
  background: radial-gradient(ellipse at center, rgba(20, 20, 20, 0.18) 0%, rgba(20, 20, 20, 0) 72%);
}
.hero__subline { max-width: 48ch; margin-top: 8px; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Below 1024px the figure stacks first (order: -1 above, aspect 4/3 from
   the base .hero__media-wrap rule), text below on plain white. */
@media (min-width: 1024px) {
  .hero--scene .hero__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: 48px;
    padding-block: 56px;
    background: var(--surface-2);
  }
  .hero--scene .hero__media-wrap { order: 0; aspect-ratio: 16 / 10; }
  .hero--scene .hero__content h1 {
    /* House h1 clamps to 3.5rem by 1280px — loose enough to wrap this
       specific hero title to 4 lines. A gentler clamp specific to this
       hero keeps it to 3 at 1280px. */
    font-size: clamp(2.2rem, 1.6rem + 1vw, 3rem);
    line-height: 1.12;
  }
  .hero--scene .hero__subline { max-width: 44ch; font-size: 1.05rem; font-weight: 500; line-height: 1.55; }
  /* A ~660px column (7fr of the ~1136px grid) is narrower than the scene's
     own 1280px source, so `object-fit: cover` has real horizontal slack —
     no transform hack needed (unlike the old full-bleed hero, where the
     image box's native width left zero slack for object-position to pan
     with). 62% keeps the scooter's front fairing and both wheels clear of
     the crop (checked against the real banner-motorbikes source). */
  .hero--scene .hero__scene img { object-position: 62% center; }
  /* Official-render fallback (no AI scene yet/dropped): the same in-grid
     media-wrap, still its own narrower column rather than the scene's
     16:10 figure. */
  .hero:not(.hero--scene) .hero__grid { grid-template-columns: 5fr 7fr; gap: 40px; padding-block: 32px; }
  .hero:not(.hero--scene) .hero__media-wrap { order: 0; aspect-ratio: auto; height: 420px; }
}

.section { padding-block: 40px; }
.section__head { margin-bottom: 20px; }

/* Category banner: 21:9, section title overlaid bottom-left, white on a
   0->55% black gradient (never plain white text on a light sky, which the
   real generated scenes sometimes are). */
.category-banner-wrap { position: relative; border-radius: var(--r-media); overflow: hidden; margin-bottom: 20px; }
.category-banner-wrap .ai-figure img { aspect-ratio: 21 / 9; }
.category-banner-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
}
.category-banner__title {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  margin: 0;
}
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.model-card { text-decoration: none; color: var(--ink); transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
/* Reveal stagger as stylesheet rules, not an inline style="transition-delay":
   live CSP is style-src 'self', which has no 'unsafe-inline' and blocks every
   style="" attribute outright (the colour dots and this stagger both rendered
   broken on the live host until this changed). */
html.js .model-grid .model-card[data-animate] { transition-delay: var(--reveal-delay, 0ms); }
.model-grid .model-card:nth-child(1) { --reveal-delay: 0ms; }
.model-grid .model-card:nth-child(2) { --reveal-delay: 40ms; }
.model-grid .model-card:nth-child(3) { --reveal-delay: 80ms; }
.model-grid .model-card:nth-child(4) { --reveal-delay: 120ms; }
.model-grid .model-card:nth-child(5) { --reveal-delay: 160ms; }
.model-grid .model-card:nth-child(6) { --reveal-delay: 200ms; }
.model-grid .model-card:nth-child(7) { --reveal-delay: 240ms; }
.model-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(20, 20, 20, 0.08), 0 16px 32px rgba(20, 20, 20, 0.1); }
.model-card__media { aspect-ratio: 4 / 3; background: var(--surface-2); border-radius: var(--r-media); overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.model-card__media img { width: 100%; height: 100%; object-fit: contain; }
.model-card__body h3 { margin-bottom: 8px; }
.model-card__price { color: var(--ink-2); margin: 0 0 8px; }
.chip--key { pointer-events: none; }

.promo-band { display: block; text-decoration: none; color: var(--ink); overflow: hidden; padding: 0; }
.promo-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.promo-band__body { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Vinz entry card (motorbike-only home, in place of the dropped promo band):
   a proper card, not a bare <a> — `.card` alone doesn't set text-decoration
   or lay its children out, so without this it rendered as underlined text
   with the orb collapsed to nothing (choose.css, where the orb IS sized,
   isn't loaded on this page). */
.vinz-home-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
}
.vinz-home-card__body { flex: 1 1 240px; min-width: 0; }
.vinz-home-card__body h3 { margin-bottom: 4px; }
.vinz-home-card__body p { margin: 0; color: var(--ink-2); }

/* The site's own introduction under the hero — plain reading text, its own voice per site. */
.home-intro { max-width: 70ch; margin: 0 auto var(--space-7); padding: 0 var(--space-4); text-align: left; }
.home-intro__heading { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 750; line-height: 1.25; color: var(--ink); margin: 0 0 var(--space-3); }
.home-intro__text { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); margin: 0; }
@media (max-width: 767px) {
  .home-intro { margin-bottom: var(--space-6); }
  .home-intro__text { font-size: 1rem; }
}

/* Jakarta: the hero wash moves to the text side and turns teal; the split layout is unchanged. */
html[data-site="jakarta"] .hero { background: radial-gradient(ellipse at 30% 40%, #e3f4f1 0%, #f1f7f6 72%); }