/* ============================================================
   De Chateau Paradise — apartment detail page styles
   File location in project: public/css/detail.css
   Append/import AFTER style.css. Covers the gallery, rooms
   drill-down, booking widget, reviews, and lightbox.
   (You can paste this at the end of style.css instead of a
    separate file if you prefer a single stylesheet.)
   ============================================================ */

.wrap{max-width:1200px;margin:0 auto;padding:var(--space-8)}
.wrap--detail{padding-top:104px}
@media(max-width:480px){.wrap{padding:var(--space-4)}.wrap--detail{padding-top:88px}}
.crumb{font-size:.875rem;color:var(--muted);margin-bottom:var(--space-6)}
.crumb a:hover{color:var(--gold-deep)}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--space-2);height:clamp(320px,52vh,540px);border-radius:6px;overflow:hidden}
.gallery>div{position:relative;cursor:pointer;overflow:hidden;min-width:0}
.gallery>div:first-child{grid-row:span 2}
.gallery .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.gallery>div:hover .ph{transform:scale(1.04)}
.gallery-more{position:absolute;right:12px;bottom:12px;background:oklch(28% 0.03 255 / .82);color:oklch(96% 0.01 85);font-size:.8125rem;padding:6px 14px;border-radius:2px;backdrop-filter:blur(4px)}
/* gradient fallbacks for gallery tiles */
.g1{background:linear-gradient(155deg,oklch(58% 0.08 250),oklch(78% 0.06 235))}
.g2{background:linear-gradient(155deg,oklch(82% 0.05 70),oklch(90% 0.03 90))}
.g3{background:linear-gradient(155deg,oklch(72% 0.07 245),oklch(86% 0.04 230))}
.g4{background:linear-gradient(155deg,oklch(84% 0.04 200),oklch(90% 0.03 90))}
.g5{background:linear-gradient(155deg,oklch(80% 0.05 235),oklch(88% 0.04 85))}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;height:auto}.gallery>div:first-child{grid-row:span 1;grid-column:span 2;height:220px}.gallery>div{height:120px}}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:1fr 380px;gap:var(--space-16);margin-top:var(--space-12);align-items:start}
.layout>.content,.layout>aside{min-width:0}
@media(max-width:960px){.layout{grid-template-columns:1fr;gap:var(--space-8)}.book{position:static;top:auto}}

.badge{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--slate);color:oklch(96% 0.01 85);padding:5px 12px;border-radius:2px;margin-bottom:var(--space-3)}
.title{font-size:clamp(2.25rem,4.5vw,3.25rem)}
.spec{display:flex;gap:var(--space-4);margin-top:var(--space-3);color:var(--muted);flex-wrap:wrap}
.spec span{display:inline-flex;gap:6px;align-items:center}
.rating-line{display:flex;align-items:center;gap:8px;margin-top:var(--space-4);color:var(--muted);font-size:.9375rem}
.rating-line .star{color:var(--gold-deep)}
.lead{font-size:1.0625rem;color:var(--muted);line-height:1.7;margin-top:var(--space-6);max-width:60ch}
.divide{height:1px;background:var(--border);margin:var(--space-12) 0}

.amenities{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4)}
.amenity{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.amenity .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

h2.sec{font-size:1.75rem;margin-bottom:var(--space-2)}
.sec-sub{color:var(--muted);margin-bottom:var(--space-8);font-size:.9375rem}

/* ---------- Rooms drill-down ---------- */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.room{background:var(--surface);border:1px solid var(--border);border-radius:4px;overflow:hidden;cursor:pointer;min-width:0;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.room:hover{transform:translateY(-4px);box-shadow:0 16px 36px -22px oklch(40% 0.06 250 / .45);border-color:var(--slate)}
.room-img{aspect-ratio:4/3;position:relative}
.room-img .ph{width:100%;height:100%;object-fit:cover}
.room-count{position:absolute;right:10px;bottom:10px;background:oklch(28% 0.03 255 / .8);color:oklch(96% 0.01 85);font-size:.75rem;padding:3px 9px;border-radius:2px;backdrop-filter:blur(4px)}
.room-body{padding:var(--space-4);min-width:0}
.room-name{font-size:1.15rem;overflow-wrap:anywhere}
.room-desc{color:var(--muted);font-size:.875rem;margin-top:4px;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r1{background:linear-gradient(155deg,oklch(58% 0.08 250),oklch(80% 0.05 235))}
.r2{background:linear-gradient(155deg,oklch(84% 0.04 85),oklch(90% 0.03 250))}
.r3{background:linear-gradient(155deg,oklch(72% 0.07 245),oklch(86% 0.04 230))}
.r4{background:linear-gradient(155deg,oklch(82% 0.05 70),oklch(88% 0.04 250))}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.review{padding:var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:4px;min-width:0}
.review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);gap:var(--space-2)}
.review-head strong{font-weight:500;overflow-wrap:anywhere}
.review-stars{color:var(--gold-deep);letter-spacing:1px;white-space:nowrap;flex:none}
.review-stars .dim{color:var(--border)}
.review p{color:var(--muted);font-size:.9375rem;line-height:1.6;overflow-wrap:anywhere}

/* ---------- Booking widget ---------- */
.book{position:sticky;top:88px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:var(--space-6);box-shadow:0 18px 48px -30px oklch(40% 0.06 250 / .4)}
.book-price{display:flex;align-items:baseline;gap:6px;margin-bottom:var(--space-6)}
.book-price b{font-family:"Cormorant Garamond",serif;font-size:2.25rem;font-weight:600}
.book-price span{color:var(--muted);font-size:.9375rem}
.dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-bottom:var(--space-4)}
.dates .cell{padding:var(--space-3) var(--space-4);display:block}
.dates .cell+.cell{border-left:1px solid var(--border)}
.dates .lab{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.dates input{border:none;background:none;font:inherit;color:var(--ink);width:100%;padding:2px 0 0;outline:none}
.field-guests{margin-bottom:var(--space-4)}
.field-guests .lab{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.field-guests select{width:100%;padding:var(--space-3) var(--space-4);font:inherit;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--ink)}
.quote{margin:var(--space-6) 0;font-size:.9375rem;color:var(--muted)}
.quote .row{display:flex;justify-content:space-between;padding:6px 0}
.quote .row.total{border-top:1px solid var(--border);margin-top:var(--space-2);padding-top:var(--space-4);color:var(--ink);font-weight:500;font-size:1.0625rem}
.quote .row.total b{font-family:"Cormorant Garamond",serif;font-size:1.4rem;font-weight:600}
.msg{font-size:.875rem;padding:var(--space-3);border-radius:4px;margin-bottom:var(--space-4);display:none}
.msg.show{display:block}
.msg.ok{background:oklch(93% 0.06 150);color:oklch(38% 0.1 150)}
.msg.bad{background:oklch(93% 0.05 40);color:var(--gold-deep)}
.book small{display:block;text-align:center;color:var(--faint);font-size:.8125rem;margin-top:var(--space-3)}

/* ---------- Room picker (booking widget) ---------- */
.room-picker{margin-bottom:var(--space-4)}
.room-options{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
.room-option{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.875rem;transition:border-color .15s}
.room-option:has(input:checked){border-color:var(--gold-deep)}
.room-option input{flex-shrink:0}
.room-option-name{flex:1;display:flex;align-items:center;gap:8px}
.room-type-badge{font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:2px 7px;border-radius:2px}
.room-option-price{color:var(--muted);font-size:.8125rem;white-space:nowrap}
.link-btn{display:block;width:100%;text-align:left;background:none;border:none;padding:var(--space-2) 0;color:var(--gold-deep);font-size:.8125rem;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{opacity:.8}
.common-access-toggle{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px dashed var(--border);border-radius:4px;font-size:.8125rem;color:var(--muted);cursor:pointer;margin-bottom:var(--space-3)}
.common-access-toggle span{flex:1}
.common-access-toggle b{color:var(--ink);white-space:nowrap}
.room-scope-msg{font-size:.8125rem;padding:var(--space-2) 0;display:none}
.room-scope-msg.show{display:block}
.room-scope-msg.bad{color:var(--gold-deep)}

@media(max-width:480px){
  .room-option{flex-wrap:wrap;align-items:flex-start;row-gap:var(--space-2)}
  .room-option-name{flex-basis:100%;min-width:0}
  .room-option-name span,.room-option-name{white-space:normal}
  .room-option-price{margin-left:calc(18px + var(--space-3))}
  .common-access-toggle{flex-wrap:wrap;row-gap:var(--space-2)}
  .common-access-toggle b{margin-left:calc(18px + var(--space-3))}
}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:oklch(18% 0.03 255 / .92);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:var(--space-8)}
.lightbox.open{display:flex}
.lb-inner{max-width:900px;width:100%}
.lb-head{display:flex;justify-content:space-between;align-items:center;color:oklch(96% 0.01 85);margin-bottom:var(--space-4)}
.lb-head h3{color:#fff;font-size:1.6rem}
.lb-close{background:none;border:1px solid oklch(96% 0.01 85 / .4);color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:background .2s var(--ease-out)}
.lb-close:hover{background:oklch(96% 0.01 85 / .15)}
.lb-stage{aspect-ratio:3/2;border-radius:6px;overflow:hidden;position:relative;background:oklch(30% 0.03 255)}
.lb-stage .ph{width:100%;height:100%;object-fit:cover}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:oklch(28% 0.03 255 / .6);border:none;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.4rem;cursor:pointer;transition:background .2s var(--ease-out)}
.lb-nav:hover{background:oklch(28% 0.03 255 / .85)}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-thumbs{display:flex;gap:8px;margin-top:var(--space-4);overflow-x:auto}
.lb-thumbs .ph{width:88px;height:60px;border-radius:3px;flex:none;cursor:pointer;opacity:.55;transition:opacity .2s var(--ease-out);object-fit:cover}
.lb-thumbs .ph.active{opacity:1;outline:2px solid var(--gold)}

/* Reviews: stay date, write-a-review form, star rating input */
.reviews-section{scroll-margin-top:96px}
.review-when{font-size:.8125rem !important;color:var(--faint) !important;margin:-6px 0 var(--space-2)}
.review-form{margin-top:var(--space-8);padding:var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:6px;max-width:640px;scroll-margin-top:96px}
.review-form h3{font-size:1.4rem;margin-bottom:var(--space-2)}
.review-for{color:var(--muted);font-size:.875rem;margin-bottom:var(--space-4)}
.review-note{color:var(--faint);font-size:.8125rem;margin-top:var(--space-3)}
.review-prompt{margin-top:var(--space-6);color:var(--muted)}
.review-prompt a{color:var(--gold-deep);text-decoration:underline}
.star-input{border:0;padding:0;margin:0 0 var(--space-6)}
.star-input legend{font-size:.875rem;font-weight:500;margin-bottom:var(--space-2)}
.stars{display:inline-flex;gap:2px}
.stars input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.stars label{font-size:2rem;line-height:1;color:var(--border);cursor:pointer;padding:2px;transition:color .15s,transform .15s}
/* Stars are in natural 1→5 order (so arrow keys go the expected way).
   Light the chosen star and every star before it; while hovering,
   preview up to the star under the pointer instead. */
.stars input:checked+label,.stars label:has(~input:checked){color:var(--gold-deep)}
.stars:hover label{color:var(--gold-deep)}
.stars:hover label:hover~label{color:var(--border)}
.stars label:hover{transform:scale(1.1)}
.stars input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Room type gallery with fewer than 5 photos */
.gallery--3{grid-template-columns:2fr 1fr}
.gallery--1{grid-template-columns:1fr;grid-template-rows:1fr}
.gallery--1>div:first-child{grid-row:auto}
@media(max-width:760px){
  .gallery{grid-template-rows:auto}
  .gallery--3{grid-template-columns:1fr 1fr}
  .gallery--1{grid-template-columns:1fr}.gallery--1>div:first-child{grid-column:auto;height:240px}
}
.book-help{display:block;margin-top:var(--space-2);line-height:1.5}
.book-help a{color:var(--gold-deep);white-space:nowrap}