/* KOMPONENT tabulka-principov — .ph-principles, .ph-principle (krok 4 knižnice, 30. 10. 2026).
   Vybraté z: style-a5de0145ecc1.css, userStyles-b7accc8e732d.css. Hodnoty z tokeny.css.
   Vytvoril tools/komponent_vyber.py — pravidlá v pôvodnom poradí.
   1. 11. 2026, krok 9: bez výnimiek „important“ (5×) a bez html body / html:root body — súperili len pravidlá komponentu navzájom
   (nadpis: platí .ph-principle .ph-principle__t s --ts-velky) a medzera nad tabuľkou po diagrame vyhrá aj tak nad
   :has(+ .f-figcap.is-below) z f-figcap.css (vyššia špecificita). Overené vypočítanými štýlmi. */

/* --- z style-a5de0145ecc1.css --- */
.ph-principles { margin: clamp(48px, 6vw, 88px) 0 0; padding: 0px; border-bottom: 1px solid var(--c-line); list-style-type: none; list-style-image: initial; list-style-position: initial; }
.ph-principle { row-gap: 12px; display: grid; border-top: 1px solid var(--c-line); column-gap: var(--f-gap); grid-template-columns: 120px minmax(0px, 1fr) minmax(0px, 440px) 140px; }
@media (max-width: 860px) { .ph-principle { grid-template-columns: 56px minmax(0px, 1fr); } }
.ph-principle__t { font-weight: 500; }
.ph-principle__d { color: var(--c-body); font-size: 16px; line-height: var(--lh-odsek); text-wrap-mode: initial; text-wrap-style: pretty; }
@media (max-width: 860px) { .ph-principle__d { grid-column-end: auto; grid-column-start: 2; } }
.ph-principle__tag { text-align: right; }
@media (max-width: 860px) { .ph-principle__tag { display: none; } }
.f-js .ph-principles .ph-principle { opacity: 0; transform: translateY(12px); transition: opacity var(--t-nabeh) var(--f-ease), transform var(--t-nabeh) var(--f-ease); transition-delay: var(--d, 0ms); }
.f-js .ph-principles.is-in .ph-principle { opacity: 1; transform: none; }

/* --- z userStyles-b7accc8e732d.css --- */
.ph-principles { margin-top: 0; }
.ph-principle { align-items: start; padding: 30px 0; }
.ph-principle > .f-mono:first-child, .ph-principle__tag { padding-top: 3px; }
.ph-principle__t { line-height: var(--lh-nadpis); font-size: clamp(28px, 2.8vw, 40px); }
.ph-principle__items { display: block; margin-top: 12px; }
.ph-principles > .ph-principle:first-child { border-top-color: color-mix(in srgb, var(--c-fg) 30%, transparent); }
.f-light .ph-principles > .ph-principle:first-child, .f-neutral-bg .ph-principles > .ph-principle:first-child { border-top-color: var(--c-fg); }
.f-light .ph-principle, .f-neutral-bg .ph-principle { border-top-color: var(--c-line); }
.f-light .ph-principles, .f-neutral-bg .ph-principles { border-bottom-color: var(--c-line); }
.ph-principle:not(:has(.ph-principle__d)) { grid-template-columns: 120px minmax(0,1fr); }
@media (max-width: 860px) { .ph-principle:not(:has(.ph-principle__d)) { grid-template-columns: 56px minmax(0,1fr); } }
.ph-principle__t { letter-spacing: var(--tr-velky); }
@media (min-width: 861px) and (max-width: 1280px) { .ph-principle:has(.ph-principle__d) { grid-template-columns: 120px minmax(0, 1fr) 140px; } }
@media (min-width: 861px) and (max-width: 1280px) { .ph-principle:has(.ph-principle__d) > .ph-principle__t { grid-column: 2; grid-row: 1; } }
@media (min-width: 861px) and (max-width: 1280px) { .ph-principle:has(.ph-principle__d) > .ph-principle__d { grid-column: 2; grid-row: 2; max-width: 560px; } }
@media (min-width: 861px) and (max-width: 1280px) { .ph-principle:has(.ph-principle__d) > .ph-principle__tag { grid-column: 3; grid-row: 1; } }
@media (min-width: 861px) and (max-width: 1280px) { .ph-principle:has(.ph-principle__d) > .f-mono:first-child { grid-column: 1; grid-row: 1; } }
@media (min-width: 1281px) { .ph-principle:has(.ph-principle__d) { grid-template-columns: 120px minmax(240px, 1fr) minmax(0, 440px) 140px; } }
:is(.ph-principles, .ph-route, .lpc-kv, .lp-frame.pa-sit, .lp-frame.lpc-vis) + .f-figcap.is-below { margin-top: 0; border-top: 0; padding-top: 18px; }
.ph-principle .ph-principle__t { font-size: var(--ts-velky); letter-spacing: var(--tr-velky); }
.ph-sec > figure.vz-on-page + :is(.lp-frame, .ph-principles, .lpc-kv, .ph-route) { margin-top: var(--f-sp-obsah); }