/* ===========================================================================
   Lotus 1145 Phase 2 — bespoke off-plan landing page.
   Built on the site's existing tokens/utility classes; only genuinely new
   components (photo hero split, gallery + lightbox, fact/amenity/KPI grids)
   get their own rules here, prefixed .lp- to stay out of the shared sheet.
   =========================================================================== */

/* site.css only defines .mt-6/.mt-8/.mt-9 — fill in the rest of the scale */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }

/* ---------- Hero (photo, asymmetric split) ---------- */
.lp-hero { position: relative; background: var(--sand-900); min-height: clamp(540px, 82vh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.lp-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hero-bg-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,17,11,0.85) 0%, rgba(23,17,11,0.58) 45%, rgba(23,17,11,0.22) 100%), linear-gradient(0deg, rgba(23,17,11,0.35), rgba(23,17,11,0) 40%); }
.lp-hero-inner { position: relative; z-index: 2; max-width: var(--container-wide); margin: 0 auto; width: 100%; padding: clamp(3rem,7vw,6rem) var(--gutter) clamp(3.5rem,7vw,5rem); display: flex; flex-wrap: wrap; gap: var(--space-9); align-items: flex-end; }
.lp-hero-main { flex: 1 1 480px; color: var(--white); }
.lp-hero-main .crumbs { color: rgba(251,248,243,0.72); }
.lp-hero-main .crumbs a { color: rgba(251,248,243,0.85); }
.lp-hero-main h1 { color: var(--white); margin: var(--space-3) 0 var(--space-4); text-shadow: 0 2px 24px rgba(23,17,11,0.4); }
.lp-hero-main .lead { color: rgba(251,248,243,0.88); max-width: 54ch; margin-bottom: var(--space-6); }
.lp-hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin-bottom: var(--space-6); }
.lp-hero-stats .lp-stat-label { font-family: var(--font-roman); font-size: var(--text-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--terracotta-300); margin-bottom: 4px; }
.lp-hero-stats .lp-stat-value { font-family: var(--font-display); font-size: var(--text-display-sm); color: var(--white); }
.lp-hero-loc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); color: rgba(251,248,243,0.82); font-size: var(--text-sm); }
.lp-hero-loc span { display: inline-flex; align-items: center; gap: 7px; }
.lp-hero-loc [data-lucide] { width: 15px; height: 15px; color: var(--terracotta-300); }

.lp-hero-card { flex: 0 1 380px; background: rgba(251,248,243,0.97); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xl); }
.lp-hero-card h3 { font-family: var(--font-display); font-size: var(--text-display-sm); color: var(--text-strong); margin: var(--space-1) 0 var(--space-2); }
.lp-hero-card p { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-5); }
.lp-hero-card .btn { width: 100%; margin-bottom: var(--space-3); }
.lp-hero-card-note { display: flex; align-items: center; gap: 8px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-hair); font-size: var(--text-xs); color: var(--text-muted); }
.lp-hero-card-note [data-lucide] { width: 15px; height: 15px; color: var(--olive-500); flex: none; }

/* ---------- Gallery ---------- */
.lp-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 10px; }
.lp-gallery-grid button { border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); position: relative; }
.lp-gallery-grid button img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.lp-gallery-grid button:hover img { transform: scale(1.05); }
.lp-g-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 720px) {
  .lp-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .lp-g-big { grid-column: span 2; grid-row: span 1; }
}

.lp-lightbox { position: fixed; inset: 0; z-index: 600; background: rgba(23,17,11,0.94); display: none; flex-direction: column; }
.lp-lightbox.open { display: flex; }
.lp-lightbox-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; color: #fff; }
.lp-lightbox-head span { font-family: var(--font-roman); font-size: var(--text-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--brass-300); }
.lp-lightbox-close { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.1); border: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lp-lightbox-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px; min-height: 0; }
.lp-lightbox-body img { max-width: min(1100px, 82vw); max-height: 74vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.lp-lightbox-nav { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ---------- Quick facts / KPI grids ----------
   Fixed column counts (not auto-fit) so a partial last row never leaves the
   container's own background showing through as an empty tile — 8 facts,
   6 KPIs and 4 investment cards all divide evenly at every breakpoint. */
.lp-facts-grid, .lp-kpi-grid, .lp-invest-grid { display: grid; gap: 1px; background: var(--border-hair); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); overflow: hidden; }
.lp-facts-grid { grid-template-columns: repeat(4, 1fr); } /* 8 facts */
.lp-kpi-grid { grid-template-columns: repeat(3, 1fr); } /* 6 KPIs */
.lp-invest-grid { grid-template-columns: repeat(2, 1fr); } /* 4 cards */
@media (max-width: 860px) {
  .lp-facts-grid, .lp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .lp-facts-grid, .lp-kpi-grid, .lp-invest-grid { grid-template-columns: 1fr; }
}
.lp-facts-grid .lp-fact { background: var(--surface-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.lp-fact-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-deep); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lp-fact-icon [data-lucide] { width: 19px; height: 19px; stroke-width: 1.7; }
.lp-fact-label { font-family: var(--font-roman); font-size: var(--text-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.lp-fact-value { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-strong); line-height: 1.15; }

.lp-kpi-grid { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }
.lp-kpi-grid .lp-fact { background: var(--surface-inverse); }
.lp-kpi-grid .lp-fact-icon { background: rgba(255,255,255,0.08); color: var(--brass-300); }
.lp-kpi-grid .lp-fact-value { color: #fff; }
.lp-kpi-grid .lp-fact-label { color: rgba(251,248,243,0.66); }

/* ---------- Amenities ---------- */
.lp-amenity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lp-amenity { background: var(--surface-card); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.lp-amenity:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-amenity h4 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 4px; }
.lp-amenity p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ---------- Investment ---------- */
.lp-invest-grid .lp-invest-card { background: var(--surface-card); padding: 26px 24px; }
.lp-invest-card .lp-fact-value { font-size: var(--text-display-sm); margin: 14px 0 6px; }

/* ---------- Location ---------- */
.lp-landmark-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.lp-landmark { display: flex; align-items: center; gap: 14px; background: var(--surface-card); border: 1px solid var(--border-hair); border-radius: var(--radius-md); padding: 14px 16px; }
.lp-landmark-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; }
.lp-landmark-icon [data-lucide] { width: 18px; height: 18px; color: var(--brand); stroke-width: 1.6; }
.lp-landmark-name { font-size: var(--text-md); font-weight: 600; color: var(--text-strong); }
.lp-landmark-dist { font-family: var(--font-display); font-size: var(--text-md); color: var(--text-strong); text-align: right; white-space: nowrap; }

/* ---------- Developer ---------- */
.lp-dev-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lp-dev-stats .tile { padding: var(--space-5); }

/* ---------- Sticky columns ---------- */
.lp-sticky { position: sticky; top: 100px; }

/* ---------- Two-column splits (with a real mobile breakpoint — inline
   grid-template-columns can't be overridden by a media query, so these
   sections use classes instead of ad-hoc inline grid styles) ---------- */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.lp-split-tight { grid-template-columns: 1.1fr 1fr; }
.lp-split-wide-r { grid-template-columns: 1fr 1.2fr; align-items: flex-start; }
.lp-split-form { grid-template-columns: 1fr 1.3fr; align-items: flex-start; }
@media (max-width: 900px) {
  .lp-split, .lp-split-tight, .lp-split-wide-r, .lp-split-form { grid-template-columns: 1fr; }
}

/* ---------- Mobile sticky CTA ---------- */
.lp-mobile-cta { display: none; }
@media (max-width: 720px) {
  .lp-mobile-cta {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(251,248,243,0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--border-hair);
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(36,28,20,0.1);
  }
  .lp-mobile-cta .btn { flex: 1; padding: 0.85rem 1rem; }
  body { padding-bottom: 74px; }
}

@media (max-width: 900px) {
  .lp-hero-inner { align-items: flex-start; }
  .lp-hero-card { flex-basis: 100%; }
}

/* ---------- WhatsApp glyph (Lucide has no brand icon) ---------- */
.lp-wa-icon { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ---------- Enquiry popup ---------- */
.lp-modal { position: fixed; inset: 0; z-index: 650; display: none; align-items: center; justify-content: center; padding: 20px; }
.lp-modal.open { display: flex; }
.lp-modal-backdrop { position: absolute; inset: 0; background: rgba(23,17,11,0.6); backdrop-filter: blur(2px); }
.lp-modal-card { position: relative; z-index: 2; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: clamp(24px, 4vw, 36px); }
.lp-modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 0; color: var(--text-strong); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lp-modal-card h3 { font-family: var(--font-display); font-size: var(--text-display-sm); color: var(--text-strong); margin: 0 0 6px; padding-right: 40px; }
.lp-modal-card > p { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-5); }
.lp-modal-success { text-align: center; padding: 20px 4px; }
.lp-modal-success-icon { display: inline-flex; width: 60px; height: 60px; border-radius: 999px; background: var(--success-soft); color: var(--success); align-items: center; justify-content: center; margin-bottom: 16px; }
.lp-modal-success h3 { padding-right: 0; }
.lp-form-error { font-size: var(--text-sm); color: var(--danger); margin: 0 0 var(--space-4); }