/* proto-pages-home.css: the home's own rules over proto-pages.css (templates/search/home.html): a short hero holding
   the H1 alone, so the vehicle band and the cards show sooner, the engine filter as square 40px links in Bully Dog's
   capitals, and the line drawn while a page is partial. On a phone the H1 a little bigger, everything else a step
   smaller (Greg 2026-10-29). Colour and type are cl-site.css's --site-* tokens. */
@layer base, kit, site;

@layer site {

.bd-hero.cl-hm-hero { height: auto; min-height: 240px; padding: 48px 0; }
.bd-hero .cl-hm-band__body { max-width: 640px; }
.bd-wrap { padding-top: 8px; padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.bd-section { margin-top: 48px; }
.bd-section--engines { margin-top: 24px; }
.bd-section > .pp-shead { margin-top: 0; }
.bd-partial { margin-top: 16px; font: 400 18px/1.3 var(--site-font-body); color: var(--site-fg); }

.bd-engines { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-engine {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px;
  border: 2px solid var(--site-fg); border-radius: var(--site-radius); background: var(--site-bg); color: var(--site-fg);
  font: 400 18px/1 var(--site-font-body); text-transform: uppercase; text-decoration: none;
}
.bd-engine:hover, .bd-engine[aria-current] { background: var(--site-fg); color: var(--site-bg); }
.bd-engine:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

@media (max-width: 979.98px) {
  .bd-hero.cl-hm-hero { min-height: 0; padding: 24px 0; }
  .bd-hero.cl-hm-hero .cl-hm-band__h { font-size: 40px; line-height: 44px; }
  .bd-wrap { padding-top: 0; }
  .bd-section { margin-top: 28px; }
  .bd-section--engines { margin-top: 16px; }
  .bd-partial { font-size: 15px; }
  .bd-engines { gap: 6px; }
  .bd-engine { padding: 0 10px; font-size: 14px; }
}

}