/* ============================================================
   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:calc(var(--space-8) + 8px)}
.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}
.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}
@media(max-width:960px){.layout{grid-template-columns:1fr;gap:var(--space-8)}}

.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)}
.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;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)}
.room-name{font-size:1.15rem}
.room-desc{color:var(--muted);font-size:.875rem;margin-top:4px;line-height:1.5;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}
.review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.review-head strong{font-weight:500}
.review-stars{color:var(--gold-deep);letter-spacing:1px}
.review-stars .dim{color:var(--border)}
.review p{color:var(--muted);font-size:.9375rem;line-height:1.6}

/* ---------- 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)}

/* ---------- 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)}