/* ==========================================================================
   PropertyBazaar — project page  (v1.46, Sprint 48)
   Scoped to .pb-proj, tokens --pbj-*. Sixth carve-out from main.css.
   ========================================================================== */


/* ============================================================
   PropertyBazaar — project page
   Same tokens as the homepage, category and property mockups.

   This is NOT a larger property page. A property page answers
   "should I trust this unit". A project page answers "which
   configuration do I want", so the configuration table is the
   centre of gravity and everything else supports it.
   ============================================================ */
:root{
  --pbj-teal:#1F6B6B; --pbj-teal-dk:#155252; --pbj-teal-tint:#EAF2F2;
  --pbj-orange:#E8873C; --pbj-orange-dk:#C26A25; --pbj-orange-tint:#FDF0E5;
  --pbj-ink:#0E1F26; --pbj-ink-2:#2B3F47; --pbj-gray:#5F6B70; --pbj-gray-2:#8B979C;
  --pbj-line:#E2E7E8; --pbj-line-2:#EFF3F3; --pbj-ground:#F6F8F8; --pbj-white:#fff;
  --pbj-green:#1F7A5C; --pbj-green-tint:#E7F4EE; --pbj-red:#B4472E; --pbj-amber:#B26A00; --pbj-amber-tint:#FBF3E4;
  --pbj-shadow-lg:0 12px 32px rgba(14,31,38,.10);
  --pbj-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.pb-proj *{box-sizing:border-box}
.pb-proj body{margin:0;background:var(--pbj-ground);color:var(--pbj-ink);font-family:var(--pbj-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.pb-proj img{display:block;max-width:100%}
.pb-proj button{font-family:inherit;cursor:pointer}
.pb-proj a{color:var(--pbj-teal);text-decoration:none}
.pb-proj .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pb-proj .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.pb-proj svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.pb-proj .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:9px;border:1.5px solid transparent;font-size:13.5px;font-weight:700;line-height:1;transition:.15s}
.pb-proj .btn--sm{padding:8px 12px;font-size:12.5px}
.pb-proj .btn--lg{padding:14px 20px;font-size:14.5px;width:100%}
.pb-proj .btn--teal{background:var(--pbj-teal);color:#fff}
.pb-proj .btn--teal:hover{background:var(--pbj-teal-dk);color:#fff}
.pb-proj .btn--orange{background:var(--pbj-orange);color:#fff}
.pb-proj .btn--out{border-color:var(--pbj-teal);color:var(--pbj-teal)}
.pb-proj .btn--out:hover{background:var(--pbj-teal);color:#fff}
.pb-proj .btn--ghost{border-color:var(--pbj-line);color:var(--pbj-gray);background:var(--pbj-white)}
.pb-proj .btn--ghost:hover{border-color:var(--pbj-teal);color:var(--pbj-teal)}
.pb-proj .btn--wa{background:#128C7E;color:#fff}

.pb-proj .crumbs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--pbj-gray-2);padding:16px 0 12px;flex-wrap:wrap}
.pb-proj .crumbs a{color:var(--pbj-gray)}

.pb-proj /* ---- gallery ---- */
.gal{display:grid;grid-template-columns:2fr 1fr;gap:8px;border-radius:16px;overflow:hidden;position:relative}
.pb-proj .gal__main{position:relative}
.pb-proj .gal__main img{width:100%;height:420px;object-fit:cover}
.pb-proj .gal__side{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.pb-proj .gal__side img{width:100%;height:206px;object-fit:cover}
.pb-proj .gal__more{position:absolute;right:14px;bottom:14px;background:rgba(14,31,38,.84);color:#fff;border:0;border-radius:9px;padding:9px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.pb-proj .gal__tags{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap}
.pb-proj .tag{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:6px 10px;font-size:11.5px;font-weight:800;color:#fff}
.pb-proj .tag--rera{background:rgba(255,255,255,.94);color:var(--pbj-ink)}
.pb-proj .tag--status{background:var(--pbj-amber)}
.pb-proj .tag--verified{background:var(--pbj-green)}

.pb-proj /* ---- layout ---- */
.cols{display:grid;grid-template-columns:1fr 348px;gap:26px;align-items:start;padding:22px 0 60px}
.pb-proj .panel{background:var(--pbj-white);border:1px solid var(--pbj-line);border-radius:16px;padding:24px 26px;margin-bottom:16px}
.pb-proj .panel h2{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.022em}
.pb-proj .panel .sub{margin:0 0 18px;font-size:13.5px;color:var(--pbj-gray)}

.pb-proj /* ---- identity ---- */
.phead h1{margin:0 0 4px;font-size:clamp(22px,2.4vw,29px);font-weight:800;letter-spacing:-.028em}
.pb-proj .byline{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--pbj-gray);margin-bottom:3px}
.pb-proj .byline img{width:30px;height:30px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--pbj-line);padding:2px}
.pb-proj .loc{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--pbj-gray)}
.pb-proj .band{display:flex;align-items:baseline;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.pb-proj .band__p{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pb-proj .band__u{font-size:14px;color:var(--pbj-gray)}
.pb-proj .keys{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--pbj-line-2);border-radius:12px;overflow:hidden;margin-top:20px}
.pb-proj .keys div{padding:14px 16px;border-right:1px solid var(--pbj-line-2)}
.pb-proj .keys div:last-child{border-right:0}
.pb-proj .keys span{display:block;font-size:11px;color:var(--pbj-gray-2);margin-bottom:2px}
.pb-proj .keys b{font-size:15px;font-weight:800}

.pb-proj /* ---- CONFIGURATION TABLE — the centre of the page ---- */
.cfg{width:100%;border-collapse:collapse;font-size:14px}
.pb-proj .cfg thead th{
  text-align:left;padding:0 14px 11px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pbj-gray-2);
  border-bottom:1px solid var(--pbj-line)
}
.pb-proj .cfg tbody tr{border-bottom:1px solid var(--pbj-line-2)}
.pb-proj .cfg tbody tr:last-child{border-bottom:0}
.pb-proj .cfg tbody tr:hover{background:var(--pbj-ground)}
.pb-proj .cfg td{padding:15px 14px;vertical-align:middle}
.pb-proj .cfg .c-type b{display:block;font-size:16px;font-weight:800}
.pb-proj .cfg .c-type span{font-size:12px;color:var(--pbj-gray-2)}
.pb-proj .cfg .c-price b{font-size:16px;font-weight:800}
.pb-proj .cfg .c-price span{display:block;font-size:11.5px;color:var(--pbj-gray)}
.pb-proj .avail{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:800}
.pb-proj .avail--yes{background:var(--pbj-green-tint);color:var(--pbj-green)}
.pb-proj .avail--few{background:var(--pbj-amber-tint);color:var(--pbj-amber)}
.pb-proj .avail--no{background:#F1F3F3;color:var(--pbj-gray-2)}
.pb-proj .cfgnote{margin-top:16px;font-size:12px;color:var(--pbj-gray-2);line-height:1.55}

.pb-proj /* ---- floor plan ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pb-proj .tab{background:var(--pbj-white);border:1.5px solid var(--pbj-line);color:var(--pbj-gray);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;transition:.15s}
.pb-proj .tab:hover{border-color:var(--pbj-teal);color:var(--pbj-teal)}
.pb-proj .tab.on{background:var(--pbj-ink);border-color:var(--pbj-ink);color:#fff}
.pb-proj .plan{display:none;grid-template-columns:1.3fr 1fr;gap:22px;align-items:center}
.pb-proj .plan.on{display:grid}
.pb-proj .plan__img{background:var(--pbj-ground);border:1px solid var(--pbj-line-2);border-radius:12px;padding:18px;display:grid;place-items:center;min-height:250px}
.pb-proj .plan__img svg{width:100%;max-width:320px;height:auto}
.pb-proj .plan__d div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--pbj-line-2);font-size:13.5px}
.pb-proj .plan__d span{color:var(--pbj-gray)}
.pb-proj .plan__d b{font-weight:700}

.pb-proj /* ---- construction timeline ---- */
.tl{position:relative;padding-left:26px}
.pb-proj .tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--pbj-line)}
.pb-proj .tl__s{position:relative;padding:0 0 20px}
.pb-proj .tl__s:last-child{padding-bottom:0}
.pb-proj .tl__s::before{content:"";position:absolute;left:-24px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--pbj-line)}
.pb-proj .tl__s.done::before{background:var(--pbj-green);border-color:var(--pbj-green)}
.pb-proj .tl__s.now::before{background:var(--pbj-orange);border-color:var(--pbj-orange);box-shadow:0 0 0 4px var(--pbj-orange-tint)}
.pb-proj .tl__s b{display:block;font-size:14px;font-weight:800}
.pb-proj .tl__s span{font-size:12.5px;color:var(--pbj-gray)}
.pb-proj .progress{height:9px;background:var(--pbj-line);border-radius:5px;overflow:hidden;margin:6px 0 18px}
.pb-proj .progress span{display:block;height:100%;background:linear-gradient(90deg,var(--pbj-teal),var(--pbj-orange))}

.pb-proj /* ---- amenities / specs ---- */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pb-proj .amen div{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--pbj-ground);border-radius:10px;font-size:13px;font-weight:600;color:var(--pbj-ink-2)}
.pb-proj .amen svg{color:var(--pbj-teal)}
.pb-proj .spectab{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.pb-proj .spectab div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--pbj-line-2);font-size:13.5px}
.pb-proj .spectab span{color:var(--pbj-gray)}
.pb-proj .spectab b{font-weight:700;text-align:right}

.pb-proj /* ---- map ---- */
.map{height:260px;border-radius:12px;border:1px solid var(--pbj-line-2);position:relative;overflow:hidden;
  background:var(--pbj-ground) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M0 19h38M19 0v38' stroke='%23DEE5E5'/%3E%3C/svg%3E")}
.pb-proj .map__pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--pbj-orange);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25);display:grid;place-items:center;color:#fff}
.pb-proj .near{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.pb-proj .near div{padding:11px 13px;border:1px solid var(--pbj-line-2);border-radius:10px}
.pb-proj .near span{display:block;font-size:11px;color:var(--pbj-gray-2)}
.pb-proj .near b{font-size:13.5px;font-weight:700}

.pb-proj /* ---- units in this project — the link DOWN the chain ---- */
.unit{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;padding:13px;border:1px solid var(--pbj-line-2);border-radius:12px;margin-bottom:10px;transition:.15s}
.pb-proj .unit:hover{border-color:var(--pbj-teal);box-shadow:var(--pbj-shadow-lg)}
.pb-proj .unit img{width:110px;height:78px;object-fit:cover;border-radius:9px}
.pb-proj .unit b{display:block;font-size:14.5px;font-weight:800}
.pb-proj .unit .m{font-size:12.5px;color:var(--pbj-gray)}
.pb-proj .unit .who{font-size:11.5px;color:var(--pbj-gray-2);margin-top:3px}
.pb-proj .unit .p{text-align:right}
.pb-proj .unit .p b{font-size:17px}
.pb-proj .unit .p span{font-size:11.5px;color:var(--pbj-gray)}

.pb-proj /* ---- developer strip — the link UP the chain ---- */
.dev{display:grid;grid-template-columns:78px 1fr auto;gap:18px;align-items:center}
.pb-proj .dev img{width:78px;height:78px;object-fit:contain;border:1px solid var(--pbj-line);border-radius:14px;padding:8px;background:#fff}
.pb-proj .dev h3{margin:0 0 3px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.pb-proj .dev__m{display:flex;gap:24px;flex-wrap:wrap;margin-top:9px}
.pb-proj .dev__m span{display:block;font-size:11px;color:var(--pbj-gray-2)}
.pb-proj .dev__m b{font-size:15px;font-weight:800}

.pb-proj /* ---- rail ---- */
.rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px}
.pb-proj .contact{background:var(--pbj-white);border:1px solid var(--pbj-line);border-radius:16px;overflow:hidden}
.pb-proj .contact__head{padding:18px 20px;border-bottom:1px solid var(--pbj-line-2)}
.pb-proj .contact__head .p{font-size:22px;font-weight:800;letter-spacing:-.025em}
.pb-proj .contact__head .s{font-size:12.5px;color:var(--pbj-gray);margin-top:2px}
.pb-proj .contact__form{padding:18px 20px}
.pb-proj .contact__form input, .pb-proj .contact__form select{width:100%;border:1px solid var(--pbj-line);border-radius:9px;padding:12px 13px;font-family:inherit;font-size:14px;margin-bottom:10px;background:#fff;color:var(--pbj-ink)}
.pb-proj .contact__row{display:flex;gap:9px;margin-top:10px}
.pb-proj .contact__row .btn{flex:1}
.pb-proj .contact__note{margin:12px 0 0;font-size:11.5px;color:var(--pbj-gray-2);line-height:1.5}
.pb-proj .docs{background:var(--pbj-white);border:1px solid var(--pbj-line);border-radius:16px;padding:18px 20px}
.pb-proj .docs h3{margin:0 0 12px;font-size:14.5px;font-weight:800}
.pb-proj .docs a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--pbj-line-2);font-size:13.5px;font-weight:600;color:var(--pbj-ink-2)}
.pb-proj .docs a:last-child{border-bottom:0}
.pb-proj .docs a:hover{color:var(--pbj-teal)}
.pb-proj .docs svg{color:var(--pbj-gray-2)}

.pb-proj /* ---- mobile bar ---- */
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--pbj-white);border-top:1px solid var(--pbj-line);padding:10px 16px;gap:10px;box-shadow:0 -6px 20px rgba(14,31,38,.10)}
.pb-proj .mobar__p{flex:1;min-width:0}
.pb-proj .mobar__p b{display:block;font-size:16px;font-weight:800;line-height:1.15}
.pb-proj .mobar__p span{font-size:11.5px;color:var(--pbj-gray)}

@media(max-width:1024px){
  .pb-proj .cols{grid-template-columns:1fr}
  .pb-proj .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .pb-proj .contact, .pb-proj .docs{flex:1;min-width:280px}
  .pb-proj .amen{grid-template-columns:repeat(3,1fr)}
  .pb-proj .near{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pb-proj .gal{grid-template-columns:1fr}
  .pb-proj .gal__side{display:none}
  .pb-proj .gal__main img{height:250px}
  .pb-proj .keys{grid-template-columns:1fr 1fr}
  .pb-proj .keys div:nth-child(2){border-right:0}
  .pb-proj .keys div:nth-child(1), .pb-proj .keys div:nth-child(2){border-bottom:1px solid var(--pbj-line-2)}
  .pb-proj .plan.on, .pb-proj .spectab{grid-template-columns:1fr}
  .pb-proj .amen{grid-template-columns:repeat(2,1fr)}
  .pb-proj .near{grid-template-columns:1fr}
  .pb-proj .dev{grid-template-columns:1fr}
  .pb-proj .unit{grid-template-columns:82px 1fr}
  .pb-proj .unit img{width:82px;height:62px}
  .pb-proj .unit .p{grid-column:1/-1;text-align:left}
  .pb-proj .rail{display:none}
  .pb-proj .mobar{display:flex}
  .pb-proj .cols{padding-bottom:92px}
  .pb-proj .panel{padding:18px}
  .pb-proj /* The configuration table becomes stacked cards — a four-column table on a
     phone is unreadable, .pb-proj and this is the one thing on the page that has to
     stay legible. */
  .cfg thead{display:none}
  .pb-proj .cfg tbody tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0}
  .pb-proj .cfg td{padding:0;border:0}
  .pb-proj .cfg .c-area, .pb-proj .cfg .c-avail{font-size:12.5px;color:var(--pbj-gray)}
  .pb-proj .cfg .c-act{grid-column:1/-1;margin-top:8px}
  .pb-proj .cfg .c-act .btn{width:100%}
}
.pb-proj :focus-visible{outline:2px solid var(--pbj-orange);outline-offset:2px}


/* Live-page additions */
.pb-proj .crumbs a,.pb-proj .cfg .c-act a{text-decoration:none}
.pb-proj .progrow{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
.pb-proj .plan__img img{max-width:100%;height:auto;border-radius:8px}
.pb-proj .plan__none{margin:0;font-size:13px;color:var(--pbj-gray);text-align:center;max-width:34ch;line-height:1.55}
.pb-proj .cfgnote.moved{background:var(--pbj-amber-tint);border:1px solid #EFDCB8;border-radius:10px;padding:13px 15px;color:var(--pbj-ink-2);margin-top:18px}
.pb-proj .utag--agent{background:var(--pbj-teal-tint);color:var(--pbj-teal)}
.pb-proj .utag--owner{background:var(--pbj-orange-tint);color:var(--pbj-orange-dk)}
.pb-proj .utag--builder{background:#F1F3F3;color:var(--pbj-ink-2)}
.pb-proj .contact__done{padding:18px 20px;background:var(--pbj-green-tint);border-top:1px solid #CFE7DC}
.pb-proj .contact__done b{display:block;font-size:14.5px;color:var(--pbj-green);margin-bottom:3px}
.pb-proj .contact__done span{font-size:12.5px;color:var(--pbj-ink-2);line-height:1.5}
.pb-proj .contact__err{margin:14px 20px 0;padding:10px 12px;background:#FBECE7;color:var(--pbj-red);border-radius:8px;font-size:12.5px}
.pb-proj .unit{text-decoration:none;color:inherit}