/* ============================================================================
   Global @media print rules.
   Triggered when any page calls window.print() — currently the agent profile
   page via ?print=1 (kicked off from the Print icon on the property page
   contact card). Rules below also apply universally if the user uses Ctrl+P
   on any page.

   Two problems this fixes for the agent profile printout:
   1. Blank pages — useScrollReveal sets [data-reveal] elements to opacity:0
      until they scroll into view. Printing captures elements that are still
      hidden. We force-reveal everything for print.
   2. Inline form / blur / sticky / animations bleeding into the printout.
   ============================================================================ */

@media print {
  /* ── Page setup ───────────────────────────────────────────── */
  @page {
    size: A4;
    margin: 18mm 14mm;
  }

  html,
  body {
    background: #fff !important;
    color: #1a1a1a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Force-reveal scroll-reveal targets ──────────────────────
     useScrollReveal applies inline style="opacity:0; transform:translateY(16px)"
     to every [data-reveal] until the IntersectionObserver fires. On paper
     those elements never scroll into view, so they print blank. !important
     beats inline styles. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ── Kill animations everywhere (Ken Burns on the hero photo,
     hover transitions on cards, etc.) ───────────────────────────
     "animation: none" fully cancels the keyframes — important because
     "animation-duration: 0s" leaves the FINAL keyframe state applied,
     which for Ken Burns means a zoomed/translated photo that prints
     half off-frame. Also reset any transform applied by those animations. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* ── Strip backdrop-blur and CSS blur filters ────────────────
     The "blurred out property text" the user noticed comes from listing
     cards using backdrop-filter / filter:blur for hover effects or overlays. */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [class*="blur"],
  [class*="backdrop-blur"] {
    filter: none !important;
  }

  /* Images render at full opacity and full color (no grayscale) on print */
  img {
    filter: none !important;
    opacity: 1 !important;
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ── Hide site chrome and interactive scaffolding ────────────
     Everything tagged data-print="hide" is removed. Header, footer, mobile
     sticky bars, and Radix dialogs/overlays are removed by default. */
  header,
  footer,
  nav[role="navigation"],
  .mobile-sticky-action,
  [data-print="hide"],
  [role="dialog"],
  [data-state="open"][class*="fixed inset-0"] {
    display: none !important;
  }

  /* ── Sticky / fixed → static so nothing floats over content ── */
  [class*="sticky"],
  [class*="fixed"] {
    position: static !important;
  }

  /* ── Avoid awkward page breaks ───────────────────────────────── */
  section,
  article,
  [data-print-keep],
  .print-keep {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Strip giant section padding that wastes paper */
  section {
    padding-top: 12pt !important;
    padding-bottom: 12pt !important;
  }

  /* ── Agent profile hero compaction ───────────────────────────
     The hero uses flex-col on narrow widths (print width is below
     the md: breakpoint), and the photo container has aspect-[4/5].
     At print width that aspect ratio = nearly a full A4 page of
     photo before any identity content appears — hence the blank
     first page the user reported. Compact it: row layout, fixed
     photo height, identity sits beside it. */
  [data-print-hero] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10mm !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  [data-print-hero] > div {
    width: auto !important;
    padding: 0 !important;
  }

  [data-print-hero] > div:first-child {
    flex: 1 1 auto !important;
    order: 1 !important;
  }

  [data-print-hero-photo] {
    flex: 0 0 60mm !important;
    width: 60mm !important;
    height: 75mm !important;
    aspect-ratio: auto !important;
    order: 2 !important;
    overflow: hidden;
  }

  [data-print-hero-photo] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }
}