/* proto-pages-vehicles.css: dinancars.ca's vehicle and engine pages (templates/search/_vehicles.html) over the
   shared frame (proto-pages.css): a generation as a panel whose heading folds it, the lead
   card wide beside its photo, the kinds of part as small Oswald heads. Dinan's look from cl-site.css's tokens:
   white, near black, their red, square boxes. */
@layer base, kit, site;

@layer site {

/* a generation: the heading and count are the fold's handle */
.dn-panel { margin-top: 48px; }
.dn-panel__sum { display: flex; align-items: baseline; gap: 16px; min-height: 40px; padding-bottom: 8px; border-bottom: 2px solid var(--site-fg); list-style: none; cursor: pointer; }
.dn-panel__sum::-webkit-details-marker { display: none; }
.dn-panel__sum::after { content: ""; flex: none; align-self: center; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid var(--site-fg); border-bottom: 2px solid var(--site-fg); transform: rotate(45deg); transition: transform 0.15s ease; }
.dn-panel__box[open] > .dn-panel__sum::after { transform: rotate(-135deg); }
.dn-panel__sum:hover .pp-h2 { color: var(--site-accent); }
.dn-panel__sum:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.dn-panel--mine .dn-panel__sum { border-bottom-color: var(--site-accent); }
.dn-panel__body > .pp-pick { margin-top: 16px; }

/* the lead card: photo left, the words right, on a desktop */
.dn-lead { margin-top: 20px; }
@media (min-width: 761px) {
  .dn-lead .pp-card { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 32px; }
  .dn-lead .pp-card > * { grid-column: 2; }
  .dn-lead .pp-card > :first-child { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
  .dn-lead .pp-card__img img { height: 260px; }
  .dn-lead .pp-card__buy { margin-top: 8px; max-width: 320px; }
}

.dn-h3 { margin: 32px 0 12px; font: 600 20px/1.2 var(--site-font-heading); letter-spacing: 0.5px; text-transform: uppercase; color: var(--site-fg); }

@media (max-width: 600px) {
  .dn-panel { margin-top: 32px; }
  .dn-h3 { margin-top: 24px; font-size: 16px; }
}

}