/* ════════════════════════════════════════════════════════════════
   /italysleep — the hotel directory. Inherits italyeat.css tokens &
   shell (.ie-*). Adds hotel-specific cards, the practical toggle row,
   and the side-by-side compare drawer (the signature feature).
   Zero external requests. Pairs with wishlist.css (hearts) + italysleep.js.
   ════════════════════════════════════════════════════════════════ */

/* a little breathing room at the top of the sticky bar so the first chip
   row doesn't visually merge with the bar's top edge when pinned */
.is .ie-filterbar-inner{padding-top:16px}

/* ── practical toggle row (Type / Stay length) above the chips ── */
.is-toggles{display:flex;align-items:center;gap:16px;flex-wrap:wrap;width:100%;padding:2px 0 8px;margin-bottom:6px;border-bottom:1px dashed var(--ie-hair-soft)}
.is-tgroup{display:flex;align-items:center;gap:8px}
.is-tgroup-label{font-family:var(--ie-fu);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ie-ink-38)}
.is-tg{display:inline-flex;border:1px solid var(--ie-hair);border-radius:2px;overflow:hidden}
.is-tg button{font-family:var(--ie-fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ie-ink-60);background:none;border:none;padding:6px 11px;cursor:pointer;border-left:1px solid var(--ie-hair);transition:background .2s,color .2s}
.is-tg button:first-child{border-left:none}
.is-tg button.on{background:var(--ie-terra);color:var(--ie-paper)}

/* ── hotel grid — max 3 cols, taller cards, more horizontal room ── */
.is-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1199px){.is-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:719px){.is-grid{grid-template-columns:1fr}}

/* ── hotel card (class hcard so wishlist hearts hook in) ────────── */
.is .hcard{position:relative;background:var(--ie-paper);border:1px solid var(--ie-hair-soft);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.is .hcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(31,26,20,.11)}
.is .hcard-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ie-paper-soft);flex-shrink:0}
.is .hcard-photo{width:100%;height:100%}
.is .hcard-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.is .hcard:hover .hcard-media img{transform:scale(1.04)}
.is .hcard-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--ie-paper-soft),var(--ie-paper-deep))}
.is .hcard-noimg span{font-family:var(--ie-fd);font-style:italic;font-size:15px;color:var(--ie-ink-38)}
.is-ptype-tag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--ie-fu);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ie-paper);background:rgba(31,26,20,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:4px 9px;border-radius:2px}
.is-reopen{position:absolute;bottom:10px;left:10px;z-index:2;font-family:var(--ie-fu);font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-paper);background:var(--ie-terra);padding:4px 9px;border-radius:2px}

.is .hcard-body{padding:15px 18px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.is .hcard-loc{display:flex;align-items:baseline;gap:8px;font-family:var(--ie-fu);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ie-terra)}
.is .hcard-loc .ptype{color:var(--ie-ink-38)}
.is .hcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.is .hcard-name{font-family:var(--ie-fd);font-weight:500;font-size:clamp(21px,1.8vw,25px);line-height:1.08;color:var(--ie-espresso)}
.is .hcard-price{font-family:var(--ie-fu);font-size:12px;letter-spacing:.04em;color:var(--ie-terra);flex-shrink:0}
.is .hcard-from{font-family:var(--ie-fu);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-ink-60);margin-top:-2px}
.is .hcard-desc{font-family:var(--ie-fb);font-size:13.5px;line-height:1.55;color:var(--ie-ink-60);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.is .hcard:hover .hcard-desc{-webkit-line-clamp:3}
.is .hcard-desc em{font-family:var(--ie-fd);font-style:italic;color:var(--ie-terra-deep)}
.is .hcard-known{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;margin:1px 0 2px}
.is .hcard-known li{font-family:var(--ie-fb);font-size:12px;color:var(--ie-ink-60);position:relative;padding-left:12px;line-height:1.4}
.is .hcard-known li::before{content:"·";position:absolute;left:2px;color:var(--ie-terra);font-weight:700}
.is .hcard-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:8px}
.is .hcard-pill{font-family:var(--ie-fu);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ie-terra);border:1px solid rgba(178,82,56,.28);border-radius:2px;padding:3px 7px}
.is .hcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--ie-hair-soft);margin-top:8px}
.is-compare{font-family:var(--ie-fu);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-terra);background:transparent;border:1px solid rgba(178,82,56,.4);border-radius:2px;padding:5px 10px;cursor:pointer;transition:background .2s,color .2s}
.is-compare:hover{background:var(--ie-wash)}
.is-compare.on{background:var(--ie-terra);border-color:var(--ie-terra);color:var(--ie-paper)}
.is .hcard-book{font-family:var(--ie-fu);font-size:10px;letter-spacing:.06em;color:var(--ie-terra);text-decoration:none}
.is .hcard-phone{font-family:var(--ie-fd);font-style:italic;font-size:11px;color:var(--ie-ink-38)}

/* tier hierarchy (mirror italyeat) */
.is .hcard[data-tier-mark="hala-vetted"]{border-top:2px solid var(--ie-terra)}
.is .hcard[data-tier-mark="sofias-pick"]{border:1px solid var(--ie-terra);border-top:3px solid var(--ie-terra)}
.is-tiermark{display:inline-flex;align-items:center;gap:6px;font-family:var(--ie-fu);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ie-terra)}
.is-tiermark .seal{width:14px;height:14px;border-radius:50%;background:var(--ie-terra);color:var(--ie-paper);display:inline-flex;align-items:center;justify-content:center;font-family:var(--ie-fd);font-size:9px;font-style:italic}
.is-tiermark--hala-vetted{color:var(--ie-terra-deep)}
.is-tiermark--hala-vetted .seal{background:transparent;border:1px solid var(--ie-terra-deep);color:var(--ie-terra-deep)}

/* modal extras (reuse ie-modal; add hotel facts grid) */
.is-modal-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:6px 0 14px}
.is-modal-fact{font-family:var(--ie-fb);font-size:13px;color:var(--ie-ink)}
.is-modal-fact span{display:block;font-family:var(--ie-fu);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ie-ink-38);margin-bottom:2px}
.is-modal-known{list-style:none;margin:4px 0 14px;padding:0}
.is-modal-known li{font-family:var(--ie-fb);font-size:14px;color:var(--ie-ink-60);padding-left:16px;position:relative;line-height:1.6}
.is-modal-known li::before{content:"—";position:absolute;left:0;color:var(--ie-terra)}
.is-modal-insider{font-family:var(--ie-fd);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ie-terra-deep);border-left:2px solid var(--ie-terra);padding-left:14px;margin:4px 0 16px}
.is-modal .fullpage{display:inline-block;margin-top:4px;font-family:var(--ie-fu);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-terra)}

/* ── COMPARE TRAY (persistent pill, bottom-right) ─────────────── */
.is-tray{position:fixed;right:20px;bottom:20px;z-index:9400;display:none;align-items:center;gap:14px;background:var(--ie-espresso);color:var(--ie-paper);border-radius:3px;padding:12px 16px;box-shadow:0 12px 36px rgba(31,26,20,.32)}
.is-tray.show{display:flex}
.is-tray-thumbs{display:flex;align-items:center}
.is-tray-thumbs .t{width:34px;height:26px;border-radius:2px;object-fit:cover;border:1.5px solid var(--ie-espresso);margin-left:-8px;background:var(--ie-paper-soft)}
.is-tray-thumbs .t:first-child{margin-left:0}
.is-tray-label{font-family:var(--ie-fu);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.is-tray-label b{color:var(--ie-ochre)}
.is-tray-open{font-family:var(--ie-fu);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-paper);background:var(--ie-terra);border:none;border-radius:2px;padding:8px 14px;cursor:pointer}
.is-tray-clear{font-family:var(--ie-fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,233,213,.6);background:none;border:none;cursor:pointer}
@media(max-width:560px){.is-tray{left:12px;right:12px;bottom:12px;justify-content:space-between}}

/* ── COMPARE DRAWER (full-screen side-by-side) ────────────────── */
.is-cmp-bd{position:fixed;inset:0;z-index:9700;background:rgba(31,26,20,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.is-cmp-bd.open{opacity:1;pointer-events:auto}
.is-cmp{position:fixed;inset:0;z-index:9750;background:var(--ie-paper);transform:translateY(2%);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;display:flex;flex-direction:column;overflow:hidden}
.is-cmp.open{opacity:1;pointer-events:auto;transform:none}
.is-cmp-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px var(--ie-g);border-bottom:1px solid var(--ie-hair);background:var(--ie-paper-soft)}
.is-cmp-head h2{font-family:var(--ie-fd);font-weight:400;font-size:clamp(24px,3vw,36px);color:var(--ie-espresso)}
.is-cmp-head .tools{display:flex;align-items:center;gap:18px}
.is-cmp-clear{font-family:var(--ie-fu);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-terra);background:none;border:none;cursor:pointer}
.is-cmp-close{font-family:var(--ie-fd);font-size:30px;line-height:1;color:var(--ie-terra);background:none;border:none;cursor:pointer}
.is-cmp-scroll{flex:1;overflow:auto}
.is-cmp-inner{max-width:var(--ie-max);margin:0 auto;padding:0 var(--ie-g) 40px}

/* column headers */
.is-cmp-cols{display:grid;gap:18px;padding:22px 0;position:sticky;top:0;background:var(--ie-paper);z-index:3;border-bottom:1px solid var(--ie-hair)}
.is-cmp-col{position:relative}
.is-cmp-col h3{font-family:var(--ie-fd);font-weight:500;font-size:22px;line-height:1.1;color:var(--ie-espresso);margin:10px 0 4px}
.is-cmp-col .tags{font-family:var(--ie-fu);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ie-terra)}
.is-cmp-col .remove{position:absolute;top:8px;right:8px;font-family:var(--ie-fu);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ie-paper);background:rgba(31,26,20,.55);border:none;border-radius:2px;padding:4px 8px;cursor:pointer}

/* comparison rows */
.is-cmp-row{display:grid;gap:18px;padding:13px 0;border-top:1px solid var(--ie-hair-soft);align-items:start}
.is-cmp-row .rlabel{grid-column:1/-1;font-family:var(--ie-fu);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ie-ink-38);margin-bottom:2px}
.is-cmp-cell{font-family:var(--ie-fb);font-size:14px;line-height:1.5;color:var(--ie-ink)}
.is-cmp-cell.diff{color:var(--ie-terra-deep);font-weight:500}
.is-cmp-cell .yes{color:var(--ie-terra)}
.is-cmp-cell .no{color:var(--ie-ink-38)}
.is-cmp-cell ul{list-style:none;margin:0;padding:0}
.is-cmp-cell ul li{padding-left:12px;position:relative;font-size:13px;line-height:1.5;color:var(--ie-ink-60)}
.is-cmp-cell ul li::before{content:"·";position:absolute;left:2px;color:var(--ie-terra)}

.is-cmp-foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:28px 0 8px;margin-top:18px;border-top:1px solid var(--ie-hair)}
.is-cmp-foot a,.is-cmp-foot button{font-family:var(--ie-fb);font-size:14px;padding:13px 24px;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid var(--ie-terra)}
.is-cmp-foot .save{background:var(--ie-terra);color:var(--ie-paper)}
.is-cmp-foot .send{background:transparent;color:var(--ie-terra)}

/* ── PHOTO CAROUSEL (quick-view modal + compare columns) ──────── */
.is-carousel{position:relative;overflow:hidden;background:var(--ie-paper-soft);border-radius:3px}
.is-carousel-track{display:flex;height:100%;transition:transform .35s ease;will-change:transform}
.is-carousel .is-slide{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.is-carousel-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--ie-paper-soft),var(--ie-paper-deep))}
.is-carousel-noimg span{font-family:var(--ie-fd);font-style:italic;font-size:15px;color:var(--ie-ink-38)}
.is-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:rgba(31,26,20,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:2}
.is-carousel-nav:hover{background:var(--ie-terra)}
.is-carousel-nav.prev{left:8px}.is-carousel-nav.next{right:8px}
.is-carousel:hover .is-carousel-nav{opacity:1}
.is-carousel-count{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--ie-fu);font-size:9px;letter-spacing:.06em;color:#fff;background:rgba(31,26,20,.5);padding:3px 7px;border-radius:10px}
.is-carousel-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.is-carousel-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(245,233,213,.55);cursor:pointer;transition:background .2s,transform .2s}
.is-carousel-dots .dot.on{background:var(--ie-paper);transform:scale(1.25)}
/* modal carousel sits at the top of the quick-view card */
.is-modal-carousel{aspect-ratio:3/2;border-radius:0}
/* compare-column carousel: starts large, shrinks once the reader scrolls rows */
.is-cmp-carousel{height:clamp(190px,24vw,320px);transition:height .35s ease}
.is-cmp.compact .is-cmp-carousel{height:96px}
.is-cmp.compact .is-cmp-carousel .is-carousel-dots,
.is-cmp.compact .is-cmp-carousel .is-carousel-count{opacity:0}

/* mobile compare: horizontal swipe between hotels */
@media(max-width:680px){
  .is-cmp-cols{grid-template-columns:repeat(var(--cmp-n,2),78%)!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px}
  .is-cmp-col{scroll-snap-align:start}
  .is-cmp-row{grid-template-columns:repeat(var(--cmp-n,2),78%)!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px}
  .is-cmp-row .rlabel{position:sticky;left:0}
  .is-cmp-carousel{height:clamp(160px,42vw,230px)}
}

@media(prefers-reduced-motion:reduce){
  .is .hcard:hover{transform:none}.is .hcard:hover .hcard-media img{transform:none}
  .is-cmp,.is-cmp-bd,.is-carousel-track,.is-cmp-carousel{transition:none!important}
}