/* Days Away STR reports — phone layout + Print/Save-PDF fixes (shared by every report on reports.daysawayrentals.com).
   Linked from each report as /assets/mobile.css by deploy.py. Edit here + redeploy to update all reports. */

html, body { overflow-x: hidden; }
h1, h2, h3, .section-title, .subject-card-title { overflow-wrap: break-word; word-break: normal; hyphens: manual; }

/* Touch screens: no hover lifts/zooms (they stick after a tap) */
@media (hover: none) {
  .metric:hover, .info-card:hover, .subject-card:hover, .comp-card:hover,
  .btn-primary:hover, .btn-secondary:hover { transform: none !important; }
  .subject-card:hover .subject-img-wrap img, .comp-card:hover .image-overlay img { transform: none !important; }
}

/* Header logo: transparent Days Away logo (no blue box) */
.luxury-header > div:first-child > img { height: 64px !important; width: auto !important; max-width: 260px; object-fit: contain; }
@media (min-width: 768px) { .luxury-header > div:first-child > img { height: 76px !important; max-width: 300px; } }

/* Header buttons: website pill on top, Print / Save PDF underneath, same size, one line each */
@media screen {
.luxury-header > .no-print { display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: .5rem !important; min-width: 250px; }
.luxury-header > .no-print > * { display: block !important; width: 100% !important; text-align: center !important;
  white-space: nowrap !important; box-sizing: border-box; }
.luxury-header > .no-print > a { order: 1; }
.luxury-header > .no-print > a.dar-regs { order: 2; }
.luxury-header > .no-print > button { order: 3; }
}

/* Pills never wrap their words (e.g. "View Listing") */
.btn-primary, .btn-secondary { white-space: nowrap !important; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }

@media screen and (max-width: 640px) {
  body { line-height: 1.55; }
  .container { padding-left: .75rem !important; padding-right: .75rem !important; padding-top: 1rem !important; }

  /* Cards: less padding so content gets the width */
  section.glass-card, section.p-8 { padding: 1.25rem !important; border-radius: 1.25rem !important; margin-bottom: 1.25rem !important; }
  header.glass-card { border-radius: 1.25rem !important; margin-bottom: 1.25rem !important; }
  .p-8 { padding: 1.25rem !important; }
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .gap-8 { gap: 1.25rem !important; }
  .mb-10 { margin-bottom: 1.25rem !important; }

  /* Header: logo on top, title full width, buttons side by side underneath */
  .luxury-header { gap: 1rem !important; }
  .luxury-header > div:first-child { flex-direction: column !important; gap: .75rem !important; }
  .luxury-header > div:first-child > img { height: 46px !important; width: auto !important; }
  .luxury-header .pt-2 { padding-top: 0 !important; min-width: 0; }
  .luxury-header .tracking-\[\.3em\], .luxury-header .uppercase { letter-spacing: .14em !important; font-size: .65rem !important; }
  .luxury-header h1 { font-size: 1.75rem !important; line-height: 1.18 !important; }
  .luxury-header p { font-size: .95rem !important; }
  .luxury-header > .no-print { width: 100%; min-width: 0 !important; }
  .luxury-header > .no-print > * { padding: .7rem .8rem !important; font-size: .85rem !important; }
  /* Book-a-call card */
  div[style*="background:#f7f3ee"] { padding: 18px !important; gap: 16px !important; }
  div[style*="background:#f7f3ee"] > img { width: 120px !important; height: 120px !important; }
  div[style*="background:#f7f3ee"] { flex-direction: column !important; align-items: flex-start !important; }
  div[style*="background:#f7f3ee"] > div { min-width: 0 !important; width: 100%; }
  div[style*="background:#f7f3ee"] a { display: block !important; width: 100% !important; text-align: center; padding: 13px 16px !important; }

  /* Section intro rows (title + side pill/button): stack instead of squeezing the text */
  section > .flex.justify-between, section > div > .flex.justify-between.items-start {
    flex-direction: column !important; align-items: flex-start !important; gap: .75rem !important; }
  section > .flex.justify-between > div { width: 100%; }
  .section-title.text-3xl, h2.section-title { font-size: 1.55rem !important; line-height: 1.2 !important; }
  .section-title.text-2xl { font-size: 1.3rem !important; }
  .pill { font-size: .62rem !important; padding: .4rem .8rem !important; }

  /* Subject card */
  .subject-card .subject-img-wrap { height: 220px !important; }
  .subject-card-body { padding: 1.1rem 1.1rem 1.25rem !important; }
  .subject-card-title { font-size: 1.15rem !important; }

  /* Big revenue numbers must fit the screen */
  .text-7xl, .text-6xl { font-size: clamp(2.1rem, 11vw, 3rem) !important; line-height: 1.1 !important; }
  .text-5xl { font-size: clamp(1.9rem, 9.5vw, 2.6rem) !important; line-height: 1.12 !important; }
  .text-4xl { font-size: clamp(1.6rem, 8vw, 2.1rem) !important; line-height: 1.15 !important; }
  .stat-number { overflow-wrap: anywhere; }

  /* Metric tiles (comp cards + calculator) */
  .metric-grid { gap: .5rem !important; }
  .metric { padding: .7rem .75rem !important; border-radius: .8rem !important; min-width: 0; }
  .metric .k { font-size: .6rem !important; letter-spacing: .06em !important; }
  .metric .v { font-size: 1.1rem !important; overflow-wrap: anywhere; }

  /* Comp cards */
  .image-overlay { height: 200px !important; }
  .comp-card .p-6, .comp-card .p-5 { padding: 1rem !important; }
  .feature-badge { font-size: .62rem !important; }

  /* Chart */
  .chart-container { height: 280px !important; padding: .5rem !important; border-radius: 1rem !important; }

  .info-card, .highlight-box { padding: 1rem !important; }
}

@media screen and (max-width: 380px) {
  .luxury-header h1 { font-size: 1.5rem !important; }
  .metric .v { font-size: 1rem !important; }
}

/* ---------- Print / Save as PDF ---------- */
@page { size: letter; margin: 0.45in 0.45in 0.5in; }
@media print {
  html, body { background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
      animation: none !important; transition: none !important; }
  body::before { display: none !important; }
  body { font-size: 12px; line-height: 1.45; }
  .fade-in-up, .delay-1, .delay-2, .delay-3, .delay-4 { opacity: 1 !important; transform: none !important; }
  .no-print, button[onclick*="print"] { display: none !important; }

  .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  /* Gradient text doesn't print: solid brand blue instead */
  .gradient-text, .metric .v, h1.gradient-text {
    background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: var(--sol-forest) !important; color: var(--sol-forest) !important; }

  /* Flat, crisp cards (blur + glass shadows print muddy) */
  .glass-card, .shadow-luxury, .shadow-soft { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .glass-card { background: #fff !important; border: 1px solid #dbe5f3 !important; }
  header.glass-card, section.glass-card { border-radius: 14px !important; padding: 18px 20px !important; margin: 0 0 14px !important; }
  .luxury-header { padding: 0 !important; gap: 10px !important; }
  .luxury-header > div:first-child > img { height: 46px !important; width: auto !important; }
  .luxury-header h1 { font-size: 24px !important; line-height: 1.2 !important; margin-top: 4px !important; }
  .luxury-header p { font-size: 12.5px !important; margin-top: 6px !important; }
  .accent-line { margin-top: 12px !important; }
  .p-8 { padding: 16px !important; }
  .mb-10 { margin-bottom: 14px !important; }
  .mt-8 { margin-top: 14px !important; }
  .gap-8 { gap: 12px !important; }
  .section-title.text-3xl, h2.section-title { font-size: 20px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
  .pill { font-size: 8.5px !important; padding: 4px 9px !important; margin-bottom: 6px !important; box-shadow: none !important; }
  .text-6xl, .text-7xl { font-size: 40px !important; line-height: 1.1 !important; }
  .text-5xl { font-size: 32px !important; }
  .text-4xl { font-size: 26px !important; }
  .text-3xl { font-size: 22px !important; }

  /* Keep things whole across page breaks */
  h1, h2, h3, h4, .section-title, .pill { break-after: avoid; page-break-after: avoid; }
  .pill { display: flex !important; width: fit-content; }
  section > .pill + h2, section > .pill + .section-title { break-before: avoid; page-break-before: avoid; }
  .metric, .info-card, .highlight-box, .comp-card, .subject-card, .chart-container,
  .metric-grid, .rounded-2xl, .rounded-xl, header, .stat-number { break-inside: avoid; page-break-inside: avoid; }
  section > .flex.justify-between { break-after: avoid; page-break-after: avoid; }

  /* Subject: photo beside the config cards, like the web layout */
  .grid.lg\:grid-cols-5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; }
  .grid.lg\:grid-cols-5 > .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .grid.lg\:grid-cols-5 > .lg\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .grid.lg\:grid-cols-5 > .lg\:col-span-3 .grid { gap: 8px !important; }
  .grid.lg\:grid-cols-5 .text-lg, .grid.lg\:grid-cols-5 .text-xl { font-size: 13px !important; line-height: 1.3 !important; }
  .grid.lg\:grid-cols-5 .text-base, .grid.lg\:grid-cols-5 .text-sm, .grid.lg\:grid-cols-5 p { font-size: 10.5px !important; line-height: 1.45 !important; }
  .grid.lg\:grid-cols-5 .info-card, .grid.lg\:grid-cols-5 .highlight-box { padding: 9px 11px !important; }
  .subject-config { font-size: 11px !important; flex-wrap: wrap; gap: 4px 8px !important; margin-top: 8px !important; padding-top: 8px !important; }
  .subject-config > * { white-space: nowrap; }

  /* Subject card + photo */
  .subject-card .subject-img-wrap { height: 170px !important; }
  .subject-card .subject-img-wrap::after { display: none !important; }
  .subject-card-body { padding: 12px 14px !important; }
  .subject-card-title { font-size: 15px !important; }

  /* Chart */
  .chart-container { height: 250px !important; max-height: 250px !important; padding: 8px !important; background: #fff !important; backdrop-filter: none !important; overflow: hidden; }
  .chart-container canvas { width: 100% !important; height: 100% !important; max-width: 100% !important; }

  /* Comps: 3 per row, compact so they fit 3-6 per page */
  .grid:has(> .comp-card) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .comp-card { border: 1px solid #dbe5f3 !important; border-radius: 12px !important; }
  .comp-card .image-overlay, .image-overlay { height: 120px !important; }
  .comp-card .p-6, .comp-card .p-5, .comp-card .p-4 { padding: 9px !important; }
  .comp-card h3, .comp-card h4 { font-size: 11.5px !important; line-height: 1.25 !important; }
  .comp-card .text-sm, .comp-card .text-xs { font-size: 9.5px !important; }
  .feature-badge { font-size: 8px !important; padding: 2px 6px !important; }
  .airroi-pill { font-size: 7.5px !important; padding: 3px 6px !important; box-shadow: none !important; }
  .metric-grid { gap: 5px !important; margin-top: 8px !important; }
  .metric { padding: 6px 7px !important; border-radius: 8px !important; background: #f6f9fe !important; }
  .metric .k { font-size: 7.5px !important; letter-spacing: .05em !important; }
  .metric .v { font-size: 13px !important; margin-top: 3px !important; }
  .comp-card a[href] { padding: 6px !important; font-size: 10px !important; }

  .info-card, .highlight-box { padding: 11px 13px !important; box-shadow: none !important; }
  .info-card:hover, .metric:hover, .comp-card:hover, .subject-card:hover { transform: none !important; box-shadow: none !important; }
  input[type=range] { opacity: 1 !important; }

  /* Comps always start on a fresh page, so their intro never strands */
  section:has(.comp-card) { break-before: page; page-break-before: always; }
  /* Tighter closing section so the disclaimer stays with the methodology */
  section .info-card .text-sm, section .info-card li { font-size: 10px !important; line-height: 1.4 !important; }
  section .space-y-2 > * + * { margin-top: 3px !important; }
  .highlight-box .text-sm { font-size: 9.5px !important; line-height: 1.4 !important; }
  footer { padding-top: 10px !important; padding-bottom: 0 !important; margin-top: 10px !important; }

  /* Book-a-call card prints too (button stays clickable in the PDF) */
  div.no-print[style*="background:#f7f3ee"] { display: flex !important; padding: 12px 16px !important; gap: 14px !important;
    flex-wrap: nowrap !important; break-inside: avoid; page-break-inside: avoid; margin-top: 12px !important; }
  div[style*="background:#f7f3ee"] > img { width: 84px !important; height: 84px !important; }
  div[style*="background:#f7f3ee"] .section-title { font-size: 16px !important; margin-bottom: 8px !important; }
  div[style*="background:#f7f3ee"] a { padding: 8px 16px !important; font-size: 12px !important; }
}