/* proto-pages-vehicles.css: the vehicle pages (templates/search/_vehicle.html): a generation a panel, its summary the
   heading in a 48px bar with a red rule, the year picker over the lead card, drawn wide, the rest by kind under small
   headings. Square, full contrast, the --site-* tokens of cl-site.css. */
@layer base, kit, site;

@layer site {

.fm-gen { margin-top: 32px; border-top: 4px solid var(--site-accent); }
.fm-gen__sum { display: flex; align-items: baseline; gap: 16px; min-height: 48px; padding: 12px 0 8px; cursor: pointer; list-style: none; border-bottom: 2px solid var(--site-fg); }
.fm-gen__sum::-webkit-details-marker { display: none; }
.fm-gen__sum::after { content: "+"; margin-left: auto; font: 700 28px/1 var(--site-font-heading); color: var(--site-fg); }
.fm-gen[open] > .fm-gen__sum::after { content: "\2212"; }
.fm-gen--mine > .fm-gen__sum::after { content: none; }
.fm-gen--mine .pp-pick-clear, .fm-gen--mine > .fm-gen__body > :first-child { margin-top: 12px; }
.fm-gen__sum:hover .pp-h2 { color: var(--site-accent); }
.fm-gen__sum:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.fm-gen__body { padding-top: 20px; }
.fm-gen__pick { padding: 12px 16px; background: var(--site-band); }
.fm-gen__pick .pp-pick { margin: 0; }
/* the lead card, wide: the photo on the left, its words on the right */
.fm-lead { max-width: 900px; margin-top: 20px; }
.fm-lead .pp-card { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 24px; row-gap: 6px; align-content: start; border: 2px solid var(--site-fg); }
.fm-lead .pp-card > * { grid-column: 2; }
.fm-lead .pp-card > .pp-card__img { grid-column: 1; grid-row: 1 / span 9; align-self: start; }
.fm-lead .pp-card__img img { height: 240px; }
.fm-lead .pp-card__name { margin-top: 0; font-size: 22px; }
.fm-lead .pp-card__buy { margin-top: 8px; max-width: 320px; }
.fm-h3 { margin-top: 28px; margin-bottom: 12px; font: 700 21px/1.1 var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }

@media (max-width: 760px) {
  .fm-lead .pp-card { display: flex; }
  .fm-lead .pp-card > .pp-card__img { align-self: stretch; }
  .fm-lead .pp-card__img img { height: 180px; }
  .fm-lead .pp-card__name { font-size: 18px; }
  .fm-lead .pp-card__buy { max-width: none; }
  .fm-gen { margin-top: 24px; }
  .fm-gen__body { padding-top: 12px; }
  .fm-h3 { margin-top: 20px; font-size: 16px; }
}

}