/* Additions for the older project pages brought up to the pxskin design (tools/upgrade-pxskin.py).
   Loaded after pxskin.css; every rule is scoped to body.px-up or to a class only the upgrade writes. */

/* ---------- hero ---------- */
.ab-hero.px-long h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; }
.ab-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.ab-hero .ab-hero-art .ab-arch { box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.55); }
.ab-hero-art.wide .ab-arch { aspect-ratio: 4 / 3.4; }
.ab-lede { max-width: 540px; }
.ab-facts { grid-template-columns: repeat(2, 1fr); }
.ab-facts div { min-width: 0; }
.ab-facts b { font-size: clamp(19px, 1.9vw, 26px); overflow-wrap: anywhere; }

/* ---------- strip + sections ---------- */
body.px-up .project-fact-strip { background: var(--ab-cream); border-bottom: 1px solid var(--paper-line); }
body.px-up .fact-label { color: var(--brass-deep); }
body.px-up .fact-value { font-family: var(--font-display); }
.ab-gallery a:focus-visible, .ab-tab:focus-visible, .ab-plan a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.ab-section .ab-head h2 { text-wrap: balance; }
.ab-plan img { background: #fff; }
.ab-tag { margin-bottom: 14px; }
.ab-price-big { font-size: clamp(20px, 1.9vw, 26px); }
.ab-detail .ab-dl dd { overflow-wrap: anywhere; }

/* ---------- long-form body ---------- */
body.px-up .project-body { background: var(--paper); }
body.px-up .project-copy h2 { font-family: var(--font-display); font-weight: 300; letter-spacing: 0.005em; position: relative; padding-top: 22px; }
body.px-up .project-copy h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 1px; background: var(--brass); }
body.px-up .project-copy > h2:first-child { margin-top: 0; }
body.px-up .quick-facts { background: var(--ab-cream); border: 1px solid var(--paper-line); border-radius: 24px; padding: 8px 30px 22px; margin: 36px 0; }
body.px-up .quick-facts h2 { margin-top: 24px; }
body.px-up .answer-box { background: var(--ab-cream); border: 1px solid var(--paper-line); border-left: 4px solid var(--brass); border-radius: 18px; padding: 22px 26px; }
body.px-up .unit-table { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--paper-line); }
body.px-up .unit-table th { background: var(--paper-deep); color: var(--brass-deep); }
body.px-up .faq-item { border: 1px solid var(--paper-line); border-radius: 18px; padding: 22px 26px; margin-top: 14px; background: var(--ab-cream); }
body.px-up .faq-item:last-child { border-bottom: 1px solid var(--paper-line); }
body.px-up .enquiry-card { border-radius: 26px; background: var(--ink); }
body.px-up .enquiry-card .btn.ghost { color: var(--paper); }
body.px-up .related-links { border-radius: 20px; overflow: hidden; }
body.px-up .photo-pair img, body.px-up .facility-grid img { border-radius: 16px; }

/* ---------- blocks that keep their content but take the designed section head ---------- */
.ab-section.px-legacy .floorplan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 8px; }
.ab-section.px-legacy .floorplan-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 24px; padding: 18px 18px 20px; }
.ab-section.px-legacy .floorplan-card img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.ab-section.px-legacy .floorplan-card .fp-label { font-family: var(--font-display); font-size: 22px; margin-top: 14px; }
.ab-section.px-legacy .floorplan-card .fp-meta { color: var(--brass-deep); }
.ab-section.px-legacy .floorplan-grid.plans-wide { grid-template-columns: 1fr; }
.ab-section .facility-grid { gap: 20px; }
.ab-section .facility-grid img { border-radius: 18px; transition: transform 0.4s ease; }
.ab-section .facility-grid a { overflow: hidden; border-radius: 18px; }
.ab-section .facility-grid a:hover img { transform: scale(1.03); }
.ab-section .facility-grid figcaption { font-size: 19px; }
.ab-section.dark .tour-frame { border-radius: 24px; border: 1px solid var(--ink-line); }
.ab-section.dark .tour-note, .ab-section.dark .tour-note a { color: color-mix(in srgb, var(--paper) 70%, transparent); }

/* ---------- gallery ---------- */
.ab-gallery a.w6 { grid-column: span 6; }
@media (max-width: 1040px) { .ab-gallery a.w6 { grid-column: span 4; } }
@media (max-width: 640px) { .ab-gallery a.w6 { grid-column: span 2; } .ab-gallery { grid-auto-rows: 150px; } }
body.px-up .related-links { background: none; gap: 10px; border-radius: 0; overflow: visible; }
body.px-up .related-link-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; }
body.px-up .related-link-card:hover { background: var(--ab-cream); }