/* KOMPONENT karta-clanku — .ph-card, .ph-rail, .ph-list (krok 4 knižnice, 30. 10. 2026).
   Vybraté z: style-a5de0145ecc1.css, userStyles-b7accc8e732d.css, ph-koncepty.css. Hodnoty z tokeny.css.
   Vytvoril tools/komponent_vyber.py — pravidlá v pôvodnom poradí. */

/* --- z style-a5de0145ecc1.css --- */
.ph-card { row-gap: 18px; display: flex; min-width: 0px; border-top: 1px solid var(--c-fg); padding-top: 18px; flex-direction: column; }
.ph-card__top { display: flex; column-gap: 16px; justify-content: space-between; }
.ph-card__t { font-size: clamp(26px, 2.2vw, 32px); margin: 0px; font-weight: 500; line-height: var(--lh-nadpis); text-wrap-mode: initial; text-wrap-style: balance; }
.ph-card__d { color: var(--c-body); font-size: var(--ts-text); /* K2/J7 28. 10.: popis pod položkou = 16 px ako v tabuľkách (.ph-principle__d, .pa-d) */ margin: 0px; line-height: var(--lh-odsek); text-wrap-mode: initial; text-wrap-style: pretty; }
.ph-card__top .ph-cat { color: var(--c-fg); }
.ph-card__tags { row-gap: 6px; display: flex; flex-wrap: wrap; column-gap: 6px; text-transform: none; }
.ph-card__tags:empty { display: none; }
.ph-list { row-gap: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; grid-column-end: -1; grid-column-start: 1; }
.ph-rail { position: relative; }
.ph-rail__track { z-index: 0; display: grid; position: relative; column-gap: var(--f-gap-l); overflow-x: auto; grid-auto-flow: column; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; grid-auto-columns: calc((100% - 2 * var(--f-gap-l)) / 3.25); overscroll-behavior-x: contain; }
@media (max-width: 860px) { .ph-rail__track { column-gap: 20px; grid-auto-columns: 82%; } }
@media (min-width: 1600px) { .ph-rail__track { grid-auto-columns: calc((100% - 2 * var(--f-gap-l)) / 3.25); } }
.ph-rail__track::-webkit-scrollbar { display: none; }
.ph-rail__track > .ph-card { scroll-snap-align: start; }
.ph-rail__btn { top: 0px; color: var(--f-paper); width: 72px; bottom: 0px; cursor: pointer; z-index: 3; display: flex; opacity: 0; font-size: 18px; position: absolute; isolation: isolate; margin: 0px; align-items: center; font-family: var(--font-f-font-mono); padding: 0px; transition: opacity var(--t-rychlo) var(--f-ease); pointer-events: none; background-clip: initial; background-size: initial; border-top-color: currentcolor; border-top-style: none; border-top-width: 0px; justify-content: center; background-color: transparent; background-image: initial; border-left-color: currentcolor; border-left-style: none; border-left-width: 0px; background-origin: initial; background-repeat: initial; border-image-slice: 100%; border-image-width: 1; border-right-color: currentcolor; border-right-style: none; border-right-width: 0px; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: 0px; border-image-outset: 0; border-image-repeat: stretch; border-image-source: none; background-position-x: initial; background-position-y: initial; background-attachment: initial; }
@media (hover: none) { .ph-rail__btn { display: none; } }
.ph-rail__btn::before { top: 50%; left: 50%; width: 52px; height: 52px; z-index: -1; content: ""; position: absolute; margin: -26px 0px 0px -26px; background: var(--f-ink); transition: transform var(--t-nabeh) var(--f-ease); }
.ph-rail__btn:hover::before { transform: rotate(90deg); }
.ph-rail__btn--prev { left: -36px; }
.ph-rail__btn--next { right: -36px; }
.ph-rail:hover .ph-rail__btn { opacity: 1; pointer-events: auto; }
.ph-rail.at-start .ph-rail__btn--prev { opacity: 0; pointer-events: none; }
.ph-rail.at-end .ph-rail__btn--next { opacity: 0; pointer-events: none; }
.ph-rail.no-scroll .ph-rail__btn { opacity: 0; pointer-events: none; }
.ph-rail::after { top: 0px; right: 0px; width: 8%; bottom: 0px; z-index: 1; content: ""; position: absolute; background: linear-gradient(90deg, transparent, var(--f-neutral)); transition: opacity var(--t-rychlo) var(--f-ease); pointer-events: none; }
.ph-rail.at-end::after { opacity: 0; }
.ph-rail.no-scroll::after { opacity: 0; }
@media (max-width: 860px) { .ph-sec .ph-rail { margin-right: calc(-1 * var(--f-pad)); } }
@media (min-width: 861px) { .ph-sec .ph-rail { --rail-w: calc(100vw - 2 * var(--f-pad) - 120px - var(--f-gap)); margin-right: calc(-1 * var(--f-pad)); } }
@media (min-width: 1680px) { .ph-sec .ph-rail { --rail-w: calc(100vw - 2 * var(--f-pad) - 240px - 2 * var(--f-gap)); } }
@media (max-width: 860px) { .ph-sec .ph-rail .ph-rail__track { padding-right: var(--f-pad); } }
@media (min-width: 861px) { .ph-sec .ph-rail .ph-rail__track { padding-right: var(--f-pad); grid-auto-columns: calc((var(--rail-w) - 3 * var(--f-gap-l)) / 4); scroll-padding-right: var(--f-pad); } }
@media (min-width: 861px) { .ph-sec .ph-rail::after { width: var(--f-pad); } }
.ph-art-meta .ph-card__tags { padding-top: 2px; }

/* --- z userStyles-b7accc8e732d.css --- */
.ph-rail__track > :not(.ph-card) { display: contents; }
.ph-card__raw { display: none; }
.ph-rail.at-start .ph-rail__btn--prev, .ph-rail.at-end .ph-rail__btn--next, .ph-rail.no-scroll .ph-rail__btn { opacity: 0; pointer-events: none; visibility: hidden; }
@media (max-width: 1679px) { .ph-sec .ph-rail::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: clamp(72px, 12vw, 200px); z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rail-bg) 70%, transparent) 45%, var(--rail-bg) 88%); transition: opacity var(--t-rychlo) var(--f-ease); } }
@media (max-width: 1679px) { .ph-sec .ph-rail.at-end::after, .ph-sec .ph-rail.no-scroll::after { opacity: 0; } }
@media (max-width: 1679px) { html body .ph-sec .ph-rail .ph-rail__btn--next { right: 0; } }
@media (max-width: 1679px) { html body .ph-sec .ph-rail .ph-rail__btn--prev { left: 0; } }
.ph-rail--grid .ph-rail__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
.ph-rail--grid .ph-rail__btn, .ph-rail--grid::after { display: none; }
@media (max-width: 860px) { .ph-rail--grid .ph-rail__track { grid-template-columns: minmax(0,1fr); row-gap: 40px; } }
html body .ph-card, html body .ph-card > *, html body .ph-rail, html body .ph-rail__track { animation: none; opacity: 1; }
html body .ph-card { transform: none; transition-property: none; }
html body .ph-card__top { align-items: baseline; }
html body .ph-card__go { margin-left: auto; font-size: var(--ts-text); line-height: 1; transition: transform var(--t-zmena) var(--f-ease); }
html body .ph-card:hover .ph-card__go { transform: translateX(4px); }
/* #clanky (sekcia článkov na úvode) → web-ph.css (F1, 3. 11. 2026 — vec úvodnej stránky, nie komponentu) */
/* ODPORÚČANÉ ČLÁNKY — podoba karty v obale .ph-feat: jemnejšia čiara nad kartou (30 %), plná až pri prejdení, tlmený dátum.
   3. 11. 2026 (F1): viazané na triedu obalu .ph-feat, nie na atribút editora [data-ph-featured] (ten ostáva pre skript) */
html body .ph-feat .ph-card { border-top-color: color-mix(in srgb, var(--c-fg) 30%, transparent); color: var(--c-fg); }
html body .ph-feat .ph-card:hover { border-top-color: var(--c-fg); }
html body .ph-feat .ph-card__t { color: var(--c-fg); }
html body .ph-feat .ph-card__d { color: var(--c-body); }
html body .ph-feat .ph-card .f-mute, html body .ph-feat .ph-card__date, html body .ph-feat .ph-card__top { color: var(--c-mute); }
html body .ph-feat .ph-card__go { color: var(--c-fg); }
@media (min-width: 1680px) { .ph-sec .ph-rail { --rail-w: calc(100vw - 2 * var(--f-pad) - 240px - 2 * var(--f-gap)); margin-right: calc(-120px - var(--f-gap) - var(--f-pad)); } }
@media (min-width: 1680px) { .ph-sec .ph-rail .ph-rail__track { padding-right: calc(120px + var(--f-gap) + var(--f-pad)); scroll-padding-right: calc(120px + var(--f-gap) + var(--f-pad)); } }
@media (min-width: 1680px) { .ph-sec .ph-rail .ph-rail__btn--next { right: calc(120px + var(--f-gap) + var(--f-pad) - 36px); } }
@media (min-width: 1680px) { .ph-sec .ph-rail::after { width: calc(120px + var(--f-gap) + var(--f-pad)); } }
@media (min-width: 861px) and (max-width: 1200px) { .ph-sec .ph-rail .ph-rail__track { grid-auto-columns: calc((var(--rail-w) - 2 * var(--f-gap-l)) / 3); } }
html body .ph-card__t { letter-spacing: var(--tr-velky); }
html body .ph-rail__btn::before { border-radius: calc(52px * .1339); }
html body .ph-sec:not(.f-light):not(.f-neutral-bg) .ph-rail__btn { color: var(--c-on); }
html body .ph-sec:not(.f-light):not(.f-neutral-bg) .ph-rail__btn::before { background: var(--c-fg); }
html body .ph-sec .ph-rail::after { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rail-bg) 70%, transparent) 45%, var(--rail-bg) 88%); }
html:root body .ph-card .ph-card__t, html:root body .ph-card .ph-pc__t { font-size: var(--ts-stredny); letter-spacing: var(--tr-stredny); }
html:root body .ph-card .ph-card__go { font-size: var(--ts-text); letter-spacing: var(--tr-text); }
html body .ph-card[data-ph-skryte] { display: none; }

/* --- z ph-koncepty.css --- */
html body .ph-rail--kk .ph-rail__track > .kk__c { display: flex; scroll-snap-align: start; }

/* KARTA S FOTKOU (6. 11. 2026, Martin: fotka k článku v náhľade) — fotka 16 : 9 navrchu karty; obrázok kartu oddeľuje
   sám, preto bez čiary navrchu. Farebná (nie ČB ako fotky na stránkach). Vkladá tools/karty_html.py (nahlad_foto). */
.ph-card__fig { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 6px; background: var(--f-surface); }
.ph-card__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .ph-card:has(> .ph-card__fig) { border-top: 0; padding-top: 0; }
/* hover: fotka sa rozrastruje (opak pixel reveal) — 001-ph-core.js pxHover; priblíženie (scale) zrušené, bilo by sa s ním */