/* WEB-PH — štýly LEN PRE WEB PETRA HRNČIARA (ph.pixilo.sk), nie spoločný komponent systému FUTUR.
   Krok 9 / kúsok 7 (1. 11. 2026): všetko, čo ostalo v style-a5de0145ecc1.css a userStyles-b7accc8e732d.css (staviteľ
   Instatic) a nepatrí žiadnemu komponentu — stránky projektov a konceptov (.lp-page, lpc-*), blok FUTUR MAX na úvode,
   text na .lp-page, tagy a prvky (body, a, …), staré diagramy čakajúce na rozhodnutie. Presunuté DOSLOVA v pôvodnom
   poradí (najprv style, potom userStyles) a pripojené na mieste userStyles (pred komponenty) → kaskáda bez zmeny.
   FUTUR X ho dostáva cez systém (tools/futurx_system.py berie zostavu odkazov z projekty/futur-max.html). */

/* ======== z style-a5de0145ecc1.css ======== */
/* .ph-sec (odsadenie) → komponenty/zaklad.css (D1, 3. 11. 2026) */


.ph-cards {
  width: 100%;
  row-gap: 72px;
  display: block;
  box-sizing: border-box;
  column-gap: var(--f-gap);
  grid-template-columns: repeat(3, minmax(0px, 1fr));
}

@media (max-width: 860px) {
  .ph-cards {
  row-gap: 48px;
  grid-template-columns: minmax(0px, 1fr);
  }
}


.ph-max-h {
  margin: 0 0 clamp(56px, 6.7vw, 96px);
  font-size: clamp(44px, 6.1vw, 88px);
  max-width: 1180px;
  font-weight: 500;
  line-height: var(--lh-display);
  text-wrap-mode: initial;
  text-wrap-style: balance;
}

.ph-max {
  display: grid;
  column-gap: var(--f-gap);
  align-items: start;
  grid-template-columns: repeat(12, minmax(0px, 1fr));
}

.ph-max__text {
  color: var(--f-body-dark);
  row-gap: 22px;
  display: flex;
  font-size: 16px;
  line-height: var(--lh-odsek);
  flex-direction: column;
  grid-column-end: span 4;
  grid-column-start: 1;
}

@media (max-width: 860px) {
  .ph-max__text {
  grid-column-end: -1;
  grid-column-start: 1;
  }
}

.ph-max__text p {
  margin: 0px;
  text-wrap-mode: initial;
  text-wrap-style: pretty;
}


/* .ph-art-title → _system/css/komponenty/ph-art-head.css (1. 11. 2026, krok 9) */


/* 1. 11. 2026, krok 9: zmazaná tabuľka údajov článku .ph-art-meta (5 pravidiel) — na žiadnej z 89 stránok nie je */

.ph-article {
  color: var(--c-fg);
  display: grid;
  padding: clamp(64px, 7.8vw, 112px) var(--f-pad) clamp(80px, 8.9vw, 128px);
  background: var(--c-bg);
  padding-left: var(--f-pad);
  padding-right: var(--f-pad);
}


.ph-main {
  min-width: 0px;
  grid-column-end: span 8;
  grid-column-start: 5;
}

@media (max-width: 860px) {
  .ph-main {
  grid-column-end: -1;
  grid-column-start: 1;
  }
}


.ph-cat {
  display: inline-flex;
  column-gap: 8px;
  align-items: center;
}


/* .ph-art-tags → _system/css/komponenty/ph-art-head.css (1. 11. 2026, krok 9) */


.ph-source {
  display: none;
}


/* .ph-archive-title → _system/css/komponenty/ph-archive-head.css (1. 11. 2026, krok 9) */


.ph-feat {
  row-gap: clamp(56px, 6vw, 88px);
  display: grid;
  column-gap: var(--f-gap-l);
  grid-template-columns: repeat(3, minmax(0px, 1fr));
}

@media (max-width: 860px) {
  .ph-feat {
  row-gap: 48px;
  grid-template-columns: minmax(0px, 1fr);
  }
}

.ph-rubric__grid {
  row-gap: clamp(56px, 6vw, 88px);
  display: grid;
  column-gap: var(--f-gap-l);
  grid-template-columns: repeat(3, minmax(0px, 1fr));
}

@media (max-width: 860px) {
  .ph-rubric__grid {
  row-gap: 48px;
  grid-template-columns: minmax(0px, 1fr);
  }
}

@media (min-width: 1600px) {
  .ph-rubric__grid {
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
}


/* .ph-chip → _system/css/komponenty/ph-tag.css (1. 11. 2026, krok 9) */


@keyframes ph-wa-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  60% {
    opacity: 0;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
  }
}


@media (min-width: 861px) {
  /* 1. 11. 2026, krok 9: bez .ph-note — mono poznámka má vlastnú šírku v komponente (predtým ju prebíjala len cez výnimku „important“) */
  .ph-sec > :not(.f-sechead, .ph-note) {
  max-width: calc(100% - 120px - var(--f-gap));
  box-sizing: border-box;
  margin-right: 0px;
  }
}

@media (min-width: 1680px) {
  .ph-sec > :not(.f-sechead) {
  max-width: calc(100% - 240px - 2 * var(--f-gap));
  margin-right: calc(120px + var(--f-gap));
  }
}


@keyframes ph-sig-wave {
  0% {
    transform: none;
  }
  40% {
    transform: translateY(-14%);
  }
  100% {
    transform: none;
  }
}


/* 1. 11. 2026, krok 9: zmazané .ph-art-meta .ph-chip — na žiadnej z 89 stránok nie je */

 

 

 

 

 

.lp {
  color: rgb(16, 24, 32);
  width: 100%;
  overflow-x: clip;
  font-family: var(--font-f-font-sans);
  background-clip: initial;
  background-size: initial;
  background-color: rgb(244, 243, 239);
  background-image: initial;
  background-origin: initial;
  background-repeat: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-attachment: initial;
}

.lp h1 {
  overflow-wrap: break-word;
}

/* ======== z userStyles-b7accc8e732d.css ======== */
/* 1. 11. 2026, krok 9: zmazané [data-ph-featured]/[data-ph-grid] > :not(.ph-card) { display: contents } — obaly slučky editora
   okolo kariet už nie sú (krok 7, tools/karty_html.py); na žiadnej z 89 stránok sa neuplatní */

/* farby plochy sekcie (.ph-sec --c-*) → komponenty/zaklad.css (D1, 3. 11. 2026) */

/* telo článku = mriežka sekcie (120px · 1fr · 120px) + hlavička sekcie; vľavo len autor, obsah nad textom */
.ph-article { grid-template-columns: 120px minmax(0,1fr) 120px; column-gap: var(--f-gap); }
/* pruh „Obsah“ v článku (.ph-art-sechead) → _system/css/komponenty/f-sechead.css (1. 11. 2026, krok 9) */

.ph-article > .ph-main { grid-column: 2; }
.ph-art-sechead__img { width: 28px; height: 28px; flex-shrink: 0; overflow: hidden; background: var(--f-neutral-2); border-radius: var(--f-atom-r); } /* 7. 11. 2026 Martin: zaoblená ako fotky v referenciách */
.ph-art-sechead__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1); display: block; }


/* mobil: ľavý pomocný label hlavičky sekcie (číslo, PH…) sa skrýva, názov ide hneď za linku */


@media (max-width: 860px) { .ph-article { grid-template-columns: minmax(0,1fr); } .ph-article > .ph-main { grid-column: 1; } }


/* štítky článku (.ph-art-tags) → _system/css/komponenty/ph-art-head.css (1. 11. 2026, krok 9) */

/* súvisiace články: ≤3 → rad kariet bez slidera */
/* .ph-rel-src, .ph-topics-src { display: none } zmazané 3. 11. 2026 (I3) — skryté zdroje na žiadnej stránke nie sú */


.ph-imgwait { position: relative; }
.ph-imgwait::before { content: ""; position: absolute; inset: 0; z-index: 1; background: currentColor; opacity: .1; animation: ph-skel var(--t-dlhy) ease-in-out infinite; pointer-events: none; }
.ph-imgwait img { opacity: 0; }
.ph-imgok img { transition: opacity var(--t-rychlo) var(--f-ease); }
@media (prefers-reduced-motion: reduce) { .ph-imgwait::before { animation: none; } }

/* --- Skeleton, kým karty nie sú --- */
@keyframes ph-skel { 0% { opacity: .35; } 50% { opacity: .8; } 100% { opacity: .35; } }
@keyframes ph-skel-spin { 0% { transform: rotate(0); } 60% { transform: rotate(90deg); } 100% { transform: rotate(90deg); } }
 [data-ph-featured]:empty, [data-ph-grid="all"]:empty{ position: relative; min-height: 280px; }
 [data-ph-featured]:empty::before, [data-ph-grid="all"]:empty::before{ position: absolute; inset: 0; background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 28px / 90px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 0 64px / 62% 28px no-repeat,
    linear-gradient(currentColor, currentColor) 0 104px / 44% 28px no-repeat,
    linear-gradient(currentColor, currentColor) 0 156px / 70% 10px no-repeat,
    linear-gradient(currentColor, currentColor) 0 176px / 56% 10px no-repeat;
  opacity: .12; animation: ph-skel var(--t-dlhy) ease-in-out infinite;
}
 [data-ph-featured]:empty::after, [data-ph-grid="all"]:empty::after{ position: absolute; right: 0; top: 24px; width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .4; animation: ph-skel-spin var(--t-dlhy) var(--f-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {  [data-ph-featured]:empty::before, [data-ph-grid="all"]:empty::before{ animation: none; } }


  


@keyframes ph-dc-orb { to { transform: rotate(360deg); } }


/* .ph-art-title → ph-art-head.css, .ph-archive-title → ph-archive-head.css (1. 11. 2026, krok 9) */


/* 1. 11. 2026, krok 9: zmazaná tabuľka údajov článku .ph-art-meta (5 pravidiel) — na žiadnej z 89 stránok nie je */


.ph-sec .ph-max-h {
  font-size: var(--ts-sekcia); line-height: var(--lh-display);
  text-wrap: balance; margin: 0;
  max-width: min(14em, calc(100vw - 2 * var(--f-pad) - 240px - 2 * var(--f-gap)));
}


@media (min-width: 861px) {
  html body .ph-sec > :not(.f-sechead) { margin-left: calc(120px + var(--f-gap)) !important; }


    
  

  #clanky .ph-cards { padding-top: 0; row-gap: 0; }
  
  .ph-max { display: flex; flex-direction: column; align-items: stretch; }
  .ph-max__text { max-width: 720px; grid-column: auto; }
}
@media (max-width: 860px) {
  .ph-sec .ph-max-h { max-width: none; }
}


/* nadpis s logom projektu na mobile → komponenty/ph-art-head.css (C2, 3. 11. 2026) */
/* html.ph-nav-fixed body (odsadenie pod pripnutým menu) → presunuté do _system/css/komponenty/hlavicka.css (1. 11. 2026, krok 9) */


.lpc-addr strong { font-family: var(--font-f-font-sans); font-weight: 500; color: var(--f-paper); }
html body .lpc-addr { display: flex; flex-direction: column; row-gap: 24px; }
.lpc-photo { margin: 0; display: flex; flex-direction: column; row-gap: 12px; }
.lpc-photo__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--f-surface); }
.lpc-photo__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: grayscale(1) contrast(1.04); }
.lpc-photo figcaption { justify-content: space-between; column-gap: 16px; }


/* Články: odporúčané články na tmavom povrchu — 3. 11. 2026 (D1): sekcia je tmavá triedou v HTML (bez .f-light),
   vynútenie cez :has([data-ph-featured]) zrušené */
/* 31. 10.: telo článku (.ph-article) je SVETLÁ plocha (pozadie papier) — aj farby plochy (--c-*) svetlé */
.ph-article { --c-fg: var(--f-ink); --c-bg: var(--f-paper); --c-on: var(--f-paper); --c-mute: var(--f-mute-light); --c-body: var(--f-body-light); --c-line: var(--f-line-l); --c-line-s: var(--f-line-l2); --c-line2: rgba(16,24,32,.35); --c-wash: rgba(16,24,32,.05); }



/* [data-ph-featured] .ph-chip → _system/css/komponenty/ph-tag.css (1. 11. 2026, krok 9) */
/* HP FUTUR MAX: vstupy zoskupené podľa typu → riadený systém (canvas 3b) */
/* Farebný atóm len pri názve značky (drobčeky, Ďalšie koncepty) — v diagramoch konceptov neutrálny */
.lp-page.lp-page .lp-frame { --ph-atom: var(--lpc-ink, var(--f-paper)); }


/* farba značky len pre pohyblivý prvok animácie (orb v cykle) */
.lp-page--audit, .lp-page--answer-engine, .lp-page--mgi, .lp-page--memory { --lpc-orb: var(--f-max-grad); }
.lp-page--futur-x { --lpc-orb: var(--prj-x); }


.lp-page--futur-max { --lpc-orb: var(--f-max-grad); }
.lp-page--futur-one, .lp-page--pill { --lpc-orb: var(--prj-one); }
.lp-page--futur-studio { --lpc-orb: var(--prj-studio); }


/* text za perexom v tmavej sekcii: šírka a farba textu */
.ph-sec .lpc-txt { max-width: 720px; width: auto; margin-top: 24px; color: var(--lpc-body); opacity: 1; }
.lp-page .ph-sec .lpc-txt p { color: inherit; }
.lp-page .ph-sec { --lpc-ink: var(--c-fg); --lpc-mute: var(--c-mute); --lpc-body: var(--c-body); --lpc-l1: var(--c-line2); --lpc-l2: var(--c-line); --lpc-bg: var(--c-bg); --lpc-dot: var(--c-line); }
.lp-page .ph-sec:is(.f-light, .f-neutral-bg) { --lpc-body: #1E262E; }   /* výnimka: tmavšie telo textu v diagramoch na svetlom */
.lp-page--pill .lp-frame { --ph-atom: var(--lpc-ink, var(--f-paper)); }
.lpc-lab { font-family: var(--font-f-font-mono); font-size: var(--ts-popis); text-transform: uppercase; color: var(--lpc-mute); }
.lpc-txt { margin-top: 24px; }

.lpc-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--f-gap); row-gap: 40px; align-items: start; }
.lpc-two__c { display: flex; flex-direction: column; row-gap: 20px; padding-top: 18px; border-top: 1px solid var(--lpc-l1); }
.lpc-two__c.is-strong { border-top-color: var(--lpc-ink); }
.lpc-q { font-family: var(--font-f-font-serif); font-weight: 300; font-size: clamp(28px, 2.8vw, 40px); line-height: var(--lh-nadpis); color: var(--lpc-mute); }
.lpc-a { font-size: clamp(28px, 2.8vw, 40px); line-height: var(--lh-nadpis); font-weight: 500; text-wrap: balance; }

.lpc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lpc-chip { height: 32px; padding: 0 12px; display: flex; align-items: center; column-gap: 10px; box-shadow: inset 0 0 0 1px var(--lpc-l1); font-family: var(--font-f-font-mono); font-size: var(--ts-popis); letter-spacing: .08em; text-transform: uppercase; color: var(--lpc-mute); }
.lpc-chip i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor; }
.lpc-chip.is-on { box-shadow: inset 0 0 0 1px var(--lpc-ink); color: var(--lpc-ink); }
.lpc-chip.is-on i { background: var(--lpc-ink); box-shadow: none; }
.lpc-chip.is-dim { opacity: .45; }
.lpc-chip.is-fill { background: var(--lpc-ink); color: var(--lpc-bg); box-shadow: none; }

@media (max-width: 860px) {
  .lpc-two{ grid-template-columns: minmax(0,1fr); }

}

/* src/styles/lp-figs.css */
/* Atóm v diagramoch = farba značky stránky (jantár len FUTUR MAX) */
.lp-page--futur-x .lp-frame { --ph-atom: var(--prj-x); }

.lp-page--futur-one .lp-frame { --ph-atom: var(--prj-one); }
.lp-page--futur-studio .lp-frame { --ph-atom: var(--prj-studio); }

/* Obr. pre FUTUR X (vetvenie) a FUTUR BOX (po akvizícii) — tmavý povrch, animácia cez .lp-frame.is-on */

.lp-fade { transition: opacity var(--t-zmena) var(--f-ease), transform var(--t-zmena) var(--f-ease); transition-delay: calc(var(--d, 0ms) * .5); }
.lp-frame:not(.is-on) .lp-fade { opacity: 0; transform: translateY(8px); }


/* src/styles/skeleton.css */
 [data-ph-featured]:empty::before, [data-ph-featured]:empty::after, [data-ph-grid="all"]:empty::before, [data-ph-grid="all"]:empty::after{ content: none; display: none; }

@keyframes ph-skel-p { 0%, 100% { opacity: .08; } 50% { opacity: .18; } }

/* src/styles/wide.css */
@media (min-width: 1680px) {
  .ph-sec > *:not(.f-sechead) { margin-right: calc(120px + var(--f-gap)); max-width: calc(100% - 240px - 2 * var(--f-gap)); }
        
  
}
@keyframes ph-rise { from { transform: translateY(130%); } to { transform: translateY(0); } }
@keyframes ph-fadein { from { opacity: 0; } to { opacity: 1; } }




/* landing page: zrušenie úzkeho stĺpca z článku (funguje aj bez JS) */
:is(html.ph-lp, html:has(.ph-crumbs a[href="/koncepty"]), html:has(.ph-crumbs a[href="/projekty"])) .ph-article { display: block; padding: 0; grid-template-columns: none; }

:is(html.ph-lp, html:has(.ph-crumbs a[href="/koncepty"]), html:has(.ph-crumbs a[href="/projekty"])) .ph-main { width: 100%; max-width: none; grid-column: auto; }
:is(html.ph-lp, html:has(.ph-crumbs a[href="/koncepty"]), html:has(.ph-crumbs a[href="/projekty"])) .ph-prose, :is(html.ph-lp, html:has(.ph-crumbs a[href="/koncepty"]), html:has(.ph-crumbs a[href="/projekty"])) .ph-prose div:not([class]), :is(html.ph-lp, html:has(.ph-crumbs a[href="/koncepty"]), html:has(.ph-crumbs a[href="/projekty"])) .ph-prose [data-instatic-content-region] { display: block; max-width: none; width: 100%; margin: 0; }

/* landing page: koncept + projekt */

html.ph-lp .ph-article { display: block; padding: 0; }
html.ph-lp .ph-prose { display: block; font-family: var(--font-f-font-sans); font-size: 18px; line-height: var(--lh-odsek); color: var(--c-body); }
html.ph-lp .ph-prose > div { display: block; }

/* html.ph-lp .ph-art-title { max-width: none } zrušené 3. 11. 2026 — komponent C2 má max-width: none sám */

/* html.ph-lp .ph-sec:has(.ph-cards--home) zrušené 3. 11. 2026 (D1) — na žiadnej stránke sa neuplatnilo */


.lp-page .ph-sec[id] { scroll-margin-top: calc(var(--lp-top, 0px) + 50px); }
   

/* text v sekciách landing pages: krátke animácie bez čakania */
.lp-page .ph-sec .f-mask > span { transition-duration: var(--t-nabeh); transition-delay: calc(var(--d, 0ms) * .3); }
.lp-page .ph-sec .f-fade { transition-duration: var(--t-zmena); transition-delay: calc(var(--d, 0ms) * .3); }
/* — zhoda s canvasom v2 — */
/* Obr. vrstvy spolupráce (FUTUR STUDIO): riadková tabuľka + vlastník v popise + riadok Princíp */

/* Obr. rámec: koreň → stonka → vodorovná linka → 5 vetiev (FUTUR MAX 2c) */
.lp-frame { margin: 0; }


/* citát za grafikou: linka (textový stĺpec) → 18 px → mono label → 32 px → Newsreader 300 */


.ph-sec .ph-max-h { font-weight: 600; }


/* pôvodne -0.058em */
/* pôvodne -0.05em */
.ph-max-h { letter-spacing: var(--tr-sekcia); }
.ph-sec .ph-max-h { letter-spacing: var(--tr-sekcia); }

.lpc-a { letter-spacing: var(--tr-velky); }


/* výnimky: na stránkach projektov/konceptov sú tieto v serife → pôvodná hodnota */

/* MÄKČENE (ľ, ť, ď, Ľ) v articulat-cf: písmo nemá kerning ani alternatívu, mäkčeň narážal do ďalšieho
   písmena. Skript _instatic/js/ph-caron.js obalí takéto písmeno do .ph-caron → malá medzera vpravo. */
.ph-caron { margin-right: 0.05em; }


/* ČLÁNKY: citát kurzívou Newsreader 300 italic (skúška; predtým bez kurzívy font-style: normal) */

/* ČLÁNKY: linka citátu POD citátom, tmavá 2px (pôvodne 1px nad citátom) */

/* veľké citáty 28–52 px: ako nadpisy princípov (line-height 1.15, -0.016em) */
.lpc-q{
  line-height: var(--lh-veta); letter-spacing: -0.016em; font-weight: 400;
}

.lpc-chip i {
  border-radius: var(--f-atom-r);
  -webkit-mask: url(../../uploads/atom.svg) no-repeat center / 100% 100%;
  mask: url(../../uploads/atom.svg) no-repeat center / 100% 100%;
}
/* OPRAVA 2026-10-17 (kontrola úvodu): na mobile je bunka tabuľky „Vybraná práca“ ŠTÍTOK (■ STRATÉGIA …) — maska atómu
   na celej bunke ho celý orezala (prázdne riadky). Na mobile atóm len na štvorčeku (::before), štítok bez masky. */

/* ==========================================================================
   KONTROLA ÚVODU 2026-10-17 — opravy nájdené pri prechode v šírkach 1440 · 1000 · 800 · 390
   ========================================================================== */
/* osadený diagram (<figure class="vz-on-page">) v mriežke sekcie vždy na CELÚ šírku — na mobile bol v sekcii 06
   vtesnaný do 1 z 12 stĺpcov (stavový riadok po slovách, zoznam po slabikách) */
.vz-on-page { grid-column: 1 / -1; width: 100%; min-width: 0; }
/* DIAGRAM BEZ PRÁZDNEHO PÁSU (22. 10. 2026, PRAVIDLA-WEBU 0c): prázdna plocha nad kresbou sa odpočíta záporným okrajom,
   aby prvý viditeľný prvok bol presne na medzere text → obsah. Hodnotu --trim meria ph-viz.js (trimTop) raz pri štarte
   a pri zmene šírky okna; .vz-meas = chvíľkový pokojový stav na meranie (bez animácií a prechodov).
   Prázdna plocha posunutá nad text nechytá kliky; reagujú len nakreslené tvary a menovky. */
/* kladný --trim (prázdno nad kresbou) = záporný okraj; záporný --trim (kresba trčí nad okraj) = odstup ::before
   (kladný okraj by sa zlúčil s medzerou nad diagramom a nič by nespravil) */
figure.vz-on-page > :first-child { margin-top: min(0px, calc(-1 * var(--trim, 0px))); }
figure.vz-on-page::before { content: ""; display: block; height: max(0px, var(--trim, 0px) * -1); }
html body .vz-meas, html body .vz-meas * { animation: none !important; transition: none !important; }
figure.vz-on-page.is-trim { pointer-events: none; }
/* svg > * (nie svg *): hlbšie prvky zdedia auto, no tvary s vlastným pointer-events:all (prerušované dosky bez výplne —
   Audit 03, Blueprints 03) si ho nechajú → klik na celú plochu (22. 10., Martin: „03 plocha sa má dať kliknúť celá“) */
figure.vz-on-page.is-trim :is(svg > *, .vz-lab, .vz-wlab, .vz-tlab2, button, a, [data-hs], [data-hs] *, li) { pointer-events: auto; }

/* TABUĽKA „Vybraná práca“ v stredných šírkach 861–1280 px: pevné stĺpce (72 + 5 × 104 px) nechali názvu a typu
   po pár desiatkach px → prekrývali sa. Tu: typ zmeny POD názvom, stĺpce disciplín užšie (72 px), „Typ zmeny“ v hlavičke skrytý. */
/* ZÁSADY (.ph-principle s popisom) — rovnaký problém ako tabuľka: stĺpec popisu (max. 440 px) + štítok (140 px) sa roztiahli
   skôr než nadpis → v 861–1280 px ostal nadpisu úzky pruh a popis ho prekrýval (2026-10-17, O mne pri 920 px).
   861–1280 px: popis POD nadpisom; nad 1280 px: nadpis min. 240 px. */
/* nad 1280 px (2026-10-17): stĺpec „typ zmeny" (max. 360 px) sa roztiahol skôr než názov → pri ~1300 px ostalo názvu ~100 px
   a „Apoteus" prekrýval „Rebranding". Názov má teraz istých min. 220 px, typ zmeny dostane zvyšok. */

/* 06: šablóna mala na mobile v .ph-max ešte row-gap 56 px (dvojitá medzera tlačidlo → diagram) */
.ph-max { row-gap: 0; }


#clanky .ph-cards { margin-top: var(--f-sp-obsah); }
/* ÚVOD — sekcia článkov (#clanky): pás kariet bez hornej medzery (3. 11. 2026 presunuté z komponentu F1 karta-clanku.css) */
@media (min-width: 861px) { html body #clanky .ph-list, html body #clanky .ph-rail { margin-top: 0; padding-top: 0; } }

#futurmax .ph-max > .vz-on-page { margin-top: var(--f-sp-obsah); }

.ph-sec > .lpc-addr + .lpc-photo { margin-top: var(--f-sp-obsah); }


/* pod 900 px je mobilná kresba CIK-CAK (vz_web._flow_mob_zig): prvá doska ~38 px pod rámom (24 j. okraj × mierka ~1,5)
   → okraj 18 px = ~56 px od textu k doske */


/* nadpis sekcie 06 → text: 40 px aj na mobile (na desktope už bolo) */
#futurmax .ph-max-h { margin-bottom: 40px; }
/* text sekcie v 06 = veľkosť TEXTU SEKCIE 18–20 px (PRAVIDLA-WEBU.md bod 4); bolo 16 px (pozostatok šablóny) */
#futurmax .ph-max__text > p:not(.ph-lead) {  line-height: var(--lh-odsek); }

/* IKONKY Z ATÓMOV → presunuté do _system/css/komponenty/tlacidla.css (1. 11. 2026, krok 9) */


.lpc-photo figcaption { display: none; }



 
 
 
 


/* INFOGRAFIKA CHAIN (.ph-bc) — ANIMÁCIA PO ČIARE: čiara sa kreslí rovnomerne zľava doprava (1,6 s, lineárne)
   a každý bod (atóm → L1… → text) sa objaví, keď k nemu čiara dôjde. Oneskorenie bodu = poradie / počet × 1,6 s.
   Riadok obsahuje .ph-bc__line + N× .ph-bc__st, preto bod č. k je :nth-child(k+1). Mobil (bez čiary): body postupne po 180 ms. */


  
  


 
 
 
 


 
 


  
 
 


 
 
 
 


/* veľká medzera nad obsahom s popiskou pod ním (:has(+ .f-figcap.is-below)) → presunuté do _system/css/komponenty/f-figcap.css (1. 11. 2026, krok 9) */
/* popisky vnútri diagramov (trajektória, schéma, Z → na, vstupy, cyklus): na spodku diagramu */
/* „Z → na“ (.ph-ds): posledný riadok už má spodnú linku → popisok ju použije, aby neboli dve linky nad sebou */


/* LEGENDA TABUĽKY PRILEPENÁ NA MOBILE (2026-10-17, Martin: „ako stavový riadok — aby som všade videl, čo znamenajú štvorčeky“):
   pod 900 px sa pri posúvaní tabuľky drží na spodku obrazovky (sticky v rámci sekcie), vzhľad ako stavový riadok
   na svetlom pozadí; WhatsApp sa medzitým skryje (ph-viz.js: .ph-work → html.vz-in-view). PRAVIDLA-WEBU.md bod 2. */


/* --prj-c / --prj-fill = plná farba projektu pre SVG (výplň nemôže byť CSS prechod), napr. krúžiaci atóm .rg-orb */
:is(.lp-page--futur-one, .lp-page--pill, .lp-page--sab, [data-prj="one"]) { --prj-grad: var(--prj-one); --prj-c: #5A86D6; --prj-fill: #5A86D6; --prj-edge: #3F67B0; --prj-a: #7FC3E8; --prj-b: #5A86D6; }
:is(.lp-page--futur-studio, [data-prj="studio"]) { --prj-grad: var(--prj-studio); --prj-c: #8E6BD8; --prj-fill: #8E6BD8; --prj-edge: #6A4BB3; --prj-a: #E98AB5; --prj-b: #8E6BD8; }
:is(.lp-page--futur-x, [data-prj="x"]) { --prj-grad: var(--prj-x); --prj-c: #9CC94B; --prj-fill: #9CC94B; --prj-edge: #78A332; --prj-a: #DCE775; --prj-b: #9CC94B; }

/* PRECHOD PROJEKTU v kresbách (SVG): zastávky .pg-a → .pg-b berú farby projektu (--prj-a/--prj-b), bez projektu MAX.
   Používa: krúžiaci atóm (vz-prj-g), prerušované obaly — krabice .mem-box, ikonka Memory .mi-ob (22. 10.: „aj čiarkované
   čiary gradientom, všade“). Kontrola: python3 tools/kontrola_prerusovanych.py */
.pg-a { stop-color: var(--prj-a, var(--f-max-a)); }
.pg-b { stop-color: var(--prj-b, var(--f-max-b)); }


@keyframes ph-link-line {
  0%     { background-size: 100% 1px; background-position: 100% 100%; }
  45%    { background-size: 0% 1px;   background-position: 100% 100%; }
  45.1%  { background-size: 0% 1px;   background-position: 0 100%; }
  100%   { background-size: 100% 1px; background-position: 0 100%; }
}


   
@keyframes ph-wa-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }



   


/* ÚVOD — FUTUR MAX: v pruhu sekcie popiskové písmo „FUTUR MAX“; väčšie logo samostatne nad veľkým nadpisom
   (ph-mono.js vloží .ph-max-logo pred .ph-max-h). Text sekcie sa nemení. */
html body #futurmax > .ph-max-logo { margin: 0 0 clamp(28px, 3vw, 44px); color: var(--f-paper); line-height: 1; }


:is(.lpc-step__n, .lpc-node, .lpc-br__t) i, .lpc-chip i, :is(.lp-box__in, .lp-box__t) i {
  border-radius: var(--f-atom-r);
}


/* výška PH = dva riadky vedľa neho: od verzálok mena po účiarie roly (meno ×0,8 + medzera 10 px + rola ~12 px) */
.ph-foot-mono { display: block; flex: none; height: calc(var(--fn) * .8 + 10px + 12px); width: auto; overflow: visible; color: var(--f-paper); cursor: default; margin-bottom: 3px; }


/* ÚVOD NAD OBSAHOM (.ph-art-sechead .ph-intro) → _system/css/komponenty/f-sechead.css (1. 11. 2026, krok 9) */


/* Úvod (hero), 2026-10-16: veta + tlačidlo majú PEVNÚ medzeru pod menom (row-gap mriežky). Predtým fotka (4:5, cez dva riadky)
   rozdeľovala svoju výšku medzi oba riadky → na širokom displeji sa text posúval nadol a pod menom vznikala „divná“ medzera.
   Teraz prvý riadok = výška mena, celý zvyšok výšky fotky ide do druhého riadku POD tlačidlo. Mobil (≤ 860 px) bez zmeny. */


@keyframes il-dash { to { stroke-dashoffset: -20; } }
@keyframes il-on { 0%, 100% { fill: var(--v-plate); } 4%, 13% { fill: var(--v-act); } 20% { fill: var(--v-plate); } }
@keyframes il-up { 0%, 100% { transform: none; } 4%, 13% { transform: translateY(-6px); } 20% { transform: none; } }
@keyframes il-f { 0%, 2% { opacity: 0; } 5%, 12% { opacity: 1; } 17%, 100% { opacity: 0; } }
@keyframes il-last-up { 0%, 50% { transform: none; } 57%, 88% { transform: translateY(-10px); } 96%, 100% { transform: none; } }
@keyframes il-last-on { 0%, 50% { fill: var(--v-plate); } 57%, 88% { fill: var(--v-act); } 96%, 100% { fill: var(--v-plate); } }
@keyframes il-last-lk { 0%, 50% { fill: var(--v-fg); } 57%, 88% { fill: var(--v-act-fg); } 96%, 100% { fill: var(--v-fg); } }
/* umiestnenie: úvod 01 — text vľavo, ilustrácia vpravo (desktop); na mobile pod textom, užšia */
/* 2026-10-17 (Martin: „zväčšiť; na mobile je úplne maličká — dať nad nadpis pod čiaru sekcie“):
   desktop = nadpis cez CELÚ šírku, pod ním text vľavo a ilustrácia vpravo (polovica šírky);
   mobil = ilustrácia HORE (pod čiarou sekcie, nad nadpisom) cez celú šírku */
/* 2026-10-17 v2 (Martin: „na širokej obrazovke divne odsadené — vycentrovať do prázdneho priestoru“):
   ľavý stĺpec široký na nadpis + text (fit-content, max. ~48 vw), ilustrácia v CELOM zvyšku vpravo,
   vycentrovaná vodorovne aj zvisle vedľa nadpisu aj textu */
/* v3 (2026-10-17, Martin: „ešte zväčšiť; aj v zlome, kde je malá“): ilustrácia smie presiahnuť stĺpec do medzery
   k textu (−72 px) a kúsok do okraja stránky (+24 px); max. šírka 980 px. Zlom 861–1180 px (pravý stĺpec by bol úzky)
   = rozloženie ako mobil: ilustrácia hore cez celú šírku. */


@keyframes ilc-u0 { 0% { transform: none; } 5.25% { transform: none; } 6.46% { transform: translateY(-8px); } 8.42% { transform: translateY(-8px); } 10.02% { transform: none; } 14.03% { transform: none; } 15.24% { transform: translateY(-8px); } 17.19% { transform: translateY(-8px); } 18.79% { transform: none; } 24.55% { transform: none; } 25.76% { transform: translateY(-8px); } 27.72% { transform: translateY(-8px); } 29.32% { transform: none; } 35.08% { transform: none; } 36.29% { transform: translateY(-8px); } 38.25% { transform: translateY(-8px); } 39.85% { transform: none; } 45.60% { transform: none; } 46.81% { transform: translateY(-8px); } 48.77% { transform: translateY(-8px); } 50.37% { transform: none; } 56.13% { transform: none; } 57.34% { transform: translateY(-8px); } 59.30% { transform: translateY(-8px); } 60.90% { transform: none; } 66.66% { transform: none; } 67.87% { transform: translateY(-8px); } 69.82% { transform: translateY(-8px); } 71.42% { transform: none; } 77.18% { transform: none; } 78.39% { transform: translateY(-8px); } 80.35% { transform: translateY(-8px); } 81.95% { transform: none; } 85.95% { transform: none; } 87.16% { transform: translateY(-8px); } 89.12% { transform: translateY(-8px); } 90.72% { transform: none; } 94.73% { transform: none; } 95.94% { transform: translateY(-8px); } 97.89% { transform: translateY(-8px); } 99.49% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f0 { 0% { fill: var(--v-plate); } 5.25% { fill: var(--v-plate); } 6.46% { fill: var(--v-act); } 8.42% { fill: var(--v-act); } 10.02% { fill: var(--v-plate); } 14.03% { fill: var(--v-plate); } 15.24% { fill: var(--v-act); } 17.19% { fill: var(--v-act); } 18.79% { fill: var(--v-plate); } 24.55% { fill: var(--v-plate); } 25.76% { fill: var(--v-act); } 27.72% { fill: var(--v-act); } 29.32% { fill: var(--v-plate); } 35.08% { fill: var(--v-plate); } 36.29% { fill: var(--v-act); } 38.25% { fill: var(--v-act); } 39.85% { fill: var(--v-plate); } 45.60% { fill: var(--v-plate); } 46.81% { fill: var(--v-act); } 48.77% { fill: var(--v-act); } 50.37% { fill: var(--v-plate); } 56.13% { fill: var(--v-plate); } 57.34% { fill: var(--v-act); } 59.30% { fill: var(--v-act); } 60.90% { fill: var(--v-plate); } 66.66% { fill: var(--v-plate); } 67.87% { fill: var(--v-act); } 69.82% { fill: var(--v-act); } 71.42% { fill: var(--v-plate); } 77.18% { fill: var(--v-plate); } 78.39% { fill: var(--v-act); } 80.35% { fill: var(--v-act); } 81.95% { fill: var(--v-plate); } 85.95% { fill: var(--v-plate); } 87.16% { fill: var(--v-act); } 89.12% { fill: var(--v-act); } 90.72% { fill: var(--v-plate); } 94.73% { fill: var(--v-plate); } 95.94% { fill: var(--v-act); } 97.89% { fill: var(--v-act); } 99.49% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l1 { 0% { opacity: 0; } 3.85% { opacity: 0; } 5.06% { opacity: .95; } 8.42% { opacity: .95; } 10.02% { opacity: 0; } 93.32% { opacity: 0; } 94.53% { opacity: .95; } 97.89% { opacity: .95; } 99.49% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u1 { 0% { transform: none; } 3.50% { transform: none; } 4.71% { transform: translateY(-5px); } 8.42% { transform: translateY(-5px); } 10.02% { transform: none; } 92.97% { transform: none; } 94.18% { transform: translateY(-5px); } 97.89% { transform: translateY(-5px); } 99.49% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f1 { 0% { fill: var(--v-plate); } 3.50% { fill: var(--v-plate); } 4.71% { fill: var(--v-act); } 8.42% { fill: var(--v-act); } 10.02% { fill: var(--v-plate); } 92.97% { fill: var(--v-plate); } 94.18% { fill: var(--v-act); } 97.89% { fill: var(--v-act); } 99.49% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l2 { 0% { opacity: 0; } 91.57% { opacity: 0; } 92.78% { opacity: .95; } 97.89% { opacity: .95; } 99.49% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u2 { 0% { transform: none; } 91.22% { transform: none; } 92.43% { transform: translateY(-5px); } 97.89% { transform: translateY(-5px); } 99.49% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f2 { 0% { fill: var(--v-plate); } 91.22% { fill: var(--v-plate); } 92.43% { fill: var(--v-act); } 97.89% { fill: var(--v-act); } 99.49% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l3 { 0% { opacity: 0; } 2.10% { opacity: 0; } 3.31% { opacity: .95; } 8.42% { opacity: .95; } 10.02% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u3 { 0% { transform: none; } 1.74% { transform: none; } 2.95% { transform: translateY(-5px); } 8.42% { transform: translateY(-5px); } 10.02% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f3 { 0% { fill: var(--v-plate); } 1.74% { fill: var(--v-plate); } 2.95% { fill: var(--v-act); } 8.42% { fill: var(--v-act); } 10.02% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l4 { 0% { opacity: 0; } 0.34% { opacity: 0; } 1.55% { opacity: .95; } 8.42% { opacity: .95; } 10.02% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u4 { 0% { transform: none; } 0.00% { transform: none; } 1.20% { transform: translateY(-5px); } 8.42% { transform: translateY(-5px); } 10.02% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f4 { 0% { fill: var(--v-plate); } 0.00% { fill: var(--v-plate); } 1.20% { fill: var(--v-act); } 8.42% { fill: var(--v-act); } 10.02% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l5 { 0% { opacity: 0; } 23.15% { opacity: 0; } 24.36% { opacity: .95; } 27.72% { opacity: .95; } 29.32% { opacity: 0; } 44.20% { opacity: 0; } 45.41% { opacity: .95; } 48.77% { opacity: .95; } 50.37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u5 { 0% { transform: none; } 22.80% { transform: none; } 24.01% { transform: translateY(-5px); } 27.72% { transform: translateY(-5px); } 29.32% { transform: none; } 43.85% { transform: none; } 45.06% { transform: translateY(-5px); } 48.77% { transform: translateY(-5px); } 50.37% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f5 { 0% { fill: var(--v-plate); } 22.80% { fill: var(--v-plate); } 24.01% { fill: var(--v-act); } 27.72% { fill: var(--v-act); } 29.32% { fill: var(--v-plate); } 43.85% { fill: var(--v-plate); } 45.06% { fill: var(--v-act); } 48.77% { fill: var(--v-act); } 50.37% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l6 { 0% { opacity: 0; } 21.39% { opacity: 0; } 22.60% { opacity: .95; } 27.72% { opacity: .95; } 29.32% { opacity: 0; } 42.45% { opacity: 0; } 43.66% { opacity: .95; } 48.77% { opacity: .95; } 50.37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u6 { 0% { transform: none; } 21.04% { transform: none; } 22.25% { transform: translateY(-5px); } 27.72% { transform: translateY(-5px); } 29.32% { transform: none; } 42.10% { transform: none; } 43.31% { transform: translateY(-5px); } 48.77% { transform: translateY(-5px); } 50.37% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f6 { 0% { fill: var(--v-plate); } 21.04% { fill: var(--v-plate); } 22.25% { fill: var(--v-act); } 27.72% { fill: var(--v-act); } 29.32% { fill: var(--v-plate); } 42.10% { fill: var(--v-plate); } 43.31% { fill: var(--v-act); } 48.77% { fill: var(--v-act); } 50.37% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l7 { 0% { opacity: 0; } 19.64% { opacity: 0; } 20.85% { opacity: .95; } 27.72% { opacity: .95; } 29.32% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u7 { 0% { transform: none; } 19.29% { transform: none; } 20.50% { transform: translateY(-5px); } 27.72% { transform: translateY(-5px); } 29.32% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f7 { 0% { fill: var(--v-plate); } 19.29% { fill: var(--v-plate); } 20.50% { fill: var(--v-act); } 27.72% { fill: var(--v-act); } 29.32% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l8 { 0% { opacity: 0; } 40.69% { opacity: 0; } 41.90% { opacity: .95; } 48.77% { opacity: .95; } 50.37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u8 { 0% { transform: none; } 40.34% { transform: none; } 41.55% { transform: translateY(-5px); } 48.77% { transform: translateY(-5px); } 50.37% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f8 { 0% { fill: var(--v-plate); } 40.34% { fill: var(--v-plate); } 41.55% { fill: var(--v-act); } 48.77% { fill: var(--v-act); } 50.37% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l9 { 0% { opacity: 0; } 65.25% { opacity: 0; } 66.46% { opacity: .95; } 69.82% { opacity: .95; } 71.42% { opacity: 0; } 84.55% { opacity: 0; } 85.76% { opacity: .95; } 89.12% { opacity: .95; } 90.72% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u9 { 0% { transform: none; } 64.90% { transform: none; } 66.11% { transform: translateY(-5px); } 69.82% { transform: translateY(-5px); } 71.42% { transform: none; } 84.20% { transform: none; } 85.41% { transform: translateY(-5px); } 89.12% { transform: translateY(-5px); } 90.72% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f9 { 0% { fill: var(--v-plate); } 64.90% { fill: var(--v-plate); } 66.11% { fill: var(--v-act); } 69.82% { fill: var(--v-act); } 71.42% { fill: var(--v-plate); } 84.20% { fill: var(--v-plate); } 85.41% { fill: var(--v-act); } 89.12% { fill: var(--v-act); } 90.72% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l10 { 0% { opacity: 0; } 63.50% { opacity: 0; } 64.71% { opacity: .95; } 69.82% { opacity: .95; } 71.42% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u10 { 0% { transform: none; } 63.15% { transform: none; } 64.36% { transform: translateY(-5px); } 69.82% { transform: translateY(-5px); } 71.42% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f10 { 0% { fill: var(--v-plate); } 63.15% { fill: var(--v-plate); } 64.36% { fill: var(--v-act); } 69.82% { fill: var(--v-act); } 71.42% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l11 { 0% { opacity: 0; } 61.74% { opacity: 0; } 62.95% { opacity: .95; } 69.82% { opacity: .95; } 71.42% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u11 { 0% { transform: none; } 61.39% { transform: none; } 62.60% { transform: translateY(-5px); } 69.82% { transform: translateY(-5px); } 71.42% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f11 { 0% { fill: var(--v-plate); } 61.39% { fill: var(--v-plate); } 62.60% { fill: var(--v-act); } 69.82% { fill: var(--v-act); } 71.42% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l12 { 0% { opacity: 0; } 82.80% { opacity: 0; } 84.01% { opacity: .95; } 89.12% { opacity: .95; } 90.72% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u12 { 0% { transform: none; } 82.45% { transform: none; } 83.66% { transform: translateY(-5px); } 89.12% { transform: translateY(-5px); } 90.72% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f12 { 0% { fill: var(--v-plate); } 82.45% { fill: var(--v-plate); } 83.66% { fill: var(--v-act); } 89.12% { fill: var(--v-act); } 90.72% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l13 { 0% { opacity: 0; } 12.62% { opacity: 0; } 13.83% { opacity: .95; } 17.19% { opacity: .95; } 18.79% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u13 { 0% { transform: none; } 12.27% { transform: none; } 13.48% { transform: translateY(-5px); } 17.19% { transform: translateY(-5px); } 18.79% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f13 { 0% { fill: var(--v-plate); } 12.27% { fill: var(--v-plate); } 13.48% { fill: var(--v-act); } 17.19% { fill: var(--v-act); } 18.79% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l14 { 0% { opacity: 0; } 10.87% { opacity: 0; } 12.08% { opacity: .95; } 17.19% { opacity: .95; } 18.79% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u14 { 0% { transform: none; } 10.52% { transform: none; } 11.73% { transform: translateY(-5px); } 17.19% { transform: translateY(-5px); } 18.79% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f14 { 0% { fill: var(--v-plate); } 10.52% { fill: var(--v-plate); } 11.73% { fill: var(--v-act); } 17.19% { fill: var(--v-act); } 18.79% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l15 { 0% { opacity: 0; } 33.67% { opacity: 0; } 34.88% { opacity: .95; } 38.25% { opacity: .95; } 39.85% { opacity: 0; } 54.73% { opacity: 0; } 55.94% { opacity: .95; } 59.30% { opacity: .95; } 60.90% { opacity: 0; } 75.78% { opacity: 0; } 76.99% { opacity: .95; } 80.35% { opacity: .95; } 81.95% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u15 { 0% { transform: none; } 33.32% { transform: none; } 34.53% { transform: translateY(-5px); } 38.25% { transform: translateY(-5px); } 39.85% { transform: none; } 54.38% { transform: none; } 55.59% { transform: translateY(-5px); } 59.30% { transform: translateY(-5px); } 60.90% { transform: none; } 75.43% { transform: none; } 76.64% { transform: translateY(-5px); } 80.35% { transform: translateY(-5px); } 81.95% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f15 { 0% { fill: var(--v-plate); } 33.32% { fill: var(--v-plate); } 34.53% { fill: var(--v-act); } 38.25% { fill: var(--v-act); } 39.85% { fill: var(--v-plate); } 54.38% { fill: var(--v-plate); } 55.59% { fill: var(--v-act); } 59.30% { fill: var(--v-act); } 60.90% { fill: var(--v-plate); } 75.43% { fill: var(--v-plate); } 76.64% { fill: var(--v-act); } 80.35% { fill: var(--v-act); } 81.95% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l16 { 0% { opacity: 0; } 31.92% { opacity: 0; } 33.13% { opacity: .95; } 38.25% { opacity: .95; } 39.85% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u16 { 0% { transform: none; } 31.57% { transform: none; } 32.78% { transform: translateY(-5px); } 38.25% { transform: translateY(-5px); } 39.85% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f16 { 0% { fill: var(--v-plate); } 31.57% { fill: var(--v-plate); } 32.78% { fill: var(--v-act); } 38.25% { fill: var(--v-act); } 39.85% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l17 { 0% { opacity: 0; } 30.17% { opacity: 0; } 31.38% { opacity: .95; } 38.25% { opacity: .95; } 39.85% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u17 { 0% { transform: none; } 29.81% { transform: none; } 31.02% { transform: translateY(-5px); } 38.25% { transform: translateY(-5px); } 39.85% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f17 { 0% { fill: var(--v-plate); } 29.81% { fill: var(--v-plate); } 31.02% { fill: var(--v-act); } 38.25% { fill: var(--v-act); } 39.85% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l18 { 0% { opacity: 0; } 52.97% { opacity: 0; } 54.18% { opacity: .95; } 59.30% { opacity: .95; } 60.90% { opacity: 0; } 74.03% { opacity: 0; } 75.24% { opacity: .95; } 80.35% { opacity: .95; } 81.95% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u18 { 0% { transform: none; } 52.62% { transform: none; } 53.83% { transform: translateY(-5px); } 59.30% { transform: translateY(-5px); } 60.90% { transform: none; } 73.67% { transform: none; } 74.88% { transform: translateY(-5px); } 80.35% { transform: translateY(-5px); } 81.95% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f18 { 0% { fill: var(--v-plate); } 52.62% { fill: var(--v-plate); } 53.83% { fill: var(--v-act); } 59.30% { fill: var(--v-act); } 60.90% { fill: var(--v-plate); } 73.67% { fill: var(--v-plate); } 74.88% { fill: var(--v-act); } 80.35% { fill: var(--v-act); } 81.95% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l19 { 0% { opacity: 0; } 51.22% { opacity: 0; } 52.43% { opacity: .95; } 59.30% { opacity: .95; } 60.90% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u19 { 0% { transform: none; } 50.87% { transform: none; } 52.08% { transform: translateY(-5px); } 59.30% { transform: translateY(-5px); } 60.90% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f19 { 0% { fill: var(--v-plate); } 50.87% { fill: var(--v-plate); } 52.08% { fill: var(--v-act); } 59.30% { fill: var(--v-act); } 60.90% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
@keyframes ilc-l20 { 0% { opacity: 0; } 72.27% { opacity: 0; } 73.48% { opacity: .95; } 80.35% { opacity: .95; } 81.95% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ilc-u20 { 0% { transform: none; } 71.92% { transform: none; } 73.13% { transform: translateY(-5px); } 80.35% { transform: translateY(-5px); } 81.95% { transform: none; } 100% { transform: none; } }
@keyframes ilc-f20 { 0% { fill: var(--v-plate); } 71.92% { fill: var(--v-plate); } 73.13% { fill: var(--v-act); } 80.35% { fill: var(--v-act); } 81.95% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }


#futurmax .ph-max__text > p:not(.ph-lead) { font-size: var(--ts-text-l); letter-spacing: var(--tr-text); }


/* <<< TYPOGRAFICKÁ ŠKÁLA */

/* >>> TYPOGRAFICKÁ ŠKÁLA — ILUSTRÁCIE (2026-10-17)
   Infografiky v článkoch (.ph-b: kroky, porovnanie, rámčeky, záznam, štítky), ilustrácie konceptov (.lp-frame),
   schémy v projektoch (staré diagramy) — používajú 5 stupňov Z TEJ ISTEJ škály, nič pod 11 px.
     --ts-velky   36 → 26   veľké čísla, hlavné odpovede v konceptoch
     --ts-stredny 28 → 22   kroky a porovnania v článkoch, názvy rámčekov
     --ts-text-l  20 → 18   názvy prvkov v schémach, kroky, zoznamy
     --ts-ui      15        popisy prvkov
     --ts-popis   11        popisky (strojové písmo)
   Bez zmeny: logo FUTUR (.ph-lk) a kresba izometrických diagramov (.vz-iso, .pv-06 — zmenšujú sa ako celok;
   upravené sú len ich drobné čísla). Meranie: tools/audit_pisma_ilustracii.py
   Návrat: zmazať tento blok (git tag „pred-typoskalou-ilustracie"). */
.vz-status .vz-status__k,
.lp-frame .lpc-a,
.lp-frame .lpc-q{ font-size: var(--ts-velky); letter-spacing: var(--tr-velky); }

html:root body .lp-frame li { font-size: var(--ts-text-l) !important; letter-spacing: var(--tr-text) !important; }

html:root body .vz-status .vz-status__t, html:root body .lp-frame .ph-ico, html:root body .vz-lab b, html:root body .ph-chip { font-size: var(--ts-popis) !important; }
/* tabuľka Vybraná práca na mobile: názvy disciplín pri štvorčekoch (text vkladaný cez CSS) — 10,5 → 11 */
/* DIAGRAMY (.vz-fit: úvod, O mne, Memory) — menovky sa plynulo zmenšujú s kresbou (žiaduce, Martin 2026-10-17),
   vo všetkých diagramoch rovnako: názov 24 → ~15, popis 16 → ~10,5, číslo 11. Pod 900 px zoznam: 18 / 15 / 11.
   (Dolná hranica menoviek = zoznam sa skúšala: v 900–1000 px menovky narástli a prekryli stavový riadok → nie.)
   Čísla nakreslené na doskách: úvod mal základ 10, O mne a Memory 11 → všade 11.
   Kontrola: tools/meraj_diagramy.py */
html:root body .vz-legend .s { font-size: var(--ts-ui); letter-spacing: var(--tr-text); }
html:root body .pv-06 .num, html:root body .pv-06 .side { font-size: var(--ts-popis); }
/* <<< TYPOGRAFICKÁ ŠKÁLA — ILUSTRÁCIE */

/* SAFARI iOS 26 — spodný pás prehliadača mení farbu len pri PRILEPENEJ legende tabuľky a stavovom riadku diagramu
   (mobil) a potom v nej „zasekne". Skúšané 17. 10. a ZAMIETNUTÉ (nič nezabralo alebo bolo vidieť): priehľadné pozadie
   prilepených prvkov; neviditeľný farebný pás pri spodnom okraji (1 px — ignorovaný; 48 px s 1 px na obrazovke —
   prefarbovalo, ale čiarka bola vidieť; celý pod okrajom — ignorovaný); neskrývanie WhatsAppu — nepomohlo.
   ✅ VYRIEŠENÉ (17. 10., Martin overil na iPhone): prvok smie byť sticky LEN keď je naozaj potrebný — Safari drží farbu
   prilepeného prvku, kým je sticky, aj keď už nie je pritlačený dole. Tabuľka: sticky len kým je tabuľka v zábere (is-vis).
   Diagram: sticky len kým je riadok naozaj pritlačený k spodku (is-pin, ph-viz.js pinUpd) — nižšie.
   (história: is-vis podľa celého bloku / podľa kresby / jedna plná farba / WhatsApp display:none — samotné nestačili)
   VYRIEŠENÉ napokon (17. 10.): prilepenie len kým je tabuľka / diagram v zábere (.is-vis z ph-viz.js) — mimo záberu
   je prvok neprilepený a Safari farbu pustí. Tabuľka: blok „LEGENDA TABUĽKY PRILEPENÁ“; diagram: tu. */
@media (max-width: 900px) {
  /* v4: prilepený len keď je naozaj pritlačený k spodku (.is-pin z ph-viz.js), inak bežne pod kresbou */
  :is(.vz-fit, .vz-flow)[data-cycle]:not(.is-pin) .vz-status { position: relative; bottom: auto; }
  /* DIAGRAM ako legenda tabuľky (tá v Safari funguje): stavový riadok v tmavom diagrame mal pozadie z DVOCH vrstiev
     (5 % svetlá priehľadná nad tmavou: linear-gradient(--v-st-bg) + --f-ink) a rámček ako tieň → teraz JEDNA PLNÁ farba
     s rovnakým výsledkom (rgba(244,243,239,.05) nad #101820 = rgb(27,35,42)) a rámček ako obrys — vyzerá identicky. */
  .vz-t-dark .vz-status,
  .vz-t-dark:is(.vz-fit, .vz-flow) .vz-status { background: rgb(27, 35, 42); box-shadow: none;
    outline: 1px solid var(--f-line-d); outline-offset: -1px; }
  
}

/* ==========================================================================
   ČLÁNKY — písmo mimo typografickej škály (tools/kontrola_clankov_vykres.py, 18. 10. 2026) → stupne škály (PRAVIDLA-WEBU bod 8)
   ========================================================================== */
/* úvodný odsek pod nadpisom (bol 21–26 px) → Stredný 28 → 22 */


/* na mobile celá skupina preč (tlačidlo „Napíšte mi“ sa tam neukazuje) — inak by prázdna bunka 3. stĺpca odsunula MENU */
/* 29. 10. 2026: „Projekty“ → „Produkty a služby“ (dlhšie) — na užšom notebooku (861–1000 px) menšie medzery v menu,
   inak sa menu tlačí na meno pri logu */


.ph-feat-sec[data-ph-skryte] { display: none; }

/* .ph-prj-tag a .ph-art-title--wide → komponenty/ph-art-head.css (C2, 3. 11. 2026) */

/* STRÁNKA 404 — hlavička s hrou (len tento web; 3. 11. 2026 presunuté z komponentu C2) */
.ph-art-head.ph-404 .ph-art-head__top { padding-bottom: clamp(32px, 4vw, 56px); }
.ph-art-head.ph-404 .nf3-hra { margin: clamp(8px, 2vw, 24px) 0 0; }
.ph-art-head.ph-404 .ph-404-cta { margin-top: clamp(24px, 3vw, 36px); }
figure.lp-frame { margin: 0; }

/* ===== /K2 ===== */

/* ======== PONECHANÉ (rozhodnutie Martina 1. 11.) — .ph-sig* (podpis; vytvára sig() v 002-ph-ui.js, aj hlavicka.css),
   dnes na žiadnej stránke. .ph-dia-light (onedark() v 002-ph-ui.js) je v komponenty/ramceky.css — tiež ponechané.
   Diagramy „hub“ (.ph-df*) a „cycle“ (.ph-dl*) a .ph-d__atoms ZMAZANÉ (rozhodnutie Martina 1. 11.) aj zo skriptu
   003-lp-page.js (bloky @hub / @cycle); diagram „posun“ (.ph-ds, @shift) ostáva v komponenty/diagramy-stare.css. ======== */
.ph-sig {
  display: inline-flex;
  margin: -0.12em 0px -0.08em;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0.12em 0px 0.08em;
}
.ph-sig__c {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform var(--t-nabeh) var(--f-ease), opacity var(--t-zmena) var(--f-ease);
  transition-delay: calc(420ms + var(--i) * 38ms);
}
@media (prefers-reduced-motion: reduce) {
  .ph-sig__c {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
  transition-behavior: normal;
  transition-duration: 0s;
  transition-property: none;
  transition-timing-function: ease;
  }
}

/* ======== 3. 11. 2026: presunuté z komponentov (väzba na stránky Petrovho webu) ======== */
/* z nadpis-sekcie.css (D3): blok FUTUR MAX na úvode */
.ph-max__text .ph-lead { color: var(--f-paper); line-height: var(--lh-uvod); }
/* z nadpis-sekcie.css (D3): stránky projektov a konceptov — medzera medzi nadpisom/perexom a obsahom */
.lp-page > .ph-sec > :is(.ph-h2, .ph-lead, .ph-about, .ph-about__text) + :is(figure, ol, .ph-b, .lp-frame, .ph-clients, .ph-traj, .ph-route) { margin-top: var(--f-sp-obsah); }
/* z nadpis-sekcie.css (D3): O mne — úvodná sekcia s ilustráciou vedľa textu */
#o-mne > .ph-about + figure.vz-on-page { margin-top: clamp(56px, calc(102px - 3.2vw), 80px); }
@media (max-width: 900px) { #o-mne > .ph-about + figure.vz-on-page { margin-top: 18px; } }
@media (min-width: 1181px) { #o-mne .ph-about { display: grid; grid-template-columns: fit-content(clamp(680px, 48vw, 1000px)) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 120px); align-items: center; } }
@media (min-width: 1181px) { #o-mne .ph-about > .ph-h2 { grid-column: 1; grid-row: 1; } }
@media (min-width: 1181px) { #o-mne .ph-about > .ph-about__text { grid-column: 1; grid-row: 2; align-self: start; } }
@media (min-width: 1181px) { #o-mne .ph-about > .ph-ilu { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; max-width: 980px; } }
@media (min-width: 1181px) { #o-mne .ph-about > .ph-ilu { --ilu-ml: min(0px, calc(56px - clamp(40px, 5vw, 120px))); width: calc(100% - var(--ilu-ml)); margin: 0 0 0 var(--ilu-ml); } }
@media (min-width: 861px) and (max-width: 1180px) { #o-mne .ph-about { display: flex; flex-direction: column; } }
@media (max-width: 860px) { #o-mne .ph-about { display: flex; flex-direction: column; } }
#o-mne .ph-about__text > p { font-size: var(--ts-text-l); letter-spacing: var(--tr-text); }
/* z ph-clients.css (H2): O mne — zoznam klientov v sekcii Práca väčším písmom */
#praca .ph-clients__names { font-size: var(--ts-velky); letter-spacing: var(--tr-velky); }