/* The printed listing (cars/includes/print-sheet.html).

   One letter-size page. On screen it does not exist; in print it is the
   only thing on the car page that does. Sizes are in points and inches so
   the page comes out the same whatever the screen it was printed from. */

.print-sheet {
  display: none;
}

/* No margin, so the browser has nowhere to print its own URL and date, and
   the sheet sets its own. */
@page {
  size: letter;
  margin: 0;
}

@media print {
  /* Everything that is not the sheet or on the way to it. */
  body *:not(.print-sheet):not(.print-sheet *):not(:has(.print-sheet)) {
    display: none !important;
  }

  /* The sheet's ancestors, flattened so none of the page's own spacing
     (the gap under the fixed header, container widths) moves it. */
  html, body, body *:has(.print-sheet) {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    transform: none !important;
    overflow: visible !important;
  }

  .print-sheet {
    --ps-ink: #16181B;
    --ps-soft: #4A4F57;
    --ps-dim: #6B7079;
    --ps-line: #D4D7DC;
    --ps-blue: #3B5FEF;
    --ps-gold: #ECB73C;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 8.5in;
    height: 11in;
    overflow: hidden;
    padding: 0.42in 0.5in 0;
    color: var(--ps-ink);
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-after: avoid;
  }

  .print-sheet * {
    box-sizing: border-box;
  }

  /* Only the photo gives way when space runs short (see .ps-photo); a
     squeezed paragraph would be cut through the middle of a line. */
  .print-sheet > * {
    flex-shrink: 0;
  }

  /* Breathing room between the last thing on the sheet and the footer,
     which otherwise sits flush against it on a full page. */
  .print-sheet > :nth-last-child(2) {
    margin-bottom: 0.2in;
  }

  /* --------------------------------------------------------------- head */
  .ps-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 0.17in;
  }

  .ps-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ps-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.44in;
    height: 0.44in;
    border-radius: 3px;
    background: var(--ps-ink);
    color: #fff;
    font-weight: 700;
    font-size: 13pt;
    letter-spacing: 0.02em;
  }

  .ps-name {
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
  }

  .ps-tag {
    font-size: 8pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-dim);
  }

  .ps-tag--plain {
    letter-spacing: 0;
    text-transform: none;
  }

  .ps-contact {
    text-align: right;
  }

  .ps-phone {
    font-size: 15pt;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }

  /* -------------------------------------------------------------- photo */
  /* The one part that gives: it takes whatever height the rest leaves, so
     a long overview or work list shrinks the photo, not onto page two. */
  .ps-photo {
    position: relative;
    flex: 1 1 4in;
    flex-shrink: 1;
    min-height: 1.6in;
    max-height: 4.05in;
    border-radius: 4px;
    overflow: hidden;
    background: #E9EBEE;
  }

  .ps-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ps-chip {
    position: absolute;
    top: 0.17in;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
  }

  .ps-chip--stock {
    left: 0.17in;
    background: rgba(22, 24, 27, 0.82);
  }

  .ps-chip--status {
    right: 0.17in;
    background: var(--ps-blue);
  }

  .ps-chip--pending { background: #C98A12; }
  .ps-chip--sold { background: #B3261E; }
  .ps-chip--coming_soon { background: #4A4F57; }

  /* -------------------------------------------------------- title, price */
  .ps-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.3in;
    margin-top: 0.22in;
  }

  .ps-eyebrow {
    font-size: 9.5pt;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ps-soft);
  }

  .ps-title h1 {
    margin: 2px 0 4px;
    font-size: 30pt;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
    text-transform: none;
  }

  .ps-summary {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    font-size: 10.5pt;
    color: var(--ps-soft);
  }

  .ps-summary span + span::before {
    content: "\00B7";
    margin: 0 0.45em;
  }

  .ps-price {
    flex: none;
    min-width: 2.35in;
    padding: 0.13in 0.17in 0.11in;
    border-radius: 3px;
    background: var(--ps-gold);
    color: var(--ps-ink);
    text-align: right;
  }

  .ps-price-label {
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ps-price-value {
    font-size: 32pt;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }

  .ps-price-value--call {
    font-size: 24pt;
  }

  .ps-price-note {
    font-size: 8.5pt;
  }

  /* ----------------------------------------------------------- overview */
  .ps-overview {
    max-width: 6.6in;
    margin: 0.18in 0 0;
    font-size: 10.5pt;
    color: var(--ps-soft);
    /* A long one is cut at four lines rather than pushing the sheet onto
       a second page. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  /* -------------------------------------------------------------- specs */
  .ps-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0.25in;
    margin: 0.2in 0 0;
  }

  .ps-specs > div {
    padding: 6px 0 7px;
    border-top: 1.5px solid var(--ps-line);
    break-inside: avoid;
  }

  .ps-specs dt {
    margin: 0;
    font-size: 8pt;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-dim);
  }

  .ps-specs dd {
    margin: 1px 0 0;
    font-size: 11pt;
    color: var(--ps-ink);
  }

  .ps-specs .ps-spec--vin {
    grid-column: span 2;
  }

  .ps-spec--vin dd {
    letter-spacing: 0.06em;
  }

  /* --------------------------------------------------------- work done */
  .ps-work {
    margin-top: 0.14in;
  }

  .ps-work-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 8.5pt;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-soft);
  }

  .ps-work-count {
    letter-spacing: 0;
    text-transform: none;
    color: var(--ps-dim);
  }

  .ps-work ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ps-work li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--ps-line);
    border-radius: 3px;
    font-size: 9.5pt;
    color: var(--ps-ink);
  }

  .ps-work svg {
    fill: var(--ps-blue);
    flex: none;
  }

  .ps-warranty {
    margin: 0.12in 0 0;
    font-size: 10pt;
    font-weight: 600;
  }

  /* ------------------------------------------------------------- footer */
  /* Out to the paper's edges, under the side padding. */
  .ps-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3in;
    margin: auto -0.5in 0;
    padding: 0.26in 0.5in 0.3in;
    background: var(--ps-ink);
    color: #fff;
  }

  .ps-foot > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ps-foot strong {
    font-size: 11pt;
    font-weight: 600;
  }

  .ps-foot span {
    font-size: 9.5pt;
    color: #C3C7CE;
  }

  .ps-foot-contact {
    text-align: right;
  }

  .ps-foot-contact strong {
    font-size: 12pt;
    letter-spacing: 0.03em;
  }
}