/*
  Print flyer.

  Replaces IDX Broker's "Printable Flyer" with one built from the same data as
  the screen page: hero photo, address plate, stats, the story, the highlights,
  a photo contact sheet, the community facts and the agent block. Everything
  interactive is dropped, along with the MLS detail accordion and the cost
  estimator — see the note on the hide list below.

  Written against the design-system markup (`lst-`, `site-`). The previous
  version targeted the pre-rebuild class names and printed a mangled page; if
  you rename a section, check this file in the same commit.
*/

@page {
  size: letter portrait;
  margin: 0.5in;
}

@media print {
  html {
    scroll-padding-top: 0;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.4;
  }

  /*
    Whole sections, not just their contents — hiding `.lst-acc` on its own left
    "The Home in Detail" and its deck stranded on the page with nothing under
    them, which is both ugly and two wasted inches.

    What goes: the media cards (buttons that do nothing on paper), the MLS
    detail accordion, the map, the cost estimator and the lead form. All five
    groups of the accordion expanded run to about sixty rows and took the
    printout from two pages to eight. What is left is what an agent hands
    someone at an open house — the photo, the numbers, the story, a contact
    sheet, the community, and how to reach Nara.
  */
  #media,
  #details,
  #map,
  #cost,
  #contact {
    display: none !important;
  }

  /* Screen-only chrome and anything that needs a pointer to be useful. */
  .site-header-shell,
  .lst-mediabar,
  .lst-hero__all,
  .site-aside,
  .lst-actionbar,
  .lst-progress,
  .site-footer__heading,
  .site-footer__sites,
  .site-footer__nav-wrap,
  .lst-gallery__more,
  .lst-note,
  .back-to-top,
  .lst-lb,
  .site-ext,
  iframe,
  video {
    display: none !important;
  }

  /* One column: the two-column intro band and every inner split collapse. */
  .site-page,
  .lst-two {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .lst-page,
  .lst-full,
  .lst-plate,
  .lst-stats,
  .lst-legal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    Sections flow across pages. Keeping them whole sounds tidier but "About this
    Home" is taller than the space left under the masthead, so an avoid here
    pushed it to page two and left the bottom half of page one blank. Only the
    blocks that are meaningless when split are held together, below.
  */
  .lst-section {
    margin-top: 14pt;
    padding-top: 10pt;
    border-top: 0.5pt solid #999;
  }

  .lst-h2,
  .lst-deck {
    break-after: avoid;
  }

  .lst-full .lst-section:first-child {
    border-top: 1pt solid #000;
    padding-top: 12pt;
  }

  /* —— Masthead: one photo, the address, the price, the stats —— */

  .lst-hero__grid {
    display: block !important;
    aspect-ratio: auto !important;
    gap: 0 !important;
  }

  /* Only the lead photo prints; the mosaic's supporting cells are decoration
     that would eat a third of page one. */
  .lst-hero__cell:not(.lst-hero__cell--main) {
    display: none !important;
  }

  .lst-hero__cell--main {
    display: block !important;
    aspect-ratio: 2 / 1;
    border: 1pt solid #000;
  }

  .lst-hero__cell img {
    filter: none !important;
  }

  .lst-plate {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12pt;
    padding-top: 10pt !important;
    break-after: avoid;
  }

  .lst-plate__h1 {
    font-size: 22pt;
  }

  .lst-plate__city {
    font-size: 11pt;
  }

  .lst-plate__price b {
    font-size: 22pt;
  }

  .lst-plate__rule {
    display: none;
  }

  .lst-stats {
    margin-top: 8pt !important;
    break-inside: avoid;
  }

  .lst-stats__inner {
    grid-template-columns: repeat(6, 1fr) !important;
    border: 1pt solid #000;
    border-radius: 0;
  }

  .lst-stat {
    padding: 5pt 6pt;
    border-left: 0.5pt solid #000;
  }

  .lst-stat b {
    font-size: 13pt;
  }

  .lst-stat span,
  .lst-stat__icon {
    font-size: 8pt;
  }

  .lst-stat__icon {
    display: none;
  }

  /* —— Copy —— */

  .lst-h2 {
    font-size: 14pt;
    margin-bottom: 4pt;
  }

  .lst-deck {
    font-size: 11pt;
    margin-bottom: 8pt;
  }

  .lst-p {
    font-size: 10.5pt;
    margin-bottom: 6pt;
    orphans: 3;
    widows: 3;
  }

  .lst-highlights {
    gap: 0 18pt;
  }

  .lst-highlights li {
    padding: 4pt 0;
    font-size: 10pt;
  }

  .lst-highlights svg {
    width: 11pt;
    height: 11pt;
  }

  /* —— Contact sheet: eight photos, four up —— */

  /* "Click any image for the full-screen tour" is a lie on paper. */
  #gallery .lst-deck {
    display: none;
  }

  .lst-gallery,
  .lst-full .lst-gallery {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4pt;
    break-inside: avoid;
  }

  /* Eight photos — two rows of four — is what fits beside the copy without
     pushing the agent block onto a third page. */
  .lst-gallery button:nth-of-type(n + 9) {
    display: none !important;
  }

  .lst-gallery button {
    border: 0.5pt solid #000 !important;
    border-radius: 0 !important;
  }

  .lst-gallery img {
    filter: none !important;
  }

  /* —— Community and agent —— */

  .lst-facts {
    gap: 0 18pt;
  }

  .lst-chips li {
    min-height: 0;
    padding: 2pt 8pt;
    font-size: 9pt;
    border: 0.5pt solid #000;
  }

  .site-footer {
    background: #fff !important;
    color: #000 !important;
    padding: 10pt 0 0;
    border-top: 1pt solid #000;
    break-inside: avoid;
  }

  .site-footer__band {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 14pt;
    padding: 8pt 0;
  }

  .site-footer a {
    color: #000 !important;
    text-decoration: none;
  }

  .site-footer__long {
    max-height: 34pt;
    width: auto;
  }

  .site-footer__realtor,
  .site-footer__equal {
    max-height: 26pt;
    width: auto;
  }

  /* —— Legal —— */

  .lst-legal {
    border-top: 1pt solid #000;
    padding: 6pt 0 0;
    break-inside: avoid;
  }

  .lst-legal p {
    font-size: 7pt;
    line-height: 1.35;
  }

  a {
    color: #000 !important;
    text-decoration: none;
  }
}