/* =========================================================
   Interní portál /p/ — vrstva komponent nad om-design.
   Načítej až po tokens.css a signal.css; odsud se nebere
   žádná barva ani velikost natvrdo, všechno jde z tokenů.
   ========================================================= */

/* --- Základ ------------------------------------------------ */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input { font: inherit; color: inherit; }
svg { display: block; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-void :focus-visible { outline-color: var(--on-void); }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Horní lišta -------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: var(--line);
}

.topbar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-3) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.topbar a,
.topbar span {
    font-size: var(--t-label);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-45);
    white-space: nowrap;
}

.back { display: inline-flex; align-items: center; gap: var(--s-2); transition: color 0.2s var(--ease); }
.back:hover { color: var(--ink); }
.back svg { transition: transform 0.25s var(--ease); }
.back:hover svg { transform: translateX(-3px); }

.topbar-right { display: inline-flex; align-items: center; gap: var(--s-4); }

.topbar-link { display: inline-flex; align-items: center; gap: var(--s-2); transition: color 0.2s var(--ease); }
.topbar-link:hover { color: var(--ink); }

.topbar-state {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    border-left: var(--line);
    padding-left: var(--s-4);
}
.topbar-state i { width: 6px; height: 6px; background: var(--ink-45); }

/* --- Hero: jediná tmavá plocha na stránce -------------------- */
.hero {
    position: relative;
    padding: var(--s-24) 0 var(--s-16);
}

.hero-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.hero .ruler { position: absolute; top: 6px; right: var(--gutter); }

.hero-eyebrow { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-8); }
.hero-eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--red-lift); }

.hero-title {
    font-size: var(--t-display);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0;
}
.hero-title em { font-style: normal; color: var(--red-lift); }

.hero-sub {
    margin-top: var(--s-6);
    max-width: 52ch;
    color: var(--on-void-45);
}

/* Úvod na světlé ploše. Hero se původně sázel jen na tmavou, takže má
   napevno barvy pro tmavé pozadí — na papíře by červená spadla na 3,5:1
   a podtitul by zmizel. Modifikátor přebarvuje jen to, co je na plochu
   vázané; rozvržení zůstává společné. */
.hero--paper .hero-eyebrow::before { background: var(--red); }
.hero--paper .hero-title em { color: var(--red); }
.hero--paper .hero-sub { color: var(--ink-45); }
.hero--paper .hero-figures { border-top-color: var(--rule); }

.hero-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-16);
    margin-top: var(--s-16);
    padding-top: var(--s-6);
    border-top: 1px solid var(--void-rule);
}
.figure b {
    display: block;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.figure span { display: block; margin-top: var(--s-3); }

/* --- Toolbar: hledání a filtr -------------------------------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding-top: var(--s-12);
}

.search { position: relative; flex: 1 1 260px; max-width: 340px; }
.search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-45);
    pointer-events: none;
}
.search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: var(--line);
    background: var(--paper);
    font-size: var(--t-small);
    transition: border-color 0.2s var(--ease);
}
.search input::placeholder { color: var(--ink-45); }
.search input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* Segmentovaný přepínač — dlaždice slepené na sraz, ne pilulky */
.chips { display: flex; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: 0 0 auto;
    margin-left: -1px;
    padding: 9px 14px;
    border: var(--line);
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-45);
    white-space: nowrap;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
                background-color 0.2s var(--ease);
}
.chip:first-child { margin-left: 0; }
.chip:hover { color: var(--ink); border-color: var(--ink-45); }
.chip.is-active {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* --- Sekce ---------------------------------------------------- */
.psection { margin-top: var(--s-16); }

.psection-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}
.psection-head .n { color: var(--ink-45); }
.psection-head h2 { white-space: nowrap; }
.psection-head .count {
    font-size: var(--t-small);
    color: var(--ink-45);
    font-variant-numeric: tabular-nums;
}
.psection-head .rule { flex: 1; height: 1px; background: var(--rule); align-self: center; }

/* --- Karty ---------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--col-gap);
}

.pcard {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    border: var(--line);
    /* background-color, ne background — shorthand by přepsal podsvícení */
    background-color: var(--paper);
}
.pcard:hover { border-color: var(--ink-45); }

.pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }

.pcard-mark {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--paper);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.pcard-tag,
.pcard-meta,
.pcard-stats,
.pcard-open {
    font-size: var(--t-label);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pcard-tag { padding-top: 5px; text-align: right; color: var(--ink-45); }
.pcard-meta { margin-top: var(--s-3); color: var(--ink-45); font-variant-numeric: tabular-nums; }

.pcard-title { margin: 0; }

.pcard-desc {
    flex: 1;
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--ink-70);
}

.pcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-2);
    padding-top: var(--s-4);
    border-top: var(--line);
}
.pcard-stats { color: var(--ink-45); }
.pcard-open { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); white-space: nowrap; }
.pcard-open svg { transition: transform 0.25s var(--ease); }
/* jediná červená na světlé ploše — a jen na kartě pod kurzorem */
.pcard:hover .pcard-open { color: var(--red); }
.pcard:hover .pcard-open svg { transform: translate(2px, -2px); }

/* --- Prázdný stav --------------------------------------------- */
.empty {
    margin-top: var(--s-12);
    padding: var(--s-24) var(--s-6);
    border: var(--line);
    text-align: center;
}
.empty p { margin: 0 auto; max-width: 44ch; color: var(--ink-45); }
.empty button {
    margin-top: var(--s-4);
    padding-bottom: 2px;
    border-bottom: var(--line-accent);
    font-size: var(--t-label);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- Patička --------------------------------------------------- */
.footer {
    margin-top: var(--s-24);
    padding: var(--s-6) 0 var(--s-12);
    border-top: var(--line);
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }
.footer-inner span {
    font-size: var(--t-label);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-45);
}

/* --- Responsivita ---------------------------------------------- */
@media (max-width: 640px) {
    /* na telefonu se do lišty nevejdou tři popisky — stav přístupu ustoupí */
    .topbar-state { display: none; }

    .hero { padding: var(--s-16) 0 var(--s-12); }
    .hero .ruler { display: none; }
    .hero-figures { gap: var(--s-8); margin-top: var(--s-12); }

    .toolbar { align-items: stretch; }
    .search { max-width: none; }
    .chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

    .grid { grid-template-columns: 1fr; }

    .psection-head { flex-wrap: wrap; }
    .psection-head .rule { flex-basis: 100%; }
}

/* --- Tisk ------------------------------------------------------- */
@media print {
    .topbar, .toolbar, .empty { display: none; }
    .hero { background: var(--paper) !important; color: var(--ink); padding: 0 0 var(--s-8); }
    .hero::before, .hero::after { display: none; }
    .hero .label { color: var(--ink-45); }
    .hero-title em { color: var(--red); }
    .hero-sub { color: var(--ink-70); }
    .hero-figures { border-top-color: var(--rule); }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .pcard { break-inside: avoid; }
}