/**********************************************************************
  BIG PINK — INTERACTIVE STACKING PLAN
  Reworked to lean on existing KM styles rather than custom type:
  headings use .quote-h1 / .cap-intro / .gold-font as elsewhere on the
  site, and the three floor states are grays + gold only (no blue) —
  Gold = Available, Sterling = Leased, Ash = Amenity.
***********************************************************************/

/* Section background: matches the charcoal treatment already used on
   #section1-1 / #section2-1 elsewhere in kmstyle.css */
#section1-2{
  background-color:#363537;
  overflow:hidden;
  min-height:300px;
  color:#fff;
}

.bp-stack{
  --bp-gold:#caad6b;         /* gold-font */
  --bp-gold-deep:#8f6f3e;
  --bp-line-light:#d6d6d6;
  --bp-available:#caad6b;      /* Gold */
  --bp-available-fill:transparent;
  --bp-leased:#ffffff;         /* White */
  --bp-leased-fill:transparent;
  --bp-amenity:#5F5D5E;        /* Ash */
  --bp-amenity-fill:transparent;
}

.bp-stack *{box-sizing:border-box;}

.bp-stack .bp-layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:0;
  min-height:600px;
  border:1px solid rgba(255,255,255,0.35); /* thin white border around the whole widget */
}

/* ---- Silhouette column ---- */
.bp-stack .bp-silhouette-wrap{
  padding:1.6rem 1.8rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-right:1px solid rgba(255,255,255,0.35); /* thin divider between panels */
}

.bp-stack .bp-stack-row{
  display:flex;
  position:relative;
  width:100%;
  column-gap:34px;
}

.bp-stack .bp-tier-labels{
  position:relative;
  width:40px;
  flex-shrink:0;
}

.bp-stack .bp-tier-label-text{
  position:absolute;
  left:2px;
  top:0;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;
  font-family:'Avenir Next LT Pro Medium', Arial, sans-serif;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#c9c5bd;
}

.bp-stack .bp-tier-bracket{
  position:absolute;
  left:26px;
  top:0;
  width:8px;
  border-left:1px solid #6b6870;
}
.bp-stack .bp-tier-bracket::before,
.bp-stack .bp-tier-bracket::after{
  content:'';
  position:absolute;
  left:0;
  width:8px;
  height:0;
  border-top:1px solid #6b6870;
}
.bp-stack .bp-tier-bracket::before{top:0;}
.bp-stack .bp-tier-bracket::after{bottom:0;}

.bp-stack .bp-building{
  display:flex;
  flex-direction:column; /* highest floor at top */
  align-items:center;
  width:100%;
  flex:1;
}

.bp-stack .bp-floor-band{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:1px;
  cursor:pointer;
  transition:filter .1s ease;
}
.bp-stack .bp-floor-band:hover,
.bp-stack .bp-floor-band.active{
  filter:brightness(1.2);
}
.bp-stack .bp-floor-band.active .bp-band-label{
  color:#fff;
}

.bp-stack .bp-band-fill{
  display:flex;
  width:100%;
  height:100%;
  border:1px solid rgba(0,0,0,0.3);
}
.bp-stack .bp-band-fill .bp-seg{height:100%;}
.bp-stack .bp-seg-available{background:var(--bp-available);}
.bp-stack .bp-seg-leased{background:var(--bp-leased);}
.bp-stack .bp-seg-amenity{background:var(--bp-amenity);}
.bp-stack .bp-seg-excluded{background:#3a3a3a;}

/* Floor 1: excluded from the availability story — flat dark gray with
   a light gray outline instead of the usual proportional fill */
.bp-stack .bp-floor-band.excluded .bp-band-fill{
  border:1px solid #b5b2ad;
}

.bp-stack .bp-floor-band.active .bp-band-fill{
  outline:1px solid var(--bp-gold);
  outline-offset:1px;
}

.bp-stack .bp-band-label{
  position:absolute;
  right:calc(100% + 8px);
  font-family:'Avenir Next LT Pro Medium', Arial, sans-serif;
  font-size:13px;
  color:#c9c5bd;
  white-space:nowrap;
}

.bp-stack .bp-legend{
  margin-top:1.4rem;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:1.2rem;
  font-family:'Avenir Next LT Pro Medium', Arial, sans-serif;
  font-size:14px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:#e5e2dd;
  align-self:flex-start;
}
.bp-stack .bp-legend span{display:flex; align-items:center; gap:0.5rem;}
.bp-stack .bp-swatch{width:12px;height:12px;border-radius:1px; display:inline-block;}

/* ---- Detail / viewer column ---- */
.bp-stack .bp-viewer{
  background:#363537;
  color:#fff;
  padding:1.9rem 2.1rem;
}

.bp-stack .bp-viewer-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:1.6rem;
  flex-wrap:wrap;
  gap:0.5rem;
}
/* Floor title set in Mort (the site's serif display face) to match the
   large stat numbers below it, rather than the default sans h2. */
.bp-stack .bp-viewer-head h2{
  margin-bottom:0;
  padding-bottom:0;
  font-family:'Mort Modern 08 Regular Italic', 'Mort Modern 07 Light Italic', serif;
  font-style:italic;
  font-size:28px;
  line-height:1.2;
  letter-spacing:normal;
  color:var(--bp-gold);
  text-transform:none;
}

.bp-stack .bp-stat-label{
  color:#fff;
}

/* Plain caption for notes that apply to a whole floor or interconnected
   floor group (e.g. shared stairwells) — sits below the proportion bar,
   above the space boxes. No dashed box, just small plain text. */
.bp-stack .bp-caption{
  font-size:14px;
  line-height:1.5;
  color:#c9c5bd;
  margin:0 0 1.4rem;
  max-width:64ch;
}

.bp-stack .bp-stat-row{
  display:flex;
  align-items:flex-start;
  gap:2.6rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.bp-stack .bp-stat{
  border-left:1px solid var(--bp-line-light);
  padding-left:1rem;
  padding-bottom:0rem;
}
.bp-stack .bp-stat .quote-h1{
  font-family:'Mort Modern 07 Light Italic', 'Mort Modern 08 Regular Italic', serif;
  font-style:italic;
  padding:0 !important;
  margin-top:-4px;
  margin-bottom:0;
  line-height:1;
}
.bp-stack .bp-stat .bp-stat-label{
  font-size:14px;
  margin-top:0;
  margin-bottom:15px;
}

.bp-stack .bp-proportion-bar{
  display:flex;
  height:16px;
  border-radius:2px;
  overflow:hidden;
  margin-bottom:1.6rem;
}
.bp-stack .bp-proportion-bar .bp-seg{height:100%;}

.bp-stack .bp-plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(30%, 1fr));
  gap:10px;
  margin-bottom:1.2rem;
}
.bp-stack .bp-suite{
  border:1px solid var(--bp-available);
  border-radius:2px;
  padding:0.7rem 0.8rem;
  font-family:'Avenir Next LT Pro Regular', Arial, sans-serif;
  font-size:18px;
  line-height:1.4;
  background:var(--bp-available-fill);
  color:var(--bp-gold);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:70px;
}
.bp-stack .bp-suite.leased{
  background:var(--bp-leased-fill);
  border-color:var(--bp-leased);
  color:#fff;
}
.bp-stack .bp-suite.amenity{
  background:var(--bp-amenity-fill);
  border-color:var(--bp-amenity);
  color:#c9c5bd;
}
.bp-stack .bp-suite .bp-num{
  font-family:'Avenir Next LT Pro Medium', Arial, sans-serif;
  font-weight:400;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.bp-stack .bp-suite .bp-sf{
  font-family:'Avenir Next LT Pro Regular', Arial, sans-serif;
  font-weight:400;
  color:#fff;
  opacity:0.85;
}

.bp-stack .bp-cta{
  margin-top:1rem;
}
.bp-stack .bp-cta a.link{
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.bp-stack .bp-arrow{
  font-size:15px;
  margin-top:-2px;
}

@media (max-width: 991px){
  .bp-stack .bp-layout{
    grid-template-columns:1fr;
  }
  .bp-stack .bp-silhouette-wrap,
  .bp-stack .bp-viewer{
    max-height:none;
  }
  .bp-stack .bp-silhouette-wrap{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.35);
  }
}