/* KOMPONENT ph-hero — .ph-hero (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“ (11×) a bez html body — súperili len pravidlá komponentu navzájom:
   riadok nad menom (.ph-hero__meta > span) bol vždy block a vľavo, preto skoršie pravidlá zo style-…css
   (:last-child vpravo, :nth-child(2) na stred a na mobile skryté) nikdy neplatili — vypustené.
   Nástup mena a fotky (ph-rise, ph-fadein) má rovnako ako hlavička článku a archívu (ph-art-head, ph-archive-head). */

/* --- z style-a5de0145ecc1.css --- */
.ph-hero { padding: 32px var(--f-pad) 72px; background: var(--c-bg); padding-left: var(--f-pad); padding-right: var(--f-pad); }
/* 31. 10. 2026: hlavička berie farby z PLOCHY (--c-*) — na webe stojí na tmavej, v knižnici sa dá prepnúť */
.ph-hero { color: var(--c-fg); }
.ph-hero__meta { padding-bottom: 48px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
@media (max-width: 860px) { .ph-hero__meta { padding-bottom: 32px; grid-template-columns: minmax(0px, 1fr) auto; } }
.ph-hero__grid { row-gap: 64px; display: grid; column-gap: var(--f-gap); grid-template-columns: repeat(12, minmax(0px, 1fr)); }
@media (max-width: 860px) { .ph-hero__grid { row-gap: 40px; } }
.ph-hero__name { font-size: clamp(72px, 14.4vw, 208px); margin: 0px; font-weight: 500; line-height: var(--lh-display); /* 28. 10. 2026 (Martin): vzdušne ako ostatné veľké nadpisy (bolo 0.86) */ grid-column-end: span 8; grid-column-start: 1; }
@media (max-width: 860px) { .ph-hero__name { font-size: 22vw; grid-column-end: -1; grid-column-start: 1; } }
.ph-hero__portrait { row-gap: 12px; display: flex; margin: 0px; grid-row-end: span 2; grid-row-start: 1; flex-direction: column; grid-column-end: span 4; grid-column-start: 9; }
@media (max-width: 860px) { .ph-hero__portrait { grid-row-end: auto; grid-row-start: auto; grid-column-end: -1; grid-column-start: 1; } }
.ph-hero__img { overflow-x: hidden; overflow-y: hidden; background: var(--f-surface); }
.ph-hero__img img { width: 100%; filter: grayscale(1) contrast(1.04); height: 100%; display: block; object-fit: cover; object-position: 50% 18%; }
.ph-hero__cap { justify-content: space-between; }
.ph-hero__lead { row-gap: 32px; display: flex; flex-direction: column; grid-column-end: span 4; grid-column-start: 1; }
@media (max-width: 860px) { .ph-hero__lead { grid-column-end: -1; grid-column-start: 1; } }

/* --- z userStyles-b7accc8e732d.css --- */
.ph-hero__img { aspect-ratio: 4 / 5; }
.ph-hero .f-mask > span { transition: none; animation: ph-rise var(--t-nabeh) var(--f-ease) both; animation-delay: calc(var(--d, 0ms) * .4); }
.ph-hero .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-hero .f-mask > span, .ph-hero .f-fade { animation: none; transform: none; opacity: 1; } }
.ph-hero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.ph-hero__meta > span { display: block; text-align: left; }
@media (min-width: 861px) { .ph-hero__lead { grid-column: 1 / span 7; } }
.ph-hero .ph-lead { max-width: 720px; }
@media (prefers-reduced-motion: reduce) { .f-js .ph-hero .f-mask > span, .f-js .ph-hero .f-fade { animation: none; transform: none; opacity: 1; } }
.ph-hero__name { letter-spacing: var(--tr-stranka); }
.ph-hero__cap { display: none; }
@media (min-width: 861px) { .ph-hero__grid { grid-template-rows: auto 1fr; } }
@media (min-width: 861px) { .ph-hero__lead { align-self: start; } }