/* ============================================================
   Circuit public detail page (/circuit/{slug})
   Header/.wrap/footer are shared (defined above / partials).
   ============================================================ */
.crumb{font-size:13px;color:var(--faint);padding:18px 0 6px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.crumb a:hover{color:var(--ink);}
.crumb i{font-size:13px;}

.titlerow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:6px 0 14px;flex-wrap:wrap;}
.titlerow h1{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.sub{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:8px;align-items:center;}
.sub .it{display:flex;align-items:center;gap:6px;}
.sub i{color:var(--teal);font-size:17px;}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.bdg{font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--teal-50);color:var(--teal-d);}
.bdg.amber{background:var(--amber-50);color:var(--amber-d);}
.topacts{display:flex;gap:8px;}
.topacts button{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer;}
.topacts button:hover{background:#F4F6F5;}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:190px 190px;gap:8px;border-radius:18px;overflow:hidden;position:relative;margin-bottom:30px;}
.gallery a{position:relative;overflow:hidden;}
.gallery a:first-child{grid-row:1/3;}
.gallery a img{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.gallery a:hover img{transform:scale(1.05);}
/* Extra images beyond the visible 1/3/5 stay in the DOM (the lightbox reads its list from these anchors) but
   are never shown in the main strip — a gallery never shows 2 or 4 photos, only 1, 3 or 5. */
.gallery a.lb-only{display:none;}
/* Fewer than 5 real photos: fewer visible slots, never an asymmetric 2- or 4-tile row. */
.gallery.g1{grid-template-columns:1fr;grid-template-rows:400px;}
.gallery.g1 a:first-child{grid-row:auto;}
.gallery.g3{grid-template-columns:2fr 1fr;grid-template-rows:190px 190px;}
.allphotos{position:absolute;right:14px;bottom:14px;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer;box-shadow:var(--shadow-pill);}

/* Full-screen gallery (lightbox) */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(15,26,30,.94);display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;animation:lbfade .18s ease;}
.lightbox[hidden]{display:none;}
@keyframes lbfade{from{opacity:0;}to{opacity:1;}}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1200px,92vw);}
.lb-stage img{max-width:100%;max-height:82vh;max-height:82dvh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.5);object-fit:contain;background:#0b1417;}
.lb-count{color:#cdd9dc;font-size:13px;font-weight:600;letter-spacing:.02em;}
.lb-nav,.lb-close{border:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.26);}
.lb-nav{width:52px;height:52px;font-size:26px;flex:0 0 auto;}
.lb-close{position:absolute;top:20px;right:20px;width:44px;height:44px;font-size:22px;}
@media(max-width:640px){.lb-nav{width:42px;height:42px;font-size:21px;}.lb-stage img{max-height:74vh;max-height:74dvh;}}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px;padding-bottom:60px;}
.block{padding:24px 0;border-top:1px solid var(--line);}
.block:first-child{border-top:none;padding-top:0;}
.block h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;}
.lead{font-size:15.5px;color:var(--muted);max-width:64ch;}

.dl{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;color:var(--teal-d);background:#fff;border:1.5px solid var(--teal-d);border-radius:10px;padding:8px 14px;cursor:pointer;white-space:nowrap;}
.dl:hover{background:var(--teal-50);}
.hl{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.hl .h{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.hl .h i{color:var(--teal);font-size:21px;margin-top:1px;flex:0 0 auto;}

.tl .node{display:flex;gap:16px;}
.tl .rail{flex:0 0 40px;display:flex;flex-direction:column;align-items:center;}
.tl .dn{width:40px;height:40px;border-radius:12px;background:var(--teal);color:#fff;font-weight:800;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:0 0 auto;}
.tl .dn small{font-size:8.5px;font-weight:600;opacity:.85;text-transform:uppercase;}
.tl .line{flex:1;width:2px;background:var(--line-2);margin:6px 0;}
.tl .node:last-child .line{display:none;}
.tl .nb{padding-bottom:22px;flex:1;min-width:0;}
.tl .nb .nt{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.tl .nb .nt i{color:var(--teal-d);font-size:18px;}
.tl .nb .nd{font-size:14.5px;color:var(--muted);margin-top:5px;max-width:60ch;}

/* Program hotels — image-less cards: name + tier, zone, intro, amenities, nearby POIs. */
.photels{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.phc{border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;background:var(--card,#fff);}
.phc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.phc-h .phc-n{font-size:15.5px;font-weight:800;line-height:1.25;}
.phc-h .phc-t{flex:none;background:var(--sand,#F3EEE3);color:var(--amber-d);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap;}
.phc-z{font-size:13px;color:var(--faint);margin-top:4px;display:flex;align-items:center;gap:5px;}
.phc-i{font-size:13px;color:var(--muted);margin:9px 0 0;line-height:1.5;}
.phc-am{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.phc-am .phc-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);background:var(--line-1,#F4F6F5);border-radius:999px;padding:3px 10px;}
.phc-am .phc-chip i{font-size:12px;color:var(--teal-d);}
.phc-poi{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.phc-poi .phc-poi-l{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);}
.phc-poi .phc-poi-i{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);}
.phc-poi .phc-poi-i i{font-size:13px;color:var(--teal-d);}
.phc-poi .phc-poi-i b{font-weight:600;color:var(--faint);}

.incl{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;}
.incl .r{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;}
.incl .r i{font-size:18px;line-height:1.2;flex:0 0 auto;}
.incl .r p{margin:0;display:inline;}
.incl .r.yes i{color:var(--green);}
.incl .r.no i{color:var(--faint);}
/* Included / not included shown as two labelled columns on desktop, stacked on mobile. */
.incl-split{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;align-items:start;}
.incl-col h2{margin:0 0 12px;}
.incl-list{display:grid;grid-template-columns:1fr;gap:10px;}
.incl-list .r{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;}
.incl-list .r i{font-size:18px;line-height:1.2;flex:0 0 auto;}
.incl-list .r p{margin:0;display:inline;}
.incl-list .r.yes i{color:var(--green);}
.incl-list .r.no i{color:var(--faint);}
@media(max-width:700px){.incl-split{grid-template-columns:1fr;gap:18px;}}

.booking{position:sticky;top:84px;height:fit-content;border:1px solid var(--line-2);border-radius:16px;padding:20px;box-shadow:var(--shadow-float);}
.booking .from{font-size:13px;color:var(--faint);}
.booking .price{font-size:30px;font-weight:800;letter-spacing:-.02em;}
.booking .price small{font-size:13.5px;font-weight:600;color:var(--muted);}
.booking .basis{font-size:12.5px;color:var(--faint);margin-top:2px;}
.booking .cta{width:100%;margin-top:16px;background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:800;padding:13px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.booking .cta:hover{background:#085a6f;}
.booking .wa{width:100%;margin-top:10px;background:#fff;color:var(--teal-d);border:1px solid var(--teal-d);font-family:inherit;font-size:14px;font-weight:700;padding:11px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.booking .facts{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
.booking .facts .f{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);padding:5px 0;}
.booking .facts .f i{color:var(--teal);font-size:18px;}
.booking .agent{margin-top:16px;background:var(--sand);border-radius:11px;padding:12px 14px;font-size:13px;color:var(--ink);}
.booking .agent a{color:var(--teal-d);font-weight:800;}

@media(max-width:880px){
  .cols{grid-template-columns:1fr;gap:0;}
  .booking{position:static;margin-top:24px;}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:160px 160px;}
  .gallery a:first-child{grid-row:1/2;grid-column:1/3;}
  .gallery.g1{grid-template-rows:220px;}
  .gallery.g1 a:first-child{grid-row:auto;grid-column:auto;}
  .hl,.photels,.incl{grid-template-columns:1fr;}
}

/* ============================================================
   Hotel public detail page (/hotel/{slug})
   Reuses crumb/titlerow/sub/badges/gallery/cols/block/booking (above).
   ============================================================ */
.sub .stars{font-size:15px;}
.am{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px;}
.am .a{display:flex;gap:10px;align-items:center;font-size:14.5px;}
.am .a i{color:var(--teal);font-size:20px;flex:0 0 auto;}
.rooms{display:flex;flex-direction:column;gap:14px;}
/* No room photos for now (see the comment in Hotels/Detail.cshtml) — a single column, not the
   160px-image + body grid this used when .rph rendered. Restore `grid-template-columns:160px 1fr` and
   `.room .rph{height:130px;}` alongside the markup once room images are available. */
.room{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr;}
.room .rb{padding:13px 16px;}
.room .rn{font-size:15.5px;font-weight:800;}
.room .rd{font-size:13.5px;color:var(--muted);margin-top:4px;}
.room .rf{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;}
.room .tag{font-size:12px;color:var(--muted);background:#EEF3F2;border-radius:7px;padding:3px 10px;display:flex;align-items:center;gap:5px;}
.loc-addr{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--muted);margin:-6px 0 14px;}
.loc-addr i{color:var(--teal);font-size:16px;}
.lm{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;}
.lm .l{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid var(--line);padding:7px 0;}
.lm .l span:first-child{display:flex;align-items:center;gap:7px;}
.lm .l i{color:var(--teal);font-size:16px;}
.lm .l b{font-weight:700;color:var(--ink);}
/* Real Leaflet map (hotel's own coordinates + a single .spin pin) — replaced the old decorative background-
   image placeholder box. #CFE3E7 shows briefly as the tile background while Leaflet loads/renders. */
.mapph{height:200px;border-radius:14px;background:#CFE3E7;position:relative;overflow:hidden;}

@media(max-width:880px){.am,.lm,.room{grid-template-columns:1fr;}}

/* Service public detail (/service/{slug}) — reuses crumb/titlerow/gallery/incl/lm/booking; only the note box is new. */
.note{background:var(--amber-50);color:var(--amber-d);border-radius:11px;padding:12px 15px;font-size:13.5px;display:flex;gap:9px;align-items:flex-start;}
.note i{font-size:19px;margin-top:1px;flex:0 0 auto;}