/* ================================================================
   OG HomeSheet — One-Sheet Print Styles
   @page: letter, 0.55in margins
   Brand: The Oldham Group / Compass
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #000000;
  --paper: #ffffff;
  --caption: #6E6E6E;
  --rule: #E2E2E2;
  --accent: #1363E5;
  --accent-dark: #0d4bb3;
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Inter', Arial, sans-serif;
}

body {
  font-family: var(--ff-body);
  background: #F0EFEC;
  color: var(--ink);
  padding: 2.5rem 1.5rem 4rem;
}
body.for-pdf {
  background: var(--paper);
  padding: 0;
}

/* ACTION BAR (screen only) */
.action-bar {
  background: var(--ink);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 2rem;
}
.action-bar-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.action-group { display: flex; gap: 0.75rem; align-items: center; }
.action-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  background: none;
  color: inherit;
  font-family: inherit;
}
.action-btn--ghost { color: #aaa; border-color: #444; }
.action-btn--ghost:hover { color: var(--paper); border-color: #888; }
.action-btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.action-btn--primary:hover { background: #ddd; }

/* ONE SHEET */
.onesheet {
  background: var(--paper);
  max-width: 780px;
  margin: 0 auto;
  padding: 0.6in 0.6in 0.55in;
  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
  min-height: 10in;
  position: relative;
}
body.for-pdf .onesheet {
  box-shadow: none;
  max-width: none;
  padding: 0.55in;
  min-height: 0;
}

/* MASTHEAD */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.22in;
}
.masthead-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.og-logo {
  height: 0.42in;
  width: auto;
  display: block;
}
.masthead-slash {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  margin: 0 0.15rem;
  line-height: 1;
}
.masthead-wordmark { line-height: 1.2; }
.masthead-team {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.masthead-broker {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--caption);
  text-transform: uppercase;
  white-space: nowrap;
}
.masthead-right { text-align: right; }
.masthead-eyebrow {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}
.masthead-date {
  font-size: 0.7rem;
  color: var(--caption);
  letter-spacing: 0.06em;
}

/* RULES */
.masthead-rule, .section-rule, .footer-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0.18in 0;
}
.masthead-rule { border-top-color: var(--ink); }
.footer-rule { margin-top: 0.2in; margin-bottom: 0.15in; }

/* PROPERTY BLOCK */
.property-block { margin-bottom: 0.18in; }
.property-address {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.1in;
}
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25in;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.08in 0;
}
.fact-item {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  padding: 0.04in 0;
}
.fact-val {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.fact-key {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--caption);
}

/* LISTING PHOTO + KEY FACTS */
.listing-block {
  display: flex;
  gap: 0.22in;
  margin-bottom: 0.18in;
  align-items: stretch;
}
.listing-photo {
  flex: 1.5;
  min-width: 0;
}
.listing-photo img {
  display: block;
  width: 100%;
  height: 1.8in;
  object-fit: cover;
}

.listing-facts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.1in 0;
}
.listing-price {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--ink);
}
.listing-price-label {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--caption);
  margin-bottom: 0.1in;
}
.listing-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.09in 0;
}
.listing-spec { min-width: 0; flex: 0 0 33.33%; padding-right: 0.1in; }
.listing-spec--wide { flex: 0 0 100%; }
.lspec-val {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.lspec-key {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caption);
  margin-top: 1px;
}
.listing-source {
  margin-top: 0.08in;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption);
}

/* NARRATIVES */
.narratives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3in;
  margin-bottom: 0;
}
.narrative-col {}
.section-eyebrow {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.08in;
}
.narrative-text {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink);
}

/* MARKET & HOME VALUES */
.market-section { margin-bottom: 0; }
.market-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25in;
  flex-wrap: wrap;
}
.market-value {
  display: flex;
  align-items: baseline;
  gap: 0.1in;
}
.market-value-figure {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.market-value-label {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--caption);
}
.market-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.14in 0;
  margin: 0.14in 0;
}
.market-stat {
  min-width: 0;
  flex: 0 0 auto;
  width: 24.5%;
  border-left: 2px solid var(--accent);
  padding-left: 0.12in;
  padding-right: 0.1in;
}
.mstat-val {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.02in;
}
.mstat-key {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caption);
}
.market-read { margin: 0.1in 0; }
.comps-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.12in 0 0.06in;
  font-size: 0.7rem;
}
.comps-table th {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--caption);
  text-align: left;
  padding: 0.04in 0.08in 0.05in 0;
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}
.comps-table td {
  padding: 0.05in 0.08in 0.05in 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: top;
}
.comps-table tr:last-child td { border-bottom: none; }
.comp-addr { font-weight: 500; }
.comp-status {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.market-source {
  font-size: 0.55rem;
  color: var(--caption);
  letter-spacing: 0.02em;
  margin-top: 0.04in;
}

/* BOTTOM SECTION */
.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3in;
}
.worth-knowing-list {
  list-style: none;
  padding: 0;
  margin: 0.06in 0;
}
.worth-knowing-list li {
  font-size: 0.775rem;
  line-height: 1.55;
  color: var(--ink);
  padding: 0.05in 0;
  border-bottom: 1px solid var(--rule);
  padding-left: 0.6em;
  position: relative;
}
.worth-knowing-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--caption);
}
.amenity-row {
  display: flex;
  gap: 0.5em;
  font-size: 0.75rem;
  padding: 0.03in 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.amenity-label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--caption);
  flex-shrink: 0;
  width: 60px;
}
.amenity-names { color: var(--ink); }
.walkscore-row {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.1in;
  padding-top: 0.08in;
  border-top: 1px solid var(--rule);
}
.ws-item {
  font-size: 0.7rem;
  color: var(--caption);
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.ws-score { font-weight: 500; color: var(--ink); font-size: 1.15rem; line-height: 1; }
.ws-meta { line-height: 1.35; }
.ws-kind {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption);
  white-space: nowrap;
}
.ws-band { font-size: 0.68rem; color: var(--ink); white-space: nowrap; }
.ws-note {
  margin-top: 0.05in;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--caption);
}

/* SCHOOLS */
.schools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.16in 0.4in;
  margin-top: 0.12in;
}
.school-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.school-rating {
  width: 0.46in;
  height: 0.46in;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--rule);
  color: var(--ink);
}
.school-rating--high { border-color: var(--accent); color: var(--accent); }
.school-rating--mid { border-color: #8a8a8a; }
.school-rating--low { border-color: var(--rule); color: var(--caption); }
.school-rating-num {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}
.school-rating-den {
  font-size: 0.55rem;
  color: var(--caption);
  margin-left: 1px;
  margin-top: 0.35em;
}
.school-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.school-meta {
  font-size: 0.64rem;
  color: var(--caption);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-top: 1px;
}
.schools-note {
  margin-top: 0.14in;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--caption);
}

/* FOOTER */
.onesheet-footer {
  display: flex;
  gap: 0.3in;
  align-items: flex-start;
}
.agent-col {
  display: flex;
  flex-direction: column;
  gap: 0.14in;
  flex-shrink: 0;
}
.agent-block {
  display: flex;
  gap: 0.15in;
  align-items: center;
  flex-shrink: 0;
}
.agent-block--principal .agent-headshot,
.agent-block--principal .agent-headshot--placeholder {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}
.agent-headshot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--rule);
}
.agent-headshot--placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 300;
  border: 1.5px solid var(--rule);
}
.agent-info { line-height: 1.35; }
.agent-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
}
.agent-title {
  font-size: 0.65rem;
  color: var(--caption);
}
.agent-contact {
  font-size: 0.65rem;
  color: var(--caption);
}
.agent-dre {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.compliance-block { flex: 1; }
.brokerage-line {
  font-size: 0.7rem;
  color: var(--ink);
  margin-bottom: 0.04in;
  letter-spacing: 0.02em;
}
.disclaimer-line {
  font-size: 0.6rem;
  color: var(--caption);
  line-height: 1.5;
  margin-bottom: 0.05in;
}
.eho-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.eho-logo { width: 20px; height: 20px; flex-shrink: 0; }
.eho-text {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption);
}
.compliance-date {
  font-size: 0.6rem;
  color: var(--caption);
  margin-left: auto;
}

/* ================================================================
   ABOUT YOUR AGENT + THE TEAM
   ================================================================ */
.about-section {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0.35in;
  margin-bottom: 0.25in;
}
.about-agent-body {
  display: flex;
  gap: 0.22in;
  align-items: flex-start;
}
.about-headshot {
  width: 1.35in;
  height: 1.7in;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  break-inside: avoid;
  page-break-inside: avoid;
}
.about-agent-name {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.about-agent-title {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caption);
  margin: 0.04in 0 0.09in;
}
.about-para {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--body, #333);
  margin: 0 0 0.09in;
}
.about-para:last-child { margin-bottom: 0; }
.about-agent .section-eyebrow,
.about-team .section-eyebrow { margin-bottom: 0.1in; }
.about-agent-body,
.about-team {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* ================================================================
   PRINT STYLESHEET
   ================================================================ */
@media print {
  @page {
    size: letter;
    margin: 0.55in;
  }
  body {
    background: var(--paper) !important;
    padding: 0 !important;
  }
  .action-bar { display: none !important; }
  .onesheet {
    box-shadow: none !important;
    max-width: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .agent-dre {
    font-size: max(0.65rem, 6pt) !important;
    color: var(--caption) !important;
  }
  a { color: inherit; text-decoration: none; }
}

/* ================================================================
   PHOTO GALLERY — extra listing / CMA photos
   ================================================================ */
.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.09in;
  margin-bottom: 0.2in;
}
.gallery-item {
  flex: 1 1 30%;
  min-width: 0;
  height: 1.55in;
  overflow: hidden;
  background: #f2f2f0;
}
.photo-gallery--two .gallery-item { height: 2.1in; }
.gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================
   GETTING AROUND — neighborhood map + commute times
   ================================================================ */
.getting-around {
  display: flex;
  gap: 0.35in;
  margin-bottom: 0.18in;
}
.map-col {
  flex: 1.35;
  min-width: 0;
}
.map-frame {
  margin-top: 0.08in;
  border: 1px solid #e3e3e0;
}
.map-img {
  display: block;
  width: 100%;
  height: auto;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06in 0.16in;
  margin-top: 0.06in;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--caption, #777);
}
.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.legend-dot--home { background: var(--accent, #1363E5); }
.commute-col {
  flex: 1;
  min-width: 0;
}
.commute-list {
  margin-top: 0.08in;
}
.commute-row {
  padding: 0.075in 0;
  border-bottom: 1px solid #ececea;
}
.commute-row:last-child { border-bottom: none; }
.commute-dest {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.commute-times {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0.18in;
}
.commute-mode {
  font-size: 0.7rem;
  color: var(--caption, #777);
}
.commute-time {
  font-weight: 600;
  color: var(--ink, #111);
}
.commute-note {
  margin-top: 0.08in;
  font-size: 0.6rem;
  line-height: 1.5;
  color: var(--caption, #999);
}

/* ================================================================
   MULTI-PAGE FLOW — clean breaks when the guide runs long
   ================================================================ */
.listing-block,
.gallery-item,
.map-frame,
.commute-row,
.commute-list,
.market-stats,
.market-value,
.comps-table thead,
.comps-table tr,
.worth-knowing-list li,
.amenity-row,
.walkscore-row,
.ws-note,
.school-row,
.schools-note,
.onesheet-footer {
  break-inside: avoid;
  page-break-inside: avoid;
}
/* Keep whole sections together — each moves to a fresh page rather than
   splitting mid-section (WeasyPrint still splits if taller than a page) */
.bottom-section,
.schools-section,
.about-section {
  break-inside: avoid;
  page-break-inside: avoid;
}
.section-eyebrow,
.market-head {
  break-after: avoid;
  page-break-after: avoid;
}
.footer-rule {
  break-before: auto;
}
.narrative-text {
  orphans: 3;
  widows: 3;
}

/* ================================================================
   MOBILE SCREEN VIEW — the on-screen report only (PDF unaffected)
   ================================================================ */
@media screen and (max-width: 700px) {
  body { padding: 1rem 0.5rem 2.5rem; }
  .action-bar-inner {
    padding: 0 0.75rem;
    height: auto;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .action-btn { padding: 0.45rem 0.7rem; font-size: 0.62rem; }
  .onesheet { padding: 1.4rem 1.1rem 1.5rem; min-height: 0; }

  .masthead { flex-direction: column; gap: 0.75rem; }
  .masthead-right { text-align: left; }
  .property-address { font-size: 1.6rem; }

  .listing-block { flex-direction: column; }
  .narratives { grid-template-columns: 1fr; gap: 1.1rem; }
  .getting-around { flex-direction: column; gap: 1.1rem; }
  .bottom-section { grid-template-columns: 1fr; gap: 1.1rem; }
  .about-section { grid-template-columns: 1fr; gap: 1.1rem; }
  .about-agent-body { flex-direction: column; }
  .about-headshot { width: 40vw; max-width: 180px; height: auto; aspect-ratio: 4 / 5; }

  .gallery-item { flex: 1 1 46%; height: 1.35in; }

  .walkscore-row { flex-wrap: wrap; gap: 0.6rem 1rem; }
  .schools-grid { grid-template-columns: 1fr; gap: 0.7rem; }

  .market-stat { flex: 0 0 50%; }
  .listing-spec { flex: 0 0 50%; }
  .listing-spec--wide { flex: 0 0 100%; }
  .comps-table { font-size: 0.6rem; }
  .comps-table th, .comps-table td { padding: 0.28rem 0.3rem; }

  .onesheet-footer { flex-direction: column; gap: 1rem; }
}