/* proto-pages-home.css: DiabloSport's home (templates/search/home.html) in their look: the H1 on their black
   with a red rule, the kit's vehicle band under it, their Oswald capitals with the red bar for the section headings,
   the vehicle tiles with their year pickers. On a phone the H1 a little bigger and the rest a step smaller (Greg
   2026-10-29). Colour and type are cl-site.css's tokens; the frame is proto-pages.css.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* the hero: their black, the H1 in white Oswald capitals (the brief under it when the json has one), a red rule at the foot */
.ds-hero { background: var(--site-ink); color: var(--site-ink-fg); border-bottom: 4px solid var(--site-accent); }
.ds-hero__in { max-width: var(--site-max); margin: 0 auto; padding: 32px 24px 34px; }
.ds-hero .ds-hero__h { color: var(--site-ink-fg); font-size: 52px; letter-spacing: 1px; }
.ds-hero .ds-hero__p { max-width: 720px; color: var(--site-ink-fg); }

.ds-home__wrap { padding-top: 8px; }

/* their section heading: Oswald capitals behind a 5px red bar */
.ds-home .pp-h2 { padding-left: 10px; border-left: 5px solid var(--site-accent); }
.ds-home .pp-shead { border-bottom-color: var(--site-ink); }
:root[data-parts-theme="dark"] .ds-home .pp-shead { border-bottom-color: var(--site-fg); }

/* the Applied Vehicle's tuners */
.ds-mine { margin-top: 8px; }
.ds-mine .pp-note a { text-decoration: underline; }

/* the vehicle tiles: a photo and the name, then the year picker(s); never a count */
.ds-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ds-car { display: flex; flex-direction: column; padding: 16px; background: var(--site-card); border: 1px solid var(--site-line); border-radius: var(--site-radius); }
.ds-car.is-mine { border: 2px solid var(--site-accent); }
.ds-car__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.ds-car__img { width: 96px; height: 72px; object-fit: contain; background: var(--site-plate); }
/* a tile's picker: the model (when the make has more than one) on its own line, then the year and Go */
.ds-car .pp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 12px 0 0; }
.ds-car .pp-pick + .pp-pick { margin-top: 8px; }
.ds-car .pp-pick__select { width: 100%; min-width: 0; }
.ds-car .pp-pick__select[name="model"] { grid-column: 1 / -1; }
.ds-car .pp-btn { min-width: 64px; }

.ds-more { margin-top: 24px; }
.ds-all { margin-top: 8px; }

@media (max-width: 1099.98px) {
  .ds-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 979.98px) {
  .ds-hero__in { padding: 20px 16px 22px; }
  .ds-hero .ds-hero__h { font-size: 38px; }
  .ds-hero .ds-hero__p { font-size: 15px; }
  .ds-home__wrap { padding-top: 16px; }
  .ds-all { margin-top: 0; }
  .ds-more { margin-top: 16px; }
  .ds-cars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ds-car { padding: 12px; }
  .ds-car__img { width: 80px; height: 60px; }
  .ds-car__name { font-size: 16px; }
}

}