/* proto-pages-home.css: the home of baerbrakes.ca (templates/search/home.html): Baer's dark wheel photo as the hero
   with the H1 in white Oswald and the vehicle finder (the kit's band) in a card under it; then the
   page's sections in the frame's wrap. Every rule sits in @layer site; colours are cl-site.css's --site-* tokens. */
@layer base, kit, site;

@layer site {

.pp-hero { background-color: var(--site-dark); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; color: var(--site-on-dark); }
.pp-hero__in { max-width: var(--site-max); margin: 0 auto; padding: 64px 24px 72px; }
.pp-hero__h { max-width: 900px; font-size: 64px; color: var(--site-on-dark); }
.pp-hero__finder { max-width: 760px; margin-top: 32px; border-top: 4px solid var(--site-accent); background: var(--site-bg); color: var(--site-fg); }
.pp-home > .pp-wrap { padding-top: 8px; }

@media (max-width: 979.98px) {
  .pp-hero__in { padding: 24px 16px 24px; }
  .pp-hero__h { font-size: 44px; }
  .pp-hero__finder { display: none; }
}

/* the finder card on desktop as before kit 0.9.4 gave the band its three tabs (2026-10-30, as bakflip.ca 13ac5b5d):
   the tabs on the heading row and Year, Make, Model and Go on a row of their own across the card. On one row with
   the tabs the fields were 81px. Layout only, the phone keeps the kit's own stack. These name kit classes (doctor
   check 13) until the kit's band stacks itself in a narrow box. */
@media (min-width: 980px) {
  .pp-hero__finder .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .pp-hero__finder .kit-band__panels { flex-basis: 100%; }
}

}