/* ============================================================================
   KALENDÁR SÚŤAŽÍ — slovenská verzia (kal-*)
   ----------------------------------------------------------------------------
   Nadväzuje na home.css (hlavička .hp-hero, riadky súťaží .hp-riadok,
   filtre .hp-fchip, stavy .hp-state). Len dizajnové tokeny z tokens.css,
   jediná farba zvonku je farba disciplíny cez --hp-disc.
   Mobile-first; mesačná mriežka má názvy súťaží od 768 px.
   ========================================================================== */

/* Zoznam sa lepšie číta v užšom stĺpci než titulka s bočným panelom */
.kal .hp-hero-inner,
.kal .kal-wrap { max-width: 1040px; }

/* ── Hlavička ────────────────────────────────────────────────────────── */
.kal-hlava { display: flex; align-items: flex-start; gap: .75rem; }
.kal-hlava-text { flex: 1 1 auto; min-width: 0; }
.kal .hp-hero h1 { margin: 0; }
.kal-podnadpis { margin: .2rem 0 0; color: var(--sk-ink-muted); font-size: .85rem; }
/* Pozor: .kal-export je obsadená v offcanvas.css (starý kalendár) */
.kal-stiahnut { flex: none; min-height: 38px; padding: 0 .75rem; font-size: .84rem; }
.kal-stiahnut span { display: none; }

.kal-ovladanie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }

.kal-prepinac {
    display: inline-flex;
    padding: 3px;
    background: var(--sk-surface-subtle);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-md);
}
.kal-prepinac a {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 36px;
    padding: 0 .95rem;
    border-radius: var(--sk-radius-sm);
    color: var(--sk-ink-muted);
    font-size: .88rem; font-weight: var(--sk-weight-bold);
    text-decoration: none;
}
.kal-prepinac a:hover { color: var(--sk-ink-title); text-decoration: none; }
.kal-prepinac a.is-active {
    background: var(--sk-brand-gradient);
    color: var(--sk-surface);
    box-shadow: var(--sk-shadow-lg);
}

.kal-liga {
    flex: 1 1 180px;
    min-width: 0; max-width: 100%;
    min-height: 38px;
    padding: 0 .6rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    color: var(--sk-ink-strong);
    font-size: .85rem;
}

.kal-filter {
    display: flex; flex-wrap: nowrap; gap: .3rem;
    margin: .6rem -.75rem 0;
    padding: 0 .75rem .1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.kal-filter::-webkit-scrollbar { display: none; }

/* ── Skoky na mesiace ────────────────────────────────────────────────── */
.kal-skoky {
    display: flex; flex-wrap: nowrap; gap: .35rem;
    margin: 0 -.75rem .9rem;
    padding: 0 .75rem .1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.kal-skoky::-webkit-scrollbar { display: none; }
.kal-skok {
    flex: none;
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 34px;
    padding: 0 .7rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-pill);
    color: var(--sk-ink-strong);
    font-size: .8rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.kal-skok:hover { border-color: var(--sk-brand); color: var(--sk-brand-ink); text-decoration: none; }
.kal-skok.is-active { background: var(--sk-brand-gradient); border-color: var(--sk-brand); color: var(--sk-surface); }

/* Výber roka pri odohraných súťažiach — nad skokmi na mesiace */
.kal-roky {
    display: flex; flex-wrap: nowrap; gap: .35rem;
    margin: 0 -.75rem .6rem;
    padding: 0 .75rem .1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.kal-roky::-webkit-scrollbar { display: none; }
.kal-rok-vyber { flex: none; display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--sk-ink-muted); font-size: .8rem; font-weight: 600; }
.kal-rok-vyber select {
    min-height: 34px;
    padding: 0 .5rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-pill);
    color: var(--sk-ink-strong);
    font-size: .8rem; font-weight: 600;
}
.kal-rok-vyber.is-active select { border-color: var(--sk-brand); color: var(--sk-brand-ink); }
.kal-skok-n {
    padding: 0 .35rem;
    border-radius: var(--sk-radius-pill);
    background: var(--sk-surface-accent);
    color: var(--sk-brand-ink);
    font-size: .7rem; font-weight: 750;
}

/* ── Mesiac v zozname ────────────────────────────────────────────────── */
.kal-mesiac { margin-bottom: 1.4rem; scroll-margin-top: 80px; }
.kal-mesiac-hlava { display: flex; align-items: baseline; gap: .6rem; margin: 0 .15rem .5rem; }
.kal-mesiac-hlava h2 {
    margin: 0;
    color: var(--sk-ink-title);
    font-size: 1.15rem; font-weight: var(--sk-weight-heading);
}
.kal-mesiac-pocet { color: var(--sk-ink-soft); font-size: .8rem; }
.kal-karta {
    padding: .55rem .5rem .45rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
}
.kal .hp-den { scroll-margin-top: 80px; }
.kal .hp-den:target .hp-den-hlavicka { background: var(--sk-surface-accent); border-radius: var(--sk-radius-sm); }

.kal-prazdne { margin-bottom: 1rem; }
.kal-archiv {
    display: flex; align-items: center; gap: .4rem;
    margin: .5rem .15rem 0;
    color: var(--sk-ink-muted); font-size: .84rem;
}
.kal-archiv a { color: var(--sk-brand-link); font-weight: var(--sk-weight-bold); }

/* ── Mesačná mriežka ─────────────────────────────────────────────────── */
.kal-mriezka-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.kal-mriezka-nav h2 {
    flex: 1 1 auto;
    margin: 0;
    color: var(--sk-ink-title);
    font-size: 1.15rem; font-weight: var(--sk-weight-heading);
}
.kal-nav-btn {
    flex: none;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    color: var(--sk-brand-link);
    text-decoration: none;
}
.kal-nav-btn:hover { border-color: var(--sk-brand); background: var(--sk-surface-tint); }
.kal-dnes {
    flex: none;
    color: var(--sk-brand-link);
    font-size: .84rem; font-weight: var(--sk-weight-bold);
    text-decoration: none;
}
.kal-dnes:hover { text-decoration: underline; }

.kal-mriezka {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 1.25rem;
    background: var(--sk-border);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    overflow: hidden;
    box-shadow: var(--sk-shadow-sm);
}
.kal-mriezka-dow {
    padding: .35rem 0;
    background: var(--sk-surface-subtle);
    color: var(--sk-ink-soft);
    font-size: .7rem; font-weight: var(--sk-weight-bold);
    text-align: center; text-transform: uppercase;
}
.kal-mriezka-dow.is-vikend { color: var(--sk-brand-ink); }

.kal-bunka {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: .25rem .15rem;
    background: var(--sk-surface);
}
.kal-bunka.is-vikend { background: color-mix(in srgb, var(--sk-brand) 3%, var(--sk-surface)); }
.kal-bunka.is-mimo { background: var(--sk-surface-subtle); }
.kal-bunka.is-mimo .kal-bunka-cislo { color: var(--sk-ink-faint); }

.kal-bunka-cislo {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    color: var(--sk-ink-strong);
    font-size: .8rem; font-weight: 700;
    text-decoration: none;
}
.kal-bunka.ma-sutaze .kal-bunka-cislo { color: var(--sk-brand-ink); }
.kal-bunka.is-dnes .kal-bunka-cislo { background: var(--sk-brand); color: var(--sk-surface); }
.kal-bunka.is-odfiltrovana .kal-bunka-cislo { color: var(--sk-ink-strong); }

/* Mobil: celá bunka je odkazom na deň v zozname pod mriežkou */
.kal-bunka-odkaz::after { content: ""; position: absolute; inset: 0; }
.kal-bunka.ma-sutaze:hover { background: var(--sk-surface-tint); }

.kal-bodky { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
.kal-bodka { width: 7px; height: 7px; border-radius: 50%; background: var(--hp-disc, var(--sk-brand)); }

.kal-pill { display: none; }

/* ── Tablet a viac ───────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .kal-stiahnut span { display: inline; }
}

@media (min-width: 768px) {
    .kal-filter { flex-wrap: wrap; margin: .65rem 0 0; padding: 0; overflow: visible; }
    .kal-skoky { flex-wrap: wrap; margin: 0 0 1rem; padding: 0; overflow: visible; }
    .kal-roky { flex-wrap: wrap; margin: 0 0 .7rem; padding: 0; overflow: visible; }
    .kal-karta { padding: .75rem .85rem .6rem; }
    .kal-liga { flex: 0 1 280px; }

    .kal-bunka { align-items: stretch; min-height: 104px; padding: .3rem; }
    .kal-bunka-cislo { width: 24px; height: 24px; font-size: .78rem; }
    .kal-bodky { display: none; }

    /* Na širšej obrazovke sa klikajú priamo súťaže, nie deň */
    .kal-bunka-odkaz::after { display: none; }
    .kal-bunka.ma-sutaze:hover { background: var(--sk-surface); }
    .kal-bunka.is-vikend.ma-sutaze:hover { background: color-mix(in srgb, var(--sk-brand) 3%, var(--sk-surface)); }

    .kal-pill {
        display: block;
        padding: 2px 5px;
        background: color-mix(in srgb, var(--hp-disc, var(--sk-brand)) 12%, var(--sk-surface));
        border-left: 3px solid var(--hp-disc, var(--sk-brand));
        border-radius: 4px;
        color: var(--sk-ink-heading);
        font-size: .7rem; font-weight: 600; line-height: 1.3;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        text-decoration: none;
    }
    .kal-pill b { margin-right: .15rem; color: var(--sk-accent-time-fg); font-weight: 750; }
    .kal-pill:hover { background: color-mix(in srgb, var(--hp-disc, var(--sk-brand)) 24%, var(--sk-surface)); color: var(--sk-ink-heading); text-decoration: none; }
    .kal-pill.is-vyznamna { box-shadow: inset 0 0 0 1px var(--sk-role-owner-fg); }
    .kal-pill[hidden] { display: none; }
}

@media (min-width: 1200px) {
    .kal-bunka { min-height: 116px; }
    .kal-pill { font-size: .74rem; }
}