/* proto-pages-home.css: Northwest's home (templates/search/home.html) on cl-home.css's hero and the shared frame
   (proto-pages.css): the H1, the first line and the finder card beside the seat cover photo, then the tiles. On a
   phone the photo goes, so the first screen is the H1, the vehicle picker under it and the truck tiles.
   Colour and type are cl-site.css's --site-* tokens. */
@layer base, kit, site;

@layer site {

.nw-hero { padding-bottom: 32px; }
.nw-hero__panel { padding-top: 56px; }
.nw-hero__lead { max-width: 440px; margin: 12px auto 0; color: inherit; font: 400 17px/1.4 var(--site-font-body); }
.nw-hero__photo img { object-fit: contain; }
.nw-home__wrap { padding-top: 0; }
.nw-home__first { margin-top: 40px; }

/* a section's own heading (not a pp-shead) keeps its content off it */
.pp-section > .pp-h2 { margin-bottom: 16px; }

@media (max-width: 979.98px) {
  .nw-hero { padding-bottom: 20px; }
  .nw-hero__photo { display: none; }
  .nw-hero__panel { grid-row: 1; padding: 20px 16px 0; }
  .nw-hero__lead { font-size: 15px; }
  .nw-home__first { margin-top: 24px; }
}

/* the finder in the hero on desktop after 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 band. In the
   480px column the fields were 0px, and wrapped they would be 95px, so the hero's first column widens to 590px (the
   photo column gives way) for a 560px band and 132px fields as on bakflip. 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) {
  .cl-hero { grid-template-columns: 590px minmax(0, 1fr); }
  .cl-hero__band .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .cl-hero__band .kit-band__panels { flex-basis: 100%; }
}

}