/* ============================================================================
   DOMOVSKÁ STRÁNKA (hp-*)
   ----------------------------------------------------------------------------
   Postavené výhradne na dizajnových tokenoch z public/css/tokens.css.
   V tomto súbore nesmie byť žiadna hex farba — jedinou výnimkou je farba
   disciplíny, ktorá prichádza z databázy cez inline premennú --hp-disc.

   Písané mobile-first: základ platí pre telefón, rozšírenia sú v @media nižšie.
   Načítava sa len na domovskej stránke cez @push('styles').
   ========================================================================== */

/* Domovská stránka si riadi šírku sama — bootstrapový kontajner a mriežka
   sú vypnuté cez @section('main-class') a @section('row-class'), inak by sa
   okraje uberali päťkrát za sebou (container + row + wrap + panel + karta). */
.hp-full { width: 100%; max-width: 100%; padding: 0; margin: 0; }
.hp-full-row { display: block; width: 100%; margin: 0; }

.hp { color: var(--sk-ink); }
.hp-num { font-variant-numeric: tabular-nums; }

/* ── Hero + vyhľadávanie ─────────────────────────────────────────────── */
.hp-hero {
    background: linear-gradient(180deg, var(--sk-surface-tint), var(--sk-surface));
    border-bottom: 1px solid var(--sk-border);
    padding: 1.2rem .75rem 1.15rem;
}
.hp-hero-inner {
    max-width: var(--hp-max, 1400px); margin: 0 auto;
    display: flex; flex-direction: column; gap: 1.1rem;
}
.hp-hero-left { min-width: 0; }
.hp-hero h1 {
    margin: 0 0 .85rem;
    color: var(--sk-ink-heading);
    font-size: clamp(1.45rem, 3.4vw, 1.95rem);
    font-weight: var(--sk-weight-heading);
    letter-spacing: var(--sk-tracking-tight);
    line-height: 1.18;
}

.hp-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .3rem .3rem .9rem;
    background: var(--sk-surface);
    border: 1.5px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-md);
    box-shadow: var(--sk-shadow-sm);
}
.hp-search:focus-within { border-color: var(--sk-brand); box-shadow: var(--sk-focus-ring); }
.hp-search-ico { color: var(--sk-ink-soft); font-size: 1rem; flex: none; }
.hp-search-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--sk-touch-target);
    border: 0;
    background: transparent;
    color: var(--sk-ink);
    font-size: 1rem;
}
.hp-search-input::placeholder { color: var(--sk-ink-soft); }
.hp-search-input:focus { outline: none; }
.hp-search-btn {
    flex: none;
    min-height: 40px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: var(--sk-radius-sm);
    background: var(--sk-brand);
    color: var(--sk-surface);
    font-weight: var(--sk-weight-bold);
    font-size: .93rem;
}
.hp-search-btn:hover { background: var(--sk-brand-hover); }

/* Štatistiky — sú to len doplnkové údaje, preto zámerne drobné a tiché.
   Žiadne karty ani rámiky; farbu nesie iba malá bodka pred číslom. */
.hp-stats {
    display: flex; flex-wrap: wrap;
    gap: .3rem 1.1rem;
    margin-top: .85rem;
}
.hp-stat {
    display: inline-flex; align-items: baseline; gap: .3rem;
    color: var(--sk-ink-muted);
    font-size: .78rem;
    text-decoration: none;
}
.hp-stat::before {
    content: "";
    align-self: center;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hp-stat-c, var(--sk-ink-soft));
}
.hp-stat:hover { color: var(--sk-brand-ink); text-decoration: none; }
.hp-stat:hover .hp-stat-n { color: var(--sk-brand-ink); }
.hp-stat-n {
    color: var(--sk-ink-strong);
    font-size: .84rem; font-weight: var(--sk-weight-bold);
    font-variant-numeric: tabular-nums;
}
.hp-stat-l { font-weight: 500; }

.hp-stat-open      { --hp-stat-c: var(--sk-state-open-fg); }
.hp-stat-next      { --hp-stat-c: var(--sk-brand); }
.hp-stat-pretekari { --hp-stat-c: var(--sk-role-admin-fg); }
.hp-stat-archiv    { --hp-stat-c: var(--sk-ink-soft); }

/* Mini výzva pre organizátora v hlavičke — na mobile a tablete zámerne
   SKRYTÁ. Pod 1200px ide hero pod sebou (pole, štatistiky, mini-org box),
   takže by sa medzi hero a záložky "Prihlás sa / Najbližšie súťaže /
   Výsledky" vsunul ďalší blok navyše. Tie záložky sú dôležitejšie a majú
   byť vidieť hneď po hero bez zbytočného scrollovania. Na desktope (≥1200px)
   sedí vedľa vyhľadávania, tam nič neuberá — zostáva. */
.hp-mini-org {
    display: none;
    flex-direction: column; gap: .45rem;
    padding: .95rem 1rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-info);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
}
.hp-mini-org strong { color: var(--sk-ink-title); font-size: .98rem; font-weight: var(--sk-weight-heading); }
.hp-mini-org p { margin: 0 0 .3rem; color: var(--sk-ink-muted); font-size: .82rem; line-height: 1.4; }

/* ── Známe skratky (Štartovky / Archív / Ligy) ──────────────────────────
   Tichšia verzia dlaždíc zo staršej homepage — kontinuita pre vracajúcich
   sa, nie nový akcent. Preto len tenký obrys a tlmená (nie brand) farba
   ikony; farbu dostane až pri hoveri.

   Existuje DVAKRÁT v HTML (.hp-quicklinks-top v hlavnom stĺpci hneď pod
   hero, .hp-quicklinks-side v bočnom stĺpci nad panelom Obľúbené) — vždy
   je vidieť len jedna kópia, prepína to tento blok podľa šírky. Duplicitný
   markup namiesto CSS-reorderu: .hp-side na mobile stojí AŽ ZA .hp-main
   (stackované), takže obsah zvnútra .hp-side sa nedá dostať "hneď pod
   hero" cez CSS `order` bez prestavby celého .hp-layout gridu. */
.hp-quicklinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}
.hp-quicklinks-side { display: none; }

.hp-qlink {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .65rem .4rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-md);
    color: var(--sk-ink-strong);
    font-size: .74rem; font-weight: 600;
    text-decoration: none;
    text-align: center;
}
.hp-qlink i { font-size: 1.15rem; color: var(--sk-ink-soft); }
.hp-qlink:hover {
    border-color: var(--sk-border-strong);
    color: var(--sk-brand-ink);
    text-decoration: none;
}
.hp-qlink:hover i { color: var(--sk-brand); }

/* Jemný farebný nádych na ikonách — homepage bola s jednotnou šedou
   na všetkom pôsobila plocho. Rovnaké farby ako inde na stránke
   (zelená = akcia/otvorené, fialová = výsledky/štatistiky, zlatá = liga). */
.hp-qlink-startovky i { color: color-mix(in srgb, var(--sk-state-open-fg) 75%, var(--sk-ink-soft)); }
.hp-qlink-archiv i    { color: color-mix(in srgb, var(--sk-role-admin-fg) 75%, var(--sk-ink-soft)); }
.hp-qlink-ligy i      { color: color-mix(in srgb, var(--sk-role-owner-fg) 75%, var(--sk-ink-soft)); }

/* ── Rozloženie ──────────────────────────────────────────────────────── */
.hp-wrap { max-width: var(--hp-max, 1400px); margin: 0 auto; padding: 1.1rem .75rem 2.5rem; }
.hp-layout { display: flex; flex-direction: column; gap: 1.6rem; }
.hp-main { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.hp-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ── Pruh "prebieha dnes" ────────────────────────────────────────────── */
.hp-live {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .95rem;
    background: var(--sk-state-live-bg);
    border: 1px solid var(--sk-state-live-fg);
    border-left-width: 4px;
    border-radius: var(--sk-radius-md);
    text-decoration: none;
    color: inherit;
}
.hp-live:hover { text-decoration: none; color: inherit; }
.hp-live-dot {
    flex: none;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--sk-state-live-fg);
    animation: hpPulse 1.9s ease-out infinite;
}
@keyframes hpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(192, 57, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .hp-live-dot { animation: none; } }
.hp-live-text { min-width: 0; display: flex; flex-direction: column; }
.hp-live-text strong { color: var(--sk-state-live-fg); font-size: .9rem; font-weight: 800; }
.hp-live-text span {
    color: var(--sk-ink-muted); font-size: .84rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-live-arrow { margin-left: auto; color: var(--sk-state-live-fg); flex: none; }

/* ── Sekcia ──────────────────────────────────────────────────────────── */
.hp-sec { display: flex; flex-direction: column; gap: .7rem; }
.hp-sec-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-bottom: .55rem;
    border-bottom: 2px solid var(--sk-border);
}
/* Krátky farebný prúžok pred nadpisom sekcie — drobný oporný bod pri scrollovaní */
.hp-sec-head h2 {
    display: flex; align-items: center; gap: .5rem;
    margin: 0;
    color: var(--sk-ink-title);
    font-size: 1.05rem;
    font-weight: var(--sk-weight-heading);
    letter-spacing: -.015em;
}
.hp-sec-head h2::before {
    content: "";
    width: 4px; height: 1.05em;
    border-radius: 2px;
    background: var(--sk-brand);
}
.hp-count {
    display: inline-flex; align-items: center;
    padding: .1rem .5rem;
    border: 1px solid var(--sk-border-info);
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface-accent);
    color: var(--sk-brand-ink);
    font-size: .74rem; font-weight: var(--sk-weight-bold);
    font-variant-numeric: tabular-nums;
}
.hp-more {
    margin-left: auto;
    color: var(--sk-brand-link);
    font-size: .84rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.hp-more:hover { color: var(--sk-brand-hover); text-decoration: underline; }
.hp-sec-note { margin: -.2rem 0 0; color: var(--sk-ink-soft); font-size: .8rem; }

/* ── Prepínacie karty zoznamov ───────────────────────────────────────────
   Toto je najdôležitejšia sekcia stránky (odpovedá na "kam sa dá prihlásiť /
   čo je najbližšie / aké sú výsledky"), preto má jemne zdvihnutý tieň oproti
   bežným sekciám nižšie — a hlavne KAŽDÁ ZÁLOŽKA MÁ VLASTNÚ FARBU (zelená /
   modrá / fialová), aby bolo od prvého pohľadu jasné, že ide o tri rôzne
   veci, nie tri rovnaké tlačidlá. */
.hp-taby-sec {
    gap: 0;
    /* drop-shadow (nie box-shadow) obopne oba pod sebou nadväzujúce prvky
       (.hp-taby + .hp-panel-tab) ako jednu kartu, aj keď medzi nimi nie je
       spoločný obal. Farba tieňa je zámerne odtieň značky (rovnaký vzor
       ako --sk-shadow-lg v tokens.css — tam je tiež tieň natvrdo namiešaný
       na farbu značky, nie cez token, lebo ide o jednorazový akcent). */
    filter: drop-shadow(0 6px 16px rgba(11, 95, 165, .1));
}
.hp-taby {
    display: flex;
    gap: .2rem;
    padding: .3rem .3rem 0;
    background: var(--sk-surface-subtle);
    border: 1px solid var(--sk-border);
    border-bottom: 0;
    border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* Farba každej záložky — nesie ju ikona aj počítadlo aj aktívny stav.
   Skupina "výsledky" dostáva fialovú (rovnaký odtieň ako štatistiky
   pretekárov na homepage), nie sivú — sivá by pri aktívnom stave
   nepôsobila "výraznejšie", presný opak toho, čo má táto sekcia robiť. */
.hp-tab-prihlas    { --hp-tab-c: var(--sk-state-open-fg); --hp-tab-bg: var(--sk-state-open-bg); }
.hp-tab-najblizsie { --hp-tab-c: var(--sk-brand-ink);     --hp-tab-bg: var(--sk-surface-accent); }
.hp-tab-vysledky   { --hp-tab-c: var(--sk-role-admin-fg); --hp-tab-bg: var(--sk-role-admin-bg); }
.hp-taby::-webkit-scrollbar { display: none; }
.hp-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    flex: none;
    min-height: 44px;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--sk-radius-sm) var(--sk-radius-sm) 0 0;
    background: transparent;
    color: var(--sk-ink-muted);
    font-size: .88rem; font-weight: var(--sk-weight-bold);
    white-space: nowrap;
    cursor: pointer;
}
/* Ikona je farebná VŽDY, aj keď záložka nie je aktívna — tak sa dá farba
   rozoznať pri prvom pohľade na celý riadok, nielen po kliknutí. */
.hp-tab i { font-size: .9rem; color: var(--hp-tab-c, var(--sk-ink-soft)); }
.hp-tab:hover { background: var(--hp-tab-bg, var(--sk-surface-tint)); color: var(--sk-ink-title); }

.hp-tab.is-active {
    background: var(--hp-tab-bg, var(--sk-surface));
    border-color: var(--sk-border);
    color: var(--hp-tab-c, var(--sk-brand-ink));
    box-shadow: 0 -3px 0 var(--hp-tab-c, var(--sk-brand)) inset;
}

.hp-tab-n {
    display: inline-flex; align-items: center;
    padding: .05rem .4rem;
    border-radius: var(--sk-radius-pill);
    background: var(--hp-tab-bg, var(--sk-state-open-bg));
    color: var(--hp-tab-c, var(--sk-state-open-fg));
    font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Filter typu súťaže — sedí v tele záložiek, hneď pod nimi */
.hp-filter {
    display: flex; flex-wrap: wrap; gap: .3rem;
    padding: .55rem .5rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border-soft);
}
.hp-fchip {
    min-height: 34px;
    padding: .25rem .7rem;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-muted);
    font-size: .8rem; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.hp-fchip:hover { border-color: var(--sk-border-strong); color: var(--sk-ink-title); }
.hp-fchip.is-active {
    background: var(--sk-brand);
    border-color: var(--sk-brand);
    color: var(--sk-surface);
}

.hp-panel-tab {
    padding: .55rem .5rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-top: 0;
    border-radius: 0 0 var(--sk-radius-lg) var(--sk-radius-lg);
}
.hp-panel-tab.is-hidden { display: none; }
.hp-panel-lista {
    display: flex; align-items: baseline; gap: .6rem;
    margin-bottom: .6rem;
}
.hp-card.is-hidden { display: none; }
.hp-filter-empty.is-hidden { display: none; }

/* ── Karta súťaže ────────────────────────────────────────────────────── */
.hp-cards { display: flex; flex-direction: column; gap: .45rem; }
.hp-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .6rem;
    padding: .6rem .65rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-left: 3px solid var(--hp-disc, var(--sk-border-strong));
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.hp-card:hover {
    box-shadow: var(--sk-shadow-md);
    border-color: var(--sk-border-strong);
    border-left-color: var(--hp-disc, var(--sk-brand));
    text-decoration: none; color: inherit;
}
.hp-date {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: fit-content;
    padding: .35rem .15rem;
    background: var(--sk-surface-subtle);
    border: 1px solid var(--sk-border-soft);
    border-radius: var(--sk-radius-sm);
    font-variant-numeric: tabular-nums;
}
.hp-date-d { color: var(--sk-ink-heading); font-size: 1.1rem; font-weight: 750; line-height: 1.05; }
.hp-date-m {
    color: var(--sk-ink-soft);
    font-size: .58rem; font-weight: var(--sk-weight-bold);
    letter-spacing: var(--sk-tracking-wide); text-transform: uppercase;
}
.hp-card-body { min-width: 0; display: flex; flex-direction: column; gap: .22rem; }

/* Názov je najdôležitejší údaj na karte — dostáva najsilnejší rez a farbu */
.hp-card-title {
    color: var(--sk-ink-heading);
    font-size: 1rem; font-weight: var(--sk-weight-heading);
    line-height: 1.25; letter-spacing: -.015em;
}
.hp-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem;
    color: var(--sk-ink-muted); font-size: .78rem;
}
/* Počty prihlásených — najsledovanejší údaj pred súťažou */
.hp-card-pocty { display: flex; flex-wrap: wrap; gap: .2rem .55rem; }
.hp-pocet {
    display: inline-flex; align-items: center; gap: .2rem;
    color: var(--sk-ink-muted); font-size: .76rem;
}
.hp-pocet i { color: var(--sk-brand); font-size: .7rem; }
.hp-pocet b { color: var(--sk-ink-heading); font-weight: 750; }
.hp-tag {
    padding: .1rem .4rem;
    border: 1px solid var(--sk-border-soft);
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-soft);
    font-size: .68rem; font-weight: 600; white-space: nowrap;
}
.hp-tag-liga {
    border-color: var(--sk-border-info);
    background: var(--sk-surface-accent);
    color: var(--sk-brand-ink);
}
.hp-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    margin-top: .1rem;
}

/* Obrázok súťaže — malý náhľad plagátu alebo loga ligy, nikdy nie
   všeobecné logo portálu (to filtruje partial). */
.hp-card-obr {
    flex: none;
    display: block;
    width: 46px; height: 46px;
    align-self: center;
    border: 1px solid var(--sk-border-soft);
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface-subtle);
    overflow: hidden;
}
.hp-card-obr img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stavy — významy sú definované v tokens.css a platia na celom webe rovnako */
/* Stav uzávierky je po názve druhý najdôležitejší údaj — musí sa dať
   prečítať bez hľadania, preto výraznejší rez a plná farebná plocha. */
.hp-state {
    display: inline-flex; align-items: center; gap: .32rem;
    padding: .2rem .55rem;
    border: 1px solid transparent;
    border-radius: var(--sk-radius-pill);
    font-size: .78rem; font-weight: 750;
}
.hp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hp-state-open    { color: var(--sk-state-open-fg);    background: var(--sk-state-open-bg); }
.hp-state-closing { color: var(--sk-state-closing-fg); background: var(--sk-state-closing-bg); }
.hp-state-live    { color: var(--sk-state-live-fg);    background: var(--sk-state-live-bg); }
.hp-state-closed,
.hp-state-before,
.hp-state-none    { color: var(--sk-state-closed-fg);  background: var(--sk-state-closed-bg); }

.hp-cta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .45rem .8rem;
    border-radius: var(--sk-radius-sm);
    background: var(--sk-brand);
    color: var(--sk-surface);
    font-size: .82rem; font-weight: var(--sk-weight-bold);
    white-space: nowrap;
}
.hp-card:hover .hp-cta { background: var(--sk-brand-hover); }
.hp-vysledky {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .55rem;
    border: 1px solid var(--sk-border-soft);
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-muted);
    font-size: .76rem; font-weight: 600;
}

/* ── Ligy ────────────────────────────────────────────────────────────── */
.hp-ligy { display: grid; gap: .55rem; }
.hp-liga {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .75rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
    text-decoration: none; color: inherit;
}
.hp-liga:hover { border-color: var(--sk-brand); text-decoration: none; color: inherit; }
.hp-liga-znak {
    flex: none;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--sk-border-info);
    border-radius: var(--sk-radius-md);
    background: var(--sk-surface-accent);
    color: var(--sk-brand-ink);
    font-size: .74rem; font-weight: 800;
    text-transform: uppercase;
    overflow: hidden;
}
/* Ak má liga logo, zobrazí sa namiesto textovej skratky */
.hp-liga-znak-obr { background: var(--sk-surface); padding: 3px; }
.hp-liga-znak-obr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hp-liga-body { min-width: 0; display: flex; flex-direction: column; }
.hp-liga-nazov {
    color: var(--sk-ink-strong); font-size: .9rem; font-weight: var(--sk-weight-bold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-liga-meta { color: var(--sk-ink-muted); font-size: .78rem; }
.hp-liga-arrow { margin-left: auto; color: var(--sk-ink-soft); flex: none; }

/* ── Prázdny stav ────────────────────────────────────────────────────── */
.hp-empty {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 2.2rem 1rem;
    background: var(--sk-surface);
    border: 1px dashed var(--sk-border-strong);
    border-radius: var(--sk-radius-lg);
    color: var(--sk-ink-soft); text-align: center;
}
.hp-empty i { color: var(--sk-ink-faint); font-size: 1.8rem; }
.hp-empty strong { color: var(--sk-ink-label); font-size: .92rem; }
.hp-empty span { font-size: .82rem; }

/* ── Organizátor ─────────────────────────────────────────────────────── */
.hp-org {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-xl);
    box-shadow: var(--sk-shadow-md);
    overflow: hidden;
}
.hp-org-head {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1.2rem 1.1rem 1rem;
    background: linear-gradient(135deg, var(--sk-surface-tint), var(--sk-surface));
    border-bottom: 1px solid var(--sk-border-soft);
}
.hp-org-ikona {
    flex: none;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: var(--sk-radius-md);
    background: var(--sk-brand-gradient);
    color: var(--sk-surface);
    font-size: 1.2rem;
    box-shadow: var(--sk-shadow-lg);
}
.hp-org-head h2 {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 .3rem;
    color: var(--sk-ink-heading);
    font-size: 1.2rem; font-weight: var(--sk-weight-heading);
    letter-spacing: -.02em;
}
.hp-org-head p { margin: 0; color: var(--sk-ink-muted); font-size: .88rem; }
.hp-badge-zadarmo {
    padding: .12rem .55rem;
    border-radius: var(--sk-radius-pill);
    background: var(--sk-state-open-bg);
    color: var(--sk-state-open-fg);
    font-size: .7rem; font-weight: var(--sk-weight-bold);
    letter-spacing: var(--sk-tracking-wide); text-transform: uppercase;
}
.hp-org-kroky { display: grid; }
.hp-krok {
    display: flex; gap: .7rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sk-border-soft);
}
.hp-krok-n {
    flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--sk-surface-accent);
    border: 1px solid var(--sk-border-info);
    color: var(--sk-brand-ink);
    font-size: .85rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hp-krok strong {
    display: block; margin-bottom: .15rem;
    color: var(--sk-ink-title); font-size: .93rem; font-weight: var(--sk-weight-heading);
}
.hp-krok span span { color: var(--sk-ink-muted); font-size: .82rem; line-height: 1.45; }
.hp-org-akcie {
    display: flex; flex-wrap: wrap; gap: .55rem;
    padding: .9rem 1rem;
    background: var(--sk-surface-subtle);
}

.hp-org-spodok { display: flex; flex-direction: column; }
.hp-org-akcia-blok { padding: .9rem 1rem; background: var(--sk-surface-subtle); }

/* Druhá cesta pre organizátora: súťaž už prebehla, stačí poslať súbor */
.hp-org-uz-bolo {
    padding: .9rem 1rem;
    border-top: 1px dashed var(--sk-border-strong);
    background: var(--sk-surface-subtle);
}
.hp-org-uz-bolo strong {
    display: flex; align-items: center; gap: .4rem;
    color: var(--sk-ink-strong); font-size: .88rem;
}
.hp-org-uz-bolo strong i { color: var(--sk-brand); }
.hp-org-uz-bolo p { margin: .25rem 0 .65rem; color: var(--sk-ink-muted); font-size: .82rem; }

.hp-org-pomoc {
    display: flex; align-items: flex-start; gap: .45rem;
    margin: 0;
    padding: .75rem 1rem;
    border-top: 1px solid var(--sk-border-soft);
    color: var(--sk-ink-muted); font-size: .8rem; line-height: 1.45;
}
.hp-org-pomoc i { color: var(--sk-role-owner-fg); margin-top: .12rem; flex: none; }
.hp-org-pomoc a { color: var(--sk-brand-link); font-weight: var(--sk-weight-bold); }

/* ── Tlačidlá ────────────────────────────────────────────────────────── */
.hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: var(--sk-control-height);
    padding: 0 1rem;
    border-radius: var(--sk-radius-sm);
    font-size: .9rem; font-weight: var(--sk-weight-bold);
    text-decoration: none;
}
.hp-btn-primary { background: var(--sk-brand); color: var(--sk-surface); border: 1px solid var(--sk-brand); }
.hp-btn-primary:hover { background: var(--sk-brand-hover); border-color: var(--sk-brand-hover); color: var(--sk-surface); text-decoration: none; }
.hp-btn-ghost { background: var(--sk-surface); color: var(--sk-brand-link); border: 1px solid var(--sk-border-strong); }
.hp-btn-ghost:hover { border-color: var(--sk-brand); background: var(--sk-surface-tint); color: var(--sk-brand-hover); text-decoration: none; }
.hp-btn-block { width: 100%; }

/* ── Bočné panely ────────────────────────────────────────────────────── */
.hp-panel {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-xl);
    box-shadow: var(--sk-shadow-sm);
    overflow: hidden;
}
.hp-panel-head {
    display: flex; align-items: center; gap: .4rem;
    padding: .7rem .85rem;
    background: var(--sk-surface-subtle);
    border-bottom: 1px solid var(--sk-border-soft);
    color: var(--sk-ink-title);
    font-size: var(--sk-size-label); font-weight: var(--sk-weight-bold);
    letter-spacing: var(--sk-tracking-wide); text-transform: uppercase;
}
.hp-panel-head i { color: var(--sk-brand); font-size: .95rem; }
.hp-panel-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem; }
.hp-panel-n {
    margin-left: auto;
    padding: .05rem .4rem;
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface-accent);
    color: var(--sk-brand-ink);
    font-size: .7rem; font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Najbližších 7 dní */
.hp-tyzden { display: flex; flex-direction: column; }
.hp-tyzden-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--sk-border-soft);
    color: inherit; text-decoration: none;
}
.hp-tyzden-row:last-child { border-bottom: 0; }
.hp-tyzden-row:hover { background: var(--sk-surface-tint); text-decoration: none; color: inherit; }
.hp-tyzden-row.is-dnes { background: var(--sk-state-live-bg); }
.hp-tyzden-den {
    flex: none;
    display: flex; flex-direction: column; align-items: center;
    width: 42px;
    padding: .25rem 0;
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface-subtle);
    border: 1px solid var(--sk-border-soft);
}
.hp-tyzden-den.is-vikend { background: var(--sk-surface-accent); border-color: var(--sk-border-info); }
.hp-tyzden-row.is-dnes .hp-tyzden-den {
    background: var(--sk-state-live-fg); border-color: var(--sk-state-live-fg);
}
.hp-tyzden-row.is-dnes .hp-tyzden-dow,
.hp-tyzden-row.is-dnes .hp-tyzden-dm { color: var(--sk-surface); }
.hp-tyzden-dow {
    color: var(--sk-ink-soft);
    font-size: .6rem; font-weight: var(--sk-weight-bold);
    letter-spacing: var(--sk-tracking-wide); text-transform: uppercase;
}
.hp-tyzden-dm { color: var(--sk-ink-strong); font-size: .8rem; font-weight: 750; line-height: 1.2; }
.hp-tyzden-body { min-width: 0; display: flex; flex-direction: column; }
.hp-tyzden-nazov {
    color: var(--sk-ink-strong); font-size: .85rem; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-tyzden-meta { color: var(--sk-ink-muted); font-size: .76rem; }

.hp-panel-viac {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: 42px;
    border-top: 1px solid var(--sk-border-soft);
    background: var(--sk-surface-subtle);
    color: var(--sk-brand-link);
    font-size: .82rem; font-weight: var(--sk-weight-bold);
    text-decoration: none;
}
.hp-panel-viac:hover { background: var(--sk-surface-tint); text-decoration: none; }

.hp-odkazy { display: flex; flex-direction: column; }
.hp-odkaz {
    display: flex; align-items: center; gap: .55rem;
    min-height: var(--sk-touch-target);
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--sk-border-soft);
    color: var(--sk-ink-strong);
    font-size: .88rem; font-weight: 600;
    text-decoration: none;
}
.hp-odkaz:last-child { border-bottom: 0; }
.hp-odkaz:hover { background: var(--sk-surface-tint); color: var(--sk-brand-ink); text-decoration: none; }
.hp-odkaz-ico { color: var(--sk-brand); width: 18px; text-align: center; flex: none; }
.hp-odkaz-n {
    margin-left: auto;
    color: var(--sk-ink-soft); font-size: .78rem; font-weight: var(--sk-weight-bold);
    font-variant-numeric: tabular-nums;
}

.hp-banner { display: block; }
.hp-banner img { width: 100%; height: auto; border-radius: var(--sk-radius-lg); }

/* ── Viditeľné zameranie klávesnicou ─────────────────────────────────── */
.hp a:focus-visible,
.hp button:focus-visible,
.hp input:focus-visible {
    outline: 2px solid var(--sk-brand);
    outline-offset: 2px;
    border-radius: var(--sk-radius-sm);
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .hp-hero { padding: 1.75rem 1.25rem 1.6rem; }
    .hp-wrap { padding: 1.5rem 1.25rem 3rem; }
    .hp-card-title { font-size: 1.02rem; }
    .hp-ligy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-panel-tab { padding: .85rem; }
    .hp-filter { padding: .7rem .85rem; }
    .hp-card { padding: .7rem .8rem; grid-template-columns: 46px minmax(0, 1fr) auto; }
    .hp-sec-head h2 { font-size: 1.1rem; }

    /* Karty do dvoch stĺpcov — polovičná výška stránky, rovnaká informácia */
    .hp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

    /* Veľký blok organizátora je na konci stránky na celú šírku */
    .hp-org-kroky { grid-template-columns: repeat(3, 1fr); }
    .hp-krok { border-bottom: 0; border-right: 1px solid var(--sk-border-soft); }
    .hp-krok:last-child { border-right: 0; }

    .hp-org-spodok { flex-direction: row; align-items: stretch; }
    .hp-org-akcia-blok {
        display: flex; align-items: center;
        flex: 0 0 auto;
        border-right: 1px solid var(--sk-border-soft);
    }
    .hp-org-uz-bolo { flex: 1 1 auto; border-top: 0; }
}

/* ── Desktop: dva stĺpce ─────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .hp-hero { padding: 2rem 1.5rem 1.9rem; }
    .hp-wrap { padding: 1.75rem 1.5rem 3.5rem; }

    /* Vľavo nadpis, vyhľadávanie a čísla; vpravo mini výzva pre organizátora */
    .hp-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
        gap: 2rem;
        align-items: start;
    }
    .hp-hero h1 { max-width: 22ch; font-size: 2rem; }
    .hp-mini-org { display: flex; } /* skrytá nižšie než 1200px, pozri home.css vyššie */

    /* Nad 1200px sa .hp-side stáva skutočným bočným stĺpcom vedľa .hp-main,
       takže skratky dáva zmysel mať tam — pod hero na mobile/tablete zas
       v hlavnom stĺpci (opačné prepnutie). */
    .hp-quicklinks-top { display: none; }
    .hp-quicklinks-side { display: grid; }

    .hp-layout {
        display: grid;
        grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr);
        gap: 1.9rem;
        align-items: start;
    }
    .hp-side { position: sticky; top: 1rem; }
}

/* ── Široké obrazovky ────────────────────────────────────────────────────
   Na 14" notebooku (typicky 1440–1536 CSS px) bola predtým šírka
   zastropovaná bootstrapovým kontajnerom na 1140 px. Teraz sa využije
   celá plocha až po 1400 px, na väčších monitoroch po 1560 px. */
@media (min-width: 1500px) {
    .hp { --hp-max: 1500px; }
}
@media (min-width: 1700px) {
    .hp { --hp-max: 1560px; }
    .hp-hero { padding-inline: 2rem; }
    .hp-wrap { padding-inline: 2rem; }
}

/* Tri stĺpce kariet, keď je na to miesto */
@media (min-width: 1600px) {
    .hp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp-ligy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}