/* ============================================================
   Novotel Residences JVT — Pass 2 content sections
   ============================================================ */

/* shared helpers */
.kicker--light{ color:rgba(255,255,255,.65); }
.link-arrow{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--navy); border-bottom:1px solid var(--blue); padding-bottom:.3rem; transition:.25s var(--ease); }
.link-arrow:hover{ color:var(--blue); }

.btn-outline-light{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.55); border-radius:4px; padding:.85rem 1.7rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; transition:.3s var(--ease); }
.btn-outline-light:hover{ background:#fff; color:var(--navy); }
.btn-ghost{ font-size:.82rem; letter-spacing:.04em; color:var(--navy); border-bottom:1px solid var(--navy); padding-bottom:2px; }
.btn-ghost:hover{ color:var(--blue); border-color:var(--blue); }
.btn-dark{ background:var(--navy); color:#fff; border-radius:40px; padding:.7rem 1.7rem; font-size:.82rem; transition:.3s var(--ease); }
.btn-dark:hover{ background:#000; }
.btn-blue{ background:var(--blue); color:#fff; border-radius:40px; padding:.7rem 1.7rem; font-size:.82rem; transition:.3s var(--ease); }
.btn-blue:hover{ background:var(--navy); }
.btn-pill{ display:inline-flex; align-items:center; border:1px solid var(--navy); border-radius:40px; padding:.9rem 1.8rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; transition:.3s var(--ease); }
.btn-pill:hover{ background:var(--navy); color:#fff; }

/* ===== 4 · LIVING (scroll-white) ===== */
.living{ position:relative; min-height:120vh; display:flex; align-items:center; justify-content:center; background:var(--navy); overflow:hidden; }
.living__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.42; }
.living::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 50%, rgba(15,17,85,.25), rgba(8,9,40,.82)); }
.living__inner{ position:relative; z-index:2; max-width:1140px; padding:6rem var(--pad); text-align:center; }
.living__kicker{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:2rem; }
.living__text{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.6vw,3.5rem); line-height:1.34; letter-spacing:-.005em; color:#fff; }
.living__text .word{ display:inline-block; opacity:.16; will-change:opacity; }
.living__text .word::after{ content:" "; white-space:pre; }

/* ===== 5 · GALLERY (circular wheel) ===== */
.gallery{ background:var(--cream); padding:clamp(5rem,9vw,8rem) 0 0; text-align:center; overflow:hidden; }
.gallery__head{ padding:0 var(--pad); }
.gallery__title{ font-weight:300; font-size:clamp(2rem,5vw,4rem); color:var(--navy); margin-top:.6rem; letter-spacing:-.01em; }
.gallery__cta{ margin-top:1.5rem; }
.gallery__wheelWrap{ position:relative; height:clamp(420px,48vh,500px); margin-top:clamp(2.5rem,5vw,4rem); overflow:hidden; }
.gallery__wheel{ position:absolute; left:50%; top:calc(var(--R) + 200px); width:0; height:0; --R:2000px; --step:11deg; transform-origin:50% 50%; }
.gItem{ position:absolute; left:0; top:0; width:clamp(185px,16vw,260px); aspect-ratio:3/4; margin:0;
  transform:translate(-50%,-50%) rotate(calc((var(--i) - 2) * var(--step))) translateY(calc(-1 * var(--R)));
  transform-origin:50% 50%; }
.gItem img{ width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 22px 50px rgba(15,17,85,.22); }

/* ===== 7 · ROOMS A (71 Nyhavn) ===== */
.roomsA{ background:var(--navy); color:#fff; display:grid; grid-template-columns:40% 60%; gap:clamp(1.5rem,3vw,3rem); align-items:center;
  padding:clamp(5rem,9vw,8rem) var(--pad); overflow:hidden; }
.roomsA__text{ max-width:480px; }
.roomsA__title{ font-weight:300; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.08; margin:.9rem 0 1.5rem; }
.roomsA__lead{ color:rgba(255,255,255,.72); margin-bottom:2rem; font-size:1.02rem; max-width:450px; }
.roomsA__slider{ position:relative; min-width:0; }
#roomsSwiper{ overflow:hidden; }
.roomCard{ aspect-ratio:3/4; border-radius:12px; overflow:hidden; position:relative;
  background:var(--navy); display:flex; flex-direction:column; justify-content:space-between; padding:1.3rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.roomCard::before{ content:""; position:absolute; inset:0; background:var(--img) center/cover no-repeat; transform:scale(1.02); transition:transform .85s var(--ease); }
.roomCard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,40,.82), rgba(8,9,40,0) 58%); }
.roomCard:hover{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.4); }
.roomCard:hover::before{ transform:scale(1.1); }
.roomCard__badge{ position:relative; z-index:2; align-self:flex-start; background:rgba(255,255,255,.92); color:var(--navy); border-radius:40px; padding:.32rem .9rem; font-size:.74rem; font-weight:500; }
.roomCard__name{ position:relative; z-index:2; font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2vw,1.9rem); display:flex; align-items:center; gap:.55rem; }
.roomCard__name::after{ content:"\2192"; font-family:var(--sans); font-size:1rem; opacity:0; transform:translateX(-8px); transition:.45s var(--ease); }
.roomCard:hover .roomCard__name::after{ opacity:1; transform:translateX(0); }
.roomsA__nav{ display:flex; gap:.7rem; margin-top:1.8rem; }
.rnav{ width:48px; height:48px; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:#fff; font-size:1.4rem; display:flex; align-items:center; justify-content:center; transition:.25s var(--ease); cursor:pointer; }
.rnav:hover{ background:#fff; color:var(--navy); }
.rnav.swiper-button-disabled{ opacity:.3; pointer-events:none; }

/* ===== 8 · ROOMS B (Nils am See) ===== */
.roomsB{ background:var(--cream); padding:clamp(4rem,8vw,7rem) 0; text-align:center; overflow:hidden; }
.roomsB__head{ margin-bottom:2.5rem; padding:0 var(--pad); }
.roomsB__heading{ font-weight:300; font-size:clamp(2rem,5vw,4rem); color:var(--navy); margin-top:.5rem; }
.roomsB__stage{ position:relative; }
#roomsBSwiper{ padding:0 0 1rem; }
.roomB{ text-align:center; opacity:.45; transform:scale(.93); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.roomB.swiper-slide-active{ opacity:1; transform:scale(1); }
.roomB__img{ width:100%; aspect-ratio:16/10; border-radius:14px; background-size:cover; background-position:center; }
.roomB__name{ font-weight:300; font-size:clamp(2.4rem,6vw,5rem); color:var(--navy); line-height:1; margin:1.6rem 0 .9rem; letter-spacing:-.01em; }
.roomB__meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; color:var(--muted); font-size:.95rem; margin-bottom:1.4rem; }
.roomB__price{ color:var(--navy); font-weight:600; }
.roomB__actions{ display:flex; justify-content:center; align-items:center; gap:1rem; flex-wrap:wrap; }
.cnav{ position:absolute; top:30%; transform:translateY(-50%); z-index:5; width:54px; height:54px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.7); color:var(--navy); font-size:1.5rem; display:flex; align-items:center; justify-content:center; transition:.25s var(--ease); backdrop-filter:blur(4px); }
.cnav:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.cnav--prev{ left:clamp(1rem,5vw,5rem); }
.cnav--next{ right:clamp(1rem,5vw,5rem); }

/* ===== 10 · MARQUEE (Nils am See) ===== */
.marquee{ background:#E6DDC6; color:var(--navy); padding:clamp(2.5rem,5vw,4rem) 0; overflow:hidden; }
.mrow{ overflow:hidden; white-space:nowrap; }
.mrow + .mrow{ margin-top:.2rem; }
.mrow__track{ display:inline-flex; will-change:transform; }
.mrow__track span{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,5.4vw,4.6rem); line-height:1.18; text-transform:uppercase; letter-spacing:.01em; color:rgba(15,17,85,.9); padding-right:.3em; }
.mrow--l .mrow__track{ animation:mqL 38s linear infinite; }
.mrow--r .mrow__track{ animation:mqL 46s linear infinite reverse; }
@keyframes mqL{ to{ transform:translateX(-50%); } }
.mrow--r .mrow__track{ transform:translateX(-50%); }
@keyframes mqR{ to{ transform:translateX(0); } }
.mrow--r .mrow__track{ animation:mqR 46s linear infinite; }

/* ===== 11 · DUBAI (Cap Karoso) ===== */
.dubai{ background:var(--cream); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding:clamp(4.5rem,9vw,8rem) var(--pad); }
.dubai__left{ max-width:540px; }
.dubai__title{ font-weight:300; font-size:clamp(2.4rem,5vw,4.4rem); color:var(--navy); line-height:1.04; margin:.7rem 0 1.5rem; letter-spacing:-.01em; }
.dubai__p{ color:var(--ink); opacity:.78; max-width:460px; }
.dubai__imgSmall{ margin-top:3rem; width:78%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.dubai__imgBig{ width:100%; aspect-ratio:3/3.6; object-fit:cover; border-radius:10px; }

/* ===== 9 · BLOG (La Sala fanned cards) ===== */
.blog{ background:var(--cream); padding:clamp(4rem,8vw,7rem) var(--pad) clamp(6rem,11vw,9rem); border-top:1px solid var(--line); }
.blog__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4rem); }
.blog__title{ font-weight:300; font-size:clamp(1.7rem,3.2vw,2.8rem); color:var(--navy); max-width:680px; line-height:1.12; margin-top:.5rem; }
.blog__deck{ display:flex; justify-content:center; align-items:center; max-width:var(--maxw); margin:0 auto; min-height:480px; padding:36px 0; }
.bcard{ flex:none; width:clamp(220px,21vw,294px); aspect-ratio:3/4.15; border-radius:12px; position:relative; overflow:hidden;
  background:var(--img) center/cover no-repeat; box-shadow:0 18px 48px rgba(15,17,85,.18);
  transform-origin:center bottom; transform:rotate(calc((var(--i) - 2) * 3deg));
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); cursor:pointer; }
.bcard:not(:first-child){ margin-left:-46px; }
.bcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,40,.88), rgba(8,9,40,.12) 60%); }
.bcard__cat{ position:absolute; top:1.1rem; left:1.1rem; z-index:2; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.bcard__t{ position:absolute; left:1.1rem; right:1.1rem; bottom:4.2rem; z-index:2; font-weight:400; font-size:1.25rem; color:#fff; line-height:1.18; }
.bcard__more{ position:absolute; left:1.1rem; bottom:1.3rem; z-index:2; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:30px; padding:.4rem .9rem; transition:.3s var(--ease); }
.bcard:hover .bcard__more{ background:#fff; color:var(--navy); }

/* reveal helper */
.reveal{ opacity:0; transform:translateY(34px); }

/* ===== responsive ===== */
@media (max-width:900px){
  .roomsA{ grid-template-columns:1fr; padding-right:var(--pad); }
  .roomsA__slider{ margin-top:1rem; }
  .dubai{ grid-template-columns:1fr; }
  .dubai__imgSmall{ width:100%; }
  .dubai__right{ order:-1; }
  .gallery__wheel{ --R:760px; --step:15deg; }
  .gallery__wheelWrap{ height:48vh; min-height:360px; }
  .cnav{ width:42px; height:42px; font-size:1.2rem; }
  .cnav--prev{ left:.5rem; } .cnav--next{ right:.5rem; }
  .blog__head{ flex-direction:column; align-items:flex-start; }
  .blog__deck{ flex-direction:column; align-items:center; gap:1rem; min-height:0; }
  .bcard{ width:min(300px,80vw); transform:none !important; margin-left:0 !important; }
  .bcard:not(:first-child){ margin-left:0; }
}