/* ============================================================
   FLOOR-PLAN PAGE — one standalone landing page per unit code.
   Token-driven. No hex literals (see tokens.css).
   ============================================================ */

/* ---- breadcrumb ------------------------------------------- */
.fp-breadcrumb{background:var(--bg-light);border-bottom:1px solid var(--divider)}
.fp-breadcrumb .container{display:flex;gap:var(--s2);align-items:center;padding-block:var(--s3);
  font-family:var(--font-display);font-size:var(--fs-small);color:var(--text-muted)}
.fp-breadcrumb a{color:var(--text-muted)}
.fp-breadcrumb a:hover{color:var(--action)}
.fp-breadcrumb .sep{opacity:.5}
.fp-breadcrumb [aria-current]{color:var(--text)}

/* ---- split hero ------------------------------------------- */
.fp-hero{background:var(--bg-light)}
.fp-hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:start;
  padding-block:var(--s8)}

/* the designed plan slot — deliberate placeholder, swapped for one image element */
.fp-slot{position:relative;border-radius:var(--r-md);border:1px solid var(--divider);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--p-dark) 12%, transparent) 1px, transparent 0) 0 0/22px 22px,
    var(--surface-light);
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  text-align:center;padding:var(--s6);box-shadow:var(--e1)}
.fp-slot__frame{position:absolute;inset:var(--s4);border:1.5px dashed color-mix(in srgb,var(--p-dark) 22%, transparent);border-radius:var(--r-sm)}
.fp-slot__icon{width:44px;height:44px;color:var(--action);position:relative}
.fp-slot__label{position:relative;font-family:var(--font-display);font-weight:500;
  letter-spacing:.06em;color:var(--text);font-size:1.05rem}
.fp-slot__note{position:relative;font-size:var(--fs-small);color:var(--text-muted);max-width:32ch}

.fp-details{position:sticky;top:88px}
.fp-details .eyebrow{margin-bottom:var(--s2)}
.fp-details h1{font-family:var(--font-head);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.02em;color:var(--text)}
.fp-details__type{font-family:var(--font-display);font-size:1.1rem;color:var(--text-muted);margin-top:var(--s2)}
.fp-specs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s6) 0;
  border-block:1px solid var(--divider);padding-block:var(--s5)}
.fp-specs .spec b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.25rem;color:var(--text)}
.fp-specs .spec span{font-size:var(--fs-small);color:var(--text-muted)}
.fp-specs .spec .price{color:var(--action)}
.fp-details .btn{width:100%}
.fp-details__fine{font-size:12px;color:var(--text-muted);margin-top:var(--s3)}

/* ---- gallery ---------------------------------------------- */
.fp-gallery{background:var(--surface-light)}
.fp-gallery__head{margin-bottom:var(--s6)}
.fp-gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.fp-gallery__grid figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--e1)}
.fp-gallery__grid img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
.fp-gallery__grid figure:hover img{transform:scale(1.04)}
.fp-gallery__grid figure:first-child{grid-column:span 2;grid-row:span 2}

/* ---- what's included -------------------------------------- */
.fp-included{background:var(--bg-light)}
.fp-included .container{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.fp-included__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.fp-included__list li{display:flex;gap:var(--s3);font-size:1rem;color:var(--text)}
.fp-included__list li svg{width:20px;height:20px;color:var(--action);flex:none;margin-top:2px}

/* ---- condensed amenities --------------------------------- */
.fp-amenities{background:var(--bg-deep);color:var(--on-dark)}
.fp-amenities .h2{color:var(--on-dark)}
.fp-amenities__chips{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.fp-amenities__chips li{border:1px solid var(--line-on-dark);border-radius:var(--r-pill);
  padding:10px 18px;font-family:var(--font-display);font-size:var(--fs-small);color:var(--on-dark)}

/* ---- condensed neighborhood ------------------------------ */
.fp-hood{background:var(--surface-light)}
.fp-hood .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.fp-hood img{width:100%;height:360px;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--e1)}
.fp-hood__stats{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5)}
.fp-hood__stats .s b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--action)}
.fp-hood__stats .s span{font-size:var(--fs-small);color:var(--text-muted)}

/* ---- schedule CTA ---------------------------------------- */
.fp-schedule{background:var(--bg-light)}
.fp-schedule .container{display:grid;grid-template-columns:1fr .8fr;gap:var(--s8);align-items:center}
.fp-schedule__copy h2{margin-bottom:var(--s3)}
.fp-schedule__copy p{color:var(--text-muted)}

/* ---- mobile sticky bar ----------------------------------- */
.fp-stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--surface-light);border-top:1px solid var(--divider);box-shadow:var(--e2);
  padding:var(--s3) var(--s4);align-items:center;gap:var(--s4)}
.fp-stickybar__info b{display:block;font-family:var(--font-display);font-weight:600;color:var(--text);line-height:1.1}
.fp-stickybar__info span{font-size:var(--fs-small);color:var(--action)}
.fp-stickybar .btn{margin-left:auto;white-space:nowrap}

/* ---- responsive ------------------------------------------ */
@media (max-width:960px){
  .fp-hero .container{grid-template-columns:1fr;gap:var(--s6)}
  .fp-details{position:static}
  .fp-included .container,.fp-hood .container,.fp-schedule .container{grid-template-columns:1fr;gap:var(--s6)}
  .fp-gallery__grid{grid-template-columns:repeat(2,1fr)}
  .fp-gallery__grid figure:first-child{grid-column:span 2;grid-row:auto}
}
@media (max-width:640px){
  .fp-stickybar{display:flex}
  .fp-schedule + *{}
  body.di-floorplan{padding-bottom:76px}     /* room so the sticky bar never covers the footer */
}
@media (max-width:520px){
  .fp-gallery__grid{grid-template-columns:1fr}
  .fp-gallery__grid figure:first-child{grid-column:auto}
  .fp-included__list{grid-template-columns:1fr}
  .fp-specs{grid-template-columns:1fr 1fr}
}