/* Cold-lander vehicle page (BACKLOG #35) — preview at #/cold-lander-demo.
   Shares the app's tokens + components (categories grid, prod-rail, ProductCard,
   big-search, TrustBadges); only the cold-specific blocks live here. */

/* Section rhythm: more air between sections than between a title and its
   content, so each heading clearly belongs to the block below it. */
.cl-page .a-section { margin-bottom: 30px; }

/* Hero */
.cl-hero-sec { text-align: start; padding-top: 24px; }
/* Breadcrumb reuses the app's .pdp-crumb format (see index.html). */
.cl-car-img {
  width: 100%; max-width: 300px; height: auto; display: block;
  margin: 0 auto 14px; border-radius: 14px; object-fit: cover;
}
.cl-h1 { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 0 0 10px; }
/* Lead: the one-line value prop right under the H1 (orients + reassures before
   the ask). Prominent (text color), unlike the muted lower "about" copy. */
.cl-lead { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0 0 16px; max-width: 560px; }
.cl-intro {
  font-size: 14px; line-height: 1.8; color: var(--muted);
  margin: 0 0 14px; max-width: 560px;
}
.cl-hero-sec .anchor-trust { margin-bottom: 16px; }
/* The reused SelectorCard sits inside the centered hero section (which already
   has 16px padding). Cancel the card's own side margin so it spans the same
   width as the blocks below, and reset text-align so its content isn't centered. */
.cl-hero-sec .card { margin: 0 0 20px; text-align: start; }
/* Keep the selector's prompt quiet (default 16/600) so the H1 stays the single
   bold header — the selector's primacy comes from the card + red CTA, not from
   a second big bold line. */

/* Year-page confirm CTA (car already known → one tap into the warm home) */
.cl-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; margin: 0 0 16px; }

/* FAQ reuses the compact PDP accordion (.pdp-faq, see index.html). */

/* Internal-link chips (adjacent years / sibling models) */
.cl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-linkblock { padding-top: 0; }
.cl-link-chip {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
@media (hover: hover) { .cl-link-chip:hover { border-color: var(--text); } }

/* Models grid (brand page) — text tiles, 2-up */
.cl-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cl-tile {
  background: var(--white); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 16px; font: inherit; font-size: 15px; font-weight: 600;
  text-align: center; color: var(--text); cursor: pointer;
}
@media (hover: hover) { .cl-tile:hover { border-color: var(--text); } }
/* SEO-safe collapse: all tiles stay in the DOM; the grid is clipped to N rows
   with an animated max-height (set in JS), so expand/close slides smoothly. */
.cl-collapse { overflow: hidden; transition: max-height 0.32s cubic-bezier(.22, 1, .36, 1); }
.cl-expand {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding: 11px 16px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: 12px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
@media (hover: hover) { .cl-expand:hover { border-color: var(--text); } }
/* IconChevron points right; rotate to a down caret (collapsed) / up (expanded). */
.cl-expand svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s ease; }
.cl-expand.is-open svg { transform: rotate(-90deg); }

/* ---- Category cold lander (selector-led cold state of DiscoverScreen) ---- */
/* Orient block: breadcrumb + one clean H1, above the selector hero. */
.cl-cat-crumb { padding: 20px 16px 0; }
.cl-cat-h1 { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 6px 0 12px; padding: 0 16px; }

/* Selector hero — the primary action. The reused SelectorCard's own side margin
   is cancelled so it spans the page width; sits directly under the H1. */
.cl-cat-hero-sel { padding: 0 16px; margin: 0 0 8px; }
.cl-cat-hero-sel .card { margin: 0; }

/* Refine chrome wrapper — a hairline above separates "pick your car" (hero)
   from "browse the catalog" (search + chips + filters + grid). */
.cl-cat-chrome { border-top: 1px solid var(--hairline); padding-top: 8px; margin-top: 8px; }

/* Visual years picker (model page) — 4-up grid of big year tiles */
.cl-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cl-year {
  background: var(--white); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 15px 0; font: inherit; font-size: 16px; font-weight: 600;
  text-align: center; color: var(--text); cursor: pointer;
}
@media (hover: hover) { .cl-year:hover { border-color: var(--text); } }