/* ============================================================
   GramProfile — Project, Business & Ads CSS
   /realestate/css/re_project.css
   ============================================================ */

/* ============================================================
   PAGE HERO (Projects / Businesses)
   ============================================================ */
.page-hero { text-align:center; padding:48px 20px 36px; }
.page-hero-eyebrow { display:inline-block; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--c-sand); background:rgba(200,146,74,.1); padding:4px 14px; border-radius:20px; border:1px solid rgba(200,146,74,.2); margin-bottom:16px; }
.page-hero-title { font-family:var(--font-display); font-size:clamp(28px,5vw,44px); letter-spacing:-.02em; margin-bottom:10px; }
.page-hero-sub { font-size:15px; color:var(--text-secondary); max-width:540px; margin:0 auto; }

/* ============================================================
   LANGUAGE SWITCH (in nav)
   ============================================================ */
.lang-switch { display:flex; border:1px solid var(--border-medium); border-radius:6px; overflow:hidden; }
.lang-btn { padding:5px 11px; font-size:12px; font-weight:500; text-decoration:none; color:var(--text-secondary); background:transparent; border:none; cursor:pointer; transition:.15s; }
.lang-btn.active { background:var(--c-forest); color:#fff; }
.lang-btn:hover:not(.active) { background:var(--bg-secondary); }

/* ============================================================
   CSS 3D BUILDING ANIMATION
   ============================================================ */
.proj-hero { display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:center; padding:40px 0 36px; margin-bottom:8px; }
@media(max-width:700px) { .proj-hero { grid-template-columns:1fr; } }

.proj-hero-content { }
.proj-status-badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:14px; }
.proj-status-active  { background:rgba(27,107,74,.1); color:var(--c-forest); border:1px solid rgba(27,107,74,.2); }
.proj-status-upcoming{ background:rgba(83,74,183,.1); color:#534AB7; border:1px solid rgba(83,74,183,.2); }
.proj-status-soldout { background:rgba(184,92,56,.1); color:var(--c-terracotta); border:1px solid rgba(184,92,56,.2); }
.proj-title { font-family:var(--font-display); font-size:clamp(26px,4vw,40px); letter-spacing:-.02em; margin-bottom:10px; line-height:1.2; }
.proj-tagline { font-size:16px; color:var(--text-secondary); margin-bottom:18px; }
.proj-meta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--text-secondary); }
.proj-meta-dot { color:var(--text-hint); }

/* 3D Scene */
.proj-3d-wrap { perspective:600px; display:flex; align-items:flex-end; justify-content:center; height:200px; }
.building-scene { transform-style:preserve-3d; transform:rotateX(12deg) rotateY(-18deg); position:relative; width:220px; height:160px; }

.building { position:absolute; transform-style:preserve-3d; bottom:20px; }
.b1 { width:60px; height:100px; left:30px; animation:buildRise 1.2s cubic-bezier(.34,1.56,.64,1) both; }
.b2 { width:50px; height:70px;  left:105px; animation:buildRise 1.4s cubic-bezier(.34,1.56,.64,1) .1s both; }
.b3 { width:70px; height:120px; left:165px; animation:buildRise 1.6s cubic-bezier(.34,1.56,.64,1) .2s both; }

@keyframes buildRise { from { transform:scaleY(0); transform-origin:bottom; } to { transform:scaleY(1); } }

.bface { position:absolute; }
.btop   { width:100%; height:14px; background:var(--c-sage); top:-14px; left:0; transform:rotateX(90deg); transform-origin:bottom; }
.bfront { width:100%; height:100%; background:var(--bg-card); border:1px solid var(--border-medium); top:0; left:0; }
.bright { width:14px; height:100%; background:var(--bg-secondary); top:0; right:-14px; transform:rotateY(-90deg); transform-origin:left; border:1px solid var(--border-medium); }

.bwindows { position:absolute; top:10px; left:8px; right:8px; bottom:8px; display:grid; grid-template-columns:1fr 1fr; gap:5px; z-index:1; }
.bwin { background:rgba(200,230,255,.4); border-radius:2px; animation:winLight 3s ease-in-out infinite; }
.bwin:nth-child(odd)  { animation-delay:.5s; }
.bwin:nth-child(3n)   { animation-delay:1s; }
@keyframes winLight { 0%,100%{opacity:.4} 50%{opacity:.85} }

.building-road { position:absolute; bottom:0; left:0; right:0; height:20px; background:var(--bg-tertiary); border-top:2px solid var(--border-medium); }
.building-trees { position:absolute; bottom:18px; display:flex; gap:8px; left:8px; }
.btree { width:12px; height:22px; background:var(--c-forest); clip-path:polygon(50% 0%, 0% 100%, 100% 100%); opacity:.7; }

/* Mini 3D for project list card */
.proj-mini-3d { height:100%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:20px; background:var(--bg-secondary); perspective:400px; }
.mini-scene { transform-style:preserve-3d; transform:rotateX(10deg) rotateY(-20deg); display:flex; gap:10px; align-items:flex-end; }
.mb { transform-style:preserve-3d; position:relative; }
.mb.b1 { width:40px; height:70px; }
.mb.b2 { width:34px; height:50px; }
.mf { position:absolute; }
.mtop   { width:100%; height:10px; background:var(--c-sage); top:-10px; left:0; transform:rotateX(90deg); transform-origin:bottom; opacity:.8; }
.mfront { width:100%; height:100%; background:var(--bg-card); border:1px solid var(--border-medium); }
.mright { width:10px; height:100%; background:var(--bg-secondary); top:0; right:-10px; transform:rotateY(-90deg); transform-origin:left; border:1px solid var(--border-medium); }

/* ============================================================
   PROJECT LAYOUT
   ============================================================ */
.proj-layout { display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; margin-top:8px; }
@media(max-width:860px) { .proj-layout { grid-template-columns:1fr; } }

.proj-section { background:var(--bg-card); border-radius:var(--radius-xl); border:1px solid var(--border-soft); padding:24px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.proj-section-title { font-family:var(--font-display); font-size:20px; letter-spacing:-.01em; margin-bottom:18px; }
.proj-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.proj-section-header .proj-section-title { margin-bottom:0; }
.proj-desc { font-size:14px; line-height:1.8; color:var(--text-secondary); }

/* Progress Stages */
.progress-stages { display:flex; gap:0; margin-bottom:14px; overflow-x:auto; }
.progress-stage { display:flex; flex-direction:column; align-items:center; flex:1; min-width:70px; }
.ps-dot { width:14px; height:14px; border-radius:50%; background:var(--border-medium); border:2px solid var(--border-medium); position:relative; z-index:1; transition:.3s; }
.ps-label { font-size:11px; color:var(--text-hint); margin-top:5px; text-align:center; }
.progress-stage.done .ps-dot    { background:var(--c-forest); border-color:var(--c-forest); }
.progress-stage.done .ps-label  { color:var(--c-forest); }
.progress-stage.current .ps-dot { background:var(--c-sage); border-color:var(--c-forest); box-shadow:0 0 0 3px rgba(27,107,74,.15); }
.progress-stage.current .ps-label { color:var(--c-forest); font-weight:600; }
.progress-stage:not(:last-child)::after { content:''; flex:1; height:2px; background:var(--border-soft); position:absolute; margin-top:6px; }

.progress-bar-wrap { height:8px; background:var(--bg-secondary); border-radius:8px; overflow:hidden; position:relative; margin-top:6px; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg, var(--c-forest), var(--c-mint)); border-radius:8px; transition:width 1s cubic-bezier(.34,1.56,.64,1); }
.progress-pct { position:absolute; right:0; top:-18px; font-size:11px; font-weight:600; color:var(--c-forest); }

/* Plot Map */
.plot-map-wrap { position:relative; }
.plot-legend { display:flex; gap:12px; flex-wrap:wrap; }
.plot-leg-item { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-secondary); }
.plot-leg-dot  { width:10px; height:10px; border-radius:3px; }

.compass-wrap { position:absolute; top:12px; right:16px; width:40px; height:40px; z-index:10; }
.compass-n { position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--c-terracotta); }
.compass-arrow { width:2px; height:30px; background:linear-gradient(var(--c-terracotta) 50%, var(--text-hint) 50%); margin:10px auto 0; border-radius:2px; }

.plot-cell { transition:opacity .15s; }
.plot-cell:hover rect { opacity:.85 !important; }

/* Plot Popup */
.plot-popup { position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:20; width:min(300px,90vw); }
.plot-popup-inner { background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border-medium); box-shadow:var(--shadow-lg); overflow:hidden; }
.plot-popup-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--bg-secondary); border-bottom:1px solid var(--border-soft); }
.plot-popup-title { font-family:var(--font-display); font-size:16px; }
.plot-popup-close { background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); padding:0; }
.plot-popup-body { padding:12px 16px; }
.plot-popup-enq  { padding:0 16px 14px; }
.pp-row { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-bottom:1px solid var(--border-soft); }
.pp-row:last-child { border-bottom:none; }
.pp-row span { color:var(--text-muted); }
.pp-row strong { font-weight:500; }
.corner-badge { color:var(--c-sand) !important; font-weight:600; justify-content:center !important; }
.status-available { color:var(--c-forest); }
.status-booked    { color:var(--c-sand); }
.status-sold      { color:var(--c-terracotta); }

/* Amenities */
.amenities-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.amenity-item { display:flex; align-items:center; gap:8px; font-size:13px; padding:8px 12px; background:var(--bg-secondary); border-radius:var(--radius-md); color:var(--text-secondary); }
.amenity-dot { color:var(--c-forest); font-weight:700; flex-shrink:0; }

/* Landmarks */
.landmarks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.landmark-item { display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--bg-secondary); border-radius:var(--radius-md); }
.lm-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border-radius:8px; flex-shrink:0; }
.lm-name { font-size:13px; font-weight:500; color:var(--text-primary); }
.lm-dist { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Project Gallery */
.proj-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.proj-gallery-img { width:100%; height:110px; object-fit:cover; border-radius:var(--radius-md); cursor:pointer; transition:.15s; }
.proj-gallery-img:hover { opacity:.85; }

/* Sidebar cards */
.proj-stats-card { background:var(--bg-secondary); border-radius:var(--radius-lg); padding:16px; margin-bottom:16px; display:flex; gap:0; }
.proj-stat { flex:1; text-align:center; padding:8px; border-right:1px solid var(--border-soft); }
.proj-stat:last-child { border-right:none; }
.ps-num { font-family:var(--font-display); font-size:20px; letter-spacing:-.01em; }
.ps-lbl { font-size:11px; color:var(--text-muted); margin-top:2px; }

.proj-dev-card { background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border-soft); padding:16px; }
.proj-dev-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-hint); margin-bottom:6px; }
.proj-dev-name  { font-size:15px; font-weight:500; }

/* ============================================================
   PROJECT LIST GRID
   ============================================================ */
.proj-list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.proj-list-card { background:var(--bg-card); border-radius:var(--radius-xl); border:1px solid var(--border-soft); overflow:hidden; box-shadow:var(--shadow-card); transition:.2s; position:relative; }
.proj-list-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.proj-list-featured { border-color:rgba(200,146,74,.4); box-shadow:var(--shadow-card), 0 0 0 2px rgba(200,146,74,.15); }
.proj-list-feat-badge { position:absolute; top:12px; left:12px; background:rgba(200,146,74,.9); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:5px; z-index:2; backdrop-filter:blur(4px); }
.proj-list-img { height:180px; overflow:hidden; position:relative; background:var(--bg-secondary); }
.proj-list-img img { width:100%; height:100%; object-fit:cover; }
.proj-list-status { position:absolute; bottom:8px; right:8px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:5px; backdrop-filter:blur(4px); }
.proj-list-body { padding:16px 18px 20px; }
.proj-list-type { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--c-sage); margin-bottom:5px; }
.proj-list-name { font-family:var(--font-display); font-size:18px; letter-spacing:-.01em; margin-bottom:4px; }
.proj-list-loc  { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
.proj-sold-bar  { height:5px; background:var(--bg-secondary); border-radius:5px; overflow:hidden; margin-bottom:5px; }
.proj-sold-fill { height:100%; background:linear-gradient(90deg,var(--c-forest),var(--c-mint)); border-radius:5px; }
.proj-sold-label { display:flex; justify-content:space-between; font-size:11px; margin-bottom:10px; }
.proj-list-price { font-family:var(--font-display); font-size:18px; color:var(--c-forest); letter-spacing:-.01em; }
.proj-list-cta-card { border:2px dashed var(--border-medium); display:flex; align-items:center; justify-content:center; min-height:280px; }

/* ============================================================
   BUSINESS CARDS
   ============================================================ */
.biz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.biz-card { background:var(--bg-card); border-radius:var(--radius-xl); border:1px solid var(--border-soft); overflow:hidden; box-shadow:var(--shadow-card); transition:.2s; position:relative; }
.biz-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.biz-featured { border-color:rgba(200,146,74,.4); box-shadow:var(--shadow-card), 0 0 0 2px rgba(200,146,74,.15); }
.biz-premium  { border-color:rgba(37,95,165,.2); }

.biz-tier-strip { font-size:11px; font-weight:600; letter-spacing:.05em; padding:5px 14px; text-align:center; }
.biz-tier-featured { background:rgba(200,146,74,.12); color:var(--c-sand); border-bottom:1px solid rgba(200,146,74,.2); }
.biz-tier-premium  { background:rgba(37,95,165,.08); color:#185FA5; border-bottom:1px solid rgba(37,95,165,.15); }

.biz-cover { height:120px; overflow:hidden; background:var(--bg-tertiary); position:relative; display:flex; align-items:center; justify-content:center; }
.biz-cover-img { width:100%; height:100%; object-fit:cover; }
.biz-logo-wrap { position:absolute; bottom:-18px; left:16px; }
.biz-logo { width:44px; height:44px; border-radius:10px; border:2px solid var(--bg-card); object-fit:cover; background:var(--bg-card); }
.biz-cover-placeholder { background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary)); }
.biz-placeholder-icon { font-family:var(--font-display); font-size:36px; color:var(--text-hint); }

.biz-card-body { padding:16px 16px 18px; }
.biz-cat-badge { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--c-sage); margin-bottom:6px; }
.biz-name     { font-family:var(--font-display); font-size:17px; margin-bottom:4px; letter-spacing:-.01em; }
.biz-tagline  { font-size:12.5px; color:var(--text-muted); margin-bottom:8px; line-height:1.5; }
.biz-exp      { font-size:11.5px; color:var(--c-sand); font-weight:500; margin-bottom:8px; }
.biz-services { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.biz-service-tag { font-size:11px; padding:2px 9px; border-radius:20px; background:var(--bg-secondary); color:var(--text-muted); border:1px solid var(--border-soft); }
.biz-actions  { display:flex; gap:7px; flex-wrap:wrap; }
.biz-btn-wa   { padding:7px 14px; background:#25D366; color:#fff; border-radius:var(--radius-md); font-size:12px; font-weight:500; text-decoration:none; transition:.15s; }
.biz-btn-wa:hover { background:#20b858; }
.biz-btn-call { padding:7px 14px; background:var(--bg-secondary); color:var(--text-primary); border-radius:var(--radius-md); font-size:12px; font-weight:500; text-decoration:none; border:1px solid var(--border-medium); transition:.15s; }
.biz-btn-call:hover { background:var(--bg-tertiary); }
.biz-btn-view { padding:7px 14px; background:var(--c-forest); color:#fff; border-radius:var(--radius-md); font-size:12px; font-weight:500; text-decoration:none; transition:.15s; margin-left:auto; }
.biz-btn-view:hover { background:var(--c-sage); }
.biz-btn-primary { padding:9px 18px; background:var(--c-forest); color:#fff; border-radius:var(--radius-md); font-size:13px; font-weight:500; text-decoration:none; display:inline-block; transition:.15s; }
.biz-btn-primary:hover { background:var(--c-sage); }
.biz-advertise-cta { border:2px dashed var(--border-medium); }

/* Native Ad Card */
.native-ad-card { border-style:solid; }
.native-ad-badge { position:absolute; top:8px; right:8px; font-size:10px; background:rgba(0,0,0,.5); color:rgba(255,255,255,.8); padding:2px 7px; border-radius:4px; }

/* ============================================================
   AD BANNER TOP
   ============================================================ */
.ad-banner-top { border-radius:var(--radius-lg); margin-bottom:24px; overflow:hidden; }
.ad-banner-inner { display:flex; align-items:center; gap:16px; padding:16px 20px; flex-wrap:wrap; }
.ad-banner-badge { font-size:10px; font-weight:600; letter-spacing:.06em; opacity:.7; text-transform:uppercase; flex-shrink:0; }
.ad-banner-text { flex:1; min-width:160px; }
.ad-banner-title { font-family:var(--font-display); font-size:18px; line-height:1.2; }
.ad-banner-sub   { font-size:12px; opacity:.8; margin-top:2px; }
.ad-banner-cta   { padding:9px 20px; border:2px solid currentColor; border-radius:var(--radius-md); font-size:13px; font-weight:500; text-decoration:none; color:inherit; white-space:nowrap; transition:.15s; }
.ad-banner-cta:hover { opacity:.85; }