/* =========================================================
   PROJECT DETAIL PAGE — Master Plot Page template
   Loads AFTER playful-geometric.css and site.css
   ========================================================= */

/* ---- Project Hero Banner ---- */
.proj-hero{
  position:relative; padding:70px 0; color:#fff; overflow:hidden;
  background-image: linear-gradient(rgba(8,20,15,.6), rgba(8,20,15,.72)), url('../images/projects/sun-square-city-4-hero.jpg');
  background-size:cover; background-position:center;
  border-bottom:var(--pg-border-width) solid var(--pg-fg);
}
.proj-hero-tag{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); border:2px solid #fff;
  border-radius:var(--pg-radius-full); padding:7px 16px; font-family:var(--pg-font-heading); font-weight:700; font-size:12.5px;
  letter-spacing:.06em; margin-bottom:18px;
}
.proj-hero h1{ color:#fff; font-size:40px; margin-bottom:10px; }
.proj-hero .subtitle{ font-size:16px; opacity:.9; margin-bottom:22px; max-width:560px; }
.proj-hero-facts{ display:flex; gap:26px; flex-wrap:wrap; margin-bottom:28px; }
.proj-hero-fact{ font-size:14px; }
.proj-hero-fact strong{ display:block; font-family:var(--pg-font-heading); font-size:19px; color:var(--pg-tertiary); }
.proj-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- Quick Highlights ---- */
.proj-highlights-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; position:relative; z-index:1; }
@media (max-width:900px){ .proj-highlights-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .proj-highlights-grid{ grid-template-columns:repeat(2,1fr); } }
.proj-highlight{
  background:#fff; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-md);
  padding:20px 12px; text-align:center; box-shadow:4px 4px 0px 0px var(--pg-border);
}
.proj-highlight .ic{ font-size:30px; margin-bottom:8px; }
.proj-highlight .lbl{ font-size:12.5px; font-weight:700; color:var(--pg-fg); }

/* ---- Location & Connectivity ---- */
.proj-location-grid{ display:flex; gap:36px; flex-wrap:wrap; align-items:flex-start; position:relative; z-index:1; }
.proj-location-map{ flex:1 1 380px; }
.proj-location-map .map-placeholder{
  width:100%; aspect-ratio:4/3; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-lg);
  background:repeating-linear-gradient(135deg, var(--pg-muted), var(--pg-muted) 10px, #fff 10px, #fff 20px);
  display:flex; align-items:center; justify-content:center; font-size:40px;
}
.proj-location-table{ flex:1 1 380px; }
.proj-location-table table{ width:100%; border-collapse:collapse; background:#fff; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-md); overflow:hidden; }
.proj-location-table th, .proj-location-table td{ padding:13px 16px; text-align:left; font-size:14px; border-bottom:1px solid var(--pg-border); }
.proj-location-table th{ background:var(--pg-fg); color:#fff; font-family:var(--pg-font-heading); font-size:12.5px; text-transform:uppercase; }
.proj-location-table tr:last-child td{ border-bottom:none; }

/* ---- Master Layout Plan ---- */
.proj-layout-wrap{ position:relative; z-index:1; }
.proj-layout-img{
  width:100%; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-lg);
  box-shadow:8px 8px 0px 0px var(--pg-tertiary);
}
.proj-layout-placeholder{
  width:100%; aspect-ratio:16/9; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-lg);
  background:repeating-linear-gradient(135deg, var(--pg-muted), var(--pg-muted) 10px, #fff 10px, #fff 20px);
  display:flex; align-items:center; justify-content:center; font-size:48px;
  box-shadow:8px 8px 0px 0px var(--pg-tertiary);
}
.proj-layout-legend{ display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; justify-content:center; }
.proj-layout-legend span{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.proj-layout-legend i{ width:14px; height:14px; border-radius:4px; border:2px solid var(--pg-fg); display:inline-block; }

/* ---- Plot Inventory (square boxes) ---- */
.proj-plots-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; z-index:1; }
@media (max-width:1000px){ .proj-plots-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .proj-plots-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .proj-plots-grid{ grid-template-columns:1fr; } }
.proj-plot-box{
  aspect-ratio:1/1; background:#fff; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-lg);
  box-shadow:6px 6px 0px 0px var(--pg-border); padding:20px; display:flex; flex-direction:column;
  transition: transform .3s var(--pg-bounce), box-shadow .3s var(--pg-bounce);
}
.proj-plot-box:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0px 0px var(--pg-accent); }
.proj-plot-box .size{ font-family:var(--pg-font-heading); font-weight:800; font-size:22px; }
.proj-plot-box .sqft{ font-size:12px; color:var(--pg-muted-fg); margin-bottom:8px; }
.proj-plot-box .price{ font-family:var(--pg-font-heading); font-weight:800; font-size:18px; color:var(--pg-accent); margin-bottom:10px; }
.proj-plot-box ul{ font-size:12px; flex:1; }
.proj-plot-box ul li{ margin-bottom:5px; display:flex; gap:6px; }
.proj-plot-box ul li::before{ content:"✓"; color:var(--pg-quaternary); font-weight:800; flex-shrink:0; }
.proj-plot-box .pg-btn{ margin-top:10px; padding:9px 14px; font-size:12.5px; width:100%; justify-content:center; }

/* ---- Amenities ---- */
.proj-amenities-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; z-index:1; }
@media (max-width:800px){ .proj-amenities-grid{ grid-template-columns:repeat(2,1fr); } }
.proj-amenity{
  background:#fff; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-md);
  padding:16px; text-align:center; font-size:13px; font-weight:700; box-shadow:3px 3px 0px 0px var(--pg-border);
}
.proj-amenity .ic{ font-size:26px; display:block; margin-bottom:6px; }

/* ---- Price & Payment Plan ---- */
.proj-price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:1; }
@media (max-width:800px){ .proj-price-grid{ grid-template-columns:1fr; } }
.proj-price-card{ background:#fff; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-md); padding:22px; box-shadow:5px 5px 0px 0px var(--pg-border); }
.proj-price-card h4{ font-family:var(--pg-font-heading); font-size:15px; margin-bottom:10px; }
.proj-price-card ul{ font-size:13.5px; }
.proj-price-card ul li{ margin-bottom:8px; display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--pg-border); padding-bottom:8px; }

/* ---- Gallery ---- */
.proj-gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; z-index:1; }
@media (max-width:800px){ .proj-gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.proj-gallery-item{
  aspect-ratio:1/1; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-md);
  background:repeating-linear-gradient(135deg, var(--pg-muted), var(--pg-muted) 10px, #fff 10px, #fff 20px);
  display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden;
}
.proj-gallery-item img{ width:100%; height:100%; object-fit:cover; }

/* ---- Why Invest ---- */
.proj-invest-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; z-index:1; }
@media (max-width:900px){ .proj-invest-grid{ grid-template-columns:repeat(2,1fr); } }
.proj-invest-card{ background:#fff; border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-md); padding:18px; text-align:center; box-shadow:4px 4px 0px 0px var(--pg-quaternary); font-size:13px; font-weight:700; }
.proj-invest-card .ic{ font-size:26px; display:block; margin-bottom:8px; }

/* ---- Construction Progress ---- */
.proj-progress-bar{ background:var(--pg-muted); border:var(--pg-border-width) solid var(--pg-fg); border-radius:var(--pg-radius-full); height:34px; overflow:hidden; position:relative; margin-bottom:10px; }
.proj-progress-fill{ background:var(--pg-accent); height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:14px; color:#fff; font-weight:800; font-size:13px; font-family:var(--pg-font-heading); }

/* ---- Breadcrumb ---- */
.proj-breadcrumb{ font-size:13px; padding:14px 0; color:var(--pg-muted-fg); }
.proj-breadcrumb a{ color:var(--pg-accent); text-decoration:none; font-weight:600; }