/* ════════════════════════════════════════════════════════════════
   /the-index — Hala's master directory. The everything-view.
   Reuses italyeat.css tokens + filter bar + chips + pills + modal + CTA
   (all page-agnostic, ie- prefixed). This file adds: the four-way
   Eat·Sleep·Do·Index toggle, the masonry grid, the unified
   category-appropriate cards (restaurant / hotel / activity), the
   category tag, and the region-grouped view headers.
   Country is a first-class but currently single-option dimension.
   ════════════════════════════════════════════════════════════════ */
.xi *{box-sizing:border-box}
.xi-wrap{max-width:var(--ie-max);margin:0 auto;padding:0 var(--ie-g)}

/* ── FOUR-WAY TOGGLE (Eat · Sleep · Do · The Index) ─────
   Lives as the top row INSIDE the sticky .ie-filterbar, so it persists
   on scroll — the always-available "switch what you're looking at"
   affordance, never a dead-end back to the universal nav. Transparent
   so the bar's translucent blur shows through; underline marks active. */
.ie-filterbar .xi-toggle{width:100%;border-bottom:1px solid var(--ie-hair);margin-bottom:4px}
.xi-toggle-inner{max-width:var(--ie-max);margin:0 auto;padding:0 var(--ie-g);display:flex;gap:0}
.xi-tog{flex:1;text-align:center;font-family:var(--ie-fu);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ie-ink-60);text-decoration:none;padding:11px 8px 10px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.xi-tog:hover{color:var(--ie-terra)}
.xi-tog.on{color:var(--ie-terra);border-bottom-color:var(--ie-terra)}
.xi-tog .sub{display:block;font-family:var(--ie-fb);font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--ie-ink-38);margin-top:2px}
@media(max-width:560px){.xi-tog .sub{display:none}.xi-tog{padding:12px 4px;font-size:10px}}

/* ── REGION DROPDOWN: Country → region hierarchy ──────── */
.ie-pop-group{font-family:var(--ie-fu);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ie-terra);padding:10px 8px 4px;border-top:1px solid var(--ie-hair-soft);margin-top:4px}
.ie-pop-group:first-child{border-top:none;margin-top:0;padding-top:4px}
.ie-pop .ie-pop-group + .ie-opt,.ie-pop-group ~ .ie-opt{padding-left:18px}

/* ── RESULTS: masonry via CSS multi-column ────────────── */
.xi-results{padding:6px 0 40px}
.xi-grid{column-count:3;column-gap:18px}
@media(max-width:1199px){.xi-grid{column-count:2}}
@media(max-width:719px){.xi-grid{column-count:1}}
.xi-card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%;margin:0 0 18px;
  position:relative;background:var(--ie-paper);border:1px solid var(--ie-hair-soft);border-radius:3px;overflow:hidden;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;vertical-align:top}
.xi-card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(31,26,20,.10)}

/* media + category tag */
.xi-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ie-paper-soft)}
.xi-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.xi-card:hover .xi-card-media img{transform:scale(1.04)}
.xi-card.no-img .xi-card-media{display:none}
.xi-cat{position:absolute;top:10px;left:10px;z-index:4;font-family:var(--ie-fu);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ie-paper);background:var(--ie-terra);padding:4px 9px;border-radius:2px}
.xi-card.no-img .xi-cat{position:static;display:inline-block;margin:16px 0 0 18px}

.xi-card-body{padding:15px 18px 18px;display:flex;flex-direction:column;gap:6px}
.xi-meta{font-family:var(--ie-fu);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ie-terra)}
.xi-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.xi-name{font-family:var(--ie-fd);font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.12;color:var(--ie-espresso)}
.xi-price{font-family:var(--ie-fu);font-size:11px;letter-spacing:.04em;color:var(--ie-terra);flex-shrink:0;white-space:nowrap}
.xi-must{font-family:var(--ie-fd);font-style:italic;font-size:13.5px;color:var(--ie-terra-deep);line-height:1.3}
.xi-from{font-family:var(--ie-fu);font-size:10.5px;letter-spacing:.04em;color:var(--ie-ink-60)}
.xi-copy{font-family:var(--ie-fb);font-size:13.5px;line-height:1.55;color:var(--ie-ink-60);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xi-pills{display:flex;flex-wrap:wrap;gap:5px;padding-top:4px}
.xi-pill-s{font-family:var(--ie-fu);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-ink-38);border:1px solid var(--ie-hair-soft);border-radius:2px;padding:3px 7px}
.xi-card mark{background:none;color:var(--ie-terra);text-decoration:underline;text-decoration-color:var(--ie-terra);text-underline-offset:2px}

/* tier hierarchy (matches category pages) */
.xi-card[data-tier-mark="hala-vetted"]{border-top:2px solid var(--ie-terra)}
.xi-card[data-tier-mark="sofias-pick"]{border:1px solid var(--ie-terra);border-top:3px solid var(--ie-terra)}

/* per-category accent on the meta line */
.xi-card[data-type="hotel"] .xi-cat{background:var(--ie-espresso)}
.xi-card[data-type="activity"] .xi-cat{background:var(--ie-ochre);color:var(--ie-espresso)}

/* ── REGION-GROUPED / CATEGORY-GROUPED VIEW ───────────── */
.xi-group{margin:0 0 10px}
.xi-ghead{padding:30px 0 14px;border-top:1px solid var(--ie-hair);margin-top:14px}
.xi-group:first-child .xi-ghead{border-top:none;margin-top:0;padding-top:8px}
.xi-ghead .k{font-family:var(--ie-fu);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ie-terra);display:block;margin-bottom:8px}
.xi-ghead h2{font-family:var(--ie-fd);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1;color:var(--ie-espresso);margin:0 0 8px}
.xi-ghead .bd{font-family:var(--ie-fu);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-ink-60);display:flex;flex-wrap:wrap;gap:12px}
.xi-ghead .bd b{color:var(--ie-terra);font-weight:600}

/* ── STATS STRIP trust line ───────────────────────────── */
.xi-noads{font-family:var(--ie-fu);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ie-terra)}

@media(prefers-reduced-motion:reduce){
  .xi *{transition:none!important;animation:none!important}
  .xi-card:hover{transform:none}.xi-card:hover .xi-card-media img{transform:none}
}