/* Printable car sheet (spec 2026-10-21): one A4 portrait page, measured in mm so screen and paper match.
   The sheet is a fixed 210 × 297 mm box with overflow hidden: App\PrintSheet caps every list so content fits,
   and tests/visual/website-print-sheet.mjs prints the worst case and asserts exactly one page. */
@page { size: A4; margin: 0; }

:root {
  --ps-gold: #e2b93b;
  --ps-ink: #151515;
  --ps-muted: #5c5c5c;
  --ps-line: #e3e3e0;
  --ps-head: #0d0d0d;
  --ps-foot: #3a3a3a;
  --ps-heading: "Epilogue", sans-serif;
  --ps-body: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.ps-body { background: #6b6b6b; font-family: var(--ps-body); color: var(--ps-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---- screen-only toolbar ---- */
.ps-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px max(16px, calc((100% - 210mm) / 2)); background: #1c1c1c; color: #fff; font-size: 14px; }
.ps-toolbar__back { color: #fff; text-decoration: none; font-weight: 600; }
.ps-toolbar__back:hover, .ps-toolbar__back:focus-visible { text-decoration: underline; }
.ps-toolbar__hint { color: #bdbdbd; }
.ps-toolbar__print { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 8px;
  background: var(--ps-gold); color: #000; font: 700 15px var(--ps-body); cursor: pointer; }
.ps-toolbar__print[hidden] { display: none; }
.ps-toolbar__print:hover { filter: brightness(1.05); }
.ps-toolbar a:focus-visible, .ps-toolbar button:focus-visible { outline: 2px solid var(--ps-gold); outline-offset: 2px; }

/* ---- the sheet ---- */
.ps-sheet { width: 210mm; height: 297mm; margin: 16px auto 40px; background: #fff; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); font-size: 9.5pt; line-height: 1.35; }

.ps-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6mm; padding: 4mm 9mm; background: var(--ps-head); color: #fff; }
.ps-brand { display: flex; align-items: center; gap: 3.5mm; min-width: 0; }
.ps-brand__logo { height: 17mm; width: auto; display: block; }
.ps-brand__text { display: flex; flex-direction: column; line-height: 1; }
.ps-brand__name { font: 800 17pt var(--ps-heading); text-transform: uppercase; letter-spacing: -0.3px; }
.ps-brand__name b { color: var(--ps-gold); font-weight: 800; }
.ps-brand__tagline { margin-top: 1.6mm; font: 700 6.5pt var(--ps-heading); letter-spacing: 0.14em; text-transform: uppercase; color: #d9d9d9; }
.ps-head__contact { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.ps-head__label { font-size: 7.5pt; color: #bdbdbd; text-transform: uppercase; letter-spacing: 0.08em; }
.ps-head__phone { font: 800 15pt var(--ps-heading); color: var(--ps-gold); }

.ps-photos { flex: none; display: grid; gap: 1.6mm; height: 92mm; padding: 0; overflow: hidden;
  grid-template-rows: minmax(0, 1fr); /* without it the row takes the photo's natural height and spills over the title */ }
.ps-photos--many { grid-template-columns: 63fr 37fr; }
.ps-photos img { display: block; width: 100%; height: 100%; object-fit: cover; background: #ececea; }
.ps-photos__side { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 1.6mm; min-height: 0; }
.ps-photos__side img { min-height: 0; }

.ps-title { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 8mm; padding: 5mm 9mm 3.5mm; }
.ps-title__text { min-width: 0; }
.ps-title h1 { margin: 0; font: 800 17pt/1.15 var(--ps-heading);
  /* two lines at most (make + model allow 100 characters each); a third line pushed the QR under the footer */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-title__text p { margin: 1mm 0 0; color: var(--ps-muted); font-size: 10.5pt; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-price { flex: none; margin: 0; font: 800 24pt/1 var(--ps-heading); white-space: nowrap; }
.ps-price--sold { color: #b3261e; letter-spacing: 0.04em; }

.ps-tiles { flex: none; list-style: none; margin: 0 9mm; padding: 3mm 0; display: grid; grid-template-columns: repeat(var(--tiles, 8), minmax(0, 1fr));
  border-top: 0.3mm solid var(--ps-line); border-bottom: 0.3mm solid var(--ps-line); }
.ps-tile { display: flex; flex-direction: column; align-items: center; gap: 0.8mm; text-align: center; }
.ps-tile i { font-size: 12pt; color: #333; }
.ps-tile__label { font-size: 7.5pt; color: var(--ps-muted); }
.ps-tile__value { font-weight: 700; font-size: 9pt; overflow-wrap: anywhere; }

.ps-features { flex: none; list-style: none; margin: 0; padding: 3.5mm 9mm 0; columns: 3; column-gap: 7mm; font-size: 8.5pt; line-height: 1.32; }
.ps-features li { break-inside: avoid; padding-left: 3.4mm; position: relative;
  /* one line each, so 24 features are always eight rows: an 80-character feature would otherwise wrap to three */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-features li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1.4mm; height: 1.4mm; border-radius: 50%; background: var(--ps-gold); }

.ps-about { flex: 1 1 auto; min-height: 0; display: flex; gap: 7mm; align-items: stretch; margin: 4mm 9mm 0; padding-top: 3.5mm; border-top: 0.3mm solid var(--ps-line); }
.ps-about--qr-only { justify-content: flex-end; }
.ps-about__text { flex: 1 1 auto; min-height: 0; margin: 0; /* stretched to the block, so a long description is clipped here, never under the footer */ font-size: 9pt; line-height: 1.45; color: #2a2a2a; overflow: hidden; }
.ps-qr { flex: none; align-self: flex-start; width: 30mm; margin: 0; text-align: center; }
.ps-qr svg { display: block; width: 30mm; height: 30mm; }
.ps-qr figcaption { margin-top: 1mm; font-size: 7pt; color: var(--ps-muted); }
.ps-qr__url { display: block; margin-top: 0.4mm; font-size: 6pt; overflow-wrap: anywhere; color: var(--ps-ink); }

.ps-foot { flex: none; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6mm; padding: 3.5mm 9mm;
  background: var(--ps-foot); color: #fff; font-size: 8.5pt; }
.ps-foot__web { font-weight: 700; }
.ps-foot__address { text-align: right; color: #e2e2e2; }

/* ---- narrow screens: the A4 box (794 px) is zoomed down in steps so the preview fits without sideways scrolling.
   Printing is unaffected (zoom: 1 below). ---- */
@media screen and (max-width: 840px) { .ps-sheet { zoom: 0.92; } }
@media screen and (max-width: 760px) { .ps-sheet { zoom: 0.82; } }
@media screen and (max-width: 680px) { .ps-sheet { zoom: 0.72; } }
@media screen and (max-width: 600px) { .ps-sheet { zoom: 0.62; } }
@media screen and (max-width: 520px) { .ps-sheet { zoom: 0.52; margin-top: 10px; } }
@media screen and (max-width: 440px) { .ps-sheet { zoom: 0.46; } }
@media screen and (max-width: 380px) { .ps-sheet { zoom: 0.42; } }

@media print {
  .ps-body { background: #fff; }
  .ps-toolbar { display: none; }
  .ps-sheet { margin: 0; box-shadow: none; zoom: 1; }
}