/* PORIEŠI.ME — SEKCIE (oblasti) domova + stránka #sekcia/<id>.
   ════════════════════════════════════════════════════════════════════════════
   Domov už nie je dve obrovské mriežky 96 dlaždíc, ale desať kariet oblastí.
   Karta .ob-card je zámerne postavená podľa .vs-cta z assets/vstup.css
   (fotka na pozadí → tmavý prechod → Manrope 800 → podtitul → oranžová pilulka),
   aby bol domov vizuálne jedna vec so vstupným feedom.

   Prefixy:  .ob-*  = blok „Vyber oblasť“ na domove
             .sx-*  = stránka jednej oblasti (#sekcia/<id>)
             .ac-*  = modál „Všetky kategórie“
   Mobil (≤640) aj desktop (1440) sa riešia naraz — každý blok má oba stavy.
   ════════════════════════════════════════════════════════════════════════════ */

/* čítačke oznámime počet výsledkov, oku nie */
.sx-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ───────────────────────── DOMOV — VYBER OBLASŤ ───────────────────────── */
.ob-grid{display:grid; gap:16px; grid-template-columns:repeat(4,1fr)}
.ob-card{position:relative; display:block; height:210px; overflow:hidden; border-radius:24px; text-decoration:none; color:#fff;
  background:var(--ink); isolation:isolate;
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .25s ease, box-shadow .25s ease}
.ob-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:-2; transition:transform .6s ease}
.ob-grad{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,22,26,0) 30%,rgba(20,22,26,.55) 62%,rgba(20,22,26,.9) 100%)}
.ob-body{position:absolute; left:0; right:0; bottom:0; padding:16px 16px 14px; display:block}
.ob-t{display:block; font:800 clamp(1.05rem,1.6vw,1.45rem)/1.1 "Manrope","IBM Plex Sans",system-ui,sans-serif;
  letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.5)}
.ob-d{display:-webkit-box; margin-top:4px; font-size:.86rem; line-height:1.35; color:rgba(255,255,255,.9);
  text-shadow:0 1px 8px rgba(0,0,0,.5); -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ob-n{display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px;
  background:linear-gradient(180deg,var(--o1),var(--o3)); border:1px solid var(--o4);
  font:700 .74rem "IBM Plex Sans",system-ui,sans-serif; color:#fff}
.ob-n .num{font-weight:800}
.ob-n--soft{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28)}
.ob-card:hover,.ob-card:focus-visible{transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 2px rgba(255,162,74,.9) inset; outline:none}
.ob-card:hover .ob-img{transform:scale(1.05)}
.ob-foot{display:flex; justify-content:center; margin-top:14px}
.ob-foot .btn{min-height:44px}

@media (max-width:1099px){
  .ob-grid{grid-template-columns:repeat(3,1fr)}
  .ob-card{height:190px}
}
@media (max-width:640px){
  .ob-grid{grid-template-columns:1fr 1fr; gap:12px}
  .ob-card{height:150px; border-radius:18px}
  .ob-body{padding:12px 12px 11px}
  .ob-d{font-size:.78rem; -webkit-line-clamp:2}   /* 2 riadky — podtitul „elektrikár · vodár · kúrenár“ sa na 375 px nezreže */
  .ob-n{font-size:.68rem; padding:3px 8px; margin-top:6px}
}

/* ───────────────────────── MODÁL VŠETKY KATEGÓRIE ───────────────────────── */
.ac-hint{display:inline-flex; align-items:center; min-height:44px; padding:2px 0; border:0; background:none; text-align:left;
  font:inherit; color:var(--accent-dark); text-decoration:underline; cursor:pointer}
.ac-hint:hover{color:var(--accent)}
#ac-q{width:100%; box-sizing:border-box; margin:10px 0 4px}
/* Okno je širšie len pre „Všetky kategórie“ (4 stĺpce dlaždíc); kde :has() nie je, ostane 640 px a mriežka sa sama zúži. */
.modal:has(#ac-groups){max-width:1020px}
.ac-title{margin:0 44px 0 0; display:flex; align-items:center; gap:10px; font:800 1.35rem/1.15 "Manrope","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.02em}
.ac-c{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 8px; border-radius:999px;
  background:var(--surface2); color:var(--muted); font:700 .74rem "IBM Plex Sans",system-ui,sans-serif; letter-spacing:0}
#ac-q{position:sticky; top:0; z-index:3; box-shadow:0 8px 14px -10px rgba(20,26,34,.35)}
.ac-hd{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 10px}
.ac-hd:first-child{margin-top:12px}
.ac-h{margin:0; display:flex; align-items:center; gap:8px; font:800 1.02rem/1.2 "Manrope","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.01em; color:var(--ink)}
.ac-go{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; font-size:.84rem; font-weight:600; color:var(--accent-dark); text-decoration:none; white-space:nowrap}
.ac-go:hover{color:var(--accent); text-decoration:underline}
.ac-list{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* Dlaždica = malá sestra .ob-card z bloku „Vyber oblasť“: fotka, grafitový prechod, biely text. */
.ac-tile{position:relative; display:block; height:84px; overflow:hidden; border-radius:16px; isolation:isolate; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#2A2F37,#181B20); box-shadow:0 6px 18px rgba(20,26,34,.18), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition:transform .2s ease, box-shadow .2s ease}
.ac-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:-2;
  filter:saturate(.92) brightness(.9) contrast(1.04); transition:transform .5s ease}
/* Zľava tma (text), sprava necháva fotku dýchať; jemný teplý závoj zjednotí svetlé aj tmavé fotky do jednej palety. */
.ac-gr{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(18,20,24,.90) 0%,rgba(18,20,24,.72) 38%,rgba(18,20,24,.22) 74%,rgba(18,20,24,.08) 100%),
             linear-gradient(0deg,rgba(232,115,12,.10),rgba(232,115,12,.10))}
.ac-bd{position:absolute; inset:0; display:flex; align-items:center; gap:9px; padding:0 24% 0 12px}
.ac-ic{flex:none; display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:10px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-size:1rem; line-height:1; color:#fff}
.ac-ic svg,.ac-ic .cicon{width:17px; height:17px; stroke:#fff; color:#fff}
.ac-nm{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; font-size:.88rem; line-height:1.18;
  text-shadow:0 1px 8px rgba(0,0,0,.55); overflow-wrap:anywhere}
.ac-firm{position:absolute; top:8px; right:8px; padding:2px 8px; border-radius:999px; background:rgba(18,20,24,.62); border:1px solid rgba(255,255,255,.28);
  font:700 .66rem "IBM Plex Sans",system-ui,sans-serif; letter-spacing:.02em; color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.ac-tile:hover,.ac-tile:focus-visible{transform:translateY(-2px); outline:none; box-shadow:0 12px 26px rgba(20,26,34,.28), 0 0 0 2px rgba(255,162,74,.95) inset}
.ac-tile:hover .ac-bg{transform:scale(1.06)}
#ac-groups{max-height:62vh; overflow:auto; -webkit-overflow-scrolling:touch; padding:2px 4px 6px 2px; margin:6px -4px 0 -2px}
@media (max-width:640px){
  #ac-groups{max-height:none; overflow:visible}
  .ac-title{font-size:1.15rem}
  #ac-q{top:6px}
  .ac-list{grid-template-columns:1fr 1fr; gap:8px}
  .ac-tile{height:76px; border-radius:14px}
  /* Na 156 px dlaždici nie je miesto na ikonku aj na slovo „Elektroinštalačné“ — službu tu ukazuje fotka,
     text dostane celú šírku a prechod je tmavší po celej ploche, aby sa biele písmo čítalo aj cez svetlú fotku. */
  .ac-bd{padding:0 10px; gap:0; align-items:flex-end; padding-bottom:9px}
  .ac-ic{display:none}
  .ac-gr{background:linear-gradient(180deg,rgba(18,20,24,.10) 0%,rgba(18,20,24,.55) 48%,rgba(18,20,24,.92) 100%),
                    linear-gradient(0deg,rgba(232,115,12,.10),rgba(232,115,12,.10))}
  .ac-nm{font-size:.8rem; -webkit-line-clamp:2; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
  .ac-firm{top:6px; right:6px; font-size:.6rem; padding:1px 6px}
  .ac-hd{margin:18px 0 8px}
}
@media (prefers-reduced-motion:reduce){ .ac-tile,.ac-bg{transition:none} .ac-tile:hover{transform:none} .ac-tile:hover .ac-bg{transform:none} }

/* ───────────────────────── STRÁNKA OBLASTI ───────────────────────── */
.sx-top{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.sx-top .btn.sm{min-height:44px}

.sx-hero{position:relative; height:300px; border-radius:var(--r-lg); overflow:hidden; isolation:isolate; color:#fff;
  background:var(--ink); box-shadow:0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.1) inset}
.sx-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:-2}
.sx-hero-grad{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,22,26,0) 28%,rgba(20,22,26,.56) 60%,rgba(20,22,26,.9) 100%)}
.sx-hero-body{position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px}
.sx-hero h1{margin:0; color:#fff; font:800 clamp(1.6rem,3.4vw,2.4rem)/1.08 "Manrope","IBM Plex Sans",system-ui,sans-serif;
  letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.5)}
.sx-hero-d{margin:8px 0 0; font-size:.95rem; color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.5)}
.sx-hero-n{display:inline-block; margin-top:10px; padding:5px 12px; border-radius:999px;
  background:linear-gradient(180deg,var(--o1),var(--o3)); border:1px solid var(--o4);
  font:700 .78rem "IBM Plex Sans",system-ui,sans-serif; color:#fff}
.sx-hero-n.ob-n--soft{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28)}
@media (max-width:1099px){ .sx-hero{height:260px} }
@media (max-width:640px){
  .sx-hero{height:200px; border-radius:var(--r)}
  .sx-hero-body{padding:14px 14px 13px}
  .sx-hero-d{font-size:.86rem; margin-top:6px}
  .sx-hero-n{font-size:.72rem; margin-top:8px}
}

/* hľadanie v oblasti */
.sx-search{position:relative; margin:16px 0 0}
.sx-search input{width:100%; box-sizing:border-box; min-height:52px}
#sx-sugg{margin-top:10px}
#sx-sugg:empty{display:none}
.sx-sugg-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sx-else{margin:8px 0 0; font-size:.88rem; color:var(--muted)}
.sx-else a{color:var(--accent-dark); font-weight:600}
.sx-none{margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.9rem; color:var(--muted)}

/* rad kategórií */
.sx-cats{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.sx-chip{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 6px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:.9rem;
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease}
.sx-chip img,.sx-chip .sx-chip-ph{width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--surface2); display:inline-flex; align-items:center; justify-content:center}
.sx-chip .cicon{width:18px; height:18px}
.sx-chip:hover{border-color:var(--accent); color:var(--accent-dark)}
.sx-chip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark)}
.sx-chip .badge{margin-left:2px}
@media (max-width:640px){
  .sx-cats{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:14px;
    padding-bottom:6px; margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .sx-cats::-webkit-scrollbar{display:none}
  .sx-chip{scroll-snap-align:start; flex:none}
}

/* medzinadpis voliteľnej skupiny čipov (sec.groups v data/sections.js) */
.sx-cats-h{display:inline-flex; align-items:center; flex:0 0 100%; margin:8px 0 0;
  font-size:.8rem; font-weight:700; color:var(--muted)}
@media (max-width:640px){
  /* .sx-cats je tu nowrap scroller — 100 % šírka by ho roztiahla, preto je medzinadpis bežný prvok pásu */
  .sx-cats-h{flex:none; margin:0; padding:0 4px; white-space:nowrap; align-self:center}
}

/* filtre — desktop pilulky */
.sx-filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 0}
.sx-pill{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:.88rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease}
.sx-pill:hover{border-color:var(--accent); color:var(--accent-dark)}
.sx-pill[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark)}
.sx-pill[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.sx-pill[aria-disabled="true"]:hover{border-color:var(--line); color:var(--ink)}
.sx-pill .num{font-weight:800}
.sx-sel{display:inline-flex; align-items:center; gap:6px; min-height:44px}
.sx-sel select{min-height:44px; border-radius:999px; padding:0 12px; border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink); font-weight:600; font-size:.88rem}
.sx-sel label{font-size:.82rem; color:var(--muted)}
.sx-seg{display:inline-flex; gap:4px; padding:2px; border-radius:999px; background:var(--surface2); border:1.5px solid var(--line)}
.sx-seg button{min-height:44px; padding:0 14px; border-radius:999px; border:0; background:transparent; color:var(--ink);
  font-weight:600; font-size:.86rem; cursor:pointer}
.sx-seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--o1),var(--o3)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.sx-seg button[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.sx-rank{flex:1 0 100%; margin:2px 0 0}
.sx-more{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 0; padding:14px;
  border:1.5px dashed var(--line); border-radius:var(--r)}
.sx-more[hidden]{display:none}
.sx-more .sx-mh{grid-column:1 / -1; margin:0; font-size:.85rem; color:var(--muted)}
.sx-rate-note{grid-column:1 / -1; margin:0; font-size:.8rem; color:var(--muted)}

/* DATA-SPEC §D.6 — zručnosť, jazyk, prax, záruka, faktúra. Skupiny čipov idú cez celú šírku
   panela „Viac filtrov“ (na mobile cez celý spodný sheet); počty sú z rovnakého menovateľa
   ako výsledky, takže čip nikdy nesľúbi viac, než zoznam ukáže. */
.sx-fgrp{grid-column:1 / -1}
.sx-fh{margin:0 0 6px; font-size:.82rem; font-weight:700; color:var(--muted)}
.sx-chips{display:flex; flex-wrap:wrap; gap:8px}
.sx-fchip{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 13px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:.84rem;
  text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease}
.sx-fchip:hover{border-color:var(--accent); color:var(--accent-dark)}
.sx-fchip[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark)}
.sx-fchip .num{font-weight:800}
.sx-fchip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sx-fmore{border-style:dashed}
.sx-fnote{margin:6px 0 0; font-size:.8rem; color:var(--muted)}
.sx-more .sx-sel label{white-space:nowrap}

/* aktívne filtre */
.sx-active{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0}
.sx-atag{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px 0 12px; border-radius:999px;
  border:1.5px solid var(--accent); background:var(--accent-soft); color:var(--accent-dark); font-weight:600; font-size:.82rem; cursor:pointer}
.sx-atag .x{font-size:1.1rem; line-height:1}
.sx-clear{min-height:44px; padding:0 12px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface);
  color:var(--muted); font-weight:600; font-size:.82rem; cursor:pointer}
.sx-clear:hover{border-color:var(--accent); color:var(--accent-dark)}

.sx-res-head{margin:18px 0 10px; font-size:1rem; color:var(--muted)}
.sx-res-head .num{color:var(--ink); font-weight:800}
.sx-all{display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0 0; padding:0; list-style:none}
.sx-all a{color:var(--accent-dark); font-size:.9rem}
.sx-sec2{margin:10px 0 0; font-size:.88rem; color:var(--muted)}
.sx-sec2 a{color:var(--accent-dark)}
.sx-crumb{display:inline-flex; align-items:center; gap:4px; min-height:28px; font-size:.8rem; color:var(--muted); text-decoration:none}
.sx-crumb:hover{color:var(--accent-dark)}
@media (max-width:640px){ .sx-crumb{min-height:44px} }

/* mobilná lišta + spodný sheet */
.sx-mob{display:none}
.sx-sheet-bg{position:fixed; inset:0; z-index:95; background:rgba(27,36,48,.45); opacity:0; pointer-events:none; transition:opacity .25s ease}
.sx-sheet-bg.on{opacity:1; pointer-events:auto}
.sx-sheet{position:fixed; inset:auto 0 0 0; z-index:96; background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-3);
  padding:16px 16px max(16px,env(safe-area-inset-bottom)); max-height:82vh; overflow:auto;
  transform:translateY(100%); transition:transform .25s ease}
.sx-sheet.on{transform:none}
/* otvorený sheet: telo sa nesmie scrollovať pod prstom a cookie lišta (z-index 1200) ho nesmie prekryť.
   Trieda je na <html> — body.overflow sa kvôli html,body{overflow-x:clip} na viewport nepropaguje. */
html.sx-sheet-open{overflow:hidden}
.sx-sheet-open .cookie-bar{display:none}
.sx-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.sx-sheet-head h3{margin:0; font-size:1.1rem}
.sx-sheet .x{min-width:44px; min-height:44px; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--muted); cursor:pointer}
.sx-sheet .sx-filters{margin:0}
.sx-sheet .sx-pill,.sx-sheet .sx-sel select{width:100%; justify-content:flex-start}
.sx-sheet .sx-sel{display:flex; flex-direction:column; align-items:stretch; gap:4px; min-height:auto}
.sx-sheet-done{position:sticky; bottom:0; margin:14px -16px -16px; padding:12px 16px max(12px,env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line)}
.sx-sheet-done .btn{width:100%; min-height:48px; justify-content:center}
@media (max-width:640px){
  .sx-filters{display:none}
  /* dotykové ciele ≥ 44 px aj v textových zoznamoch prác (SEO zoznam pod výsledkami) */
  #sekcia-root .btn.sm{min-height:44px}
  .sx-all{gap:0 14px}
  .sx-all a{display:inline-flex; align-items:center; min-height:44px}
  .sx-else a{display:inline-flex; align-items:center; min-height:44px}
  .sx-sel select{font-size:16px}                        /* iOS Safari zoomuje polia pod 16 px */
  .sx-sheet .sx-sel select{font-size:16px}
  .sx-sec2{line-height:2.6}
  .sx-sec2 a{display:inline-block; padding:13px 0}
  #sx-body .sx-more{display:none}                       /* na mobile žijú „viac filtrov“ len v sheete */
  .sx-mob{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 0}
  .sx-mob .sx-sel{flex:1 1 100%; display:flex; align-items:center; gap:8px; min-height:44px}
  .sx-mob .sx-sel label{flex:none; min-width:56px}
  .sx-mob .sx-sel select{flex:1 1 auto; width:100%; min-width:0}
  .sx-mob .sx-fbtn{flex:1 1 100%; justify-content:center}
  .sx-sheet .sx-filters{display:flex; flex-direction:column; align-items:stretch}
  .sx-sheet .sx-seg{width:100%}
  .sx-sheet .sx-seg button{flex:1}
  .sx-sheet .sx-more{display:block; border:0; padding:0; margin:0}
  .sx-sheet .sx-fgrp{margin-top:12px}
  .sx-sheet .sx-chips{gap:8px}
  .sx-sheet .sx-rank{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  .ob-card,.ob-img,.sx-sheet,.sx-sheet-bg{transition:none}
  .ob-card:hover .ob-img{transform:none}
}

/* ═══ Kategórie v oblasti ako FOTODLAŽDICE (rovnaký komponent ako domov: .cats + .cat-tile.has-img) ═══ */
.sx-cats.cats{display:grid; gap:12px; margin:16px 0 0}
.sx-cats.cats .sx-cats-h{grid-column:1/-1; margin:6px 0 -4px}
.sx-tile{appearance:none; -webkit-appearance:none; width:100%; font:inherit; color:var(--ink); cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:stretch; text-align:center; min-height:44px}
.sx-tile .nm{display:block; padding:9px 8px 11px; font-weight:600; font-size:.9rem; line-height:1.25}
.sx-tile .nm .badge{font-size:.62rem; padding:1px 6px; vertical-align:middle; margin-left:4px}
.sx-tile:not(.has-img) .ic, .sx-tile.sx-all .ic{display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; width:100%; margin:0; border-radius:0; background:var(--accent-soft); color:var(--accent-dark); font-size:1.8rem}
.sx-tile.sx-all .ic svg{width:34px; height:34px}
/* Dlaždica „Všetko v oblasti“ s fotkou oblasti (24. 9. 2026): fotka pod grafitovým prechodom, v strede
   biely znak mriežky. Keď fotka nenačíta (obImgErr ju odoberie), ostane oranžový podklad so znakom. */
.sx-tile.sx-all.has-img .ic{display:block; position:relative; overflow:hidden; background:#2E3135; aspect-ratio:4/3; margin:0; border-radius:0}
.sx-tile.sx-all.has-img .ic .cimg{width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; transition:transform .3s ease}
.sx-tile.sx-all.has-img:hover .cimg{transform:scale(1.06)}
.sx-tile.sx-all.has-img .ic::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg,rgba(20,22,26,.18) 0,rgba(20,22,26,.55) 100%)}
.sx-tile.sx-all .sx-all-ov{position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; color:#fff}
.sx-tile.sx-all .sx-all-ov svg{width:38px; height:38px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.sx-tile.sx-all.on .sx-all-ov{color:#FFB25E}
.sx-tile.sx-all.on .ic::after{background:linear-gradient(180deg,rgba(217,102,26,.18) 0,rgba(20,22,26,.6) 100%)}
.sx-tile .sx-chip-ph{font-size:1.8rem}
.sx-tile.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 6px 18px rgba(217,102,26,.18)}
.sx-tile.on .nm{color:var(--accent-dark)}
.sx-tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:640px){ .sx-cats.cats{gap:10px} .sx-tile .nm{font-size:.84rem; padding:8px 6px 10px} }

/* Mobil: v oblasti NIE karusel (domov ho má kvôli 96 dlaždiciam) — mriežka 2 stĺpce, nič odrezané, nič skryté. */
@media (max-width:640px){
  .sx-cats.cats{display:grid; grid-template-columns:repeat(2,1fr); grid-auto-flow:row; grid-template-rows:none; grid-auto-columns:auto; overflow:visible; margin:16px 0 0; padding:0; scroll-snap-type:none; gap:10px}
  .sx-cats.cats .sx-tile{scroll-snap-align:none; min-width:0; width:auto; padding:0}
  .sx-cats.cats .sx-tile.has-img .ic{aspect-ratio:4/3}
}

/* ───────────────────────── DOMOV: BANNER MAPY + DLAŽDICE DÔVERY (17. 9. 2026) ─────────────────────────
   .map-banner = veľký vstup do radaru okolia v úvode (predtým malé tlačidlo „Hľadaj na mape podľa okruhu“).
   .tr-*       = štyri záruky pod pásom čísel (predtým drobné oranžové riadky v úvode).
   Oba bloky hovoria jazykom .ob-card: fotka z Magnificu, grafitový prechod, biely text, oranžový akcent. */
.map-banner{position:relative; display:block; width:min(920px,100%); margin:20px auto 0; min-height:204px; overflow:hidden; border-radius:24px;
  isolation:isolate; text-decoration:none; color:#fff; text-align:left; background:#171A1F;
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.16) inset; transition:transform .25s ease, box-shadow .25s ease}
.mb-img{position:absolute; top:0; right:0; bottom:0; left:auto; width:74%; height:100%; object-fit:cover; object-position:50% 44%; z-index:-2; transition:transform .7s ease}
.mb-grad{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,#11151B 0%,#11151B 26%,rgba(17,21,27,.86) 40%,rgba(17,21,27,.20) 60%,rgba(17,21,27,0) 100%)}
.mb-body{position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; min-height:204px; box-sizing:border-box; padding:22px 26px; max-width:52%}
.mb-k{display:inline-flex; align-items:center; gap:7px; font:700 .74rem "IBM Plex Sans",system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--o1,#F7913F)}
.mb-k .ico{width:17px; height:17px}
.mb-t{display:block; font:800 clamp(1.25rem,2.2vw,1.7rem)/1.1 "Manrope","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.55); text-wrap:balance}
.mb-d{display:block; font-size:.95rem; line-height:1.4; color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(0,0,0,.55)}
.mb-cta{display:inline-flex; align-items:center; gap:8px; margin-top:8px; min-height:44px; padding:0 18px; border-radius:999px;
  background:linear-gradient(180deg,var(--o1,#F7913F),var(--o3,#D4650A)); border:1px solid var(--o4,#B95806);
  font:700 .92rem "IBM Plex Sans",system-ui,sans-serif; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px rgba(232,115,12,.35)}
.mb-cta .ico{width:18px; height:18px; transition:transform .25s ease}
.map-banner:hover,.map-banner:focus-visible{transform:translateY(-3px); outline:none;
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 2px rgba(255,162,74,.95) inset}
.map-banner:hover .mb-img{transform:scale(1.05)}
.map-banner:hover .mb-cta .ico{transform:translateX(3px)}

.tr-sec{padding-top:26px}
.tr-sec .sec-title{margin-top:0}
.tr-grid{display:grid; gap:16px; grid-template-columns:repeat(4,1fr); margin-top:16px}
.tr-card{position:relative; display:block; min-height:230px; overflow:hidden; border-radius:22px; isolation:isolate; text-decoration:none; color:#fff; background:#171A1F;
  box-shadow:0 14px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.12) inset; transition:transform .25s ease, box-shadow .25s ease}
.tr-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; z-index:-2; transition:transform .6s ease}
.tr-grad{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,20,24,0) 0%,rgba(18,20,24,.18) 34%,rgba(18,20,24,.78) 66%,rgba(18,20,24,.95) 100%)}
.tr-body{position:absolute; left:0; right:0; bottom:0; display:block; padding:16px}
.tr-ic{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:10px; border-radius:12px;
  background:linear-gradient(180deg,var(--o1,#F7913F),var(--o3,#D4650A)); border:1px solid var(--o4,#B95806); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(232,115,12,.35)}
.tr-ic .ico{width:20px; height:20px}
.tr-t{display:block; font:800 1.06rem/1.15 "Manrope","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.55); text-wrap:balance}
.tr-d{display:block; margin-top:5px; min-height:2.76em; font-size:.84rem; line-height:1.38; color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(0,0,0,.55)}
.tr-card:hover,.tr-card:focus-visible{transform:translateY(-3px); outline:none; box-shadow:0 22px 54px rgba(0,0,0,.4), 0 0 0 2px rgba(255,162,74,.9) inset}
.tr-card:hover .tr-img{transform:scale(1.05)}

@media (max-width:1099px){
  .tr-grid{grid-template-columns:1fr 1fr}
  .tr-card{min-height:210px}
}
@media (max-width:640px){
  .map-banner{margin-top:16px; min-height:0; border-radius:20px}
  .mb-img{width:118%; right:-34%; object-position:50% 50%}
  .mb-grad{background:linear-gradient(90deg,#11151B 0%,#11151B 40%,rgba(17,21,27,.78) 58%,rgba(17,21,27,.10) 84%,rgba(17,21,27,0) 100%)}
  .mb-body{max-width:70%; min-height:0; padding:16px; gap:5px}
  .mb-d{font-size:.86rem}
  .mb-cta{min-height:44px; padding:0 16px; font-size:.88rem; margin-top:6px}
  .tr-sec{padding-top:18px}
  .tr-grid{gap:10px; margin-top:12px}
  .tr-card{min-height:214px; border-radius:18px}
  /* dlaždica je na mobile na výšku — výrez posúvame tam, kde je na fotke hlavný predmet */
  .tr-card:nth-child(1) .tr-img{object-position:66% 22%}
  .tr-card:nth-child(2) .tr-img{object-position:90% 22%}
  .tr-card:nth-child(3) .tr-img{object-position:48% 40%}
  .tr-card:nth-child(4) .tr-img{object-position:72% 22%}
  .tr-body{padding:12px}
  .tr-ic{width:32px; height:32px; border-radius:10px; margin-bottom:8px}
  .tr-ic .ico{width:17px; height:17px}
  .tr-t{font-size:.92rem}
  .tr-d{font-size:.76rem; line-height:1.34; min-height:4.02em}
}
@media (prefers-reduced-motion:reduce){
  .map-banner,.mb-img,.mb-cta .ico,.tr-card,.tr-img{transition:none}
  .map-banner:hover,.tr-card:hover{transform:none} .map-banner:hover .mb-img,.tr-card:hover .tr-img{transform:none}
}

/* ───────────────────── ÚČET BEZ PRIHLÁSENIA: pozvánka + Správy v jednom bloku (24. 9. 2026) ─────────────────────
   .acc-join nahrádza bielu kartu .acc-cta a samostatnú kartu „Správy“ v #moje-root (len neprihlásenému).
   Jazyk je rovnaký ako .map-banner / .tr-card: fotka, grafitový prechod, biely text.
   Oranžová je disciplinovane len na troch miestach: kľúč, ikonka v ukážke a tlačidlo (+ ikonka pruhu Správy).
   Tlačidlo je PLNÁ --o4, nie gradient ako .mb-cta: biely text na --o2 má 3,05:1, na --o4 má 4,74:1. */
.acc-join{position:relative; width:min(920px,100%); margin:0 auto 14px; overflow:hidden; border-radius:18px;
  isolation:isolate; color:#fff; background:#171A1F;
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.16) inset;
  transition:transform .25s ease, box-shadow .25s ease}
.aj-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 30%; z-index:-2; transition:transform .7s ease}
/* Mobil: zvislý prechod. Hore je len pritlmený (oranžová žiara telefónu má presvitať za kľúč a nadpis),
   od polovice ide doplna, aby ukážka aj drobný text stáli na istom podklade. */
.aj-grad{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(17,21,27,.50) 0%,rgba(17,21,27,.62) 24%,rgba(17,21,27,.82) 48%,rgba(17,21,27,.94) 66%,#11151B 82%,#11151B 100%)}
.aj-body{position:relative; padding:16px; min-width:0}
.aj-k{margin:0; font:700 .72rem/1.2 "IBM Plex Sans",system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--o1,#F7913F)}
.aj-t{margin:8px 0 0; font:800 clamp(1.25rem,5.6vw,1.5rem)/1.12 "Manrope","IBM Plex Sans",system-ui,sans-serif;
  letter-spacing:-.02em; color:#fff; overflow-wrap:anywhere; text-wrap:balance; text-shadow:0 2px 14px rgba(0,0,0,.55)}
.aj-d{margin:7px 0 0; font-size:.88rem; line-height:1.45; color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(0,0,0,.55)}

/* wow prvok — zmenšená, NEKLIKATEĽNÁ ukážka appky: najprv ponuka, potom odpoveď v chate */
/* Ukážka má vlastný tmavý podklad, nie priehľadný: na desktope leží priamo na žiare telefónu
   a biely text v bubline by na nej spadol pod 4,5:1. So scrimom drží ~5,8:1. */
.aj-demo{display:flex; flex-direction:column; gap:8px; margin:14px 0 0; padding:10px; border-radius:14px;
  background:rgba(17,21,27,.66); border:1px solid rgba(255,255,255,.14)}
.aj-demo-l{align-self:flex-end; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.92); font:700 .68rem/1.3 "IBM Plex Sans",system-ui,sans-serif}
.aj-offer{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px; border-radius:12px;
  background:var(--surface); color:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,.3)}
.aj-oi{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border-radius:9px;
  background:linear-gradient(180deg,var(--o1,#F7913F),var(--o3,#D4650A)); border:1px solid var(--o4,#B95806); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px rgba(232,115,12,.3)}
.aj-oi .ico{width:16px; height:16px}
.aj-ot{flex:1 1 130px; min-width:0}
.aj-on{display:block; font-size:.86rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere}
.aj-ov{display:inline-flex; align-items:center; gap:4px; margin-top:3px; padding:2px 8px; border-radius:999px;
  background:var(--good-bg); color:var(--good); font-size:.7rem; font-weight:700; line-height:1.3}
.aj-ov .ico{width:12px; height:12px; flex:none}
.aj-op{flex:0 0 auto; margin-left:auto; text-align:right}
.aj-op .num{display:block; font-size:1rem; font-weight:800; line-height:1.15}
.aj-os{display:block; font-size:.68rem; line-height:1.3; color:var(--muted)}
.aj-bub{position:relative; margin:0 0 0 26px; max-width:92%; padding:9px 12px; border-radius:14px; border-bottom-left-radius:5px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:.82rem; line-height:1.4;
  animation:ajBub .26s ease-out .4s both}
.aj-bd{position:absolute; left:-26px; top:9px; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22)}
@keyframes ajBub{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.aj-tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:12px 0 0; padding:0}
.aj-tags li{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92); font-size:.74rem; font-weight:600; line-height:1.3}
.aj-tags .ico{width:14px; height:14px; flex:none; color:rgba(255,255,255,.72)}

.aj-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px;
  margin:14px 0 0; padding:0 22px; border-radius:999px; cursor:pointer;
  background:var(--o4,#B95806); border:1px solid var(--o1,#F7913F); color:#fff;
  font:800 .95rem "IBM Plex Sans",system-ui,sans-serif; letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(232,115,12,.45); transition:box-shadow .2s ease, transform .2s ease}
.aj-cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 28px rgba(232,115,12,.6); transform:translateY(-1px)}
.aj-cta:active{transform:translateY(1px)}
.aj-cta:focus-visible{outline:2px solid var(--o1,#F7913F); outline-offset:2px}
.aj-note{margin:10px 0 0; font-size:.76rem; line-height:1.4; color:rgba(255,255,255,.82)}

/* pruh Správy — posledný riadok TEJ ISTEJ karty, oddelený len linkou */
.aj-msg{position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); text-decoration:none; color:#fff}
.aj-msg:hover{background:rgba(255,255,255,.09)}
.aj-msg:focus-visible{outline:2px solid var(--o1,#F7913F); outline-offset:-2px}
.aj-msg.has{box-shadow:inset 3px 0 0 var(--o2,#E8730C)}
.aj-mi{position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border-radius:10px;
  background:linear-gradient(180deg,var(--o1,#F7913F),var(--o3,#D4650A)); border:1px solid var(--o4,#B95806); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(232,115,12,.35)}
.aj-mi .ico{width:18px; height:18px}
.aj-msg.has .aj-mi::after{content:""; position:absolute; top:-3px; right:-3px; width:6px; height:6px; border-radius:50%;
  background:var(--o1,#F7913F); border:2px solid #171A1F}
.aj-mt{flex:1 1 auto; min-width:0}
.aj-mt>b{display:block; font-size:.92rem; line-height:1.25}
.aj-ms{display:block; font-size:.78rem; line-height:1.35; color:rgba(255,255,255,.78); overflow-wrap:anywhere}
.aj-msg.has .aj-ms{color:rgba(255,255,255,.92)}
.aj-arw{flex:none; color:rgba(255,255,255,.55); font-size:1rem; line-height:1}
.aj-pill{flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:22px; min-height:22px; padding:0 7px;
  border-radius:999px; background:var(--o4,#B95806); border:1px solid var(--o1,#F7913F);
  color:#fff; font-size:.78rem; font-weight:800; line-height:1}

/* medzikrok 641–859 px: jeden stĺpec ako na mobile, len užšia karta.
   Pozn.: prechod tu zámerne ZOSTÁVA zvislý — vodorovný by nechal nadpis na presvietenej pravej polovici. */
@media (min-width:641px) and (max-width:859px){
  .acc-join{width:min(560px,100%); border-radius:20px}
  .aj-body{padding:20px}
}
/* desktop: fotka vpravo, ukážka leží na nej — biela karta nad tmavou fotkou je najsvetlejší bod obrazovky */
@media (min-width:860px){
  .acc-join{border-radius:22px}
  .aj-img{inset:0 0 0 auto; width:62%; object-position:52% 38%}
  .aj-grad{background:linear-gradient(90deg,#11151B 0%,#11151B 30%,rgba(17,21,27,.86) 46%,rgba(17,21,27,.18) 72%,rgba(17,21,27,0) 100%)}
  .aj-body{display:grid; grid-template-columns:1fr 340px; column-gap:28px; align-items:center; padding:26px 28px}
  .aj-k,.aj-t,.aj-d,.aj-tags,.aj-cta,.aj-note{grid-column:1}
  .aj-demo{grid-column:2; grid-row:1/span 6; align-self:center; margin:0}
  .aj-t{font-size:clamp(1.5rem,2.4vw,1.9rem)}
  .aj-d{font-size:.95rem}
  .aj-cta{width:auto; justify-self:start}
  .aj-msg{padding:14px 28px}
}
@media (hover:hover) and (min-width:860px){
  .acc-join:hover{transform:translateY(-3px); box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.22) inset}
  .acc-join:hover .aj-img{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .acc-join,.aj-img,.aj-cta{transition:none}
  .acc-join:hover{transform:none} .acc-join:hover .aj-img{transform:none}
  .aj-cta:hover,.aj-cta:active{transform:none}
  .aj-bub{animation:none; opacity:1; transform:none}
}

/* ── PARTIA (021) — filter „Partia“ + odkaz na vysvetlenie ─────────────────────
   Filter stojí v HLAVNOM rade (nie pod „Viac filtrov“): je to celý dôvod, prečo sem
   časť ľudí chodí — „chcem partiu na výkopy, nie firmu“. Odkaz „Čo je partia?“ je
   hneď vedľa neho, lebo filter, ktorému človek nerozumie, je len ďalší čip.
   Nie je to štvrtá voľba prepínača „Ľudia | Firmy“ — partiu vedie živnostník ALEBO
   firma, takže sa s ním KOMBINUJE (AND) a má vlastnú pilulku. */
.sx-crew{display:inline-flex; align-items:center; gap:2px; flex-wrap:wrap}
.sx-crew .sx-pill[aria-pressed="true"]{border-color:var(--blue); background:var(--blue-bg); color:var(--blue)}
.sx-crew .sx-pill .ico{width:1.05em; height:1.05em; flex:none}
.sx-crew-q{white-space:nowrap}
@media (max-width:640px){
  /* 320 px: pilulka ostáva v páse čipov, odkaz sa zalomí pod ňu na vlastný riadok. */
  .sx-crew{width:100%; gap:0}
  .sx-crew .sx-pill{flex:0 0 auto}
  .sx-crew-q{flex-basis:100%; margin-left:-8px}
}