/* proto-pages-home.css: Stillen's home (templates/search/home.html) on cl-site.css's tokens: the H1 and the first line
   on their #121212 header colour, in the italic capitals of their name, the kit's vehicle band under it where their
   Select Your Vehicle bar sits, and the sections of cards in their 1200px column: from 1100px wide one grid of 5
   card columns, a section spanning as many as it has cards (`--n` on the section, at most 5) so the short sections sit
   side by side, their heads, lines and cards on shared rows (subgrid). The frame is proto-pages.css. */
@layer base, kit, site;

@layer site {

.st-hero { background: var(--site-dark); color: var(--site-dark-fg); border-top: 1px solid var(--site-line); }
.st-hero__in { max-width: var(--site-max); margin: 0 auto; padding: 56px var(--site-gutter) 52px; }
.st-hero__h { font: italic 700 64px/1 var(--site-font-heading); letter-spacing: 1px; color: var(--site-dark-fg); }
.st-hero__lead { max-width: 820px; margin-top: 18px; font: 400 20px/1.45 var(--site-font-body); color: var(--site-dark-fg); }

.st-home__body { padding-top: 8px; padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.st-home__body > .pp-section:first-child .pp-shead, .st-home__groups > .pp-section:first-child .pp-shead { margin-top: 32px; }
.st-home__who { margin-top: 12px; }
.st-home__who + .pp-grid { margin-top: 16px; }
.st-home__mine .pp-h2 { margin-top: 32px; }
.st-home__none a { display: inline-flex; align-items: center; min-height: 40px; }

@media (min-width: 1100px) {
  .st-home .pp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .st-home__groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
  .st-home__groups > .pp-section { display: grid; grid-column: span var(--n, 5); grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-top: 0; }
  .st-home__groups .pp-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
  .st-home__groups .pp-shead { margin-top: 48px; }
  .st-home .pp-stock { font-size: 14px; letter-spacing: 0; }
}

.st-home__all { margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--site-line); }

@media (max-width: 979.98px) {
  .st-hero__in { padding: 24px var(--site-gutter) 20px; }
  .st-hero__h { font-size: 44px; }
  .st-hero__lead { margin-top: 12px; font-size: 15px; }
  .st-home__body > .pp-section:first-child .pp-shead, .st-home__groups > .pp-section:first-child .pp-shead { margin-top: 24px; }
  .st-home__who { margin-top: 8px; }
  .st-home__who + .pp-grid { margin-top: 12px; }
  .st-home__all { margin-top: 32px; padding-top: 16px; }
  .st-home__all .pp-btn { width: 100%; }
  .st-home .pp-card__name a { display: block; min-height: 40px; }
}

}