/* ============================================================================
   pd2-content.css — Content column
   OWNER: W2. No other workstream may edit this file.

   EVERY selector in this file must start with `.pd2-c-`.
   Consume the tokens from pd2-tokens.css (var(--pd2-*)); do not hardcode a
   colour, radius or shadow that already exists there.
   This file owns its own responsive rules — there is no shared responsive file.

   Design source: website html/index/property-detail-v3.html
   (.title-row/.h-title/.h-addr/.icon-btn/.m-price/.trust/.t-pill/.facts4/.fact/
    .sec/.hl/.specs/.am-grid/.desc/.locked-card/.blur-lines/.g-ribbon/.report-*)

   NOTE ON EXPLICIT UA VALUES. The prototype is a bare HTML file; this page
   runs inside front/template.blade.php, which loads Bootstrap's reboot. Reboot
   rewrites the defaults the prototype silently relied on (p/h4 margins, and
   would happily be extended to buttons). Every one of those is therefore
   restated here with the value the prototype actually computes, so parity does
   not depend on which sheet happens to win:
     .pd2-c-desc         margin 15px 0      (UA <p> 1em, font-size 15px)
     .pd2-c-desc-more    padding 1px 6px    (UA <button>)
     .pd2-c-icon-btn     padding 1px 6px    (UA <button>)
     .pd2-c-sec-sub      margin 0 0 18px    (prototype rule, restated over reboot)
     .pd2-c-locked-h     margin 0 0 5px     (prototype rule, over reboot's h4)
     .pd2-c-locked-p     margin 0 0 14px

   NOTE ON DOUBLED CLASS SELECTORS (`.pd2-c-x.pd2-c-x`). Two sheets outrank a
   plain single-class rule here and both had to be beaten without ever naming a
   non-`.pd2-c-` selector:
     1. pd2-tokens.css ships `.pd2-root button{font:inherit;border:0;background:none;
        color:inherit}` and `.pd2-root h1,.pd2-root h2,.pd2-root h3{margin:0;…}` —
        specificity (0,1,1), which beats a bare `.pd2-c-*` (0,1,0). Measured: every
        button in this column rendered borderless, transparent and at 15px.
     2. styles.css styles the legacy `.btn-report` hook class (flex:1; padding:5px 4px;
        font-size:10px; font-family:'Konnect'; border-radius:20px; background:var(--bg-light)),
        and that hook cannot be dropped — it is what binds the report endpoint.
   Repeating the class lifts the rule to (0,2,0), which clears both, and keeps the
   "every selector starts with .pd2-c-" rule intact. The affected rules are the
   four button types and the two headings; everything else is a single class.
   ========================================================================== */

/* ------------------------------------------------------------- title row -- */
.pd2-c-title-row{display:flex;align-items:flex-start;gap:16px}
/* prototype: <div style="flex:1"> — kept as flex:1 (not 1 1 0 + min-width:0)
   so the intrinsic min-width behaviour matches byte for byte. */
.pd2-c-title-main{flex:1}

.pd2-c-title.pd2-c-title{
  font-family:var(--pd2-font-display);
  font-size:26px;font-weight:600;line-height:1.25;margin:0;letter-spacing:-.01em;
}
.pd2-c-addr{
  color:var(--pd2-ink-2);font-size:14px;margin-top:6px;
  display:flex;gap:7px;align-items:flex-start;
}
.pd2-c-addr i{color:var(--pd2-ink-3);font-size:15px;margin-top:1px}

.pd2-c-icon-btn.pd2-c-icon-btn{
  width:42px;height:42px;padding:1px 6px;border-radius:50%;
  border:1px solid var(--pd2-line);display:grid;place-items:center;
  font-size:17px;font-weight:400;line-height:1.55;color:var(--pd2-ink-2);
  background:var(--pd2-bg);flex:none;transition:all .15s;
}
.pd2-c-icon-btn.pd2-c-icon-btn:hover{border-color:var(--pd2-line-strong);background:var(--pd2-bg-soft)}
/* shortlisted. The shared wishlist handler in paywallScripts.blade.php toggles
   its own legacy `pd-fav-active` class; the inline script in content.blade.php
   mirrors that onto this prefix-clean class rather than styling a `.pd-` one. */
.pd2-c-icon-btn.pd2-c-icon-btn--on,
.pd2-c-icon-btn.pd2-c-icon-btn--on:hover{
  color:var(--pd2-accent);border-color:var(--pd2-accent-line);
  background:var(--pd2-accent-soft);
}

/* mobile-only inline price (desktop shows it in W3's rail instead) */
.pd2-c-mprice{display:none;margin-top:14px}
.pd2-c-mprice-amt{font-family:var(--pd2-font-display);font-size:28px;font-weight:700}
.pd2-c-mprice-per{color:var(--pd2-ink-3);font-size:13px}
.pd2-c-mprice-neg{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;margin-left:6px;
  font-size:12.5px;font-weight:600;color:var(--pd2-green);
  background:var(--pd2-green-soft);padding:5px 10px;border-radius:var(--pd2-r-sm);
}

/* ----------------------------------------------------------- trust strip -- */
.pd2-c-trust{
  display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px;padding-bottom:20px;
  border-bottom:1px solid var(--pd2-line);
}
.pd2-c-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  padding:6px 11px;border-radius:999px;background:var(--pd2-bg-soft);
  color:var(--pd2-ink-2);border:1px solid var(--pd2-line);
}
.pd2-c-pill i{font-size:13px}
.pd2-c-pill--good{
  background:var(--pd2-green-soft);border-color:var(--pd2-green-line);
  color:var(--pd2-green);
}
.pd2-c-pill--fresh{
  background:var(--pd2-amber-soft);border-color:var(--pd2-amber-line);
  color:var(--pd2-amber);
}

/* -------------------------------------------------------- headline facts -- */
.pd2-c-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 0}
.pd2-c-fact{
  border:1px solid var(--pd2-line);border-radius:var(--pd2-r-md);padding:14px;
  background:var(--pd2-bg);display:flex;flex-direction:column;gap:9px;
}
.pd2-c-fact i{font-size:19px;color:var(--pd2-accent)}
.pd2-c-fact-v{font-weight:600;font-size:15px;line-height:1.25}
.pd2-c-fact-l{
  font-size:11.5px;color:var(--pd2-ink-3);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;
}

/* --------------------------------------------------------------- section -- */
.pd2-c-sec{padding:28px 0;border-bottom:1px solid var(--pd2-line)}
.pd2-c-sec:last-child{border-bottom:0}
.pd2-c-sec-h.pd2-c-sec-h{
  font-family:var(--pd2-font-display);
  font-size:19px;font-weight:600;line-height:1.55;
  margin:0 0 4px;letter-spacing:-.01em;
}
.pd2-c-sec-sub{font-size:13.5px;color:var(--pd2-ink-3);margin:0 0 18px;line-height:1.55}

/* ------------------------------------------------------------ highlights -- */
.pd2-c-hl-grid{display:flex;flex-wrap:wrap;gap:9px}
.pd2-c-hl{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  padding:9px 14px;border-radius:10px;background:var(--pd2-accent-soft);
  border:1px solid var(--pd2-accent-line);color:var(--pd2-accent-ink);
}
.pd2-c-hl i{font-size:15px}

/* ------------------------------------------------------------------ about -- */
.pd2-c-desc{
  font-size:15px;color:var(--pd2-ink-2);line-height:1.72;
  white-space:pre-line;margin:15px 0;
}
/* The prototype is static and shows the whole description; the "Read more"
   button next to it is the design's stated intent, so the collapsed state is
   implemented here. The class is removed by script when the text does not
   actually overflow, so a short description never gets a dead button. */
.pd2-c-desc--clamped{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;
  overflow:hidden;
}
.pd2-c-desc-more.pd2-c-desc-more{
  margin:10px 0 0;padding:1px 6px;color:var(--pd2-accent);
  font-weight:600;font-size:14px;line-height:1.55;display:inline-block;
  border:0;background:none;
}

.pd2-c-blur{margin:0 0 18px}
.pd2-c-blur span{
  display:block;height:11px;border-radius:5px;background:var(--pd2-bg-sunk);
  margin:0 0 9px;
}
.pd2-c-blur span:nth-child(2){width:92%}
.pd2-c-blur span:nth-child(3){width:78%}

.pd2-c-locked{
  border:1px solid var(--pd2-accent-line);
  background:linear-gradient(180deg,var(--pd2-accent-soft),var(--pd2-bg));
  border-radius:var(--pd2-r-lg);padding:22px;display:flex;gap:18px;
  align-items:flex-start;
}
.pd2-c-locked-ico{
  width:44px;height:44px;border-radius:var(--pd2-r-md);background:var(--pd2-bg);
  border:1px solid var(--pd2-accent-line);display:grid;place-items:center;
  color:var(--pd2-accent);font-size:20px;flex:none;
}
.pd2-c-locked-body{flex:1}
/* h4 — not covered by the shell's h1..h3 rule, so a single class is enough,
   and deliberately NO letter-spacing: the prototype's tracking is scoped to
   h1/h2/h3 only, and this heading measures `normal`. */
.pd2-c-locked-h{
  font-family:var(--pd2-font-display);font-size:16px;margin:0 0 5px;
  font-weight:600;line-height:1.55;
}
.pd2-c-locked-p{margin:0 0 14px;font-size:13.5px;color:var(--pd2-ink-2);line-height:1.6}
/* prototype: .btn-primary + inline width:auto/padding:11px 22px/font-size:14.5px.
   Kept on a <button>, which in every engine shrink-to-fits here rather than
   filling the row — matching the prototype's measured 211.98px at 1440. */
.pd2-c-locked-cta.pd2-c-locked-cta{
  width:auto;border:0;background:var(--pd2-accent);color:#fff;
  font-weight:600;font-size:14.5px;line-height:1.55;
  padding:11px 22px;border-radius:var(--pd2-r-md);display:flex;align-items:center;
  justify-content:center;gap:9px;box-shadow:0 4px 12px rgba(255,84,3,.28);
  transition:all .15s;
}
.pd2-c-locked-cta.pd2-c-locked-cta:hover{background:var(--pd2-accent-ink);box-shadow:0 6px 16px rgba(255,84,3,.34)}

.pd2-c-ribbon{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;
  border-radius:11px;background:var(--pd2-green-soft);border:1px solid var(--pd2-green-line);
}
.pd2-c-ribbon i{color:var(--pd2-green);font-size:19px;flex:none}
.pd2-c-ribbon-1{font-size:12.5px;font-weight:700;color:var(--pd2-green);line-height:1.3}
.pd2-c-ribbon-2{font-size:11.5px;color:var(--pd2-ink-2);line-height:1.35;margin-top:2px}

/* ------------------------------------------------------- property details -- */
.pd2-c-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.pd2-c-spec{
  display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px dashed var(--pd2-line);
}
.pd2-c-spec-k{color:var(--pd2-ink-2);font-size:14px}
.pd2-c-spec-v{font-weight:600;font-size:14px;text-align:right}

/* --------------------------------------------- furnishing &amp; amenities -- */
.pd2-c-am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.pd2-c-am{
  display:flex;align-items:center;gap:11px;padding:12px 14px;
  border:1px solid var(--pd2-line);border-radius:var(--pd2-r-md);
  font-size:14px;font-weight:500;
}
.pd2-c-am i{font-size:17px;color:var(--pd2-ink-2)}
.pd2-c-am--off{color:var(--pd2-ink-3);background:var(--pd2-bg-soft);font-weight:400}
.pd2-c-am--off i{color:var(--pd2-line-strong)}

/* ----------------------------------------------------------------- report -- */
.pd2-c-report-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
/* Every declaration here that looks redundant is neutralising styles.css's
   legacy `.btn-report` (flex:1 / padding:5px 4px / font-size:10px /
   font-family:'Konnect' / border-radius:20px / background:var(--bg-light) /
   text-align:center). That class is the report endpoint's binding hook and
   cannot be removed from the markup, so it is overridden instead. */
.pd2-c-report-btn.pd2-c-report-btn{
  flex:0 1 auto;min-width:auto;
  border:1px solid var(--pd2-line);border-radius:999px;padding:8px 14px;
  font-family:var(--pd2-font-body);font-size:13px;font-weight:500;line-height:1.55;
  color:var(--pd2-ink-2);background:none;text-align:center;transition:all .15s;
}
.pd2-c-report-btn.pd2-c-report-btn:hover{
  border-color:var(--pd2-accent-line);color:var(--pd2-accent);
  background:var(--pd2-accent-soft);
}
/* The shared handler's in-flight feedback is disabled + a spinner label; its
   legacy `.btn-report-active` dark fill is (0,1,0) and intentionally loses to
   the rule above, because that fill belongs to the old design. */
.pd2-c-report-btn.pd2-c-report-btn:disabled{opacity:.7;cursor:default}

/* ============================================================== responsive == */
@media (max-width:1000px){
  .pd2-c-facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  /* the desktop shortlist/share buttons move up into W7's mobile top bar */
  .pd2-c-title-row .pd2-c-icon-btn{display:none}
  /* doubled for the same reason as the base rules — a single class here would
     lose to `.pd2-c-title.pd2-c-title` above regardless of source order */
  .pd2-c-title.pd2-c-title{font-size:19px;line-height:1.3}
  .pd2-c-addr{font-size:13px}
  .pd2-c-trust{gap:6px 7px;margin-top:14px;padding-bottom:16px}
  .pd2-c-pill{font-size:11.5px;padding:5px 9px}
  .pd2-c-facts{gap:9px}
  .pd2-c-fact{padding:12px}
  .pd2-c-sec{padding:22px 0}
  .pd2-c-sec-h.pd2-c-sec-h{font-size:17px}
  .pd2-c-specs{grid-template-columns:1fr}
  /* deliberately not !important, unlike the prototype: `hidden` must still win
     (pd2-tokens.css uses [hidden]{display:none !important} as the contract). */
  .pd2-c-mprice{display:block}
}