/* ==========================================================================
   Responsive property-page layer (all single properties). Piloted on
   #22260 and approved for rollout 2026-10-03. Loads after theme.css on
   is_singular( "property" ) only; delete this file + property-responsive.js
   (and their enqueue) to roll back.
   Breakpoints: desktop >=1025 · tablet 769–1024 · single column <=768
   (refinements at 480 / 375).
   ========================================================================== */

.ppage {
  --cta-tint: #fff6f6;   /* same light coral as the hero .contact-card */
  --cta-line: #f4d9d9;
}

/* ---- 1. main container: 94% width, max 1,350px (92–93% on phones) ---- */
.wrap.ppage,
.site-header .wrap.bar {
  width: 94%;
  max-width: 1350px;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 480px) {
  .wrap.ppage,
  .site-header .wrap.bar { width: 93%; }
}
@media (max-width: 375px) {
  .wrap.ppage,
  .site-header .wrap.bar { width: 92%; }
}

/* ---- 2. header height: 74 desktop · 68 tablet · 60 mobile ---- */
@media (max-width: 1024px) {
  .site-header .bar { height: 68px; }
  .secnav { top: 68px; }
}
@media (max-width: 768px) {
  .site-header .bar { height: 60px; }
  .secnav { top: 60px; }
}

/* ---- 3. hero: 65/35 desktop, 55/45 tablet, stacked <=768 ---- */
@media (min-width: 1025px) {
  .phead {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    gap: 28px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* 55/45 keeps the summary wide enough that the H1 wraps the same in the
     fallback font and in Newsreader (60/40 gave CLS 0.13 at 1024). */
  .phead {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 24px;
  }
}
@media (min-width: 769px) {
  .media {
    grid-template-columns: 1fr;
    height: auto;
  }
  .media-big,
  .media-big.pvideo {
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 0;
  }
  .media-big img {
    position: absolute;
    inset: 0;
  }
  .media-grid { display: none; }
  .media-strip {
    display: flex;
    scrollbar-width: thin; /* mouse users need a visible way to reach the rest */
    padding-bottom: 4px;
  }
  .media-strip::-webkit-scrollbar { display: block; height: 6px; }
  .media-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
}
@media (max-width: 1024px) {
  .media-big { min-height: 300px; }
}
@media (max-width: 768px) {
  .media-big { min-height: 0; aspect-ratio: 16 / 9; }
}
/* thumbnails: consistent 3:2 crop */
.media-thumb { width: 96px; height: 64px; }
@media (min-width: 1025px) {
  .media-thumb { width: 108px; height: 72px; }
}

/* ---- 4. lower content: 850 + 320 desktop, 1fr + 280 tablet ---- */
@media (min-width: 1025px) {
  .ppage .detail-grid {
    grid-template-columns: minmax(0, 850px) 320px;
    justify-content: space-between;
    gap: 40px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ppage .detail-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
  }
  .ppage .detail-grid .side {
    position: sticky;
    top: 84px;
  }
}
/* sidebar enquiry is visible down to 769px, so the sticky bar is phone-only */
@media (min-width: 769px) {
  .ppage .mcta { display: none; }
}
/* enquiry card moved under the key details by property-responsive.js (<=768px) */
.ppage > #enquire.enquire-top { margin-top: 20px; }

/* ---- 5. typography ---- */
.phead-summary h1 { font-size: 34px; line-height: 1.18; }
/* In the 35% summary column 32–34px flips between 2 and 3 lines when
   Newsreader replaces its (wider) fallback, which shifts the whole summary.
   1025–1199: 32px is 3 lines in both fonts. 1200+: scales 28→34px and
   stays 2 lines in both. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .phead-summary h1 { font-size: 32px; }
}
@media (min-width: 1200px) {
  .phead-summary h1 { font-size: clamp(28px, 2.3vw, 34px); }
}
.psection > h2 { font-size: 26px; }
.ppage .h-2 { font-size: 28px; }
.phead-price { font-size: 32px; line-height: 1.2; }
@media (max-width: 1024px) {
  .phead-summary h1 { font-size: 30px; }
  .psection > h2 { font-size: 24px; }
  .ppage .h-2 { font-size: 25px; }
  .phead-price { font-size: 30px; }
}
@media (max-width: 768px) {
  .phead-summary h1 { font-size: 26px; }
  .psection > h2 { font-size: 21px; }
  .ppage .h-2 { font-size: 22px; }
  .phead-price { font-size: 28px; }
  .ppage table.config { font-size: 14px; }
}
@media (max-width: 375px) {
  .phead-summary h1 { font-size: 24px; }
  .phead-price { font-size: 27px; }
}

/* ---- 6. section spacing: 36 desktop · 30 tablet · 24 mobile ---- */
@media (min-width: 1025px) {
  .ppage .psection { padding-top: 36px; margin-top: 36px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ppage .psection { padding-top: 30px; margin-top: 30px; }
}
.ppage .psection:first-child { padding-top: 0; margin-top: 4px; }

/* ---- 7. primary CTAs: 46px desktop/tablet, 48px on mobile ---- */
.ppage .contact-card .btn,
.ppage .convo .btn,
.ppage #enquire .btn,
.ppage #enquire button[type="submit"] { min-height: 46px; }
@media (max-width: 768px) {
  .ppage .btn,
  .ppage .contact-card .btn,
  .ppage .convo .btn,
  .ppage #enquire .btn,
  .ppage button[type="submit"],
  .ppage #enquire button[type="submit"],
  .mcta .btn { min-height: 48px; }
}

/* ---- 8. sticky Call/WhatsApp bar must not cover the footer ---- */
@media (max-width: 768px) {
  .site-footer .base {
    padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- 9. phones: title then price first, so both fit on the first screen ---- */
@media (max-width: 768px) {
  .phead-summary {
    display: flex;
    flex-direction: column;
  }
  .phead-summary > * { order: 3; }
  .phead-summary > .ref,
  .phead-summary > .rera-badge { order: 1; }
  .phead-summary > h1,
  .phead-summary > .phead-price { order: 2; }
  .phead-summary > .phead-price { margin-top: 0; }
  .phead-summary > .rera-badge,
  .phead-summary > .saveshare { align-self: flex-start; }
}

/* ---- 10. repetition: hidden only where the same facts are already shown ---- */
/* Snapshot rows already shown in the hero are hidden by property-responsive.js. */
#snapshot[hidden],
#snapshot li[hidden] { display: none; } /* li is display:flex in theme.css */
/* A one-row phase table repeats the RERA no., possession and status above it. */
.rera-phases:not(:has(tbody tr:nth-child(2))) { display: none; }
/* Save / Share already sit under the hero price. */
#decide .decide-save { display: none; }
/* #decide follows #advisory directly (property-responsive.js), with its own
   "Talk to an advisor" — drop the duplicate button. */
.ppage.is-reordered #advisory > .btn { display: none; }

/* ---- 11. CTA panels: light coral tint, matching the hero contact card ---- */
.ppage #enquire.card {
  background: var(--cta-tint);
  border-color: var(--cta-line);
}
.ppage.is-reordered #advisory,
.ppage.is-reordered #decide {
  background: var(--cta-tint);
  border: 1px solid var(--cta-line);
  padding: 32px 36px;
}
/* advisory + next step read as one panel */
.ppage.is-reordered #advisory {
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: 8px;
}
.ppage.is-reordered #decide {
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: 0;
  padding-top: 24px;
}
.ppage .mcta {
  background: var(--cta-tint);
  border-top-color: var(--cta-line);
}
@media (max-width: 768px) {
  .ppage.is-reordered #advisory,
  .ppage.is-reordered #decide { padding-left: 18px; padding-right: 18px; }
  .ppage.is-reordered #advisory { padding-top: 24px; }
  .ppage.is-reordered #decide { padding-bottom: 24px; }
}