/* ==========================================================================
   Apartments — one panel per unit, plus the status rows at the foot.
   Every unit sits in an identically padded panel so all the left edges line
   up down the page; the featured unit carries a heavier border and shadow
   rather than a different indent.
   ========================================================================== */

.unit-lead,
.unit-panel{
  display:block;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--white);padding:clamp(22px,3vw,40px);
}
.unit-lead{border-color:rgba(37,26,23,.30);box-shadow:var(--shadow)}
.unit-detail + .unit-detail{margin-top:28px}

.unit-detail-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 20px;margin-bottom:8px}
.unit-detail-rent{font-family:var(--font-serif);font-size:26px;color:var(--green);font-weight:600}

/* Featured unit: gallery column beside the description. */
.unit-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;margin-top:22px}
.unit-detail-grid > *{min-width:0}

/* Gallery-only units carry no description, so a two-column grid would leave
   half the row empty. This fills the width: lead photo plus a 2x2 of thumbs. */
.unit-row{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start;margin-top:22px}
.unit-row > *{min-width:0}

.unit-figure{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  background:var(--cream);border:0;padding:0;width:100%;cursor:pointer;display:block;
  aspect-ratio:4/3;
}
.unit-figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.unit-figure:hover img{transform:scale(1.04)}
.unit-figure:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.unit-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.unit-strip button{
  border:0;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  background:var(--cream);aspect-ratio:1/1;
}
.unit-strip img{width:100%;height:100%;object-fit:cover}
.unit-strip button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.unit-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.unit-quad button{
  border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--cream);aspect-ratio:1/1;
}
.unit-quad img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.unit-quad button:hover img{transform:scale(1.05)}
.unit-quad button:focus-visible{outline:3px solid var(--espresso);outline-offset:2px}

.unit-strip-more{
  display:grid;place-items:center;background:var(--green-soft);color:var(--green);
  font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px;
}

/* --------------------------------------------------------- status rows --- */

.status-list{display:grid;gap:12px;margin-top:56px}
.status-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
}
.status-row h3{margin:0;font-size:21px;color:var(--espresso)}
.status-note{margin:6px 0 0;color:var(--muted);font-size:15px}

/* The badge must be allowed to wrap, otherwise a long status pushes the row
   wider than a 375px phone and the whole page scrolls sideways. */
.status-row .badge{flex:0 1 auto;white-space:normal;max-width:100%}

/* ------------------------------------------------------ sticky gallery --- */
/* The gallery column pins under the header while the taller description
   scrolls, and releases on its own when the grid row ends — inherent to
   position:sticky inside a grid item, no JS needed.

   Two conditions matter: align-self:start, or the item stretches to the row
   height and has no room left to move within; and a viewport-height guard, so
   a short window never pins a column taller than the screen. */

@media (min-width:900px) and (min-height:720px){
  .unit-detail-grid > :first-child{
    position:sticky;
    top:calc(var(--header-h) + 24px);
    align-self:start;
  }
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width:1080px){
  .unit-detail-grid{grid-template-columns:minmax(0,1fr);gap:36px}
}

@media (max-width:860px){
  .unit-strip{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:760px){
  .unit-row{grid-template-columns:1fr}
}

@media (max-width:560px){
  .status-row{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (max-width:400px){
  .unit-strip{grid-template-columns:repeat(2,1fr)}
  .unit-detail-grid{gap:12px}
}