/* ============================================================================
   DOMOVSKÁ STRÁNKA — slovenská verzia (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.

   Mobile-first: základ je telefón, tablet od 768 px, dva stĺpce od 992 px.

   Poradie obsahu je podriadené jedinej otázke návštevníka: "kde a kedy sa
   súťaží". Hneď pod vyhľadávaním je zoznam súťaží (predvolene najbližší
   víkend), všetko ostatné je až za ním.
   ========================================================================== */

.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; }

/* ── Hlavička + vyhľadávanie ─────────────────────────────────────────── */
.hp-hero {
    background: linear-gradient(180deg, var(--sk-surface-tint), var(--sk-surface));
    border-bottom: 1px solid var(--sk-border);
    padding: .85rem .75rem .75rem;
}
.hp-hero-inner { max-width: var(--hp-max, 1400px); margin: 0 auto; }
.hp-hero h1 {
    margin: 0 0 .6rem;
    color: var(--sk-ink-heading);
    font-size: 1.12rem;
    font-weight: var(--sk-weight-heading);
    letter-spacing: var(--sk-tracking-tight);
    line-height: 1.2;
}

.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-gradient);
    box-shadow: var(--sk-shadow-lg);
    color: var(--sk-surface);
    font-weight: var(--sk-weight-bold);
    font-size: .93rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.hp-search-btn:hover { box-shadow: var(--sk-shadow-md), var(--sk-shadow-lg); transform: translateY(-1px); }

/* Rýchle odkazy — jeden riadok. Na mobile sa posúva do strany (okraj
   stránky sa "požičia" zápornou medzerou, aby posun končil až na hrane
   displeja), od tabletu sa zalomí. */
.hp-skratky {
    display: flex; flex-wrap: nowrap; gap: .4rem;
    margin: .65rem -.75rem 0;
    padding: 0 .75rem .15rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hp-skratky::-webkit-scrollbar { display: none; }
.hp-skratka {
    flex: none;
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 36px;
    padding: .25rem .75rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-pill);
    box-shadow: var(--sk-shadow-sm);
    color: var(--sk-ink-strong);
    font-size: .82rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hp-skratka i { color: var(--sk-brand); font-size: .9rem; }
.hp-skratka:hover { border-color: var(--sk-brand); color: var(--sk-brand-ink); background: var(--sk-surface-tint); text-decoration: none; }
.hp-skratka-akcia {
    background: var(--sk-brand-gradient);
    border-color: var(--sk-brand);
    color: var(--sk-surface);
}
.hp-skratka-akcia i { color: var(--sk-surface); }
.hp-skratka-akcia:hover { background: var(--sk-brand-gradient); color: var(--sk-surface); box-shadow: var(--sk-shadow-lg); }

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

/* ── Pulzujúca bodka "prebieha teraz" ────────────────────────────────── */
.hp-live-dot {
    flex: none;
    display: inline-block;
    width: 9px; height: 9px;
    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 8px 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; } }

/* ── Majstrovstvá a finále ───────────────────────────────────────────── */
.hp-vyznamne-hlava { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.hp-vyznamne-hlava h2 {
    display: flex; align-items: center; gap: .4rem;
    margin: 0;
    color: var(--sk-ink-title);
    font-size: .98rem; font-weight: var(--sk-weight-heading);
}
.hp-vyznamne-hlava h2 i { color: var(--sk-role-owner-fg); }

/* Mobil: karty vedľa seba s posunom do strany — zaberú jeden riadok
   namiesto celej obrazovky, ďalšia karta vykukuje ako signál posunu. */
.hp-vyznamne-zoznam {
    display: flex; gap: .5rem;
    margin: 0 -.75rem;
    padding: .1rem .75rem .35rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hp-vyznamne-zoznam::-webkit-scrollbar { display: none; }
.hp-vyz {
    flex: 0 0 84%;
    scroll-snap-align: start;
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .75rem;
    background: color-mix(in srgb, var(--sk-role-owner-bg) 45%, var(--sk-surface));
    border: 1px solid color-mix(in srgb, var(--sk-role-owner-fg) 30%, var(--sk-border));
    border-left: 4px solid var(--sk-role-owner-fg);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
    color: inherit; text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.hp-vyz:only-child { flex-basis: 100%; }
.hp-vyz:hover { box-shadow: var(--sk-shadow-md); transform: translateY(-1px); color: inherit; text-decoration: none; }
.hp-vyz-datum {
    flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 46px; padding: .35rem 0;
    background: var(--sk-surface);
    border: 1px solid color-mix(in srgb, var(--sk-role-owner-fg) 30%, var(--sk-border));
    border-radius: var(--sk-radius-md);
    color: var(--sk-role-owner-fg);
    line-height: 1;
}
.hp-vyz-datum b { font-size: 1.15rem; font-weight: 800; color: var(--sk-ink-heading); }
.hp-vyz-datum span { margin-top: .15rem; font-size: .6rem; font-weight: var(--sk-weight-bold); letter-spacing: var(--sk-tracking-wide); }
.hp-vyz-telo { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.hp-vyz-nazov {
    color: var(--sk-ink-heading);
    font-size: .9rem; font-weight: 650; line-height: 1.28;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-vyz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; color: var(--sk-ink-muted); font-size: .76rem; }
.hp-vyz-kedy { display: inline-flex; align-items: center; gap: .3rem; color: var(--sk-accent-time-fg); font-weight: var(--sk-weight-bold); }
.hp-vyz.is-live .hp-vyz-kedy { color: var(--sk-state-live-fg); }

/* ── Záložky zoznamu súťaží ──────────────────────────────────────────────
   Na mobile päť rovnako širokých záložiek v jednom riadku (bez posúvania
   do strany — skrytá záložka mimo obrazovky by nebola nájdená). Časové
   rozsahy nesú farbu značky, prihlasovanie zelenú a výsledky fialovú. */
.hp-sutaze { display: flex; flex-direction: column; filter: drop-shadow(0 6px 16px rgba(11, 95, 165, .08)); }

.hp-taby {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .25rem;
    padding: .35rem;
    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;
}
.hp-tab-vikend,
.hp-tab-tyzden,
.hp-tab-mesiac   { --hp-tab-c: var(--sk-brand);          --hp-tab-bg: var(--sk-surface-accent); }
.hp-tab-otvorene { --hp-tab-c: var(--sk-state-open-fg);  --hp-tab-bg: var(--sk-state-open-bg); }
.hp-tab-vysledky { --hp-tab-c: var(--sk-role-admin-fg);  --hp-tab-bg: var(--sk-role-admin-bg); }

.hp-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-width: 0;
    min-height: 50px;
    padding: .35rem .15rem;
    border: 1px solid transparent;
    border-radius: var(--sk-radius-md);
    background: transparent;
    color: var(--sk-ink-muted);
    font-size: .76rem; font-weight: var(--sk-weight-bold);
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hp-tab-riadok {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .3rem;
    max-width: 100%;
}
.hp-tab i { display: none; font-size: .95rem; color: var(--hp-tab-c); }
.hp-tab-dlhy { display: none; }
.hp-tab-datum { display: none; font-size: .68rem; font-weight: 600; color: var(--sk-ink-soft); }
.hp-tab:hover:not(.is-active) { background: var(--hp-tab-bg); color: var(--sk-ink-title); }

.hp-tab.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 65%),
        var(--hp-tab-c);
    border-color: var(--hp-tab-c);
    color: var(--sk-surface);
    box-shadow: var(--sk-shadow-md);
}
.hp-tab.is-active i,
.hp-tab.is-active .hp-tab-datum { color: var(--sk-surface); }

.hp-tab-n {
    display: inline-flex; align-items: center;
    padding: 0 .38rem;
    border-radius: var(--sk-radius-pill);
    background: var(--hp-tab-bg);
    color: var(--hp-tab-c);
    font-size: .68rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.hp-tab.is-active .hp-tab-n { background: rgba(255, 255, 255, .28); color: var(--sk-surface); }
.hp-tab-live { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; }

/* ── Filter typu súťaže ──────────────────────────────────────────────── */
.hp-filter {
    display: flex; flex-wrap: nowrap; gap: .3rem;
    padding: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border-soft);
}
.hp-filter::-webkit-scrollbar { display: none; }
.hp-fchip {
    flex: none;
    min-height: 34px;
    padding: .25rem .7rem;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-muted);
    font-size: .8rem; font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.hp-fchip:hover { border-color: var(--sk-border-strong); color: var(--sk-ink-title); }
.hp-fchip.is-active {
    background: var(--sk-brand-gradient);
    border-color: var(--sk-brand);
    color: var(--sk-surface);
    box-shadow: var(--sk-shadow-lg);
}

/* ── Panel záložky ───────────────────────────────────────────────────── */
.hp-panel-tab {
    padding: .6rem .5rem .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-filter:not([hidden]) + .hp-panel-tab,
.hp-filter:not([hidden]) ~ .hp-panel-tab { border-top: 0; }
.hp-panel-lista {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
    margin: 0 .15rem .5rem;
}
.hp-panel-titul { color: var(--sk-ink-title); font-size: .95rem; font-weight: var(--sk-weight-heading); }
.hp-panel-titul .hp-num { margin-left: .2rem; color: var(--sk-ink-muted); font-weight: 600; }
.hp-sec-note { color: var(--sk-ink-soft); font-size: .8rem; }
.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; }

/* ── Deň a miesto ────────────────────────────────────────────────────── */
.hp-den + .hp-den { margin-top: .85rem; }
.hp-den-hlavicka {
    display: flex; align-items: center; gap: .45rem;
    padding: .25rem .2rem .35rem;
    border-bottom: 2px solid var(--sk-border-soft);
}
.hp-den-nazov { color: var(--sk-ink-title); font-size: .95rem; font-weight: var(--sk-weight-heading); }
.hp-den-datum { color: var(--sk-ink-muted); font-size: .82rem; font-weight: 600; }
.hp-den-pocet { margin-left: auto; color: var(--sk-ink-soft); font-size: .74rem; white-space: nowrap; }
.hp-den.is-vikend .hp-den-nazov { color: var(--sk-brand-ink); }
.hp-den.is-vikend .hp-den-hlavicka { border-bottom-color: color-mix(in srgb, var(--sk-brand) 30%, var(--sk-border-soft)); }
.hp-den.is-dnes .hp-den-nazov { color: var(--sk-state-live-fg); }
.hp-den.is-dnes .hp-den-hlavicka { border-bottom-color: color-mix(in srgb, var(--sk-state-live-fg) 35%, var(--sk-border-soft)); }

/* Viac súťaží na jednom mieste v ten istý deň — jeden rámik s hlavičkou */
.hp-miesto {
    margin: .4rem 0;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-md);
    overflow: hidden;
}
.hp-miesto-hlavicka {
    display: flex; align-items: center; gap: .35rem;
    padding: .35rem .6rem;
    background: var(--sk-surface-subtle);
    border-bottom: 1px solid var(--sk-border-soft);
    color: var(--sk-ink-strong);
    font-size: .82rem; font-weight: var(--sk-weight-bold);
}
.hp-miesto-hlavicka i { color: var(--sk-brand); }
.hp-miesto-pocet { margin-left: auto; color: var(--sk-ink-soft); font-size: .72rem; font-weight: 600; }
.hp-miesto .hp-riadok:last-child { border-bottom: 0; }

/* ── Riadok súťaže ───────────────────────────────────────────────────── */
.hp-zoznam { display: flex; flex-direction: column; }

.hp-riadok {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .3rem .6rem;
    padding: .6rem .5rem .6rem .4rem;
    border-bottom: 1px solid var(--sk-border-soft);
    border-left: 3px solid var(--hp-disc, transparent);
    color: inherit; text-decoration: none;
    transition: background .12s ease;
}
.hp-dni > .hp-den > .hp-riadok:last-child,
.hp-zoznam > .hp-riadok:last-child { border-bottom: 0; }
.hp-riadok:hover { background: var(--sk-surface-tint); color: inherit; text-decoration: none; }
.hp-riadok.is-vyznamna { background: color-mix(in srgb, var(--sk-role-owner-bg) 40%, var(--sk-surface)); }
.hp-riadok.is-vyznamna:hover { background: color-mix(in srgb, var(--sk-role-owner-bg) 70%, var(--sk-surface)); }

.hp-riadok-cas {
    grid-row: span 2;
    align-self: start;
    padding-top: .1rem;
    color: var(--sk-accent-time-fg);
    font-size: .84rem; font-weight: 750;
    text-align: center;
}
.hp-riadok-datum {
    grid-row: span 2;
    align-self: start;
    display: flex; flex-direction: column; align-items: center;
    padding: .3rem 0;
    background: color-mix(in srgb, var(--hp-disc, var(--sk-brand)) 7%, var(--sk-surface-subtle));
    border: 1px solid color-mix(in srgb, var(--hp-disc, var(--sk-brand)) 20%, var(--sk-border-soft));
    border-radius: var(--sk-radius-md);
    line-height: 1;
}
.hp-riadok-datum b { color: var(--sk-ink-heading); font-size: 1.05rem; font-weight: 750; }
.hp-riadok-datum span { margin-top: .12rem; color: var(--sk-ink-soft); font-size: .58rem; font-weight: var(--sk-weight-bold); letter-spacing: var(--sk-tracking-wide); }

.hp-riadok-telo { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.hp-riadok-nazov {
    color: var(--sk-ink-heading);
    font-size: .93rem; font-weight: 650; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-riadok-pohar { margin-right: .2rem; color: var(--sk-role-owner-fg); font-size: .85em; }
.hp-riadok-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem;
    color: var(--sk-ink-muted); font-size: .77rem;
}
.hp-riadok-miesto i { color: var(--sk-ink-soft); }
.hp-riadok-meta .bi-calendar-range { color: var(--sk-accent-time-fg); }
.hp-riadok-tag {
    padding: .02rem .4rem;
    border: 1px solid var(--sk-border-soft);
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface-subtle);
    font-size: .7rem; white-space: nowrap;
}
.hp-riadok-liga { border-color: var(--sk-border-info); background: var(--sk-surface-accent); color: var(--sk-brand-ink); }
.hp-riadok-pocet { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.hp-riadok-pocet i { color: var(--sk-brand); font-size: .72rem; }
.hp-riadok-pocet b { color: var(--sk-ink-heading); font-weight: 750; }

/* Na telefóne stav pod názvom, šípka netreba (celý riadok je odkaz) */
.hp-riadok-stav { grid-column: 2; justify-self: start; white-space: nowrap; }
.hp-riadok-sip { display: none; color: var(--sk-ink-faint); }
.hp-riadok:hover .hp-riadok-sip { color: var(--sk-brand); }

/* ── Stavy (významy v tokens.css, na celom webe rovnaké) ─────────────── */
.hp-state {
    display: inline-flex; align-items: center; gap: .32rem;
    padding: .16rem .55rem;
    border-radius: var(--sk-radius-pill);
    font-size: .76rem; 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-results { color: var(--sk-role-admin-fg);    background: var(--sk-role-admin-bg); }
.hp-state-closed,
.hp-state-before,
.hp-state-none    { color: var(--sk-state-closed-fg);  background: var(--sk-state-closed-bg); }

/* ── Prázdny stav ────────────────────────────────────────────────────── */
.hp-empty {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: 1.8rem 1rem;
    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.7rem; }
.hp-empty strong { color: var(--sk-ink-label); font-size: .92rem; }
.hp-empty span { font-size: .82rem; }
.hp-empty-dalsia { color: var(--sk-brand-link); font-size: .85rem; text-decoration: none; }
.hp-empty-dalsia:hover { text-decoration: underline; }

/* ── 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: .65rem .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-link {
    margin-left: auto;
    color: var(--sk-brand-link);
    font-size: .8rem; font-weight: 600;
    letter-spacing: 0; text-transform: none; text-decoration: none;
}
.hp-panel-link i { font-size: .8rem; color: inherit; }
.hp-panel-link:hover { text-decoration: underline; }
.hp-panel-body { display: flex; flex-direction: column; gap: .6rem; padding: .85rem; }
.hp-panel-text { color: var(--sk-ink-muted); font-size: .84rem; line-height: 1.45; }

/* Ligy */
.hp-ligy { display: flex; flex-direction: column; }
.hp-liga {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--sk-border-soft);
    color: inherit; text-decoration: none;
}
.hp-liga:last-child { border-bottom: 0; }
.hp-liga:hover { background: var(--sk-surface-tint); color: inherit; text-decoration: none; }
.hp-liga-znak {
    flex: none;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 1px solid color-mix(in srgb, var(--sk-role-owner-fg) 30%, var(--sk-border-info));
    border-radius: var(--sk-radius-md);
    background: color-mix(in srgb, var(--sk-role-owner-fg) 14%, var(--sk-surface-accent));
    color: var(--sk-role-owner-fg);
    font-size: .66rem; font-weight: 800; text-transform: uppercase;
    overflow: hidden;
}
.hp-liga-znak-obr { background: var(--sk-surface); padding: 2px; }
.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: .86rem; font-weight: var(--sk-weight-bold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-liga-meta { color: var(--sk-ink-muted); font-size: .76rem; }

/* Dlaždica HaZZ / Slovenský pohár */
.hp-hazz-hlava {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem;
    color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--sk-border-soft);
}
.hp-hazz-hlava:hover { background: var(--sk-surface-tint); text-decoration: none; color: inherit; }
.hp-hazz-logo { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.hp-hazz-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hp-hazz-nazov { color: var(--sk-ink-title); font-size: var(--sk-size-body); font-weight: var(--sk-weight-bold); line-height: 1.2; }
.hp-hazz-meta { color: var(--sk-ink-muted); font-size: var(--sk-size-meta); line-height: 1.25; }
.hp-hazz-sip { margin-left: auto; color: var(--sk-ink-faint); font-size: .9rem; }
.hp-hazz-hlava:hover .hp-hazz-sip { color: var(--sk-brand); }
.hp-hazz-kolo {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--sk-border-soft);
    color: inherit; text-decoration: none;
}
.hp-hazz-kolo:hover { background: var(--sk-surface-tint); text-decoration: none; color: inherit; }
.hp-hazz-kolo-datum {
    flex: 0 0 auto; padding: .1rem .45rem; border-radius: var(--sk-radius-pill);
    background: var(--sk-accent-time-bg); color: var(--sk-accent-time-fg);
    font-size: .72rem; font-weight: var(--sk-weight-bold);
}
.hp-hazz-kolo-nazov {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--sk-size-meta); color: var(--sk-ink-body);
}
.hp-hazz-akcie { display: flex; }
.hp-hazz-akcie a {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .55rem .5rem;
    font-size: var(--sk-size-meta); font-weight: var(--sk-weight-bold);
    color: var(--sk-brand-link); text-decoration: none;
}
.hp-hazz-akcie a + a { border-left: 1px solid var(--sk-border-soft); }
.hp-hazz-akcie a:hover { background: var(--sk-surface-tint); color: var(--sk-brand-hover); text-decoration: none; }

/* Banner je vysoký portrét — na mobile a tablete by na plnú šírku zabral
   aj pol metra, preto má strop šírky. */
.hp-banner { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.hp-banner img { width: 100%; height: auto; border-radius: var(--sk-radius-lg); }

/* ── 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;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.hp-btn-primary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 65%),
        var(--sk-brand-gradient);
    box-shadow: var(--sk-shadow-lg);
    color: var(--sk-surface);
    border: 1px solid var(--sk-brand);
}
.hp-btn-primary:hover { box-shadow: var(--sk-shadow-md), var(--sk-shadow-lg); transform: translateY(-1px); 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); box-shadow: var(--sk-shadow-sm); }
.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%; }

/* ── 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.1rem 1rem .95rem;
    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: 44px; height: 44px;
    border-radius: var(--sk-radius-md);
    background: var(--sk-brand-gradient);
    color: var(--sk-surface);
    font-size: 1.15rem;
    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.15rem; font-weight: var(--sk-weight-heading);
}
.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;
}
.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-spodok { display: flex; flex-direction: column; }
.hp-org-akcia-blok { padding: .9rem 1rem; background: var(--sk-surface-subtle); }
.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); }

/* ── 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);
}

/* ── Väčší telefón ───────────────────────────────────────────────────── */
@media (min-width: 400px) {
    .hp-tab { font-size: .8rem; }
}

/* ── Od 576 px: stav vpravo v riadku, ikony a dátumy v záložkách ─────── */
@media (min-width: 576px) {
    .hp-riadok { grid-template-columns: 48px minmax(0, 1fr) auto 12px; gap: .2rem .75rem; padding: .6rem .6rem .6rem .45rem; }
    .hp-riadok-cas,
    .hp-riadok-datum { grid-row: auto; align-self: center; padding-top: 0; }
    .hp-riadok-datum { padding: .3rem 0; }
    .hp-riadok-stav { grid-column: auto; justify-self: end; }
    .hp-riadok-sip { display: block; }
    .hp-riadok-nazov { -webkit-line-clamp: 1; }

    .hp-vyz { flex-basis: 290px; }
    .hp-vyz:only-child { flex-basis: 100%; }

    .hp-tab { min-height: 56px; font-size: .84rem; }
    .hp-tab i { display: inline-block; }
    .hp-tab-dlhy { display: inline; }
    .hp-tab-kratky { display: none; }
    .hp-tab-datum { display: block; }
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .hp-hero { padding: 1.3rem 1.25rem 1.1rem; }
    .hp-hero h1 { font-size: 1.5rem; margin-bottom: .75rem; }
    .hp-skratky { flex-wrap: wrap; overflow: visible; margin: .8rem 0 0; padding: 0; }
    .hp-wrap { padding: 1.25rem 1.25rem 3rem; }
    .hp-panel-tab { padding: .8rem .85rem .7rem; }
    .hp-filter { flex-wrap: wrap; padding: .6rem .85rem; }

    .hp-vyznamne-zoznam { margin: 0 -1.25rem; padding: .1rem 1.25rem .35rem; }

    /* Bočný obsah pod zoznamom v dvoch stĺpcoch — polovičná výška */
    .hp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

    .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; }
}

/* ── Dva stĺpce (tablet na šírku, notebook, desktop) ─────────────────── */
@media (min-width: 992px) {
    .hp-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 1.5rem;
        align-items: start;
    }
    .hp-side { display: flex; flex-direction: column; }
    .hp-riadok-nazov { -webkit-line-clamp: 2; }
}

@media (min-width: 1200px) {
    .hp-hero { padding: 1.6rem 1.5rem 1.35rem; }
    .hp-hero h1 { font-size: 1.75rem; }
    .hp-wrap { padding: 1.5rem 1.5rem 3.5rem; }
    .hp-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.9rem; }

    /* Majstrovstvá v jednom riadku (najviac 4), aby neodtláčali zoznam súťaží */
    .hp-vyznamne-zoznam {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0; padding: 0;
        overflow: visible;
    }
    .hp-vyz, .hp-vyz:only-child { padding: .5rem .6rem; }
    .hp-vyz:only-child { grid-column: span 2; }
    .hp-riadok-nazov { -webkit-line-clamp: 1; }
    .hp-riadok { padding-block: .65rem; }
}

@media (min-width: 1500px) { .hp { --hp-max: 1500px; } }
@media (min-width: 1700px) {
    .hp { --hp-max: 1560px; }
    .hp-hero, .hp-wrap { padding-inline: 2rem; }
}