/* ============================================================================
   VYHĽADÁVANIE — pole s našepkávačom a stránka výsledkov
   ----------------------------------------------------------------------------
   Postavené na dizajnových tokenoch z tokens.css. Žiadne hex farby.
   Načítava sa spolu s home.css tam, kde je vyhľadávacie pole.
   ========================================================================== */

.hl-box { position: relative; }

/* Tlačidlo na vymazanie obsahu poľa */
.hl-zrusit {
    flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-soft);
    font-size: .7rem;
    cursor: pointer;
}
.hl-zrusit:hover { background: var(--sk-surface-accent); color: var(--sk-ink-strong); }

/* Prúžok, ktorý beží počas načítavania návrhov */
.hl-box.sa-nacitava .hp-search { position: relative; overflow: hidden; }
.hl-box.sa-nacitava .hp-search::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 2px; width: 35%;
    background: var(--sk-brand);
    animation: hlPruh 1s ease-in-out infinite;
}
@keyframes hlPruh {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
    .hl-box.sa-nacitava .hp-search::after { animation: none; width: 100%; opacity: .35; }
}

/* ── Panel návrhov ───────────────────────────────────────────────────────
   Zámerne VŽDY position:absolute priamo pod poľom — na akejkoľvek šírke
   obrazovky. Predtým sa na mobile menil na position:fixed pripnutý ku dnu
   obrazovky, čo pôsobilo, akoby výsledky vyskakovali odniekiaľ inde než
   spod poľa (najviac vidno na hero, kde je pole úplne hore). z-index musí
   byť nad globálnou spodnou lištou (.gnav má 1030), inak by dlhší panel
   na mobile skončil pod ňou. */
.hl-navrhy {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0; right: 0;
    z-index: 1035;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-md);
    overflow: hidden;
}
.hl-navrhy[hidden] { display: none; }
.hl-navrhy-obsah { max-height: min(60vh, 420px); overflow-y: auto; }

.hl-skupina + .hl-skupina { border-top: 1px solid var(--sk-border-soft); }
.hl-skupina-hlavicka {
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem .8rem .3rem;
    color: var(--sk-ink-soft);
    font-size: var(--sk-size-label); font-weight: var(--sk-weight-bold);
    letter-spacing: var(--sk-tracking-wide); text-transform: uppercase;
}
.hl-skupina-hlavicka i { color: var(--sk-brand); }

/* Jedna položka návrhu / výsledku — spoločný vzhľad pre panel aj stránku */
.hl-navrh,
.hl-polozka {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .8rem;
    color: inherit;
    text-decoration: none;
}
.hl-navrh:hover, .hl-navrh.je-aktivna,
.hl-polozka:hover {
    background: var(--sk-surface-tint);
    text-decoration: none; color: inherit;
}
.hl-navrh.je-aktivna { box-shadow: inset 3px 0 0 var(--sk-brand); }

.hl-ikona {
    flex: none;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface-accent);
    color: var(--sk-brand-ink);
    font-size: .85rem;
}
.hl-obr {
    flex: none;
    display: block;
    width: 32px; height: 32px;
    padding: 2px;
    border: 1px solid var(--sk-border-soft);
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface);
    overflow: hidden;
}
.hl-obr img { width: 100%; height: 100%; object-fit: contain; display: block; }

.hl-text { min-width: 0; display: flex; flex-direction: column; }
.hl-nazov {
    color: var(--sk-ink-heading);
    font-size: .9rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-nazov mark {
    padding: 0;
    background: var(--sk-state-closing-bg);
    color: var(--sk-state-closing-fg);
    font-weight: 800;
}
.hl-popis {
    color: var(--sk-ink-muted); font-size: .78rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-navrh .hp-state,
.hl-polozka .hp-state { margin-left: auto; flex: none; }

.hl-vsetky {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px;
    border-top: 1px solid var(--sk-border-soft);
    background: var(--sk-surface-subtle);
    color: var(--sk-brand-link);
    font-size: .85rem; font-weight: var(--sk-weight-bold);
    text-decoration: none;
}
.hl-vsetky:hover { background: var(--sk-surface-tint); text-decoration: none; }

.hl-prazdne {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: 1.8rem 1rem;
    color: var(--sk-ink-soft); text-align: center;
}
.hl-prazdne i { color: var(--sk-ink-faint); font-size: 1.5rem; }
.hl-prazdne strong { color: var(--sk-ink-label); font-size: .9rem; }
.hl-prazdne span { font-size: .8rem; }

.hl-navrhy-pata {
    display: none;
    padding: .4rem .8rem;
    border-top: 1px solid var(--sk-border-soft);
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-soft);
    font-size: .72rem;
}
.hl-navrhy-pata kbd {
    padding: .05rem .3rem;
    border: 1px solid var(--sk-border-strong);
    border-radius: 4px;
    background: var(--sk-surface);
    color: var(--sk-ink-muted);
    font-family: inherit; font-size: .68rem;
}

/* ── Stránka výsledkov ───────────────────────────────────────────────── */
.hl-vysledky { display: flex; flex-direction: column; gap: 1.5rem; }
.hl-zoznam {
    display: flex; flex-direction: column;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
    overflow: hidden;
}
.hl-polozka { min-height: var(--sk-touch-target); }
.hl-polozka + .hl-polozka { border-top: 1px solid var(--sk-border-soft); }

/* ── Hlavička výsledkov (inline režim) — celkový počet + filter podľa typu ── */
.hl-vysledky-hlavicka { display: flex; flex-direction: column; gap: .5rem; }
.hl-spolu { color: var(--sk-ink-muted); font-size: .85rem; }
.hl-spolu b { color: var(--sk-ink-heading); }

/* Malý číselný odznak vnútri chipu — funguje na aktívnom (farebnom)
   aj neaktívnom (tlmenom) podklade, preto currentColor-friendly kontrast. */
.hl-fchip-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem;
    margin-left: .3rem;
    padding: 0 .35rem;
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface);
    color: var(--sk-ink-muted);
    font-size: .68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hp-fchip.is-active .hl-fchip-n {
    background: rgba(255, 255, 255, .28);
    color: var(--sk-surface);
}

/* Nápovedu ku klávesám má zmysel ukazovať len tam, kde klávesnica je */
@media (min-width: 992px) {
    .hl-navrhy-pata { display: block; }
}