/* proto-pages-home.css: the home's own rules (templates/search/home.html) over proto-pages.css: the hero (Edge's truck
   photo band fading to black, the H1 and the kit's vehicle band as a white card with their red top edge), the engine
   tiles in their grey make-tile look, the group sections. Colour and type are cl-site.css's --site-* tokens. */
@layer base, kit, site;

@layer site {

.pp-home__hero { background: linear-gradient(90deg, var(--site-dark) 0%, color-mix(in srgb, var(--site-dark) 82%, transparent) 38%, color-mix(in srgb, var(--site-dark) 25%, transparent) 100%), var(--pp-hero) 70% 50% / cover no-repeat, var(--site-dark); color: var(--site-accent-fg); }
.pp-home__hero-in { max-width: var(--site-max); margin: 0 auto; padding: 48px 64px 56px; }
.pp-home__h1 { color: var(--site-accent-fg); font-size: 56px; }
.pp-home__lead { max-width: 560px; margin-top: 12px; font: 400 20px/1.35 var(--site-font-body); color: var(--site-accent-fg); }
.pp-home__finder { max-width: 560px; margin-top: 28px; background: var(--site-bg); color: var(--site-fg); border-top: 4px solid var(--site-accent); }

.pp-home__part { margin-top: 48px; }
.pp-home__part:first-child { margin-top: 8px; }
.pp-home__part > .pp-shead:first-child { margin-top: 0; }
.pp-home__part .pp-h2 a { display: inline-flex; align-items: center; min-height: 40px; color: var(--site-fg); text-decoration: underline; }
.pp-home__part .pp-note + .pp-grid { margin-top: 16px; }
.pp-home__part .pp-h2 a:hover { color: var(--site-accent); }

/* the engine tiles: their grey make tiles, the emblem over the engine and its trucks */
.pp-home__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-home__tile { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 20px 12px; background: var(--site-card); color: var(--site-fg); text-align: center; border: 2px solid transparent; }
.pp-home__tile:hover { border-color: var(--site-accent); }
.pp-home__tile.is-mine { border-color: var(--site-fg); }
.pp-home__tile-img { display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 8px; }
.pp-home__tile-img img { max-height: 100%; width: auto; }
.pp-home__tile-name { font: 700 24px/1.1 var(--site-font-heading); text-transform: uppercase; }
.pp-home__tile:hover .pp-home__tile-name { color: var(--site-accent); }
.pp-home__tile-who { font: 400 16px/1.3 var(--site-font-body); }

@media (max-width: 979.98px) {
  .pp-home__hero { background: linear-gradient(color-mix(in srgb, var(--site-dark) 55%, transparent), var(--site-dark) 70%), var(--pp-hero) 60% 0 / auto 260px no-repeat, var(--site-dark); }
  .pp-home__hero-in { padding: 32px 16px 24px; }
  .pp-home__h1 { font-size: 36px; }
  .pp-home__lead { font-size: 15px; }
  .pp-home__finder { margin-top: 20px; }
  .pp-home__part { margin-top: 36px; }
}
@media (max-width: 600px) {
  .pp-home__tiles { gap: 8px; }
  .pp-home__tile { padding: 12px 4px; }
  .pp-home__tile-img { height: 64px; margin-bottom: 4px; }
  .pp-home__tile-name { font-size: 16px; }
  .pp-home__tile-who { font-size: 13px; }
}

/* 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 26px. 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-home__finder .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .pp-home__finder .kit-band__panels { flex-basis: 100%; }
}

}