/* 10 — CASA PALMA / small hotel
   Mallorcan sand, olive shadow, light Fraunces. */

body.hotel{
  --bg:#e9e0d2; --ink:#302f28;
  --accent:#735f43; --accent-ink:#fff;
  --line:rgba(48,47,40,.2);
  --soft:rgba(48,47,40,.64);
  --panel:#e1d7c6;
  --inv-bg:#302f28; --inv-ink:#f4efe6;
  --display:'Fraunces',serif;
  --nav-bg:#e9e0d2;
  --radius:2px;
  background:#e9e0d2;color:#302f28;font-family:'Manrope',sans-serif;
}

.hotel .dh,.hotel .dh-sm,.hotel .cta h2,.hotel .phero h1{font-weight:300;letter-spacing:-.045em}
.hotel .logo{font:32px 'Fraunces';font-weight:300;letter-spacing:.04em}

/* header */
.hotel .nav{padding:22px 4vw;display:flex;justify-content:space-between;align-items:center}

/* hero */
.hotel .hero{height:780px;position:relative;color:#fff}
.hotel .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.hotel .hero-copy{position:absolute;z-index:1;left:4vw;bottom:7vh;max-width:min(700px,92vw);padding-right:12px}
.hotel .hero h1{font:clamp(56px,10vw,170px)/.84 'Fraunces';font-weight:300;letter-spacing:-.055em;margin:18px 0;overflow-wrap:anywhere}
.hotel .hero-copy p{font-size:19px;line-height:1.6;max-width:420px}

/* booking bar: floats on desktop only; never covers hero copy on small screens */
.hotel .bookbar{position:absolute;z-index:2;right:4vw;bottom:-40px;background:#f4efe6;color:#333;display:flex;align-items:center;flex-wrap:wrap;box-shadow:0 20px 50px rgba(0,0,0,.14);max-width:calc(100% - 8vw)}
.hotel .bookbar .cell{padding:18px 30px;border-right:1px solid #d9d0c2;display:grid;gap:5px;min-width:0}
.hotel .bookbar label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;opacity:.6}
.hotel .bookbar input,.hotel .bookbar select{border:0;background:none;font:inherit;font-size:15px;color:inherit;padding:0;min-width:0;max-width:100%}
.hotel .bookbar .btn{background:#735f43;color:#fff;border-color:#735f43;margin:0 22px;white-space:normal;min-height:44px}

/* rooms */
.hotel .room{transition:.3s}
.hotel .room .shot{height:340px;overflow:hidden}
.hotel .room img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.hotel .room:hover img{transform:scale(1.04)}
.hotel .room h3{font:29px 'Fraunces';font-weight:300;margin:16px 0 6px}
.hotel .room .meta{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--soft)}
.hotel .room p{margin-top:12px;color:var(--soft);line-height:1.7;font-size:15px}

/* room detail rows */
.hotel .roomrow{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding:7vh 0;border-bottom:1px solid var(--line)}
.hotel .roomrow:last-child{border-bottom:0}
.hotel .roomrow .shot{height:520px}
.hotel .roomrow:nth-child(even) .shot{order:2}
.hotel .roomrow ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;color:var(--soft);font-size:15px}
.hotel .roomrow li:before{content:'— ';opacity:.5}
.hotel .rate{font:34px 'Fraunces';font-weight:300;margin-top:26px}
.hotel .rate small{font:13px 'Manrope';color:var(--soft);display:block;margin-top:6px}

/* the island */
.hotel .place{position:relative;height:340px;overflow:hidden}
.hotel .place span{position:absolute;left:20px;bottom:18px;color:#fff;font:24px 'Fraunces';font-weight:300;z-index:2}
.hotel .place:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}

@media(max-width:900px){
  .hotel .hero{height:auto;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 28px}
  .hotel .hero-copy{position:relative;left:auto;bottom:auto;z-index:1;padding:18vh 4vw 8px;max-width:none}
  .hotel .hero h1{font-size:clamp(48px,14vw,96px)}
  .hotel .bookbar{position:relative;left:auto;right:auto;bottom:auto;margin:0 4vw;max-width:none;flex-direction:column;align-items:stretch;box-shadow:0 12px 32px rgba(0,0,0,.12)}
  .hotel .bookbar .cell{border-right:0;border-bottom:1px solid #d9d0c2;padding:16px 20px}
  .hotel .bookbar .btn{margin:16px 20px 20px;text-align:center;width:auto}
  .hotel .rooms-offset{margin-top:48px}
}
@media(max-width:820px){
  .hotel .roomrow{grid-template-columns:1fr;gap:26px;padding:5vh 0}
  .hotel .roomrow:nth-child(even) .shot{order:0}
  .hotel .roomrow .shot{height:min(360px,70vw)}
}