/* LHG residence pages + residences index. Uses the site's existing tokens (see brand/tokens.css).
   Generated pages: scripts/build-projects.mjs. Keep components quiet: hairlines, square corners, one accent. */

/* Sticky section bar */
.res-subnav{position:sticky;top:72px;z-index:40;background:rgba(250,247,242,0.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.res-subnav .container{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;height:52px;align-items:center}
.res-subnav .container::-webkit-scrollbar{display:none}
.res-subnav a{font-family:var(--font-label);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;padding:16px 0;border-bottom:1px solid transparent;transition:color 200ms ease,border-color 200ms ease}
.res-subnav a:hover,.res-subnav a.on{color:var(--text-primary);border-bottom-color:var(--accent)}
.res-subnav .res-cta{margin-left:auto;color:var(--accent)}
@media(max-width:768px){.res-subnav{top:60px}.res-subnav .container{gap:20px;padding:0 20px}}

/* Hero meta line */
.res-kicker{font-family:var(--font-label);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-primary);margin-bottom:16px}
.res-status{display:inline-block;font-family:var(--font-label);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--text-primary);margin-top:20px}

/* Key facts */
.res-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px}
.res-facts .spec-value{font-size:22px;line-height:1.2}
.res-facts .spec-note{font-family:var(--font-label);font-size:11px;color:var(--text-tertiary);margin-top:6px}

/* Overview */
.res-overview{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:start}
.res-features{list-style:none;border-top:1px solid var(--border)}
.res-features li{font-family:var(--font-body);font-size:15px;line-height:1.55;padding:14px 0;border-bottom:1px solid var(--border)}
@media(max-width:900px){.res-overview{grid-template-columns:1fr;gap:40px}}

/* Configurations table */
.res-table-wrap{overflow-x:auto}
.res-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.res-table th{font-family:var(--font-label);font-size:11px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-secondary);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--text-primary)}
.res-table td{font-family:var(--font-body);font-size:16px;padding:18px 16px 18px 0;border-bottom:1px solid var(--border);vertical-align:top}
.res-table td:first-child{font-family:var(--font-display);font-size:22px}
.res-table .muted{color:var(--text-tertiary);font-style:italic;font-size:14px}
.res-footnote{font-family:var(--font-label);font-size:12px;color:var(--text-tertiary);margin-top:16px}

/* Plans: tabs + viewer */
.res-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.res-tab{font-family:var(--font-label);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--border);background:transparent;color:var(--text-primary);cursor:pointer}
.res-tab[aria-selected="true"]{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}
.res-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.res-plan{background:#fff;border:1px solid var(--border);display:block;width:100%;cursor:zoom-in}
.res-plan img{width:100%;height:auto;max-height:78vh;object-fit:contain;margin:0 auto}
.res-plan-cap{font-family:var(--font-label);font-size:12px;color:var(--text-tertiary);margin-top:10px}

/* Gallery */
.res-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.res-gallery figure{flex:0 0 auto;width:min(46%,640px);min-width:280px;scroll-snap-align:start;cursor:zoom-in}
.res-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.res-gallery figcaption{font-family:var(--font-label);font-size:11px;color:var(--text-tertiary);margin-top:8px}
@media(max-width:768px){.res-gallery figure{width:85%}}

/* Amenities */
.res-amenities{columns:3 220px;column-gap:40px;list-style:none}
.res-amenities li{break-inside:avoid;font-family:var(--font-body);font-size:15px;padding:8px 0;border-bottom:1px solid var(--border)}

/* RERA + sources */
.res-rera{background:var(--bg-secondary);padding:32px;border-left:2px solid var(--accent)}
.res-rera dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;font-family:var(--font-label);font-size:14px}
.res-rera dt{color:var(--text-secondary);letter-spacing:0.06em;text-transform:uppercase;font-size:11px;padding-top:3px}
.res-rera a{color:var(--accent);border-bottom:1px solid transparent}
.res-rera a:hover{border-bottom-color:var(--accent)}
.res-sources{font-family:var(--font-label);font-size:12px;color:var(--text-tertiary);margin-top:20px;line-height:1.7}
.res-disclaimer{font-family:var(--font-body);font-style:italic;font-size:13px;color:var(--text-tertiary);margin-top:16px}

/* Enquiry band */
.res-enquire{background:var(--bg-footer);color:var(--text-light)}
.res-enquire .h2-display{color:var(--text-light)}
.res-enquire p{color:var(--bg-secondary)}
.res-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px;justify-content:center}
.res-btn{font-family:var(--font-label);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;padding:14px 24px;border:1px solid var(--accent-highlight);color:var(--text-light);transition:background 300ms ease,color 300ms ease}
.res-btn:hover{background:var(--accent-highlight);color:var(--bg-footer)}

/* Lightbox */
.res-lightbox{position:fixed;inset:0;z-index:300;background:rgba(42,42,41,0.94);display:none;align-items:center;justify-content:center;padding:24px}
.res-lightbox.open{display:flex}
.res-lightbox img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.res-lightbox button{position:absolute;top:16px;right:20px;background:none;border:0;color:var(--text-light);font-size:36px;cursor:pointer}

/* Residences index */
.idx-filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border);position:sticky;top:72px;background:var(--bg-primary);z-index:30}
.idx-chip{font-family:var(--font-label);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--border);background:transparent;color:var(--text-primary);cursor:pointer}
.idx-chip[aria-pressed="true"]{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}
.idx-select{font-family:var(--font-label);font-size:13px;padding:8px 10px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);border-radius:0}
.idx-count{margin-left:auto;font-family:var(--font-label);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-secondary)}
.idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:48px 32px;margin-top:40px}
.idx-card{display:block}
.idx-card img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:16px;background:var(--bg-secondary)}
.idx-card .label-small{display:block;margin-bottom:6px}
.idx-card h3{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.1;margin-bottom:6px}
.idx-card p{font-family:var(--font-body);font-size:14px;color:var(--text-secondary)}
.idx-card .idx-meta{font-family:var(--font-label);font-size:12px;color:var(--text-primary);margin-top:10px;display:flex;justify-content:space-between;gap:12px}
.idx-card:hover h3{color:var(--accent)}
@media(max-width:768px){.idx-filters{top:60px}.idx-count{margin-left:0;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.res-subnav a,.res-btn{transition:none}}

/* Hero legibility on busy renders: ivory wash on the text side */
.prop-hero .prop-hero-overlay{background:linear-gradient(to right,rgba(250,247,242,0.92) 0%,rgba(250,247,242,0.75) 30%,rgba(250,247,242,0.15) 60%,transparent 75%),linear-gradient(to top,rgba(250,247,242,0.6) 0%,transparent 40%)}
@media(max-width:768px){.prop-hero .prop-hero-overlay{background:linear-gradient(to top,rgba(250,247,242,0.95) 0%,rgba(250,247,242,0.7) 45%,transparent 75%)}}

/* Hero without an official image: typographic header on stone */
.prop-hero--plain{height:auto;min-height:0;background:var(--bg-secondary);padding-top:72px}
.prop-hero--plain .prop-hero-overlay{display:none}
.prop-hero--plain .prop-hero-text{padding:96px 64px 72px}
@media(max-width:768px){.prop-hero--plain .prop-hero-text{padding:64px 20px 48px}}

/* Cards without an official image */
.idx-ph{aspect-ratio:4/3;background:var(--bg-footer);display:flex;align-items:flex-end;padding:20px;margin-bottom:16px}
.idx-ph span{font-family:var(--font-display);font-size:24px;line-height:1.1;color:var(--text-light)}
.idx-select{max-width:240px}

/* Clean hero: the photo is shown as-is, title sits on an ivory band below (no wash over the image) */
.res-hero{position:relative;margin-top:72px;height:min(78vh,820px);min-height:380px;overflow:hidden;background:var(--bg-secondary)}
.res-hero img{width:100%;height:100%;object-fit:cover;display:block}
.res-hero-note{position:absolute;right:16px;bottom:12px;font-family:var(--font-label);font-size:11px;letter-spacing:0.06em;color:var(--text-light);text-shadow:0 1px 6px rgba(0,0,0,0.45)}
.res-titleband{padding:48px 0 40px;background:var(--bg-primary)}
.res-titleband .res-kicker{color:var(--text-secondary)}
.res-titleband--plain{background:var(--bg-secondary);padding:calc(72px + 72px) 0 56px}
@media(max-width:768px){.res-hero{margin-top:60px;height:56vh;min-height:280px}.res-titleband{padding:32px 0 28px}.res-titleband .container{padding:0 20px}.res-titleband--plain{padding:calc(60px + 48px) 0 40px}}

/* Brand CTAs: uppercase bronze links with underline, no boxed buttons (brand/BRAND.md) */
.res-btn{border:0;padding:4px 0;border-bottom:1px solid transparent;color:var(--accent-highlight);background:none}
.res-btn:hover{background:none;color:var(--accent-highlight);border-bottom-color:var(--accent-highlight)}
.res-btn::after{content:' \2192';display:inline-block;margin-left:8px;transition:transform 300ms ease}
.res-btn:hover::after{transform:translateX(4px)}
.res-actions{gap:20px 40px}
/* LHG's view label */
.res-view{margin:12px 0 10px;color:var(--accent)}

/* ---------- Motion layer (LHG): calm, expo-out reveals; content visible without JS ---------- */
:root{--e-out:cubic-bezier(0.16,1,0.3,1);--d-languid:700ms;--d-slow:480ms}
.js-motion [data-rv]{opacity:0;transition:opacity var(--d-languid) var(--e-out),transform var(--d-languid) var(--e-out),filter var(--d-languid) var(--e-out);transition-delay:var(--d,0ms);will-change:opacity,transform}
.js-motion [data-rv="up"]{transform:translateY(14px)}
.js-motion [data-rv="scale"]{transform:scale(1.02)}
.js-motion [data-rv="blur"]{transform:translateY(10px)}
.js-motion [data-rv].in{opacity:1;transform:none;filter:none}
/* bronze hairline drawn under section labels */
[data-line]::after{content:"";display:block;width:40px;height:1px;background:var(--accent);margin-top:12px;transform-origin:0 50%}
.js-motion [data-line]::after{transform:scaleX(0);transition:transform var(--d-languid) var(--e-out) 250ms}
.js-motion [data-line].in::after{transform:scaleX(1)}
/* slow settle on the header photo */
@keyframes lhgSettle{from{transform:scale(1.035)}to{transform:scale(1)}}
.js-motion .res-hero img{animation:lhgSettle 6s var(--e-out) both}
/* framed hover on cards and gallery */
.idx-card,.related-card{overflow:hidden}
.idx-card img,.related-card img,.res-gallery img{transition:transform 1.4s var(--e-out)}
.idx-card:hover img,.related-card:hover img,.res-gallery figure:hover img{transform:scale(1.04)}
.res-gallery figure{overflow:hidden}
@media (prefers-reduced-motion:reduce){.js-motion [data-rv]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.js-motion .res-hero img{animation:none}.js-motion [data-line]::after{transform:none}.idx-card img,.related-card img,.res-gallery img{transition:none}}
/* title band plays on load (never waits for scroll) */
@keyframes lhgRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js-motion [data-rl]{animation:lhgRise var(--d-languid) var(--e-out) both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.js-motion [data-rl]{animation:none}}

/* compact legal note at the foot of each residence page (RERA number + disclaimer) */
.res-legal{padding:32px 0 40px;border-top:1px solid var(--border, rgba(0,0,0,.08))}
.res-legal p{font-family:var(--font-body);font-size:12px;line-height:1.7;color:var(--text-tertiary);max-width:90ch}
.res-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* hero keeps the image's own shape: no heavy crop-zoom on phones, no upscaling of smaller renders on large screens */
@media(max-width:768px){.res-hero{height:auto;min-height:0;aspect-ratio:var(--ar,16/9);max-height:70vh}}
@media(min-width:769px){.res-hero--contained{height:auto;min-height:0;aspect-ratio:var(--ar,16/9);max-height:min(78vh,820px);max-width:min(100%,var(--maxw));margin-left:auto;margin-right:auto}}

/* Built by: the main contractor(s), set under Key features */
.res-built{margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}
.res-built .label-small{margin-bottom:14px}
.res-built-name{font-family:var(--font-display);font-size:26px;line-height:1.15;color:var(--text-primary);margin:0}
.res-built-name+.res-built-role{margin-top:4px}
.res-built-role{font-family:var(--font-label);font-size:13px;letter-spacing:.02em;color:var(--text-secondary);margin:0 0 16px}

/* filtered-out cards must disappear (display:block above would otherwise override the hidden attribute) */
.idx-card[hidden]{display:none!important}