/* =============================================================
   SHARED PRINT STYLESHEET — Haasendal Estate Brochures
   Loaded after each brochure's own styles.css. Kicks in for the
   browser's Save-as-PDF and for Chrome headless at build time.

   Philosophy: don't "undo" the screen layout — rebuild it as a
   paper-first document with real page breaks and inline images.
   ============================================================= */

@page { size: A4; margin: 14mm 12mm; }
@page sitePlanPage { size: A4 landscape; margin: 10mm; }

@media print {

  /* -------- Global reset for paper -------- */
  html, body {
    background: #ffffff !important;
    color: #111 !important;
    scroll-snap-type: none !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* Show reveals immediately, no transforms left over */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Hide every screen-only chrome element */
  .rail,
  .topbar,
  .cover-scroll,
  .siteplan-controls,
  .avail-filter,
  .plate-extra,
  .avail-note,
  .topbar-actions,
  .topbar-cta,
  .topbar-pdf { display: none !important; }

  /* -------- Page scaffolding -------- */
  .page {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 0 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #111 !important;
    break-before: page;
    page-break-before: always;
  }
  /* Don't force a break before the very first page */
  .page:first-of-type,
  main > .page:first-child {
    break-before: auto;
    page-break-before: auto;
  }

  /* -------- Typography on paper -------- */
  .section-title,
  .cover-title,
  .contact-title,
  .home-name,
  .apt-type-name {
    color: #111 !important;
  }
  .section-title em,
  .cover-title .stone,
  .cover-title .zicht,
  .cover-title .views,
  .contact-title .teal,
  .contact-title .gold,
  .contact-title .amber,
  .home-name .num,
  .home-name .accent {
    color: #7a6536 !important; /* muted warm tone — readable in ink */
  }
  .section-title { font-size: 26pt !important; line-height: 1.05 !important; margin-bottom: 6mm !important; }
  .section-title .roman,
  .section-title strong { color: #111 !important; font-style: normal !important; }
  .cover-title   { font-size: 44pt !important; line-height: 1 !important; }
  .body-copy, p {
    color: #222 !important;
    max-width: none !important;
  }
  .body-copy strong, p strong { color: #111 !important; }
  .eyebrow { color: #7a6536 !important; }
  .eyebrow .num { color: #7a6536 !important; }
  .lede { color: #333 !important; }

  /* -------- Cover: full-bleed page 1 -------- */
  .page-cover {
    position: relative !important;
    /* A4 minus 14mm vertical margins = 269mm inner height */
    height: 269mm !important;
    min-height: 269mm !important;
    margin: 0 -12mm !important; /* bleed horizontally past the 12mm @page margin */
    padding: 0 !important;
    width: calc(100% + 24mm) !important;
    color: #fff !important;
    background: #1c1c1e !important;
    overflow: hidden !important;
  }
  .page-cover .cover-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden;
  }
  .page-cover .cover-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    animation: none !important;
    transform: none !important;
  }
  .page-cover .cover-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.85) 100%) !important;
  }
  .page-cover .cover-inner {
    position: relative !important;
    z-index: 2;
    color: #fff !important;
    padding: 16mm 14mm !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .page-cover .cover-title { color: #fff !important; font-size: 52pt !important; }
  .page-cover .cover-sub, .page-cover .cover-stat .value { color: #fff !important; }
  .page-cover .cover-stat .label { color: rgba(255,255,255,0.75) !important; }
  .page-cover .wordmark,
  .page-cover .tag { color: #fff !important; }
  .page-cover .cover-meta { gap: 10mm !important; }

  /* -------- About/Development -------- */
  .page-development {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8mm !important;
    padding-top: 6mm !important;
  }
  .page-development .about-copy { break-inside: avoid; }
  .page-development .about-imagery {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 3mm !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 4mm !important;
  }
  .page-development .about-imagery figure {
    height: 60mm !important;
    overflow: hidden;
    border-radius: 2px;
    page-break-inside: avoid;
  }
  .page-development .about-imagery figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .page-development .about-imagery .f-main { grid-row: span 1 !important; }
  .feature-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important;
    max-width: none !important;
    margin-top: 4mm !important;
  }
  .feature-card {
    background: #faf8f3 !important;
    border: 1px solid #d8cfb8 !important;
    padding: 3mm 4mm !important;
  }
  .feature-card h4, .feature-card p { color: #111 !important; }
  .feature-card .ic { color: #7a6536 !important; }

  /* -------- Estate: inline hero + feature columns -------- */
  .page-estate {
    display: block !important;
    background: #fff !important;
    gap: 0 !important;
    padding-top: 6mm !important;
  }
  .estate-hero {
    position: relative !important;
    min-height: 0 !important;
    height: 85mm !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    margin-bottom: 6mm !important;
  }
  .estate-hero img {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    inset: auto !important;
  }
  .estate-hero::after { opacity: 0.35 !important; }
  .estate-hero-content {
    position: absolute !important;
    z-index: 2;
    padding: 6mm !important;
    color: #fff !important;
    bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .estate-hero-content .section-title,
  .estate-hero-content .lede,
  .estate-hero-content .eyebrow { color: #fff !important; }
  .estate-hero-content .eyebrow .num { color: #e8d5a3 !important; }
  .estate-features {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4mm !important;
  }
  .estate-feature {
    border-top: 1px solid #c9b89a !important;
    padding: 3mm 0 !important;
    page-break-inside: avoid;
  }
  .estate-feature h4 { color: #111 !important; }
  .estate-feature p { color: #444 !important; }
  .estate-feature .ic { color: #7a6536 !important; }

  /* -------- Lifestyle gallery -------- */
  .page-lifestyle {
    padding: 8mm 6mm !important;
    background: #fff !important;
  }
  .lifestyle-header {
    position: static !important;
    max-width: none !important;
    margin-bottom: 5mm !important;
  }
  .gallery-grid {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    grid-template-rows: 75mm 75mm !important;
    height: auto !important;
    gap: 2mm !important;
  }
  .gallery-grid figure { overflow: hidden; }
  .gallery-grid figure::after { opacity: 0.15 !important; }
  .gallery-grid figcaption {
    background: rgba(0,0,0,0.55);
    padding: 2mm 3mm !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    color: #fff !important;
  }
  .gallery-grid .g-main::before { opacity: 0.2 !important; }

  /* -------- Architecture (Bossenzicht) / Showhouse (Silverstone) / Clubhouse -------- */
  .page-architecture,
  .page-showhouse {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8mm !important;
    padding-top: 6mm !important;
  }
  .arch-image,
  .home-image {
    height: 110mm !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 2px !important;
  }
  .arch-image img,
  .home-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: static !important;
    inset: auto !important;
  }
  .home-copy .home-price .amt,
  .arch-stat .v { color: #7a6536 !important; }
  .home-name { color: #111 !important; font-size: 36pt !important; }
  .home-size { color: #555 !important; }

  .page-clubhouse {
    padding-top: 6mm !important;
    display: block !important;
  }
  .amenity-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 65mm 65mm !important;
    gap: 3mm !important;
    margin-top: 5mm !important;
  }
  .amenity {
    border: 1px solid #d8cfb8 !important;
    page-break-inside: avoid;
  }
  .amenity::after { background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%) !important; }
  .amenity-text h4,
  .amenity-text p { color: #fff !important; }

  /* -------- House types / Apartment types / Floor plates grids -------- */
  .page-types,
  .page-apartments,
  .page-floorplates {
    padding-top: 6mm !important;
    display: block !important;
  }
  .types-head { margin-bottom: 5mm !important; }

  .types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3mm !important;
    max-height: none !important;
  }
  /* Bossenzicht / Silverstone: many cards — allow two pages for 13 types */
  .type-card {
    background: #faf8f3 !important;
    border: 1px solid #d8cfb8 !important;
    page-break-inside: avoid;
    min-height: 48mm;
    color: #111 !important;
  }
  .type-card .type-img {
    height: 32mm !important;
    background: #fff !important;
    padding: 1mm !important;
  }
  .type-card .type-img::after { display: none !important; }
  .type-card .type-img img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  .type-meta {
    background: #1c1c1e !important;
    color: #fff !important;
    padding: 2mm 3mm !important;
  }
  .type-name { color: #e8d5a3 !important; }
  .type-size { color: #fff !important; font-size: 12pt !important; }
  .type-from { color: #c9a96e !important; }

  /* Silverviews apartment cards — 3 across */
  .apt-type-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3mm !important;
  }
  .apt-type-card {
    background: #faf8f3 !important;
    border: 1px solid #d8cfb8 !important;
    color: #111 !important;
    page-break-inside: avoid;
  }
  .apt-type-img { aspect-ratio: auto !important; height: 45mm !important; }
  .apt-type-img img { object-fit: cover !important; }
  .apt-type-name { color: #111 !important; font-size: 18pt !important; }
  .apt-type-size { color: #7a6536 !important; }
  .apt-type-details li,
  .apt-type-count { color: #333 !important; }
  .apt-type-from { color: #7a6536 !important; }

  /* Silverviews floor plates — 2x2 grid */
  .plate-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4mm !important;
    max-height: none !important;
  }
  .plate-card {
    background: #fff !important;
    border: 1px solid #d8cfb8 !important;
    color: #111 !important;
    page-break-inside: avoid;
  }
  .plate-img {
    height: 80mm !important;
    background: #fff !important;
    padding: 2mm !important;
  }
  .plate-img img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }
  .plate-meta {
    background: #1c1c1e !important;
    color: #fff !important;
    padding: 3mm 4mm !important;
  }
  .plate-name { color: #fff !important; }
  .plate-sub  { color: #e8d5a3 !important; }

  .types-note {
    margin-top: 5mm !important;
    color: #555 !important;
    font-size: 9pt !important;
  }
  .types-note strong { color: #7a6536 !important; }

  /* -------- Site plan: dedicated landscape page -------- */
  .page-siteplan {
    page: sitePlanPage;
    position: relative !important;
    padding: 0 !important;
    background: #fff !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .page-siteplan .siteplan-head {
    position: static !important;
    padding: 6mm 10mm 3mm !important;
    display: block !important;
  }
  .page-siteplan .siteplan-head .section-title { color: #111 !important; font-size: 20pt !important; }
  .siteplan-viewer {
    position: relative !important;
    inset: auto !important;
    background: #fff !important;
    height: 165mm !important;
    overflow: hidden !important;
    padding: 0 10mm !important;
  }
  .siteplan-viewer img {
    filter: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    transform: none !important;
    position: static !important;
  }
  .siteplan-caption {
    position: static !important;
    transform: none !important;
    margin-top: 3mm !important;
    padding: 0 10mm !important;
    text-align: left !important;
    color: #555 !important;
  }

  /* -------- Availability table -------- */
  .page-availability {
    padding-top: 6mm !important;
    display: block !important;
    page: auto;
  }
  .avail-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 3mm 0 !important;
    border-top: 1px solid #c9b89a !important;
    border-bottom: 1px solid #c9b89a !important;
    gap: 4mm !important;
    margin-bottom: 5mm !important;
  }
  .avail-stat .val { color: #111 !important; font-size: 20pt !important; }
  .avail-stat .val.accent { color: #7a6536 !important; }
  .avail-stat .lbl { color: #555 !important; }

  .avail-table-wrap {
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #d8cfb8 !important;
    background: #fff !important;
  }
  .avail-table {
    font-size: 9pt !important;
    width: 100% !important;
  }
  .avail-table thead {
    position: static !important;
    display: table-header-group !important; /* repeat header across pages */
    background: #1c1c1e !important;
  }
  .avail-table thead th {
    color: #e8d5a3 !important;
    font-size: 7.5pt !important;
    padding: 3mm 3mm !important;
    border-bottom: 0 !important;
  }
  .avail-table tbody tr { page-break-inside: avoid; }
  .avail-table td {
    color: #111 !important;
    padding: 2.5mm 3mm !important;
    border-bottom: 1px solid #e8e2d1 !important;
    font-size: 9pt !important;
  }
  .avail-table .plot,
  .avail-table .unit { color: #7a6536 !important; font-size: 11pt !important; }
  .avail-table .size,
  .avail-table .type-cell { color: #555 !important; }
  .avail-table .price-best { color: #111 !important; font-weight: 500 !important; }

  /* -------- Contact -------- */
  .page-contact {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 6mm !important;
    padding: 10mm !important;
    background: #fff !important;
    color: #111 !important;
    page-break-before: always;
  }
  .contact-title { font-size: 34pt !important; color: #111 !important; }
  .contact-lede  { color: #333 !important; }
  .contact-row {
    background: #faf8f3 !important;
    border: 1px solid #d8cfb8 !important;
    color: #111 !important;
    padding: 3mm 4mm !important;
  }
  .contact-row .ic { color: #7a6536 !important; }
  .contact-row .info .val { color: #111 !important; }
  .contact-actions { display: none !important; } /* web CTAs not useful on paper */

  .agent-card {
    background: #1c1c1e !important;
    color: #fff !important;
    padding: 8mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .agent-card::before { display: none !important; }
  .agent-card .name { color: #fff !important; font-size: 26pt !important; }
  .agent-card .role,
  .agent-card .team-line { color: rgba(255,255,255,0.75) !important; }
  .agent-card .whatsapp-big { display: none !important; }  /* action-only */
  .agent-card .qr-share {
    background: #fff !important;
    color: #111 !important;
    padding: 4mm !important;
  }
  .agent-card .qr-share img { width: 30mm !important; height: 30mm !important; }
  .agent-card .qr-label { color: #111 !important; }
  .agent-card .qr-sub { color: #444 !important; }
  .agent-card .logos { border-top: 1px solid rgba(255,255,255,0.15) !important; padding-top: 4mm !important; }
  .agent-card .logo-chip { background: #fff !important; padding: 2mm 4mm !important; }
  .agent-card .logo-chip img { height: 14mm !important; }

  /* Kill link underlines/URLs appended by default print stylesheets */
  a, a:visited { color: inherit !important; text-decoration: none !important; }
  a[href]::after { content: '' !important; }

  /* Kill hover / transition effects that might leave ghost states */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Keep images in their natural aspect ratio */
  img { max-width: 100% !important; height: auto; }
}