/* KOMPONENT ph-art-head — HLAVIČKA PODSTRÁNKY (Knižnica C2; aj hlavička článku I1).
   Cesta (B4) + značka projektu, nadpis (aj s logom projektu C4), perex, štítky (F5).
   Pôvod: krok 4 knižnice 30. 10. 2026 (tools/komponent_vyber.py), krok 9 1. 11. 2026.
   3. 11. 2026 (C2 hotový): bez väzby na stránku — nadpis s logom už nie len na .lp-page / html.ph-lp; bez zosilňovačov
   html body; štítky sa neskrývajú do spustenia skriptu (v HTML sú hotové a čisté — overené 118 štítkov); pravidlá
   stránky 404 presunuté do web-ph.css; .ph-prj-tag a .ph-art-title--wide presunuté sem z web-ph.css.
   HTML:
     <section class="ph-art-head">
       <div class="ph-art-head__top f-mono f-mute">
         <span class="ph-crumbs"><a href="…">PH</a><span>/</span>…<span class="ph-prj-tag"><span class="f-atom f-atom--max"></span>FUTUR MAX</span></span>
         <span>Stav · rok</span>
       </div>
       <h1 class="ph-art-title"><span class="f-mask"><span style="--d: 100ms">Nadpis</span></span></h1>
       <div class="ph-art-head__row">
         <div class="ph-art-head__lead"><p class="ph-lead f-fade">Perex</p><div class="ph-art-tags f-fade"><span class="ph-tag f-mono">…</span></div></div>
       </div>
     </section> */

.ph-art-head { color: var(--c-fg); background: var(--c-bg); padding: 40px var(--f-pad) 72px; }

/* horný riadok: cesta vľavo, stav vpravo */
.ph-art-head__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 24px; row-gap: 16px;
  padding-bottom: clamp(48px, 5vw, 72px); }
.ph-art-head__top .ph-crumbs { display: flex; flex: 0 1 auto; flex-grow: 1; column-gap: 10px; align-items: center; }
.ph-art-head__top .ph-cat { line-height: 1; }
.ph-art-head__top [data-ph-chapters] { margin-right: 16px; }
.ph-art-head .ph-cat { color: var(--c-fg); }
/* značka projektu v ceste: atóm + názov */
.ph-prj-tag { display: flex; column-gap: 10px; align-items: center; }

/* nadpis */
.ph-art-title { margin: 0; font-weight: 500; font-size: var(--ts-stranka); line-height: var(--lh-display); letter-spacing: var(--tr-stranka);
  max-width: none; text-wrap: balance; }
.ph-art-title--wide { max-width: none; }   /* široký nadpis (FUTUR X, projekty) — pre prípad, že web nadpis zúži */
@media (max-width: 860px) { .ph-art-title { hyphens: auto; overflow-wrap: break-word; } }
/* nadpis s logom projektu (C4 .ph-lk): 19. 10. (Martin) logo o 20 % menšie — písmo .8em, znak FUTUR .9em z neho;
   na mobile nadpis zmenšený tak, aby sa logo zmestilo na šírku */
.ph-art-title .ph-lk { font-size: .8em; height: .9em; }
@media (max-width: 860px) {
  .ph-art-title:has(.ph-lk) { font-size: min(56px, calc((100vw - 2 * var(--f-pad)) / 9)); }
  .ph-art-title .ph-lk { max-width: 100%; }
}

/* riadok pod nadpisom: perex (a štítky) vľavo v 7 stĺpcoch z 12 */
.ph-art-head__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--f-gap); row-gap: 40px;
  align-items: end; margin-top: 64px; }
.ph-art-head__row .ph-lead { grid-column: 1 / span 7; }
.ph-art-head__row > .ph-lead { grid-row: 1; }
.ph-art-head__row > .ph-art-tags { grid-column: 1 / span 7; grid-row: 2; align-self: start; margin-top: -16px; }
.ph-art-head__row > .ph-art-meta { grid-row: 1 / span 2; align-self: end; }
.ph-art-head__lead { grid-column: 1 / span 7; display: flex; flex-direction: column; row-gap: 24px; min-width: 0; }
.ph-art-head .ph-lead { max-width: 720px; }
@media (max-width: 860px) {
  .ph-art-head__row { grid-template-columns: minmax(0, 1fr); }
  .ph-art-head__row > * { min-width: 0; grid-column: 1 / -1; }
  .ph-art-head__row .ph-lead { grid-column: 1 / -1; }
  .ph-art-head__row > :is(.ph-lead, .ph-art-tags, .ph-art-meta) { grid-column: 1 / -1; grid-row: auto; }
  .ph-art-head__lead { grid-column: 1 / -1; }
}

/* štítky */
.ph-art-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-art-head .ph-tag { font-size: var(--ts-popis); }

/* nábeh pri otvorení stránky (bez čakania na posun) */
.ph-art-head .f-mask > span { transition: none; animation: ph-rise var(--t-nabeh) var(--f-ease) both; animation-delay: calc(var(--d, 0ms) * .4); }
.ph-art-head .f-fade { transition: none; animation: ph-fadein var(--t-zmena) var(--f-ease) both; animation-delay: calc(var(--d, 0ms) * .4); }
@media (prefers-reduced-motion: reduce) {
  .ph-art-head .f-mask > span, .ph-art-head .f-fade,
  .f-js .ph-art-head .f-mask > span, .f-js .ph-art-head .f-fade { animation: none; transform: none; opacity: 1; }
}