/* ============================================================
   ROOMS & VILLAS — dedicated inventory page.
   Modern editorial structure: wide visual mosaics, calm copy,
   and data-driven unit cards.
   ============================================================ */
body.units{background:
  linear-gradient(180deg,var(--sand),var(--ivory) 26%,var(--sand) 62%,var(--ivory))}

.units-hero{position:relative;padding:calc(72px + var(--sec-tight)) 0 var(--sec-tight);background:
  linear-gradient(110deg,var(--abyss) 0 46%,var(--sand) 46%);color:var(--ivory);overflow:hidden}
.units-hero::after{content:"";position:absolute;right:var(--gutter);top:18%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,var(--shallow),transparent);opacity:.7}
.units-hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.units-copy{display:grid;gap:1.2rem}
.units-copy h1{font-size:clamp(2.3rem,5vw,4.8rem);max-width:10em}
.units-copy .eyebrow,.units-copy .lede{color:rgba(250,247,240,.78)}
.units-copy .btn:not(.btn-reserve){color:rgba(250,247,240,.9)}
.units-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.units-hero-media{display:grid;grid-template-columns:1.18fr .82fr;grid-template-rows:1fr 1fr;gap:.75rem;min-height:560px}
.units-hero-media .tile{overflow:hidden;border-radius:8px;background:var(--travertine);
  box-shadow:0 28px 80px -56px rgba(0,0,0,.75)}
.units-hero-media .tile img{width:100%;height:100%;object-fit:cover}
.units-hero-media .main{grid-row:1/-1}
.units-hero-media .pool{transform:translateY(2.4rem)}
.units-hero-media .room{transform:translateY(-1.1rem)}

.units-intro{padding:var(--sec-tight) 0;background:var(--ivory)}
.units-intro-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.units-intro h2{margin-top:1.2rem;max-width:12em}
.units-points{display:grid;gap:1rem;color:var(--charcoal-soft);font-size:1rem;max-width:38rem}

.unit-collection{padding:0 0 var(--sec);background:var(--ivory)}
.unit-list{display:grid;gap:clamp(3rem,8vw,6.5rem)}
.unit-card{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.8rem,5vw,4.6rem);align-items:center}
.unit-card::before{content:"";position:absolute;inset:-1.4rem -1rem;border:1px solid rgba(163,147,124,.24);
  border-radius:12px;opacity:0;transform:scale(.985);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.unit-card:hover::before{opacity:1;transform:scale(1)}
.unit-card.flip{direction:rtl}
.unit-card.flip>*{direction:ltr}
.unit-photos{display:grid;grid-template-columns:1fr .46fr;grid-template-rows:1fr 1fr;gap:.6rem;min-height:500px}
.unit-photos figure{overflow:hidden;border-radius:8px;background:var(--travertine);
  box-shadow:0 22px 70px -58px rgba(14,78,92,.8)}
.unit-photos img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.unit-photos figure:hover img{transform:scale(1.035)}
.unit-photos .primary{grid-row:1/-1}
.unit-body{display:grid;gap:1rem;align-content:start;background:rgba(250,247,240,.72);
  border:1px solid rgba(229,220,200,.75);border-radius:10px;padding:clamp(1rem,2vw,1.5rem);
  backdrop-filter:blur(10px)}
.unit-body h2{font-size:clamp(1.7rem,3vw,2.55rem);max-width:12em}
.unit-desc{color:var(--charcoal-soft);max-width:36em}
.unit-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--travertine);border:1px solid var(--travertine);margin-top:.6rem}
.unit-specs div{background:#fff;padding:.85rem 1rem;display:grid;gap:.2rem;transition:background .35s var(--ease)}
.unit-specs div:hover{background:var(--sand)}
.unit-specs span{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--driftwood)}
.unit-specs b{font-weight:500;font-size:.9rem;color:var(--charcoal)}
.unit-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}

.unit-combinations{background:var(--travertine);padding:var(--sec-tight) 0}
.combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(163,147,124,.45);border:1px solid rgba(163,147,124,.45)}
.combo-card{background:var(--ivory);padding:1.8rem;display:grid;gap:.75rem;align-content:start;min-height:210px;
  transition:transform .45s var(--ease),background .45s var(--ease)}
.combo-card:hover{transform:translateY(-4px);background:#fff}
.combo-card .lb{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon)}
.combo-card h3{font-size:1.45rem}
.combo-card p{font-size:.9rem;color:var(--charcoal-soft)}
.combo-card .link{align-self:end;margin-top:.4rem}

.units-amenities{padding:var(--sec) 0;background:var(--deep);color:var(--ivory)}
.amenities-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.units-amenities .chapter{color:rgba(250,247,240,.58)}
.units-amenities .chapter::after{background:rgba(250,247,240,.22)}
.amenity-columns{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(250,247,240,.16);border:1px solid rgba(250,247,240,.16)}
.amenity-columns>div{background:rgba(11,62,74,.72);padding:1.6rem}
.amenity-columns .fact{color:var(--shallow);margin-bottom:1rem}
.amenity-columns ul{display:grid;gap:.7rem}
.amenity-columns li{font-size:.92rem;color:rgba(250,247,240,.78);display:flex;gap:.7rem;align-items:baseline}
.amenity-columns li::before{content:"";width:12px;height:1px;background:var(--shallow);flex:none;transform:translateY(-4px)}

@media(max-width:980px){
  .units-hero-grid,.units-intro-grid,.unit-card,.amenities-grid{grid-template-columns:1fr}
  .units-hero{background:linear-gradient(180deg,var(--abyss),var(--deep) 48%,var(--sand) 48%)}
  .unit-card.flip{direction:ltr}
  .units-hero-media,.unit-photos{min-height:auto}
  .units-hero-media{aspect-ratio:16/10}
  .unit-photos{aspect-ratio:16/10}
  .combo-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  .units-hero{padding-top:calc(64px + 3.2rem)}
  .units-hero-media{grid-template-columns:1fr 1fr;grid-template-rows:1.2fr .8fr;gap:.45rem;aspect-ratio:auto}
  .units-hero-media .main{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .units-hero-media .pool,.units-hero-media .room{transform:none;aspect-ratio:1}
  .unit-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.45rem;aspect-ratio:auto}
  .unit-photos .primary{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .unit-photos figure:not(.primary){aspect-ratio:1}
  .unit-specs{grid-template-columns:1fr}
  .unit-actions .link{width:100%;justify-content:center}
  .combo-card{padding:1.25rem}
  .amenity-columns{grid-template-columns:1fr}
}