/* proto-pages-home.css: MSD Ignition's home (templates/search/home.html) over the shared frame: the black hero
   (MSD's header black, the H1 in white over the red rule) with the kit's vehicle band under the H1, and the
   home's sections. Colour and type are cl-site.css's --site-* tokens; the band keeps its own look. */
@layer base, kit, site;

@layer site {

.msd-hero { background: var(--site-bar); color: var(--site-bar-fg); }
.msd-hero__in { max-width: var(--site-max); margin: 0 auto; padding: 48px 24px 32px; }
.msd-hero .msd-hero__h { padding-left: 16px; border-left: 8px solid var(--site-accent); font-size: 56px; color: var(--site-bar-fg); }
.msd-hero__finder { max-width: var(--site-max); margin: 0 auto; padding: 0 24px 32px; }

.msd-home__wrap { padding-top: 8px; }
.msd-home__sec { margin-top: 48px; }
.msd-home__sec > .pp-h2 { margin-bottom: 20px; }
.msd-home .pp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 979.98px) {
  .msd-hero__in { padding: 20px 16px 16px; }
  .msd-hero .msd-hero__h { padding-left: 12px; border-left-width: 6px; font-size: 40px; }
  .msd-hero__finder { padding: 0 16px 16px; }
  .msd-home__sec { margin-top: 24px; }
  .msd-home__sec > .pp-h2 { margin-bottom: 12px; }
  .msd-home .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

}