/* =============================================================================
   PNK-BLOG.CSS — Panakei prémiová (senior) blogová vrstva
   =============================================================================

   Verzia:      3.5.2
   Dátum:       August 2026
   Prefix:      pnk-
   Dokumentácia: Panakei_Blog_LVL_UP.md

   -----------------------------------------------------------------------------
   ⚠️ ZMENA OPROTI v1.x — PREČÍTAJ
   -----------------------------------------------------------------------------
   Vo v1.x boli premenné definované na .pnk-clanok / .pnk-wrap. Všetky ostatné
   komponenty sú ich SÚRODENCI, nie potomkovia — premenné sa k nim nedostali,
   takže max-width, farby aj zaoblenia boli neplatné. Výsledok: rozťahaný text
   cez celú šírku, žiadne podfarbenia, ostré rohy.

   Od v2.0.0 sú premenné na :root. Nikdy ich odtiaľ nepresúvaj.

   -----------------------------------------------------------------------------
   VZŤAH K pan-blog.css
   -----------------------------------------------------------------------------
   Tento súbor NENAHRÁDZA pan-blog.css. Beží paralelne vedľa neho.
   pan-blog.css = junior (pan-, shp-custom-, ph-, pv-, ap-)
   pnk-blog.css = senior (pnk-)

   ⚠️ JEDEN ČLÁNOK = JEDEN SYSTÉM. Nemiešať prefixy v rámci článku.

   -----------------------------------------------------------------------------
   PORADIE V SHOPTET <head>
   -----------------------------------------------------------------------------
   kategorie.css → pan-kategorie.css → pan-produkt.css → pan-blog.css → pnk-blog.css

   -----------------------------------------------------------------------------
   TECHNICKÉ MANTINELY
   -----------------------------------------------------------------------------
   • Žiadny JavaScript — rozbaľovanie cez natívny <details>
   • Žiadne SVG v tele článku — Shoptet ich striehne
   • Žiadny <style> blok v tele článku
   • Žiadny hover/transform na statických prvkoch

   -----------------------------------------------------------------------------
   HISTÓRIA VERZIÍ
   -----------------------------------------------------------------------------
   v3.5.2 (08/2026) — oprava tlačidla "Späť na obsah"
       • .pnk-kotva malo visibility:hidden — časť prehliadačov na skrytý
         element odmieta skočiť. Nahradené neutrálnym prázdnym elementom.
       • Kotvu je odteraz možné dať aj priamo na cieľový blok
         (napr. id na .pnk-toc) — spoľahlivejšie než samostatný <span>.
       • z-index tlačidla ostáva na 900 — je nastavený zámerne nízko
         kvôli inému plávajúcemu prvku na stránke. NEZVYŠOVAŤ.

   v3.5.1 (08/2026) — zosvetlenie autor boxu
       • --pnk-popolava zosvetlená zo #4d4642 na #8b827b. Tmavá varianta
         konkurovala citátu; teraz je citát jediný skutočne tmavý blok.
       • Farby textu v autor boxe upravené na nový podklad.

   v3.5.0 (08/2026) — zbaliteľné zdroje
       • Nová varianta .pnk-zdroje--zbalene — zdroje schované pod klikacím
         riadkom cez natívny <details>. Použiť pri článkoch s 12+ zdrojmi,
         kde by otvorený zoznam neúmerne predĺžil stránku.
         Základná (vždy viditeľná) varianta ostáva odporúčaná.

   v3.4.0 (08/2026) — zdroje, päta TL;DR, autor
       • Zdroje stiahnuté do kompaktného tvaru — číslo v odsadení,
         citácia plynie v jednom odstavci (predtým zaberal každý zdroj
         tri riadky a sekcia bola neúmerne dlhá)
       • TL;DR päta: štítok vľavo + text vpravo, bez zeleného podkladu.
         Zelená ostáva len na štítku.
       • Autor box: tmavá varianta v popolavej hnedej (--pnk-popolava),
         riadok špecializácie a podpis. ⚠️ Vyžaduje zmenu HTML.

   v3.3.1 (08/2026) — drobné doladenie
       • Perex zmenšený z 18 na 16,5 px (pôsobil predimenzovane)
       • Obsah článku prefarbený z olivovej na béžovú (olivovej bolo priveľa)

   v3.3.0 (08/2026) — zoznamy a signálne bloky
       • .pnk-zoznam prepracovaný na samostatné karty s olivovou hlavičkou
         (HTML sa NEMENÍ — stačí nové CSS)
       • Nový komponent .pnk-vypis — redakčná varianta s veľkými číslami
         na okraji. Dá sa striedať so .pnk-zoznam podľa charakteru obsahu.
       • Signálne bloky: biela karta, farebná linka vľavo, štítok ako pill
         vnútri (plná farebná lišta zrušená — kričala priveľmi)

   v3.2.0 (08/2026) — TRVALÁ OPRAVA HLAVIČKY
       • .pnk-hlavicka ako obalový <div> ZRUŠENÁ. Shoptet jej na desktope
         obmedzoval výšku a text pretekal von. Záplatovanie nepomáhalo.
       • Nové riešenie: perex NIE JE v boxe — perex JE box. Jediný <p>
         element, ktorý si výšku určuje sám podľa vlastného obsahu.
         Neexistuje obal, ktorý by sa dal orezať.
       • Čas čítania je <span> vnútri toho istého odstavca.
       ⚠️ Princíp na zapamätanie: v Shoptete nikdy nestavaj obalový div,
         ktorý musí rásť podľa obsahu. Štýluj priamo obsahový element.

   v3.1.0 (08/2026) — opravy po nasadení v3.0.0
       • OPRAVA: .pnk-hlavicka sa na desktope orezávala (overflow:hidden
         + absolútny pseudo-element). Nahradené jednoduchým border-left.
       • .pnk-titulok sa v článku NEPOUŽÍVA — H1 renderuje Shoptet.
         Dva H1 na stránke = duplicita. Trieda ostáva len pre iné použitie.
       • TL;DR: tri samostatné karty namiesto stĺpcov v mriežke,
         prepracovaný spodný riadok (predtým pôsobil generický)
       • Obsah článku dostal späť podfarbenie — bol prestíšený
       • Audit: časová os spájajúca kroky, plné olivové čísla
       • Signálne bloky: farebná hlavička ako pri audite (pill zrušená)
       • Popis fotky: svetlá karta namiesto tmavého bloku (bil do očí)

   v3.0.0 (08/2026) — CHRBTICA + VYVÁŽENIE HLASITOSTI
       • Nový obalový prvok .pnk-sekcia — zvislá chrbtica po ľavej strane
         sekcie, na ktorú sa "dokuje" číslo. Zošíva článok do celku.
         ⚠️ Vyžaduje zmenu HTML: každá sekcia sa obalí do .pnk-sekcia
       • Vyváženie hlasitosti: TL;DR, audit, citát a signály sú výrazné;
         obsah článku a zdroje stíšené na hairlines (predtým všetko kričalo rovnako)
       • Poppins 800 na titulku, číslach a nadpisoch sekcií
       • Mobil: chrbtica sa skladá, popis fotky ide pod obrázok,
         TL;DR do jedného stĺpca, všetky vnútorné odsadenia zmenšené

   v2.2.0 (08/2026) — tretie kolo
       • Nová hlavička článku .pnk-hlavicka — podfarbený blok s časom
         čítania, veľkým titulkom a perexom (nahrádza samostatný eyebrow)
       • Eyebrow pill pred perexom zrušený (ostáva ako voliteľný prvok)
       • Popis fotky opäť vystupuje mimo obrázok — vpravo dole, prekrýva hranu
       • Signálne bloky: podfarbené telo, label pill sedí na hornej hrane
       • Citát prekopaný — veľká úvodzovka, olivová linka, výraznejšia typografia

   v2.1.0 (08/2026) — druhé kolo po nasadení
       • Perex: zrušená bublina, návrat k veľkému textu s podfarbeným
         zvýraznením (pôvodný návrh fungoval lepšie)
       • Popis fotky opäť ako tmavý štítok NA obrázku, nie pás pod ním
       • TL;DR: číslované kolieska, olivový akcent, výraznejšia päta
       • Vysvetlivka: širší a vyšší blok, väčšie písmo, olivová linka
       • Zoznam: číslovanie, olivový akcent pri pojme, striedavé podfarbenie
       • Signálny label je pill na hrane bloku, nie plný pás
       • Autor box prepracovaný — kruh s olivovým prstencom, odznak praxe,
         titul Bc. len v podpise (nový prvok .pnk-autor__odznak)

   v2.0.0 (08/2026) — OPRAVA + REDIZAJN po prvom nasadení naživo
       • Premenné presunuté na :root (kritická oprava)
       • Šírka obsahu zjednotená na 820 px, výrazne stiahnuté vertikálne medzery
       • Perex má vlastný podfarbený blok
       • Fotky: obmedzená výška, zaoblené rohy, popis ako farebný pás pod fotkou
       • Nadpis sekcie: číslo v olivovej dlaždici vľavo (nahradilo marginálny stĺpec)
       • Marginálna poznámka prepísaná na plnohodnotný bočný box
       • TL;DR, FAQ, zdroje a autor box dostali podfarbenie a rámy
       • Návrat na obsah je opäť plávajúce tlačidlo vľavo dole
       • Citát prepracovaný — podfarbený blok, nie holý text

   v1.2.0 — .pnk-zoznam, viacriadkové kroky auditu
   v1.1.0 — plemenný tabový systém, badge, farebné bodíky
   v1.0.0 — prvá verzia

   ============================================================================= */


/* =============================================================================
   1. PREMENNÉ  — VŽDY NA :root
   ============================================================================= */

:root {
  /* --- Značkové farby (zhodné s pan-kategorie.css) --- */
  --pnk-hneda:          #5e4a42;
  --pnk-hneda-tmava:    #2c2420;
  --pnk-popolava:       #8b827b;   /* svetlá popolavá hnedá — autor box */
  --pnk-popolava-svetla:#a49b93;
  --pnk-oliva:          #6b7c3a;
  --pnk-oliva-tmava:    #4d592a;
  --pnk-oliva-svetla:   #9caf6b;
  --pnk-oliva-soft:     #f0f2eb;
  --pnk-oliva-border:   #bcc4a6;
  --pnk-oliva-linka:    #d5dac4;

  /* --- Signálne farby --- */
  --pnk-riziko:         #a8654a;
  --pnk-riziko-soft:    #f9f1ec;
  --pnk-riziko-border:  #e0c3b3;
  --pnk-riziko-svetla:  #e0a488;

  /* --- Text --- */
  --pnk-text:           #24242e;
  --pnk-text-nadpis:    #2c2420;
  --pnk-text-body:      #45403a;
  --pnk-text-tlmeny:    #5f5a53;
  --pnk-text-slaby:     #8a857c;
  --pnk-text-inv:       #f7f5f2;

  /* --- Plochy a linky --- */
  --pnk-bg-karta:       #ffffff;
  --pnk-bg-teply:       #faf8f4;
  --pnk-bg-neutral:     #f4f3f0;
  --pnk-border:         #e2ded8;
  --pnk-border-slaba:   #eeebe6;
  --pnk-border-silna:   #2c2420;

  /* --- Rozmery --- */
  --pnk-radius:         12px;
  --pnk-radius-maly:    8px;
  --pnk-radius-pill:    999px;
  --pnk-maxw:           820px;
  --pnk-tien:           0 2px 10px rgba(94, 74, 66, .05);

  /* --- Typografia --- */
  --pnk-font:           var(--font-primary, 'Poppins', sans-serif);
  --pnk-vaha-display:   800;   /* extra bold — titulok, čísla, nadpisy sekcií */
  --pnk-fs-body:        15px;
  --pnk-fs-maly:        13.5px;
  --pnk-fs-tyny:        11.5px;
  --pnk-fs-label:       10px;

  /* --- Rytmus (jednotné vertikálne medzery) --- */
  --pnk-medzera:        30px;
  --pnk-medzera-velka:  44px;
}


/* =============================================================================
   2. SPOLOČNÝ RÁMEC ŠÍRKY
   Každý blok používa .pnk-blok cez tento zoznam — netreba ho písať do HTML.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CHRBTICA SEKCIE

   Každá sekcia článku sa obalí do .pnk-sekcia. Po ľavej strane beží tenká
   olivová linka, na ktorej "sedí" číslo sekcie. Vizuálne zošíva celý článok.

   HTML:
     <section class="pnk-sekcia">
       <div class="pnk-nadpis">
         <span class="pnk-nadpis__cislo">01</span>
         <h2 class="pnk-nadpis__text"><span class="pnk-kotva" id="x"></span>Nadpis</h2>
       </div>
       <div class="pnk-clanok"> … </div>
       … ďalšie bloky …
     </section>
   -------------------------------------------------------------------------- */

.pnk-sekcia {
  position:     relative;
  max-width:    var(--pnk-maxw);
  margin:       0 auto;
  padding-left: 54px;
  border-left:  1px solid var(--pnk-oliva-linka);
  box-sizing:   border-box;
}

/* Vnútri sekcie už bloky nemajú vlastnú šírku — drží ju chrbtica */
.pnk-sekcia > * {
  max-width:    none;
  margin-left:  0;
  margin-right: 0;
}

/* Zakončenie chrbtice — jemná bodka na konci poslednej sekcie */
.pnk-sekcia:last-of-type::after {
  content:       "";
  position:      absolute;
  left:          -4px;
  bottom:        -4px;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--pnk-oliva-linka);
}

@media (max-width: 900px) {
  .pnk-sekcia {
    padding-left: 0;
    border-left:  none;
  }

  .pnk-sekcia:last-of-type::after { display: none; }
}


.pnk-wrap,
.pnk-clanok,
.pnk-nadpis,
.pnk-poznamka,
.pnk-foto,
.pnk-tldr,
.pnk-toc,
.pnk-rovnica,
.pnk-signal,
.pnk-porovnanie,
.pnk-data,
.pnk-zoznam,
.pnk-vypis,
.pnk-audit,
.pnk-citat,
.pnk-faq,
.pnk-zdroje,
.pnk-autor,
.pnk-aktualizacia,
.pnk-oddelovac,
.pnk-plemeno-hero,
.pnk-cisla,
.pnk-vlastnosti,
.pnk-vlastnost,
.pnk-zdravie,
.pnk-realita,
.pnk-mytus,
.pnk-alternativy {
  max-width:   var(--pnk-maxw);
  margin-left:  auto;
  margin-right: auto;
  font-family: var(--pnk-font);
  box-sizing:  border-box;
}


/* =============================================================================
   3. ZÁKLADNÁ TYPOGRAFIA
   ============================================================================= */

.pnk-clanok {
  margin-bottom: var(--pnk-medzera);
  font-size:     var(--pnk-fs-body);
  line-height:   1.72;
  color:         var(--pnk-text-body);
}

.pnk-clanok p {
  margin:    0 0 14px;
  font-size: var(--pnk-fs-body);
}

.pnk-clanok p:last-child { margin-bottom: 0; }

.pnk-clanok strong {
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

.pnk-clanok a {
  color:                     var(--pnk-oliva-tmava);
  text-decoration:           underline;
  text-underline-offset:     2px;
  text-decoration-thickness: 1px;
}

.pnk-clanok a:hover { text-decoration: none; }

.pnk-clanok ul,
.pnk-clanok ol {
  margin:       0 0 16px;
  padding-left: 20px;
}

.pnk-clanok li {
  margin:      5px 0;
  line-height: 1.65;
}

.pnk-clanok li::marker { color: var(--pnk-oliva); }

.pnk-clanok h3 {
  margin:      24px 0 10px;
  font-family: var(--pnk-font);
  font-size:   18px;
  font-weight: 600;
  line-height: 1.4;
  color:       var(--pnk-text-nadpis);
}

/* Kotva pre TOC skoky.
   ⚠️ ŽIADNE visibility:hidden ani display:none — prehliadač by na taký
   element neskočil. Prázdny <span> s nulovou výškou je neviditeľný sám osebe. */
.pnk-kotva {
  display:           block;
  height:            0;
  overflow:          hidden;
  scroll-margin-top: 90px;
}

/* Kotvu možno dať aj priamo na cieľový blok — spoľahlivejšie */
.pnk-toc[id],
.pnk-faq[id],
.pnk-sekcia[id] { scroll-margin-top: 90px; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* =============================================================================
   4. HLAVIČKA ČLÁNKU — eyebrow + perex
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-wrap">
       <span class="pnk-eyebrow">Keď sa cesty rozchádzajú</span>
       <p class="pnk-perex">Text <mark>so zvýraznením</mark>.</p>
     </div>
   ============================================================================= */

.pnk-wrap { margin-bottom: var(--pnk-medzera); }

/* -----------------------------------------------------------------------------
   HLAVIČKA ČLÁNKU

   ⚠️ Obalový <div class="pnk-hlavicka"> bol zrušený vo v3.2.0.
      Shoptet mu na desktope obmedzoval výšku a text pretekal mimo box.

   Namiesto obalu je celá hlavička JEDEN odstavec .pnk-perex, ktorý si
   výšku určuje sám. Čas čítania je <span> vnútri neho.

   HTML:
     <p class="pnk-perex">
       <span class="pnk-perex__cas">6,5 min čítania</span>
       Text perexu <mark>so zvýraznením</mark>.
     </p>
   -------------------------------------------------------------------------- */

.pnk-perex__cas {
  display:        block;
  margin-bottom:  15px;
  font-size:      var(--pnk-fs-tyny);
  font-weight:    600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--pnk-oliva-tmava);
}

.pnk-perex__cas::before {
  content:        "";
  display:        inline-block;
  width:          26px;
  height:         2px;
  margin-right:   10px;
  vertical-align: middle;
  background:     var(--pnk-oliva);
}


/* Perex JE box — žiadny obal. Rastie podľa vlastného obsahu. */
.pnk-perex {
  display:       block;
  max-width:     var(--pnk-maxw);
  margin:        0 auto var(--pnk-medzera);
  padding:       30px 34px 32px;
  background:    var(--pnk-bg-teply);
  border:        1px solid var(--pnk-border);
  border-left:   5px solid var(--pnk-oliva);
  border-radius: 0 var(--pnk-radius) var(--pnk-radius) 0;
  box-shadow:    var(--pnk-tien);
  font-family:   var(--pnk-font);
  font-size:     16.5px;
  line-height:   1.7;
  color:         var(--pnk-text-body);
  box-sizing:    border-box;
}

/* Zvýraznenie — podfarbenie v spodných 40 % riadku */
.pnk-perex mark {
  background:  linear-gradient(transparent 58%, #dfe5c6 58%);
  color:       var(--pnk-text-nadpis);
  font-weight: 600;
  padding:     0 1px;
}

@media (max-width: 767px) {
  .pnk-titulok      { font-size: 26px; }
  .pnk-perex        { font-size: 15px; padding: 22px 20px 24px; }
  .pnk-perex__cas   { margin-bottom: 12px; }
}


/* =============================================================================
   5. FOTOGRAFIA
   -----------------------------------------------------------------------------
   HTML:
     <figure class="pnk-foto">
       <img src="…" alt="Popis" />
       <figcaption class="pnk-foto__popis">Popisok.</figcaption>
     </figure>
   ============================================================================= */

.pnk-foto {
  position: relative;
  margin:   0 auto calc(var(--pnk-medzera) + 22px);
}

.pnk-foto img {
  display:       block;
  width:         100%;
  max-height:    400px;
  height:        auto;
  object-fit:    cover;
  border-radius: var(--pnk-radius);
}

/* Popisok vystupuje mimo obrázok — vpravo dole, prekrýva spodnú hranu */
.pnk-foto__popis {
  position:      absolute;
  right:         30px;
  bottom:        -22px;
  max-width:     min(58%, 340px);
  margin:        0;
  padding:       16px 20px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-left:   4px solid var(--pnk-oliva);
  border-radius: 0 var(--pnk-radius-maly) var(--pnk-radius-maly) 0;
  box-shadow:    0 6px 18px rgba(44, 36, 32, .10);
  font-size:     var(--pnk-fs-maly);
  line-height:   1.55;
  color:         var(--pnk-text-body);
}

@media (max-width: 767px) {
  .pnk-foto     { margin-bottom: calc(var(--pnk-medzera) + 12px); }
  .pnk-foto img { max-height: 240px; }

  .pnk-foto__popis {
    right:     12px;
    left:      12px;
    bottom:    -14px;
    max-width: none;
    padding:   12px 15px;
    font-size: 12.5px;
  }
}


/* =============================================================================
   6. NADPIS SEKCIE — číslo v olivovej dlaždici
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-nadpis">
       <span class="pnk-nadpis__cislo">02</span>
       <h2 class="pnk-nadpis__text"><span class="pnk-kotva" id="x"></span>Nadpis</h2>
     </div>
   ============================================================================= */

.pnk-nadpis {
  position:    relative;
  display:     flex;
  align-items: center;
  gap:         14px;
  margin:      var(--pnk-medzera-velka) auto 18px;
}

/* Číslo sedí priamo na chrbtici — plné olivové koliesko */
.pnk-nadpis__cislo {
  position:        absolute;
  left:            -70px;
  top:             50%;
  transform:       translateY(-50%);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--pnk-oliva);
  box-shadow:      0 0 0 6px var(--pnk-bg-teply);
  font-size:       12px;
  font-weight:     var(--pnk-vaha-display);
  color:           #ffffff;
}

.pnk-nadpis__text {
  margin:         0;
  font-size:      27px;
  font-weight:    var(--pnk-vaha-display);
  line-height:    1.22;
  letter-spacing: -.015em;
  color:          var(--pnk-text-nadpis);
}

@media (max-width: 900px) {
  .pnk-nadpis        { gap: 12px; }

  .pnk-nadpis__cislo {
    position:      static;
    transform:     none;
    flex-shrink:   0;
    width:         34px;
    height:        34px;
    border-radius: var(--pnk-radius-maly);
    box-shadow:    none;
  }
}

@media (max-width: 767px) {
  .pnk-nadpis__text { font-size: 21px; }
}


/* =============================================================================
   7. BOČNÁ POZNÁMKA
   -----------------------------------------------------------------------------
   Vysvetlivka k odbornému pojmu. Na desktope sedí vpravo vedľa textu.

   HTML:
     <div class="pnk-poznamka">
       <p class="pnk-poznamka__margin">Kortizol je stresový hormón…</p>
       <div class="pnk-poznamka__telo"><p>Hlavný text…</p></div>
     </div>
   ============================================================================= */

.pnk-poznamka {
  display:       flex;
  gap:           22px;
  align-items:   flex-start;
  margin-bottom: var(--pnk-medzera);
}

.pnk-poznamka__telo {
  flex:        1 1 auto;
  min-width:   0;
  font-size:   var(--pnk-fs-body);
  line-height: 1.72;
  color:       var(--pnk-text-body);
}

.pnk-poznamka__telo p      { margin: 0 0 14px; }
.pnk-poznamka__telo p:last-child { margin-bottom: 0; }
.pnk-poznamka__telo strong { font-weight: 600; color: var(--pnk-text-nadpis); }

.pnk-poznamka__margin {
  order:         2;
  flex:          0 0 265px;
  align-self:    stretch;
  margin:        0;
  padding:       22px 22px 24px;
  background:    var(--pnk-oliva-soft);
  border:        1px solid var(--pnk-oliva-border);
  border-left:   4px solid var(--pnk-oliva);
  border-radius: 0 var(--pnk-radius) var(--pnk-radius) 0;
  font-size:     14.5px;
  line-height:   1.62;
  color:         #3c4520;
}

.pnk-poznamka__margin::before {
  content:        "Vysvetlivka";
  display:        block;
  margin-bottom:  12px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--pnk-oliva-border);
  font-size:      var(--pnk-fs-tyny);
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--pnk-oliva-tmava);
}

@media (max-width: 900px) {
  .pnk-poznamka { flex-direction: column; gap: 14px; }
  .pnk-poznamka__margin { order: 0; flex: 1 1 auto; width: 100%; }
}


/* =============================================================================
   8. TL;DR — ZHRNUTIE ČLÁNKU
   ============================================================================= */

.pnk-tldr {
  margin-bottom: var(--pnk-medzera);
  border:        1px solid var(--pnk-oliva-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
  box-shadow:    var(--pnk-tien);
}

.pnk-tldr__hlavicka {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         16px 24px;
  background:      var(--pnk-oliva);
  color:           #ffffff;
}

.pnk-tldr__nadpis {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   16.5px;
  font-weight: 600;
}

.pnk-tldr__nadpis::before {
  content:       "";
  flex-shrink:   0;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #ffffff;
  opacity:       .85;
}

.pnk-tldr__cas {
  flex-shrink:    0;
  font-size:      var(--pnk-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          #e3e8d2;
}

.pnk-tldr__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:                   14px;
  padding:               20px;
  background:            var(--pnk-bg-teply);
}

/* Každý bod je samostatná karta */
.pnk-tldr__bod {
  padding:       18px 18px 20px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-top:    3px solid var(--pnk-oliva);
  border-radius: var(--pnk-radius-maly);
}

/* Číslo v olivovom koliesku */
.pnk-tldr__cislo {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  margin-bottom:   11px;
  border-radius:   50%;
  background:      var(--pnk-oliva-soft);
  border:          1px solid var(--pnk-oliva-border);
  font-size:       12px;
  font-weight:     var(--pnk-vaha-display);
  line-height:     1;
  color:           var(--pnk-oliva-tmava);
}

.pnk-tldr__titulok {
  margin:      0 0 6px;
  font-size:   13.5px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

.pnk-tldr__text {
  margin:      0;
  font-size:   12.5px;
  line-height: 1.55;
  color:       var(--pnk-text-tlmeny);
}

 /* Päta — štítok vľavo, text vpravo. Zelená len na štítku. */
.pnk-tldr__test {
  display:               grid;
  grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
  gap:                   20px;
  align-items:           center;
  padding:               18px 24px 20px;
  background:            var(--pnk-bg-karta);
  border-top:            1px solid var(--pnk-border);
  font-size:             14.5px;
  line-height:           1.62;
  color:                 var(--pnk-text-body);
}

.pnk-tldr__test strong {
  display:        block;
  padding:        7px 0;
  text-align:     center;
  background:     var(--pnk-oliva);
  border-radius:  var(--pnk-radius-pill);
  font-size:      10.5px;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          #ffffff;
}

.pnk-tldr__test strong { font-weight: 600; }


/* =============================================================================
   9. OBSAH ČLÁNKU (TOC)
   ============================================================================= */

 /* Stredná hlasitosť — podfarbený, ale bez ťažkej hlavičky */
.pnk-toc {
  margin-bottom: var(--pnk-medzera);
  padding:       6px 26px 16px;
  background:    var(--pnk-bg-neutral);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
}

.pnk-toc__hlavicka {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding:         14px 0 12px;
  background:      transparent;
  border-bottom:   1px solid var(--pnk-border);
}

.pnk-toc__nadpis {
  font-size:   15px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

.pnk-toc__hint {
  flex-shrink: 0;
  font-size:   var(--pnk-fs-tyny);
  color:       var(--pnk-text-slaby);
}

.pnk-toc__zoznam {
  margin:        0;
  padding:       12px 0 0;
  list-style:    none;
  counter-reset: pnk-toc;
}

.pnk-toc__zoznam li {
  display:           flex;
  gap:               12px;
  align-items:       baseline;
  padding:           6px 0;
  counter-increment: pnk-toc;
}

.pnk-toc__zoznam li::before {
  content:         counter(pnk-toc, decimal-leading-zero);
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--pnk-bg-karta);
  border:          1px solid var(--pnk-border);
  font-size:       10.5px;
  font-weight:     700;
  color:           var(--pnk-text-tlmeny);
}

.pnk-toc__zoznam a {
  font-size:       14.5px;
  font-weight:     500;
  line-height:     1.5;
  color:           var(--pnk-text-body);
  text-decoration: none;
}

.pnk-toc__zoznam a:hover {
  color:                 var(--pnk-oliva-tmava);
  text-decoration:       underline;
  text-underline-offset: 2px;
}


/* =============================================================================
   10. ROVNICA — invertovaný akcentový blok (max 1× na článok)
   ============================================================================= */

.pnk-rovnica {
  margin-bottom: var(--pnk-medzera);
  padding:       38px 32px;
  background:    var(--pnk-hneda-tmava);
  border-radius: var(--pnk-radius);
  text-align:    center;
}

.pnk-rovnica__label {
  display:        block;
  margin-bottom:  20px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--pnk-oliva-svetla);
}

.pnk-rovnica__vstup {
  margin:      0;
  font-size:   16px;
  line-height: 1.9;
  color:       var(--pnk-text-inv);
}

.pnk-rovnica__vstup span { color: var(--pnk-text-slaby); }

.pnk-rovnica__vysledok {
  position:       relative;
  margin:         32px 0 0;
  font-size:      27px;
  font-weight:    700;
  letter-spacing: -.01em;
  line-height:    1.25;
  color:          var(--pnk-riziko-svetla);
}

.pnk-rovnica__vysledok::before {
  content:    "";
  position:   absolute;
  top:        -16px;
  left:       50%;
  transform:  translateX(-50%);
  width:      210px;
  max-width:  70%;
  height:     1px;
  background: #4f423b;
}

@media (max-width: 767px) {
  .pnk-rovnica           { padding: 26px 18px; }
  .pnk-rovnica__vstup    { font-size: 14.5px; }
  .pnk-rovnica__vysledok { font-size: 21px; }
}


/* =============================================================================
   11. SIGNÁLNE BLOKY — varovanie / bezpečné / tip
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-signal pnk-signal--riziko">
       <span class="pnk-signal__label">Pozor</span>
       <div class="pnk-signal__telo"><p>Text…</p></div>
     </div>
   Varianty: --riziko · --bezpecne · --tip
   ============================================================================= */

 /* Biela karta — farba len na ľavej linke a štítku */
.pnk-signal {
  margin:        var(--pnk-medzera) auto;
  padding:       20px 24px 22px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-left:   4px solid;
  border-radius: 0 var(--pnk-radius) var(--pnk-radius) 0;
}

.pnk-signal__label {
  display:        inline-block;
  margin-bottom:  13px;
  padding:        5px 14px;
  border:         1px solid;
  border-radius:  var(--pnk-radius-pill);
  font-size:      var(--pnk-fs-label);
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pnk-signal__telo {
  padding:     0;
  font-size:   var(--pnk-fs-body);
  line-height: 1.7;
  color:       var(--pnk-text-body);
}

.pnk-signal__telo p      { margin: 0 0 12px; }
.pnk-signal__telo p:last-child { margin-bottom: 0; }
.pnk-signal__telo strong { font-weight: 600; color: var(--pnk-text-nadpis); }
.pnk-signal__telo em     { font-style: italic; }

.pnk-signal__telo ul { margin: 8px 0 0; padding-left: 18px; }

.pnk-signal__telo a {
  color:                 var(--pnk-oliva-tmava);
  text-decoration:       underline;
  text-underline-offset: 2px;
}

/* --- riziko (tehlová) --- */
.pnk-signal--riziko                    { border-left-color: var(--pnk-riziko); }
.pnk-signal--riziko .pnk-signal__label { background: var(--pnk-riziko-soft); border-color: var(--pnk-riziko-border); color: var(--pnk-riziko); }

/* --- bezpečné (olivová) --- */
.pnk-signal--bezpecne                    { border-left-color: var(--pnk-oliva); }
.pnk-signal--bezpecne .pnk-signal__label { background: var(--pnk-oliva-soft); border-color: var(--pnk-oliva-border); color: var(--pnk-oliva-tmava); }

/* --- tip / z našej praxe (hnedá) --- */
.pnk-signal--tip                    { border-left-color: var(--pnk-hneda); }
.pnk-signal--tip .pnk-signal__label { background: #f6f1ee; border-color: #e0d6d0; color: var(--pnk-hneda); }


/* =============================================================================
   12. POROVNÁVACIA TABUĽKA
   ============================================================================= */

.pnk-porovnanie { margin-bottom: var(--pnk-medzera); }

.pnk-porovnanie__nadpis {
  margin:      0 0 3px;
  font-size:   18px;
  font-weight: 700;
  color:       var(--pnk-text-nadpis);
}

.pnk-porovnanie__podnadpis {
  margin:    0 0 16px;
  font-size: var(--pnk-fs-maly);
  color:     var(--pnk-text-slaby);
}

.pnk-porovnanie__tabulka {
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
  box-shadow:    var(--pnk-tien);
}

.pnk-porovnanie__hlavicka,
.pnk-porovnanie__riadok {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.pnk-porovnanie__hlavicka {
  background:    var(--pnk-bg-neutral);
  border-bottom: 1px solid var(--pnk-border);
}

.pnk-porovnanie__th {
  padding:        11px 20px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color:          var(--pnk-text-slaby);
}

.pnk-porovnanie__th:first-child { border-right: 1px solid var(--pnk-border); }
.pnk-porovnanie__th--riziko     { color: var(--pnk-riziko); }

.pnk-porovnanie__riadok { border-bottom: 1px solid var(--pnk-border-slaba); }
.pnk-porovnanie__riadok:last-child { border-bottom: none; }

.pnk-porovnanie__nazov {
  padding:      15px 20px;
  border-right: 1px solid var(--pnk-border);
  font-size:    14px;
  font-weight:  500;
  line-height:  1.5;
  color:        var(--pnk-text-nadpis);
}

.pnk-porovnanie__realita {
  padding:     15px 20px;
  font-size:   14px;
  line-height: 1.5;
  color:       var(--pnk-text-tlmeny);
}

@media (max-width: 767px) {
  .pnk-porovnanie__hlavicka { display: none; }
  .pnk-porovnanie__riadok   { grid-template-columns: 1fr; padding: 4px 0; }
  .pnk-porovnanie__nazov    { border-right: none; padding-bottom: 4px; }
  .pnk-porovnanie__realita  { padding-top: 0; }
}


/* =============================================================================
   13. DÁTOVÉ KARTY — číslo + prevod na hmatateľnú vec
   ============================================================================= */

.pnk-data {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:                   16px;
  margin-bottom:         var(--pnk-medzera);
}

.pnk-data__karta {
  display:        flex;
  flex-direction: column;
  padding:        18px 20px 20px;
  background:     var(--pnk-oliva-soft);
  border:         1px solid var(--pnk-oliva-border);
  border-radius:  var(--pnk-radius);
}

.pnk-data__label {
  margin-bottom:  10px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          var(--pnk-oliva-tmava);
}

.pnk-data__cislo {
  font-size:      34px;
  font-weight:    var(--pnk-vaha-display);
  line-height:    .95;
  letter-spacing: -.025em;
  color:          var(--pnk-oliva-tmava);
}

.pnk-data__jednotka {
  margin:         5px 0 12px;
  font-size:      var(--pnk-fs-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          var(--pnk-text-slaby);
}

.pnk-data__preklad {
  padding-top: 10px;
  border-top:  1px solid var(--pnk-oliva-linka);
  font-size:   12.5px;
  line-height: 1.5;
  color:       var(--pnk-text-body);
}


/* =============================================================
   14. ZOZNAM — samostatné karty s olivovou hlavičkou
   -----------------------------------------------------------------------------
   HTML sa oproti predchádzajúcim verziám NEMENÍ:
     <section class="pnk-zoznam" aria-label="Najčastejšie dôvody">
       <div class="pnk-zoznam__riadok">
         <span class="pnk-zoznam__pojem">Smrť majiteľa</span>
         <div class="pnk-zoznam__popis"><p>Text…</p></div>
       </div>
     </section>
   ============================================================= */

.pnk-zoznam {
  margin-bottom: var(--pnk-medzera);
  counter-reset: pnk-zoznam;
  background:    transparent;
}

.pnk-zoznam__riadok {
  margin-bottom:     14px;
  background:        var(--pnk-bg-karta);
  border:            1px solid var(--pnk-border);
  border-radius:     var(--pnk-radius);
  overflow:          hidden;
  counter-increment: pnk-zoznam;
}

.pnk-zoznam__riadok:last-child { margin-bottom: 0; }

/* Hlavička karty — číslo + pojem */
.pnk-zoznam__pojem {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       14px 20px;
  background:    var(--pnk-oliva-soft);
  border-bottom: 1px solid var(--pnk-oliva-border);
  font-size:     16px;
  font-weight:   700;
  line-height:   1.35;
  color:         var(--pnk-text-nadpis);
}

.pnk-zoznam__pojem::before {
  content:         counter(pnk-zoznam, decimal-leading-zero);
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--pnk-oliva);
  font-size:       11px;
  font-weight:     var(--pnk-vaha-display);
  line-height:     1;
  color:           #ffffff;
}

.pnk-zoznam__popis {
  padding:     16px 20px 18px;
  font-size:   14px;
  line-height: 1.65;
  color:       var(--pnk-text-body);
}

.pnk-zoznam__popis p      { margin: 0 0 10px; }
.pnk-zoznam__popis p:last-child { margin-bottom: 0; }
.pnk-zoznam__popis strong { font-weight: 600; color: var(--pnk-text-nadpis); }

@media (max-width: 767px) {
  .pnk-zoznam__pojem { padding: 12px 16px; font-size: 15px; gap: 10px; }
  .pnk-zoznam__popis { padding: 14px 16px 16px; }
}


/* =============================================================
   14b. VÝPIS — redakčná varianta s veľkými číslami na okraji
   -----------------------------------------------------------------------------
   Tichšia alternatíva k .pnk-zoznam. Striedaj podľa toho, či má pasáž
   pôsobiť dôrazne (zoznam) alebo pokojne (výpis).

   HTML:
     <section class="pnk-vypis" aria-label="Prehľad">
       <div class="pnk-vypis__polozka">
         <p class="pnk-vypis__nazov">Smrť majiteľa</p>
         <div class="pnk-vypis__text"><p>Text…</p></div>
       </div>
     </section>
   ============================================================= */

.pnk-vypis {
  margin-bottom: var(--pnk-medzera);
  padding:       6px 26px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  counter-reset: pnk-vypis;
}

.pnk-vypis__polozka {
  display:               grid;
  grid-template-columns: minmax(0, 56px) minmax(0, 1fr);
  gap:                   22px;
  padding:               20px 0;
  border-bottom:         1px solid var(--pnk-border-slaba);
  counter-increment:     pnk-vypis;
}

.pnk-vypis__polozka:last-child { border-bottom: none; }

.pnk-vypis__polozka::before {
  content:     counter(pnk-vypis, decimal-leading-zero);
  font-size:   30px;
  font-weight: var(--pnk-vaha-display);
  line-height: 1;
  color:       #dcdcd4;
}

.pnk-vypis__nazov {
  margin:      0 0 6px;
  font-size:   16px;
  font-weight: 700;
  line-height: 1.35;
  color:       var(--pnk-text-nadpis);
}

.pnk-vypis__text {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--pnk-text-body);
}

.pnk-vypis__text p      { margin: 0 0 10px; }
.pnk-vypis__text p:last-child { margin-bottom: 0; }
.pnk-vypis__text strong { font-weight: 600; color: var(--pnk-text-nadpis); }

@media (max-width: 767px) {
  .pnk-vypis { padding: 4px 18px; }

  .pnk-vypis__polozka {
    grid-template-columns: minmax(0, 38px) minmax(0, 1fr);
    gap:                   14px;
    padding:               16px 0;
  }

  .pnk-vypis__polozka::before { font-size: 22px; }
  .pnk-vypis__nazov           { font-size: 15px; }
}


/* =============================================================================
   15. AUDIT — actionable checklist
   ============================================================================= */

.pnk-audit {
  margin-bottom: var(--pnk-medzera);
  border:        1px solid var(--pnk-oliva-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
  box-shadow:    var(--pnk-tien);
}

.pnk-audit__hlavicka {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         15px 24px;
  background:      var(--pnk-hneda-tmava);
  color:           var(--pnk-text-inv);
}

.pnk-audit__nadpis { font-size: 16px; font-weight: 600; }

.pnk-audit__cas {
  flex-shrink:    0;
  font-size:      var(--pnk-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          #b5aba3;
}

.pnk-audit__zoznam {
  margin:        0;
  padding:       0;
  list-style:    none;
  counter-reset: pnk-audit;
}

.pnk-audit__krok {
  position:              relative;
  display:               grid;
  grid-template-columns: minmax(0, 30px) minmax(0, 1fr);
  gap:                   18px;
  padding:               18px 24px;
  font-size:             14px;
  line-height:           1.6;
  color:                 var(--pnk-text-body);
  counter-increment:     pnk-audit;
}

/* Časová os — linka spájajúca kroky */
.pnk-audit__krok::after {
  content:    "";
  position:   absolute;
  left:       36px;
  top:        44px;
  bottom:     -2px;
  width:      1px;
  background: var(--pnk-oliva-linka);
}

.pnk-audit__krok:last-child::after { display: none; }

.pnk-audit__krok::before {
  content:         counter(pnk-audit);
  position:        relative;
  z-index:         1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--pnk-oliva);
  font-size:       12px;
  font-weight:     var(--pnk-vaha-display);
  color:           #ffffff;
}

.pnk-audit__obsah {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.pnk-audit__titulok {
  font-size:   14.5px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
  line-height: 1.5;
}

.pnk-audit__popis {
  font-size:   13.5px;
  line-height: 1.62;
  color:       var(--pnk-text-tlmeny);
}

.pnk-audit__popis a {
  color:                 var(--pnk-oliva-tmava);
  text-decoration:       underline;
  text-underline-offset: 2px;
}


/* =============================================================================
   16. CITÁT — zvýraznený kľúčový výrok
   ============================================================================= */

.pnk-citat {
  position:      relative;
  margin:        calc(var(--pnk-medzera) + 6px) auto var(--pnk-medzera);
  padding:       44px 46px 40px;
  background:    var(--pnk-hneda-tmava);
  border-radius: var(--pnk-radius);
  text-align:    center;
  overflow:      hidden;
}

/* Veľká úvodzovka ako vodoznak */
.pnk-citat::before {
  content:     "\201E";
  position:    absolute;
  top:         -26px;
  left:        50%;
  transform:   translateX(-50%);
  font-size:   150px;
  line-height: 1;
  color:       rgba(156, 175, 107, .22);
  pointer-events: none;
}

.pnk-citat p {
  position:       relative;
  margin:         0;
  font-size:      24px;
  font-weight:    600;
  line-height:    1.45;
  letter-spacing: -.01em;
  color:          var(--pnk-text-inv);
}

/* Olivová linka pod citátom */
.pnk-citat p::after {
  content:    "";
  display:    block;
  width:      54px;
  height:     3px;
  margin:     22px auto 0;
  background: var(--pnk-oliva-svetla);
  border-radius: 2px;
}

.pnk-citat cite {
  display:    block;
  margin-top: 10px;
  font-size:  var(--pnk-fs-maly);
  font-style: normal;
  color:      var(--pnk-text-tlmeny);
}

@media (max-width: 767px) {
  .pnk-citat         { padding: 34px 20px 30px; }
  .pnk-citat::before { font-size: 100px; top: -18px; }
  .pnk-citat p       { font-size: 18px; }
}


/* =============================================================================
   17. FAQ — natívny <details>, bez JavaScriptu
   ============================================================================= */

.pnk-faq {
  margin-bottom: var(--pnk-medzera);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
  box-shadow:    var(--pnk-tien);
}

.pnk-faq__hlavicka {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding:         16px 24px;
  background:      var(--pnk-bg-neutral);
  border-bottom:   1px solid var(--pnk-border);
}

.pnk-faq__nadpis {
  margin:      0;
  font-size:   18px;
  font-weight: 700;
  color:       var(--pnk-text-nadpis);
}

.pnk-faq__pocet {
  flex-shrink: 0;
  font-size:   var(--pnk-fs-tyny);
  color:       var(--pnk-text-slaby);
}

.pnk-faq__zoznam { counter-reset: pnk-faq; }

.pnk-faq__polozka {
  border-bottom:     1px solid var(--pnk-border-slaba);
  counter-increment: pnk-faq;
}

.pnk-faq__polozka:last-child { border-bottom: none; }

.pnk-faq__otazka {
  display:     grid;
  grid-template-columns: minmax(0, 30px) minmax(0, 1fr) minmax(0, 26px);
  gap:         14px;
  align-items: center;
  padding:     15px 24px;
  list-style:  none;
  cursor:      pointer;
  font-size:   14.5px;
  font-weight: 500;
  line-height: 1.5;
  color:       var(--pnk-text-nadpis);
}

.pnk-faq__otazka::-webkit-details-marker { display: none; }

.pnk-faq__otazka:hover { background: var(--pnk-bg-teply); }

.pnk-faq__otazka::before {
  content:     counter(pnk-faq, decimal-leading-zero);
  font-size:   12px;
  font-weight: 700;
  color:       var(--pnk-oliva-svetla);
}

/* Kruhové +/− tlačidlo vpravo */
.pnk-faq__otazka::after {
  content:         "+";
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--pnk-oliva-soft);
  border:          1px solid var(--pnk-oliva-border);
  font-size:       15px;
  line-height:     1;
  color:           var(--pnk-oliva-tmava);
}

.pnk-faq__polozka[open] { background: var(--pnk-bg-teply); }

.pnk-faq__polozka[open] .pnk-faq__otazka {
  font-weight: 600;
  color:       var(--pnk-oliva-tmava);
}

.pnk-faq__polozka[open] .pnk-faq__otazka::before { color: var(--pnk-oliva); }

.pnk-faq__polozka[open] .pnk-faq__otazka::after {
  content:      "\2212";
  background:   var(--pnk-oliva);
  border-color: var(--pnk-oliva);
  color:        #ffffff;
}

.pnk-faq__odpoved {
  padding:     0 24px 20px 68px;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--pnk-text-body);
}

.pnk-faq__odpoved p      { margin: 0 0 12px; }
.pnk-faq__odpoved p:last-child { margin-bottom: 0; }
.pnk-faq__odpoved strong { font-weight: 600; color: var(--pnk-text-nadpis); }

@media (max-width: 767px) {
  .pnk-faq__otazka {
    grid-template-columns: minmax(0, 24px) minmax(0, 1fr) minmax(0, 24px);
    gap:                   10px;
    padding:               14px 16px;
    font-size:             14px;
  }

  .pnk-faq__odpoved { padding: 0 16px 18px 50px; }
}


/* =============================================================================
   18. ZDROJE
   ============================================================================= */

 /* TICHÝ komponent — zdroje nemajú prehlušovať obsah */
.pnk-zdroje {
  margin-bottom: var(--pnk-medzera);
  padding:       0;
  background:    transparent;
  border-top:    2px solid var(--pnk-border-silna);
}

.pnk-zdroje__hlavicka {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding:         14px 0 10px;
  background:      transparent;
  border-bottom:   1px solid var(--pnk-border-slaba);
}

.pnk-zdroje__nadpis {
  font-size:   15px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

.pnk-zdroje__pocet {
  flex-shrink: 0;
  font-size:   var(--pnk-fs-tyny);
  color:       var(--pnk-text-slaby);
}

.pnk-zdroje__zoznam {
  margin:        0;
  padding:       4px 0;
  list-style:    none;
  counter-reset: pnk-zdroj;
}

.pnk-zdroje__zoznam li {
  position:          relative;
  padding:           9px 0 9px 30px;
  border-bottom:     1px solid var(--pnk-border-slaba);
  font-size:         12.5px;
  line-height:       1.55;
  color:             var(--pnk-text-tlmeny);
  counter-increment: pnk-zdroj;
}

.pnk-zdroje__zoznam li::before {
  content:     counter(pnk-zdroj, decimal-leading-zero);
  position:    absolute;
  left:        0;
  top:         9px;
  font-size:   var(--pnk-fs-tyny);
  font-weight: 700;
  color:       var(--pnk-oliva-svetla);
}

.pnk-zdroje__zoznam li:last-child { border-bottom: none; }

.pnk-zdroje__zoznam strong { font-weight: 600; color: var(--pnk-text-nadpis); }
.pnk-zdroje__zoznam em     { font-style: italic; }

 /* Doplnok "čo z toho berieme" — plynie v tom istom odstavci */
.pnk-zdroje__co { color: var(--pnk-text-slaby); }

.pnk-zdroje__disclaimer {
  margin:      0;
  padding:     14px 0 0;
  background:  transparent;
  border-top:  1px solid var(--pnk-border);
  font-size:   var(--pnk-fs-tyny);
  line-height: 1.6;
  color:       var(--pnk-text-slaby);
}


/* -----------------------------------------------------------------------------
   18b. ZBALITEĽNÉ ZDROJE — varianta pre články s veľa zdrojmi

   Otvorené zdroje sú signál dôveryhodnosti, preto je základná varianta
   odporúčaná. Túto použi až vtedy, keď by zoznam (cca 12+ položiek)
   neúmerne predĺžil stránku.

   HTML — <details> namiesto <section>, zvyšok zhodný:
     <details class="pnk-zdroje pnk-zdroje--zbalene">
       <summary class="pnk-zdroje__prepinac">
         Použité odborné zdroje <span class="pnk-zdroje__pocet">14 zdrojov</span>
       </summary>
       <ul class="pnk-zdroje__zoznam"> … </ul>
       <p class="pnk-zdroje__disclaimer"> … </p>
     </details>
   -------------------------------------------------------------------------- */

.pnk-zdroje--zbalene {
  padding:       0;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-top:    1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
}

.pnk-zdroje__prepinac {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         15px 22px;
  background:      var(--pnk-bg-neutral);
  list-style:      none;
  cursor:          pointer;
  font-size:       14.5px;
  font-weight:     600;
  color:           var(--pnk-text-nadpis);
}

.pnk-zdroje__prepinac::-webkit-details-marker { display: none; }

.pnk-zdroje__prepinac::after {
  content:         "+";
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--pnk-oliva-soft);
  border:          1px solid var(--pnk-oliva-border);
  font-size:       14px;
  line-height:     1;
  color:           var(--pnk-oliva-tmava);
}

.pnk-zdroje--zbalene[open] .pnk-zdroje__prepinac {
  border-bottom: 1px solid var(--pnk-border);
}

.pnk-zdroje--zbalene[open] .pnk-zdroje__prepinac::after {
  content:      "\2212";
  background:   var(--pnk-oliva);
  border-color: var(--pnk-oliva);
  color:        #ffffff;
}

.pnk-zdroje--zbalene .pnk-zdroje__zoznam    { padding: 6px 22px 10px; }
.pnk-zdroje--zbalene .pnk-zdroje__disclaimer { padding: 14px 22px 16px; border-top: 1px solid var(--pnk-border-slaba); }

@media (max-width: 767px) {
  .pnk-zdroje__prepinac                        { padding: 13px 18px; font-size: 14px; }
  .pnk-zdroje--zbalene .pnk-zdroje__zoznam     { padding: 4px 18px 8px; }
  .pnk-zdroje--zbalene .pnk-zdroje__disclaimer { padding: 12px 18px 14px; }
}


/* =============================================================
   19. AUTOR BOX — tmavá varianta v popolavej hnedej
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-autor">
       <img class="pnk-autor__foto" src="…" alt="Kristína Z." />
       <div class="pnk-autor__telo">
         <span class="pnk-autor__label">O autorke</span>
         <p class="pnk-autor__meno">Kristína Z.</p>
         <p class="pnk-autor__specializacia">Výživa · zdravie · správanie psov · 4+ roky praxe</p>
         <p class="pnk-autor__bio">Text…</p>
         <p class="pnk-autor__podpis"><em>Bc. Kristína Z. | <a href="…">Panakei.sk</a></em></p>
       </div>
     </div>
   ============================================================= */

.pnk-autor {
  display:       flex;
  gap:           24px;
  align-items:   flex-start;
  margin-bottom: 20px;
  padding:       28px 30px;
  background:    var(--pnk-popolava);
  border-radius: var(--pnk-radius);
}

.pnk-autor__foto {
  flex-shrink:   0;
  width:         76px;
  height:        76px;
  border-radius: 50%;
  object-fit:    cover;
  background:    var(--pnk-popolava-svetla);
  border:        3px solid rgba(255, 255, 255, .35);
}

.pnk-autor__telo { flex: 1 1 auto; min-width: 0; }

.pnk-autor__label {
  display:        block;
  margin-bottom:  4px;
  font-size:      var(--pnk-fs-label);
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          #eef1e4;
}

.pnk-autor__meno {
  margin:      0 0 5px;
  font-size:   20px;
  font-weight: var(--pnk-vaha-display);
  color:       #ffffff;
}

.pnk-autor__specializacia {
  margin:         0 0 14px;
  padding-bottom: 14px;
  border-bottom:  1px solid rgba(255, 255, 255, .28);
  font-size:      12.5px;
  font-weight:    600;
  line-height:    1.5;
  color:          #e7ecd8;
}

.pnk-autor__bio {
  margin:      0 0 10px;
  font-size:   13px;
  line-height: 1.7;
  color:       #f5f2ef;
}

.pnk-autor__podpis {
  margin:     14px 0 0;
  font-size:  12.5px;
  font-style: italic;
  color:      #e5e0db;
}

.pnk-autor__telo a {
  color:                 #ffffff;
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.pnk-autor__telo a:hover { color: #ffffff; }

@media (max-width: 767px) {
  .pnk-autor {
    flex-direction: column;
    gap:            16px;
    padding:        22px 20px 24px;
  }

  .pnk-autor__foto { width: 62px; height: 62px; }
  .pnk-autor__meno { font-size: 18px; }
}


/* =============================================================================
   20. DÁTUM AKTUALIZÁCIE
   ============================================================================= */

.pnk-aktualizacia {
  margin:     0 auto 40px;
  font-size:  var(--pnk-fs-tyny);
  font-style: italic;
  color:      var(--pnk-text-slaby);
}


/* =============================================================================
   21. NÁVRAT NA OBSAH — plávajúce tlačidlo vľavo dole
   -----------------------------------------------------------------------------
   HTML: <div class="pnk-navrat"><a href="#">Späť na obsah</a></div>
   ============================================================================= */

.pnk-navrat {
  position:    fixed;
  left:        16px;
  bottom:      16px;
  z-index:     900;   /* zámerne nízke — na stránke je iný plávajúci prvok */
  font-family: var(--pnk-font);
}

.pnk-navrat a {
  display:               inline-flex;
  align-items:           center;
  gap:                   9px;
  padding:               12px 20px;
  border-radius:         var(--pnk-radius-pill);
  background:            var(--pnk-hneda);
  border:                1px solid rgba(255, 255, 255, .18);
  box-shadow:            0 10px 24px rgba(0, 0, 0, .18);
  font-size:             13px;
  font-weight:           600;
  letter-spacing:        .2px;
  color:                 #ffffff;
  text-decoration:       none;
  transition:            background .2s ease;
}

.pnk-navrat a::before {
  content:     "\2191";
  font-size:   15px;
  line-height: 1;
}

.pnk-navrat a:hover { background: var(--pnk-oliva-tmava); }

@media (max-width: 767px) {
  .pnk-navrat   { left: 10px; bottom: 10px; }
  .pnk-navrat a { padding: 10px 15px; font-size: 12px; }
}


/* =============================================================================
   22. ODDEĽOVAČ
   ============================================================================= */

.pnk-oddelovac {
  position:   relative;
  height:     1px;
  margin:     var(--pnk-medzera-velka) auto;
  background: var(--pnk-border);
}

.pnk-oddelovac::after {
  content:    "";
  position:   absolute;
  top:        0;
  left:       0;
  width:      44px;
  height:     1px;
  background: var(--pnk-oliva);
}


/* =============================================================================
   23. PLEMENNÉ KOMPONENTY
   ============================================================================= */

/* --- 23.1 Hero plemena --- */

.pnk-plemeno-hero {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   28px;
  align-items:           center;
  margin-bottom:         var(--pnk-medzera);
  padding:               28px;
  background:            var(--pnk-oliva-soft);
  border:                1px solid var(--pnk-oliva-border);
  border-radius:         var(--pnk-radius);
}

.pnk-plemeno-hero__fci {
  display:        block;
  margin-bottom:  12px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          var(--pnk-oliva-tmava);
}

.pnk-plemeno-hero__vlastnosti {
  display:        block;
  margin-bottom:  12px;
  font-size:      21px;
  font-weight:    700;
  line-height:    1.35;
  letter-spacing: -.01em;
  color:          var(--pnk-text-nadpis);
}

.pnk-plemeno-hero__povod {
  display:   block;
  font-size: var(--pnk-fs-maly);
  color:     var(--pnk-text-tlmeny);
}

.pnk-plemeno-hero__foto {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--pnk-radius-maly);
}

@media (max-width: 767px) {
  .pnk-plemeno-hero { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  .pnk-plemeno-hero__vlastnosti { font-size: 18px; }
}


/* --- 23.2 V číslach + fázy života --- */

.pnk-cisla { margin-bottom: var(--pnk-medzera); }

.pnk-cisla__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap:                   1px;
  margin-bottom:         18px;
  background:            var(--pnk-border);
  border:                1px solid var(--pnk-border);
  border-radius:         var(--pnk-radius);
  overflow:              hidden;
}

.pnk-cisla__karta {
  display:     flex;
  align-items: flex-start;
  gap:         13px;
  padding:     18px 20px;
  background:  var(--pnk-bg-karta);
}

.pnk-cisla__ikona {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--pnk-oliva-soft);
}

.pnk-cisla__ikona img { display: block; width: 22px; height: 22px; }

.pnk-cisla__telo { flex: 1 1 auto; min-width: 0; }

.pnk-cisla__label {
  display:        block;
  margin-bottom:  8px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          var(--pnk-text-slaby);
}

.pnk-cisla__hodnota {
  display:     block;
  font-size:   14.5px;
  font-weight: 500;
  line-height: 1.55;
  color:       var(--pnk-text-nadpis);
}

.pnk-cisla__fazy-label {
  display:        block;
  margin-bottom:  9px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color:          var(--pnk-text-slaby);
}

.pnk-cisla__timeline {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   8px;
}

.pnk-cisla__faza {
  padding:       13px 16px;
  border-radius: var(--pnk-radius-maly);
  border-top:    3px solid;
}

.pnk-cisla__faza-nazov {
  display:       block;
  margin-bottom: 3px;
  font-size:     var(--pnk-fs-maly);
  font-weight:   600;
  color:         var(--pnk-text-nadpis);
}

.pnk-cisla__faza-roky {
  display:   block;
  font-size: 12px;
  color:     var(--pnk-text-tlmeny);
}

.pnk-cisla__faza--junior    { background: var(--pnk-oliva-soft); border-top-color: var(--pnk-oliva-svetla); }
.pnk-cisla__faza--dospelost { background: var(--pnk-oliva-soft); border-top-color: var(--pnk-oliva); }
.pnk-cisla__faza--senior    { background: #f6f1ee;              border-top-color: var(--pnk-hneda); }

@media (max-width: 767px) {
  .pnk-cisla__timeline { grid-template-columns: 1fr; }
}


/* --- 23.3 Vlastnosti plemena — tabový systém, BEZ JavaScriptu ---
   CSS nepoužíva ID selektory (:nth-of-type), takže na stránke môže byť
   viac komponentov. ID v HTML sú potrebné len pre väzbu <label for>.       */

.pnk-vlastnosti { margin-bottom: var(--pnk-medzera); }

.pnk-vlastnosti *,
.pnk-vlastnosti *::before,
.pnk-vlastnosti *::after { box-sizing: border-box; }

.pnk-vlastnosti__nadpis {
  margin:      0 0 14px;
  font-size:   18px;
  font-weight: 700;
  color:       var(--pnk-text-nadpis);
}

.pnk-vlastnosti__radio {
  position:       absolute;
  opacity:        0;
  width:          1px;
  height:         1px;
  pointer-events: none;
}

.pnk-vlastnosti__taby {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.pnk-vlastnosti__tab {
  padding:       8px 18px;
  border:        1.5px solid var(--pnk-border);
  border-radius: var(--pnk-radius-pill);
  background:    var(--pnk-bg-karta);
  font-family:   var(--pnk-font);
  font-size:     var(--pnk-fs-maly);
  font-weight:   600;
  color:         var(--pnk-text-slaby);
  cursor:        pointer;
  user-select:   none;
  transition:    background .15s ease, color .15s ease, border-color .15s ease;
}

.pnk-vlastnosti__tab:hover {
  border-color: var(--pnk-oliva);
  color:        var(--pnk-oliva-tmava);
}

.pnk-vlastnosti__radio:nth-of-type(1):checked ~ .pnk-vlastnosti__taby .pnk-vlastnosti__tab:nth-of-type(1),
.pnk-vlastnosti__radio:nth-of-type(2):checked ~ .pnk-vlastnosti__taby .pnk-vlastnosti__tab:nth-of-type(2),
.pnk-vlastnosti__radio:nth-of-type(3):checked ~ .pnk-vlastnosti__taby .pnk-vlastnosti__tab:nth-of-type(3),
.pnk-vlastnosti__radio:nth-of-type(4):checked ~ .pnk-vlastnosti__taby .pnk-vlastnosti__tab:nth-of-type(4) {
  background:   var(--pnk-hneda-tmava);
  border-color: var(--pnk-hneda-tmava);
  color:        #ffffff;
}

.pnk-vlastnosti__radio:focus-visible ~ .pnk-vlastnosti__taby .pnk-vlastnosti__tab {
  outline:        2px solid var(--pnk-oliva);
  outline-offset: 2px;
}

.pnk-vlastnosti__karta {
  margin-top:    12px;
  padding:       22px;
  background:    var(--pnk-oliva-soft);
  border:        1px solid var(--pnk-oliva-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  word-wrap:     break-word;
}

.pnk-vlastnosti__panel { display: none; }

.pnk-vlastnosti__radio:nth-of-type(1):checked ~ .pnk-vlastnosti__karta .pnk-vlastnosti__panel:nth-of-type(1),
.pnk-vlastnosti__radio:nth-of-type(2):checked ~ .pnk-vlastnosti__karta .pnk-vlastnosti__panel:nth-of-type(2),
.pnk-vlastnosti__radio:nth-of-type(3):checked ~ .pnk-vlastnosti__karta .pnk-vlastnosti__panel:nth-of-type(3),
.pnk-vlastnosti__radio:nth-of-type(4):checked ~ .pnk-vlastnosti__karta .pnk-vlastnosti__panel:nth-of-type(4) {
  display: block;
}

@media (max-width: 767px) {
  .pnk-vlastnosti__tab   { padding: 7px 14px; font-size: 12.5px; }
  .pnk-vlastnosti__karta { padding: 16px; }
}


/* --- 23.3b Škála so srdiečkami ---
   ⚠️ Znak ♥ patrí PRIAMO do HTML ako text — nikdy SVG ani ::before.       */

.pnk-vlastnost {
  margin:        0 auto 14px;
  padding:       15px 18px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius-maly);
}

.pnk-vlastnost__label {
  display:       block;
  margin-bottom: 9px;
  font-size:     var(--pnk-fs-maly);
  font-weight:   600;
  color:         var(--pnk-text-nadpis);
}

.pnk-vlastnost__skala {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}

.pnk-vlastnost__od,
.pnk-vlastnost__do {
  flex:      1 1 0;
  font-size: 12px;
  color:     var(--pnk-text-slaby);
}

.pnk-vlastnost__do { text-align: right; }

.pnk-vlastnost__srdcia { display: flex; gap: 3px; flex-shrink: 0; }

.pnk-s      { font-size: 16px; line-height: 1; }
.pnk-s--on  { color: var(--pnk-oliva); }
.pnk-s--off { color: #d5d3ce; }

.pnk-vlastnost__popis {
  margin:      9px 0 0;
  font-size:   12.5px;
  line-height: 1.6;
  color:       var(--pnk-text-tlmeny);
}


/* --- 23.3c Badge skupiny + farebné bodíky (tab Exteriér) ---
   Inline style na .pnk-farba-dot je jediná povolená výnimka
   z pravidla "žiadne inline štýly" — farba je pre každé plemeno iná.      */

.pnk-vlastnost__sekcia {
  display:        block;
  margin-bottom:  9px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color:          var(--pnk-text-slaby);
}

.pnk-badge-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pnk-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       6px 13px;
  border:        1px solid;
  border-radius: var(--pnk-radius-pill);
  font-size:     12px;
  font-weight:   500;
  line-height:   1.3;
}

.pnk-badge--on {
  background:   var(--pnk-bg-karta);
  border-color: var(--pnk-oliva-border);
  color:        var(--pnk-oliva-tmava);
}

.pnk-badge--off {
  background:   transparent;
  border-color: var(--pnk-border);
  color:        var(--pnk-text-slaby);
}

.pnk-farba-dot {
  display:       inline-block;
  flex-shrink:   0;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  border:        1px solid rgba(17, 24, 39, .18);
}


/* --- 23.4 Zdravie — plemenné predispozície --- */

.pnk-zdravie { margin-bottom: var(--pnk-medzera); }

.pnk-zdravie__polozka {
  margin-bottom: 14px;
  padding:       20px 22px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-left:   4px solid var(--pnk-hneda);
  border-radius: 0 var(--pnk-radius) var(--pnk-radius) 0;
}

.pnk-zdravie__polozka:last-child { margin-bottom: 0; }

.pnk-zdravie__nazov {
  margin:      0 0 7px;
  font-size:   16px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

.pnk-zdravie__co {
  margin:      0 0 13px;
  font-size:   14px;
  line-height: 1.6;
  color:       var(--pnk-text-body);
}

.pnk-zdravie__detaily {
  display:               grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  margin:                0;
  padding-top:           12px;
  border-top:            1px solid var(--pnk-border-slaba);
}

.pnk-zdravie__detaily dt {
  padding:        7px 0;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--pnk-text-slaby);
  line-height:    1.7;
}

.pnk-zdravie__detaily dd {
  margin:      0;
  padding:     7px 0;
  font-size:   13.5px;
  line-height: 1.55;
  color:       var(--pnk-text-body);
}

@media (max-width: 767px) {
  .pnk-zdravie__detaily    { grid-template-columns: 1fr; }
  .pnk-zdravie__detaily dt { padding-bottom: 0; }
  .pnk-zdravie__detaily dd { padding-top: 2px; }
}


/* --- 23.5 Realita — úprimný reality check --- */

.pnk-realita {
  margin-bottom: var(--pnk-medzera);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
}

.pnk-realita__riadok {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  border-bottom:         1px solid var(--pnk-border-slaba);
}

.pnk-realita__riadok:last-child { border-bottom: none; }

.pnk-realita__co {
  padding:      14px 20px;
  background:   var(--pnk-oliva-soft);
  border-right: 1px solid var(--pnk-oliva-border);
  font-size:    var(--pnk-fs-maly);
  font-weight:  600;
  color:        var(--pnk-oliva-tmava);
}

.pnk-realita__ako {
  padding:     14px 20px;
  font-size:   var(--pnk-fs-maly);
  line-height: 1.6;
  color:       var(--pnk-text-body);
}

@media (max-width: 767px) {
  .pnk-realita__riadok { grid-template-columns: 1fr; }
  .pnk-realita__co     { border-right: none; border-bottom: 1px solid var(--pnk-oliva-border); }
}


/* --- 23.6 Mýtus --- */

.pnk-mytus {
  margin:        0 auto 16px;
  padding:       20px 22px;
  background:    var(--pnk-bg-teply);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
}

.pnk-mytus__tvrdenie {
  margin:         0 0 13px;
  padding-bottom: 11px;
  border-bottom:  1px solid var(--pnk-border);
  font-size:      16.5px;
  font-weight:    600;
  line-height:    1.45;
  color:          var(--pnk-text-slaby);
}

.pnk-mytus__pravda,
.pnk-mytus__realita {
  margin:      0 0 9px;
  font-size:   14px;
  line-height: 1.62;
  color:       var(--pnk-text-body);
}

.pnk-mytus__realita { margin-bottom: 0; }

.pnk-mytus__pravda strong  { color: var(--pnk-hneda);       font-weight: 600; }
.pnk-mytus__realita strong { color: var(--pnk-oliva-tmava); font-weight: 600; }


/* --- 23.7 Alternatívne plemená --- */

.pnk-alternativy {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:                   16px;
  margin-bottom:         var(--pnk-medzera);
}

.pnk-alternativy__karta {
  padding:       18px 20px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
}

.pnk-alternativy__hlavicka {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding-bottom: 11px;
  margin-bottom:  11px;
  border-bottom:  1px solid var(--pnk-border-slaba);
}

.pnk-alternativy__vlajka { font-size: 18px; line-height: 1; }

.pnk-alternativy__nazov {
  flex:        1 1 auto;
  font-size:   15px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

.pnk-alternativy__fci {
  flex-shrink:    0;
  padding:        3px 9px;
  border:         1px solid var(--pnk-oliva-border);
  border-radius:  var(--pnk-radius-pill);
  font-size:      9.5px;
  font-weight:    600;
  letter-spacing: .1em;
  color:          var(--pnk-oliva-tmava);
}

.pnk-alternativy__popis {
  margin:      0 0 12px;
  font-size:   13px;
  line-height: 1.6;
  color:       var(--pnk-text-tlmeny);
}

.pnk-alternativy__metriky {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px;
  margin:         0 0 12px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--pnk-border-slaba);
}

.pnk-alternativy__metrika {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  background:    var(--pnk-oliva-soft);
  border-radius: var(--pnk-radius-pill);
  font-size:     11.5px;
  color:         var(--pnk-oliva-tmava);
}

.pnk-alternativy__rozdiel-label,
.pnk-alternativy__koho-label {
  margin:         0 0 4px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color:          var(--pnk-oliva-tmava);
}

.pnk-alternativy__rozdiel,
.pnk-alternativy__koho {
  margin:      0 0 11px;
  font-size:   13px;
  line-height: 1.6;
  color:       var(--pnk-text-body);
}

.pnk-alternativy__koho { margin-bottom: 0; }


/* =============================================================================
   24. PRÍSTUPNOSŤ A TLAČ
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .pnk-navrat a,
  .pnk-vlastnosti__tab { transition: none !important; }
}

.pnk-faq__otazka:focus-visible,
.pnk-toc__zoznam a:focus-visible,
.pnk-navrat a:focus-visible,
.pnk-clanok a:focus-visible {
  outline:        2px solid var(--pnk-oliva);
  outline-offset: 2px;
  border-radius:  2px;
}

@media print {
  .pnk-navrat       { display: none; }
  .pnk-faq__odpoved { display: block !important; }

  .pnk-rovnica {
    background: none;
    border:     1px solid #000;
  }

  .pnk-rovnica__vstup,
  .pnk-rovnica__vysledok,
  .pnk-rovnica__label { color: #000; }
}


/* =============================================================================
   KONIEC — pnk-blog.css v3.5.2
   ============================================================================= */
