/* ============================================================================
   OBĽÚBENÉ — hviezdička (globálna, na akejkoľvek stránke) a stránka /oblubene
   ----------------------------------------------------------------------------
   Postavené na dizajnových tokenoch. Žiadne hex farby okrem farby hviezdičky
   v aktívnom stave, ktorá je zámerne zlatá (rovnaká sémantika ako "vlastník"
   v cm-* štýle) — na celom webe má zlatá/jantárová vždy podobný "ocenené"
   význam.
   ========================================================================== */

/* ── Hviezdička ──────────────────────────────────────────────────────── */
.ob-hviezda {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    width: 40px; height: 40px;
    border: 1px solid var(--sk-border);
    border-radius: 50%;
    background: var(--sk-surface);
    color: var(--sk-ink-soft);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.ob-hviezda:hover {
    border-color: var(--sk-role-owner-fg);
    color: var(--sk-role-owner-fg);
    background: var(--sk-role-owner-bg);
}
.ob-hviezda:active { transform: scale(.92); }
.ob-hviezda.je-oblubene {
    border-color: var(--sk-role-owner-fg);
    background: var(--sk-role-owner-bg);
    color: var(--sk-role-owner-fg);
}
.ob-hviezda:disabled { opacity: .6; cursor: default; }
.ob-hviezda:focus-visible { outline: 2px solid var(--sk-brand); outline-offset: 2px; }

/* ── Stránka /oblubene ───────────────────────────────────────────────── */
.ob-empty-cta {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-top: .9rem;
}

/* Karta favorita — rovnaká kostra ako .hp-card na homepage (dátum + telo),
   len namiesto disciplíny nesie farebný prúžok podľa typu.

   Karta samotná NIE JE odkaz — vnútri je samostatný <a> (cez display:contents
   zapadne do rovnakej mriežky) a vedľa neho hviezdička na odobratie. Vnorenie
   <button> do <a> by bolo neplatné HTML aj kolízia kliku (oboje by reagovalo
   na jeden ťuk). */
.ob-karta {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    padding: .7rem .75rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-left: 3px solid var(--ob-typ-c, var(--sk-border-strong));
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
}
.ob-karta:hover { box-shadow: var(--sk-shadow-md); }
.ob-karta-odkaz { display: contents; color: inherit; text-decoration: none; }
.ob-karta-odkaz:hover { color: inherit; text-decoration: none; }
.ob-karta .ob-hviezda { align-self: center; }
.ob-karta-liga     { --ob-typ-c: var(--sk-role-owner-fg); }
.ob-karta-sutaz    { --ob-typ-c: var(--sk-brand); }
.ob-karta-pretekar { --ob-typ-c: var(--sk-role-admin-fg); }
.ob-karta-druzstvo { --ob-typ-c: var(--sk-role-writer-fg); }

.ob-karta-ikona {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--sk-radius-md);
    background: var(--sk-surface-subtle);
    color: var(--ob-typ-c, var(--sk-ink-soft));
    font-size: 1.05rem;
}
.ob-karta-body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ob-karta-nazov {
    color: var(--sk-ink-heading);
    font-size: .95rem; font-weight: var(--sk-weight-bold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ob-karta-vedlajsi { color: var(--sk-ink-muted); font-size: .8rem; }
.ob-karta-odvodene {
    display: flex; align-items: center; gap: .35rem;
    margin-top: .15rem;
    color: var(--sk-ink-strong); font-size: .82rem; font-weight: 600;
}
.ob-karta-odvodene i { color: var(--ob-typ-c, var(--sk-brand)); }
.ob-karta-prazdne { color: var(--sk-ink-soft); font-size: .82rem; font-style: italic; }

@media (min-width: 768px) {
    .ob-zoznam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
}
@media (min-width: 1600px) {
    .ob-zoznam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Karta po zrušení obľúbenia najprv jemne zmizne, až potom sa odstráni z DOM
   (public/js/oblubene.js + inline skript v oblubene/index.blade.php) —
   nie je to skoková zmena. */
.ob-karta.ob-mizne {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ob-karta.ob-mizne { transition: none; }
}