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

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

   -----------------------------------------------------------------------------
   DÔLEŽITÉ — VZŤAH K pan-blog.css
   -----------------------------------------------------------------------------
   Tento súbor NENAHRÁDZA pan-blog.css. Beží paralelne vedľa neho.

   pan-blog.css  = junior vrstva (pan-, shp-custom-, ph-, pv-, ap-)
   pnk-blog.css  = senior vrstva (pnk-)

   Prefixy sa nekryjú → súbory si nemajú ako prepísať štýly.
   Oba môžu byť načítané v <head> súčasne.

   ⚠️ JEDEN ČLÁNOK = JEDEN SYSTÉM. Nikdy nemiešať pan- a pnk- triedy
   v rámci jedného článku.

   -----------------------------------------------------------------------------
   PORADIE NAČÍTANIA V SHOPTET <head>
   -----------------------------------------------------------------------------
   <link rel="stylesheet" href="/user/documents/upload/css/kategorie.css">
   <link rel="stylesheet" href="/user/documents/upload/css/pan-kategorie.css">
   <link rel="stylesheet" href="/user/documents/upload/css/pan-produkt.css">
   <link rel="stylesheet" href="/user/documents/upload/css/pan-blog.css">
   <link rel="stylesheet" href="/user/documents/upload/css/pnk-blog.css">   ← posledný

   -----------------------------------------------------------------------------
   TECHNICKÉ MANTINELY
   -----------------------------------------------------------------------------
   • Žiadny JavaScript — všetky rozbaľovacie prvky 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 (falošná afordancia → rage clicks)

   -----------------------------------------------------------------------------
   HISTÓRIA VERZIÍ
   -----------------------------------------------------------------------------
   v1.2.0 (08/2026)
       • Nový univerzálny komponent .pnk-zoznam (dvojstĺpcový zoznam
         "pojem → vysvetlenie") — vznikol pri prerábke článku "Darujem psíka"
       • .pnk-audit__krok podporuje aj viacriadkovú variantu
         (.pnk-audit__titulok + .pnk-audit__popis)

   v1.1.0 (08/2026)
       • Doplnený kompletný tabový systém .pnk-vlastnosti (4 taby, bez JS)
       • Badge skupiny (.pnk-badge) a farebné bodíky (.pnk-farba-dot)
       • Ikonky v kartách "v číslach" (.pnk-cisla__ikona)
       • Metriky a FCI odznak v alternatívnych plemenách
       • Tabový prepínač už nepoužíva ID selektory → viac komponentov na stránke

   v1.0.0 (08/2026) — prvá verzia
       • Základ: premenné, typografia, perex, hero obrázok
       • Obsahové komponenty: tldr, rovnica, varovanie, bezpecne, tip,
         porovnanie, data, audit, citat
       • Plemenné komponenty: plemeno-hero, cisla, vlastnosti, zdravie,
         vyziva-plemeno, realita, mytus, alternativy
       • Závierkové: toc, faq, zdroje, autor, aktualizacia, navrat

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


/* =============================================================================
   1. PREMENNÉ
   ============================================================================= */

.pnk-clanok,
.pnk-wrap {
  /* --- Značkové farby (zhodné s pan-kategorie.css) --- */
  --pnk-hneda:          #5e4a42;
  --pnk-hneda-tmava:    #2c2420;
  --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:    #f7efeb;
  --pnk-riziko-svetla:  #d99b7c;

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

  /* --- Plochy a linky --- */
  --pnk-bg:             #fcfcfa;
  --pnk-bg-karta:       #ffffff;
  --pnk-bg-neutral:     #f5f5f4;
  --pnk-border:         #e0ddd9;
  --pnk-border-slaba:   #eeecea;
  --pnk-border-silna:   #2c2420;

  /* --- Rozmery --- */
  --pnk-radius:         4px;
  --pnk-radius-velky:   8px;
  --pnk-radius-pill:    999px;
  --pnk-maxw:           860px;
  --pnk-margin-col:     72px;   /* šírka marginálneho stĺpca */
  --pnk-margin-gap:     24px;

  /* --- Typografia --- */
  --pnk-font:           var(--font-primary, 'Poppins', sans-serif);
  --pnk-fs-body:        15px;
  --pnk-fs-maly:        13px;
  --pnk-fs-tyny:        11px;
  --pnk-fs-label:       10px;
}


/* =============================================================================
   2. ZÁKLADNÁ TYPOGRAFIA A WRAPPER
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-clanok">
       <span class="pnk-kotva" id="sekcia"></span>
       <h2>Nadpis</h2>
       <p>Text…</p>
     </div>
   ============================================================================= */

.pnk-clanok {
  font-family: var(--pnk-font);
  font-size:   var(--pnk-fs-body);
  line-height: 1.75;
  color:       var(--pnk-text-body);
  max-width:   var(--pnk-maxw);
  margin:      0 auto 28px;
}

.pnk-clanok p {
  margin:    0 0 16px;
  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 18px;
  padding-left: 20px;
}

.pnk-clanok li {
  margin:      6px 0;
  line-height: 1.7;
}

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

/* Kotva pre TOC skoky — kompenzuje sticky hlavičku Shoptetu */
.pnk-kotva {
  display:     block;
  height:      0;
  visibility:  hidden;
  scroll-margin-top: 90px;
}

html { scroll-behavior: smooth; }

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


/* =============================================================================
   3. NADPISY
   -----------------------------------------------------------------------------
   H2 s marginálnym číslom sekcie:
     <div class="pnk-nadpis">
       <span class="pnk-nadpis__cislo">02</span>
       <h2 class="pnk-nadpis__text">Čo sa deje v tele psa</h2>
     </div>
   ============================================================================= */

.pnk-nadpis {
  display:               grid;
  grid-template-columns: minmax(0, var(--pnk-margin-col)) minmax(0, 1fr);
  gap:                   var(--pnk-margin-gap);
  align-items:           start;
  max-width:             var(--pnk-maxw);
  margin:                44px auto 18px;
}

.pnk-nadpis__cislo {
  font-family: var(--pnk-font);
  font-size:   30px;
  font-weight: 700;
  line-height: .9;
  color:       #dcdcd4;
  text-align:  right;
  padding-top: 4px;
}

.pnk-nadpis__text {
  margin:         0;
  font-family:    var(--pnk-font);
  font-size:      24px;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -.01em;
  color:          var(--pnk-text-nadpis);
}

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

/* Marginálna poznámka — sprevádza odstavec v ľavom stĺpci */
.pnk-poznamka {
  display:               grid;
  grid-template-columns: minmax(0, var(--pnk-margin-col)) minmax(0, 1fr);
  gap:                   var(--pnk-margin-gap);
  max-width:             var(--pnk-maxw);
  margin:                0 auto 28px;
}

.pnk-poznamka__margin {
  font-size:   var(--pnk-fs-tyny);
  line-height: 1.55;
  color:       var(--pnk-text-slaby);
  text-align:  right;
}

.pnk-poznamka__telo {
  font-size:   var(--pnk-fs-body);
  line-height: 1.75;
  color:       var(--pnk-text-body);
}

.pnk-poznamka__telo p { margin: 0 0 14px; }
.pnk-poznamka__telo p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .pnk-nadpis,
  .pnk-poznamka {
    grid-template-columns: 1fr;
    gap:                   8px;
  }

  .pnk-nadpis__cislo,
  .pnk-poznamka__margin {
    text-align: left;
  }

  .pnk-nadpis__cislo { font-size: 22px; }
  .pnk-nadpis__text  { font-size: 21px; }

  .pnk-poznamka__margin {
    padding-left: 12px;
    border-left:  2px solid var(--pnk-oliva-linka);
  }
}


/* =============================================================================
   4. HLAVIČKA ČLÁNKU — eyebrow, titulok, perex
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-wrap">
       <span class="pnk-eyebrow">Výživa bez marketingových skratiek</span>
       <h1 class="pnk-titulok">Robíte pri pamlskoch <em>túto nenápadnú</em> chybu?</h1>
       <p class="pnk-perex">Text perexu <mark>so zvýraznením</mark>.</p>
     </div>
   ============================================================================= */

.pnk-wrap {
  font-family: var(--pnk-font);
  max-width:   var(--pnk-maxw);
  margin:      0 auto;
}

.pnk-eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         7px 15px;
  margin-bottom:   24px;
  background:      var(--pnk-oliva-soft);
  border:          1px solid var(--pnk-oliva-border);
  border-radius:   var(--pnk-radius-pill);
  font-family:     var(--pnk-font);
  font-size:       var(--pnk-fs-tyny);
  font-weight:     600;
  letter-spacing:  .09em;
  text-transform:  uppercase;
  color:           #414b23;
}

.pnk-eyebrow::before {
  content:       "";
  flex-shrink:   0;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--pnk-oliva);
}

.pnk-titulok {
  margin:         0 0 24px;
  font-family:    var(--pnk-font);
  font-size:      42px;
  font-weight:    700;
  line-height:    1.14;
  letter-spacing: -.02em;
  color:          var(--pnk-text-nadpis);
  max-width:      13em;
}

/* <em> v titulku = farebný akcent, nie kurzíva */
.pnk-titulok em {
  font-style: normal;
  color:      var(--pnk-oliva);
}

.pnk-perex {
  margin:      0 0 40px;
  font-family: var(--pnk-font);
  font-size:   17px;
  line-height: 1.68;
  color:       var(--pnk-text-body);
  max-width:   33em;
}

/* Zvýraznenie v perexe — podčiarknutie, nie bold */
.pnk-perex mark {
  background:  linear-gradient(transparent 60%, #dde3c8 60%);
  color:       inherit;
  font-weight: 500;
  padding:     0;
}

@media (max-width: 767px) {
  .pnk-titulok { font-size: 29px; letter-spacing: -.015em; }
  .pnk-perex   { font-size: 15.5px; }
}


/* =============================================================================
   5. HERO OBRÁZOK
   -----------------------------------------------------------------------------
   HTML:
     <figure class="pnk-foto">
       <img src="/user/documents/upload/Fotobanka/nazov.png" alt="Popis" />
       <figcaption class="pnk-foto__popis">Pamlsok je pre telo psa to isté čo lyžica granúl.</figcaption>
     </figure>
   ============================================================================= */

.pnk-foto {
  position:  relative;
  max-width: var(--pnk-maxw);
  margin:    0 auto 52px;
}

.pnk-foto img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--pnk-radius);
}

/* Popisok ako tmavý štítok prekrývajúci spodný okraj fotky */
.pnk-foto__popis {
  position:      absolute;
  right:         28px;
  bottom:        -22px;
  max-width:     230px;
  padding:       15px 21px;
  background:    var(--pnk-hneda);
  color:         var(--pnk-text-inv);
  border-radius: var(--pnk-radius);
  font-family:   var(--pnk-font);
  font-size:     12px;
  line-height:   1.55;
}

@media (max-width: 767px) {
  .pnk-foto { margin-bottom: 32px; }

  .pnk-foto__popis {
    position:   static;
    max-width:  none;
    margin-top: 10px;
    padding:    12px 16px;
    font-size:  12px;
  }
}


/* =============================================================================
   6. TL;DR — ZHRNUTIE ČLÁNKU
   -----------------------------------------------------------------------------
   HTML:
     <section class="pnk-tldr" aria-label="Zhrnutie článku">
       <div class="pnk-tldr__hlavicka">
         <span class="pnk-tldr__nadpis">Zhrnutie článku</span>
         <span class="pnk-tldr__cas">30 sekúnd</span>
       </div>
       <div class="pnk-tldr__grid">
         <div class="pnk-tldr__bod">
           <span class="pnk-tldr__cislo">01</span>
           <p class="pnk-tldr__titulok">Žiadna výnimka</p>
           <p class="pnk-tldr__text">Aj dvojgramový pamlsok nesie rovnaký alergén.</p>
         </div>
         … 2–4 body celkom
       </div>
       <div class="pnk-tldr__test"><strong>Rýchly test:</strong> otvorte vrecko…</div>
     </section>
   ============================================================================= */

.pnk-tldr {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 52px;
  border:        1.5px solid var(--pnk-border-silna);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  font-family:   var(--pnk-font);
  background:    var(--pnk-bg-karta);
}

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

.pnk-tldr__nadpis {
  font-size:   17px;
  font-weight: 600;
}

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

.pnk-tldr__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.pnk-tldr__bod {
  padding:      20px 22px;
  border-right: 1px solid var(--pnk-border);
}

.pnk-tldr__bod:last-child { border-right: none; }

.pnk-tldr__cislo {
  display:       block;
  margin-bottom: 11px;
  font-size:     22px;
  font-weight:   700;
  line-height:   1;
  color:         var(--pnk-oliva);
}

.pnk-tldr__titulok {
  margin:      0 0 7px;
  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);
}

.pnk-tldr__test {
  padding:     15px 24px;
  background:  var(--pnk-oliva-soft);
  border-top:  1.5px solid var(--pnk-border-silna);
  font-size:   var(--pnk-fs-maly);
  line-height: 1.6;
  color:       #414b23;
}

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

@media (max-width: 767px) {
  .pnk-tldr__bod {
    border-right:  none;
    border-bottom: 1px solid var(--pnk-border);
  }

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


/* =============================================================================
   7. ROVNICA — invertovaný akcentový blok
   -----------------------------------------------------------------------------
   Jediné miesto v článku s tmavým pozadím. Používať MAX 1× na článok,
   vždy na najdôležitejšiu informáciu.

   HTML:
     <section class="pnk-rovnica" aria-label="Zhrnutie mechanizmu">
       <span class="pnk-rovnica__label">Celá matematika diéty</span>
       <p class="pnk-rovnica__vstup">100 % čisté krmivo <span>+</span> 1 pamlsok s alergénom</p>
       <p class="pnk-rovnica__vysledok">= 100 % aktívny zápal</p>
     </section>
   ============================================================================= */

.pnk-rovnica {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 52px;
  padding:       50px 44px;
  background:    var(--pnk-hneda-tmava);
  border-radius: var(--pnk-radius);
  text-align:    center;
  font-family:   var(--pnk-font);
}

.pnk-rovnica__label {
  display:        block;
  margin-bottom:  24px;
  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: 2;
  color:       var(--pnk-text-inv);
}

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

/* Deliaca linka medzi vstupom a výsledkom */
.pnk-rovnica__vysledok {
  position:       relative;
  margin:         38px 0 0;
  font-size:      29px;
  font-weight:    700;
  letter-spacing: -.01em;
  line-height:    1.2;
  color:          var(--pnk-riziko-svetla);
}

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

@media (max-width: 767px) {
  .pnk-rovnica { padding: 32px 20px; }
  .pnk-rovnica__vstup    { font-size: 14.5px; line-height: 1.9; }
  .pnk-rovnica__vysledok { font-size: 22px; }
}


/* =============================================================================
   8. VAROVANIE / BEZPEČNÉ / TIP
   -----------------------------------------------------------------------------
   Tri signálne bloky s marginálnym labelom. Bez rámčeka — len ľavá linka.

   HTML:
     <div class="pnk-signal pnk-signal--riziko">
       <span class="pnk-signal__label">Pozor</span>
       <div class="pnk-signal__telo">
         <p>Pri alergii na kuracie sa vyhnite <strong>všetkej hydine</strong>.</p>
       </div>
     </div>

   Varianty: --riziko (tehlová) · --bezpecne (olivová) · --tip (hnedá)
   ============================================================================= */

.pnk-signal {
  display:               grid;
  grid-template-columns: minmax(0, var(--pnk-margin-col)) minmax(0, 1fr);
  gap:                   var(--pnk-margin-gap);
  max-width:             var(--pnk-maxw);
  margin:                0 auto 44px;
  font-family:           var(--pnk-font);
}

.pnk-signal__label {
  padding-top:    2px;
  font-size:      var(--pnk-fs-label);
  font-weight:    600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height:    1.6;
  text-align:     right;
}

.pnk-signal__telo {
  padding-left: 20px;
  border-left:  3px solid;
  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 ul {
  margin:       8px 0 0;
  padding-left: 18px;
}

.pnk-signal--riziko   .pnk-signal__label { color: var(--pnk-riziko); }
.pnk-signal--riziko   .pnk-signal__telo  { border-left-color: var(--pnk-riziko); }

.pnk-signal--bezpecne .pnk-signal__label { color: var(--pnk-oliva-tmava); }
.pnk-signal--bezpecne .pnk-signal__telo  { border-left-color: var(--pnk-oliva); }

.pnk-signal--tip      .pnk-signal__label { color: var(--pnk-hneda); }
.pnk-signal--tip      .pnk-signal__telo  { border-left-color: var(--pnk-hneda); }

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

  .pnk-signal__label { text-align: left; padding-left: 20px; }
}


/* =============================================================================
   9. POROVNÁVACIA TABUĽKA
   -----------------------------------------------------------------------------
   HTML:
     <section class="pnk-porovnanie" aria-label="Detektívka na etikete">
       <p class="pnk-porovnanie__nadpis">Detektívka na etikete</p>
       <p class="pnk-porovnanie__podnadpis">Názov na obale nehovorí celý príbeh</p>
       <div class="pnk-porovnanie__tabulka">
         <div class="pnk-porovnanie__hlavicka">
           <span class="pnk-porovnanie__th">Čo sľubuje obal</span>
           <span class="pnk-porovnanie__th pnk-porovnanie__th--riziko">Čo býva v zložení</span>
         </div>
         <div class="pnk-porovnanie__riadok">
           <span class="pnk-porovnanie__nazov">„Šťavnaté rybičky"</span>
           <span class="pnk-porovnanie__realita">Sušený hovädzí tuk, hydinové škvarky</span>
         </div>
         … ďalšie riadky
       </div>
     </section>
   ============================================================================= */

.pnk-porovnanie {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 52px;
  font-family: var(--pnk-font);
}

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

.pnk-porovnanie__podnadpis {
  margin:    0 0 20px;
  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);
}

.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:      16px 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:     16px 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;
    padding-left: 20px;
    border-left:  2px solid var(--pnk-riziko);
    margin:       0 20px 12px;
  }
}


/* =============================================================================
   10. DÁTOVÉ KARTY — číslo + prevod na hmatateľnú vec
   -----------------------------------------------------------------------------
   Pravidlo z briefu: najprv presné číslo, potom jeho vykreslenie do praxe.

   HTML:
     <section class="pnk-data" aria-label="Denný limit na pamlsky">
       <div class="pnk-data__karta">
         <span class="pnk-data__label">10 kg pes</span>
         <span class="pnk-data__cislo">65</span>
         <span class="pnk-data__jednotka">kcal / deň</span>
         <span class="pnk-data__preklad">jedna väčšia žuvacia tyčinka</span>
       </div>
       … 2–4 karty celkom
     </section>
   ============================================================================= */

.pnk-data {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap:                   22px;
  max-width:             var(--pnk-maxw);
  margin:                0 auto 52px;
  font-family:           var(--pnk-font);
}

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

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

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

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

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


/* =============================================================================
   11. AUDIT — actionable checklist
   -----------------------------------------------------------------------------
   HTML:
     <section class="pnk-audit" aria-label="Audit vášho vrecka">
       <div class="pnk-audit__hlavicka">
         <span class="pnk-audit__nadpis">Audit vášho vrecka</span>
         <span class="pnk-audit__cas">2 minúty</span>
       </div>
       <ol class="pnk-audit__zoznam">
         <li class="pnk-audit__krok">Otvorte vrecko, ktoré nosíte na prechádzky</li>
         … 3–5 krokov
       </ol>
     </section>
   ============================================================================= */

.pnk-audit {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 52px;
  border:        1.5px solid var(--pnk-oliva);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
  font-family:   var(--pnk-font);
}

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

.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:          #e0e5cf;
}

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

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

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

.pnk-audit__krok::before {
  content:     counter(pnk-audit);
  font-weight: 700;
  color:       var(--pnk-oliva);
}

/* Viacriadková varianta kroku — titulok + vysvetlenie.
   HTML:
     <li class="pnk-audit__krok">
       <span class="pnk-audit__obsah">
         <span class="pnk-audit__titulok">Pripravte jeho životopis</span>
         <span class="pnk-audit__popis">Čo vie, čoho sa bojí, čo jedáva.</span>
       </span>
     </li>                                                                    */

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

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

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


/* =============================================================================
   12. CITÁT — zvýraznený kľúčový výrok
   -----------------------------------------------------------------------------
   HTML:
     <blockquote class="pnk-citat">
       <p>Diéta, ktorá funguje len na deväťdesiat percent, nefunguje vôbec.</p>
     </blockquote>
   ============================================================================= */

.pnk-citat {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 44px;
  padding:     0 0 0 26px;
  border-left: 3px solid var(--pnk-oliva);
  font-family: var(--pnk-font);
}

.pnk-citat p {
  margin:         0;
  font-size:      21px;
  font-weight:    500;
  line-height:    1.5;
  letter-spacing: -.01em;
  color:          var(--pnk-text-nadpis);
}

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

@media (max-width: 767px) {
  .pnk-citat p { font-size: 17px; }
}


/* =============================================================================
   13. OBSAH ČLÁNKU (TOC)
   -----------------------------------------------------------------------------
   HTML:
     <nav class="pnk-toc" aria-label="Obsah článku">
       <div class="pnk-toc__hlavicka">
         <span class="pnk-toc__nadpis">Obsah článku</span>
         <span class="pnk-toc__hint">Kliknite a skočte do sekcie</span>
       </div>
       <ol class="pnk-toc__zoznam">
         <li><a href="#sekcia-1">Čo sa deje v tele psa</a></li>
       </ol>
     </nav>
   ============================================================================= */

.pnk-toc {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 52px;
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  background:    var(--pnk-bg-karta);
  font-family:   var(--pnk-font);
  overflow:      hidden;
}

.pnk-toc__hlavicka {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding:         14px 24px;
  background:      var(--pnk-bg-neutral);
  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:       10px 24px 16px;
  list-style:    none;
  counter-reset: pnk-toc;
}

.pnk-toc__zoznam li {
  display:               grid;
  grid-template-columns: minmax(0, 30px) minmax(0, 1fr);
  gap:                   12px;
  padding:               7px 0;
  counter-increment:     pnk-toc;
}

.pnk-toc__zoznam li::before {
  content:     counter(pnk-toc, decimal-leading-zero);
  font-size:   var(--pnk-fs-tyny);
  font-weight: 700;
  color:       #c3c9ae;
  line-height: 1.9;
}

.pnk-toc__zoznam a {
  font-size:       14px;
  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;
}


/* =============================================================================
   14. FAQ — natívny <details>, bez JavaScriptu
   -----------------------------------------------------------------------------
   Počet otázok v hlavičke sa dopĺňa cez atribút data-pocet (nie JS).

   HTML:
     <section class="pnk-faq" aria-label="Časté otázky">
       <div class="pnk-faq__hlavicka">
         <h2 class="pnk-faq__nadpis">Časté otázky</h2>
         <span class="pnk-faq__pocet">6 otázok</span>
       </div>
       <div class="pnk-faq__zoznam">
         <details class="pnk-faq__polozka">
           <summary class="pnk-faq__otazka">Môžem psovi dávať bežné pamlsky?</summary>
           <div class="pnk-faq__odpoved"><p>Odpoveď…</p></div>
         </details>
       </div>
     </section>
   ============================================================================= */

.pnk-faq {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 52px;
  font-family: var(--pnk-font);
}

.pnk-faq__hlavicka {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   16px;
}

.pnk-faq__nadpis {
  margin:      0;
  font-size:   22px;
  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-top:        1px solid var(--pnk-border);
  counter-increment: pnk-faq;
}

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

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

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

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

/* Znamienko +/− v treťom stĺpci */
.pnk-faq__otazka::after {
  content:     "+";
  font-size:   18px;
  line-height: 1;
  color:       var(--pnk-oliva);
  text-align:  right;
}

.pnk-faq__polozka[open] .pnk-faq__otazka {
  font-weight: 600;
}

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

/* Otvorená položka — podfarbený celý riadok */
.pnk-faq__polozka[open] {
  background: var(--pnk-oliva-soft);
  padding:    0 12px;
  margin:     0 -12px;
}

.pnk-faq__odpoved {
  padding:     0 0 20px 48px;
  font-size:   14px;
  line-height: 1.72;
  color:       var(--pnk-text-body);
  max-width:   33em;
}

.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, 26px) minmax(0, 1fr) minmax(0, 18px);
    gap:                   10px;
    font-size:             14px;
  }

  .pnk-faq__odpoved { padding-left: 36px; }
}


/* =============================================================================
   15. ZDROJE
   -----------------------------------------------------------------------------
   HTML:
     <section class="pnk-zdroje" aria-label="Použité zdroje">
       <div class="pnk-zdroje__hlavicka">
         <span class="pnk-zdroje__nadpis">Použité odborné zdroje</span>
         <span class="pnk-zdroje__pocet">10 zdrojov</span>
       </div>
       <ul class="pnk-zdroje__zoznam">
         <li><strong>Purina Institute.</strong> (n.d.). <em>Diet Elimination Trials</em>
             <span class="pnk-zdroje__co">— pamlsky môžu narušiť eliminačný pokus</span></li>
       </ul>
       <p class="pnk-zdroje__disclaimer">Obsah bol konzultovaný s odborníkom…</p>
     </section>
   ============================================================================= */

.pnk-zdroje {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 44px;
  padding:       26px 28px;
  background:    var(--pnk-bg-neutral);
  border-radius: var(--pnk-radius);
  font-family:   var(--pnk-font);
}

.pnk-zdroje__hlavicka {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding-bottom:  13px;
  margin-bottom:   4px;
  border-bottom:   1.5px solid var(--pnk-border-silna);
}

.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:    0;
  list-style: none;
}

.pnk-zdroje__zoznam li {
  padding:       12px 0;
  border-bottom: 1px solid var(--pnk-border);
  font-size:     var(--pnk-fs-maly);
  line-height:   1.6;
  color:         var(--pnk-text-tlmeny);
}

.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; }

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

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


/* =============================================================================
   16. AUTOR BOX
   -----------------------------------------------------------------------------
   HTML:
     <div class="pnk-autor">
       <img class="pnk-autor__foto" src="…avatar-kristina.png" alt="Bc. Kristína Z." />
       <div class="pnk-autor__telo">
         <span class="pnk-autor__label">Autorka</span>
         <p class="pnk-autor__meno">Bc. Kristína Z.</p>
         <p class="pnk-autor__bio">Text bia…</p>
       </div>
     </div>
   ============================================================================= */

.pnk-autor {
  display:               grid;
  grid-template-columns: minmax(0, var(--pnk-margin-col)) minmax(0, 1fr);
  gap:                   var(--pnk-margin-gap);
  max-width:             var(--pnk-maxw);
  margin:                46px auto 32px;
  padding-top:           28px;
  border-top:            1.5px solid var(--pnk-border-silna);
  font-family:           var(--pnk-font);
}

.pnk-autor__foto {
  display:       block;
  width:         64px;
  height:        64px;
  border-radius: 50%;
  object-fit:    cover;
  margin-left:   auto;
  background:    #e6e4dc;
}

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

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

.pnk-autor__bio {
  margin:      0 0 10px;
  font-size:   13.5px;
  line-height: 1.68;
  color:       var(--pnk-text-tlmeny);
  max-width:   31em;
}

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

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

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

  .pnk-autor__foto { margin-left: 0; }
}


/* =============================================================================
   17. DÁTUM AKTUALIZÁCIE + NÁVRAT NA OBSAH
   -----------------------------------------------------------------------------
   HTML:
     <p class="pnk-aktualizacia">Aktualizácia obsahu: 19. 08. 2026</p>
     <div class="pnk-navrat"><a href="#">Späť na obsah</a></div>
   ============================================================================= */

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

.pnk-navrat {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 40px;
  font-family: var(--pnk-font);
}

.pnk-navrat a {
  display:               inline-flex;
  align-items:           center;
  gap:                   8px;
  padding:               10px 18px;
  border:                1px solid var(--pnk-oliva-border);
  border-radius:         var(--pnk-radius-pill);
  background:            var(--pnk-oliva-soft);
  font-size:             var(--pnk-fs-maly);
  font-weight:           500;
  color:                 #414b23;
  text-decoration:       none;
  transition:            border-color .2s ease;
}

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

.pnk-navrat a:hover { border-color: var(--pnk-hneda); }


/* =============================================================================
   18. ODDEĽOVAČ
   -----------------------------------------------------------------------------
   HTML: <div class="pnk-oddelovac" aria-hidden="true"></div>
   ============================================================================= */

.pnk-oddelovac {
  position:  relative;
  max-width: var(--pnk-maxw);
  height:    1px;
  margin:    44px auto;
  background: var(--pnk-border);
}

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


/* =============================================================================
   19. PLEMENNÉ KOMPONENTY
   =============================================================================
   Používajú sa IBA v plemenných článkoch. Detail v Panakei_Blog_LVL_UP.md,
   sekcia 6.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   19.1 HERO PLEMENA
   HTML:
     <section class="pnk-plemeno-hero">
       <div class="pnk-plemeno-hero__text">
         <span class="pnk-plemeno-hero__fci">Plemeno uznané FCI štandardom č. 343</span>
         <span class="pnk-plemeno-hero__vlastnosti">ochranný / oddaný / majestátny</span>
         <span class="pnk-plemeno-hero__povod">Krajina pôvodu: Taliansko</span>
       </div>
       <img class="pnk-plemeno-hero__foto" src="…" alt="Cane Corso" />
     </section>
   -------------------------------------------------------------------------- */

.pnk-plemeno-hero {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   32px;
  align-items:           center;
  max-width:             var(--pnk-maxw);
  margin:                0 auto 44px;
  padding:               32px;
  background:            var(--pnk-oliva-soft);
  border-radius:         var(--pnk-radius-velky);
  font-family:           var(--pnk-font);
}

.pnk-plemeno-hero__fci {
  display:        block;
  margin-bottom:  14px;
  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:  14px;
  font-size:      22px;
  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);
}

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

  .pnk-plemeno-hero__vlastnosti { font-size: 18px; }
}


/* -----------------------------------------------------------------------------
   19.2 V ČÍSLACH + FÁZY ŽIVOTA
   HTML:
     <section class="pnk-cisla" aria-label="Plemeno v číslach">
       <div class="pnk-cisla__grid">
         <div class="pnk-cisla__karta">
           <span class="pnk-cisla__label">Výška</span>
           <span class="pnk-cisla__hodnota">Pes: 64–68 cm<br>Suka: 60–64 cm</span>
         </div>
         … 3 karty
       </div>
       <div class="pnk-cisla__fazy">
         <span class="pnk-cisla__fazy-label">Fázy života</span>
         <div class="pnk-cisla__timeline">
           <div class="pnk-cisla__faza pnk-cisla__faza--junior">
             <span class="pnk-cisla__faza-nazov">Junior</span>
             <span class="pnk-cisla__faza-roky">0–24 mes.</span>
           </div>
           … dospelost, senior
         </div>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.pnk-cisla {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 44px;
  font-family: var(--pnk-font);
}

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

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

/* Voliteľná PNG ikonka (priečinok "Ikony ku plemenám", 240×240 px) */
.pnk-cisla__ikona {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--pnk-oliva-soft);
}

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

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

.pnk-cisla__label {
  display:        block;
  margin-bottom:  10px;
  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:   15px;
  font-weight: 500;
  line-height: 1.6;
  color:       var(--pnk-text-nadpis);
}

.pnk-cisla__fazy-label {
  display:        block;
  margin-bottom:  10px;
  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:       14px 16px;
  border-radius: var(--pnk-radius);
  border-top:    3px solid;
}

.pnk-cisla__faza-nazov {
  display:       block;
  margin-bottom: 4px;
  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: #f5f1ee;               border-top-color: var(--pnk-hneda); }

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


/* -----------------------------------------------------------------------------
   19.3 VLASTNOSTI PLEMENA — tabový systém (4 taby, BEZ JavaScriptu)

   Prepínanie stojí na skrytých <input type="radio"> + súrodeneckom selektore.
   Oproti pan-blog.css je tu podstatné vylepšenie: CSS už nepoužíva ID selektory
   (#pv-t1 …), ale :nth-of-type(). Vďaka tomu môže byť na jednej stránke
   viac takýchto komponentov bez kolízie.

   ⚠️ ID v HTML sú stále potrebné pre väzbu <label for> ↔ <input id>.
      Musia byť unikátne v rámci stránky — pri viacerých komponentoch
      použi sufix (napr. id="cc-t1" pre Cane Corso, id="bk-t1" pre Border kóliu)
      a rovnaký sufix v name="".

   HTML:
     <div class="pnk-vlastnosti">
       <p class="pnk-vlastnosti__nadpis">Charakteristika a vlastnosti plemena</p>

       <input class="pnk-vlastnosti__radio" type="radio" name="cc-tab" id="cc-t1" checked>
       <input class="pnk-vlastnosti__radio" type="radio" name="cc-tab" id="cc-t2">
       <input class="pnk-vlastnosti__radio" type="radio" name="cc-tab" id="cc-t3">
       <input class="pnk-vlastnosti__radio" type="radio" name="cc-tab" id="cc-t4">

       <div class="pnk-vlastnosti__taby">
         <label class="pnk-vlastnosti__tab" for="cc-t1">Život v rodine</label>
         <label class="pnk-vlastnosti__tab" for="cc-t2">Exteriér</label>
         <label class="pnk-vlastnosti__tab" for="cc-t3">Správanie</label>
         <label class="pnk-vlastnosti__tab" for="cc-t4">Osobnosť</label>
       </div>

       <div class="pnk-vlastnosti__karta">
         <div class="pnk-vlastnosti__panel"> … obsah tabu 1 … </div>
         <div class="pnk-vlastnosti__panel"> … obsah tabu 2 … </div>
         <div class="pnk-vlastnosti__panel"> … obsah tabu 3 … </div>
         <div class="pnk-vlastnosti__panel"> … obsah tabu 4 … </div>
       </div>
     </div>
   -------------------------------------------------------------------------- */

.pnk-vlastnosti {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 44px;
  font-family: var(--pnk-font);
}

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

.pnk-vlastnosti__nadpis {
  margin:      0 0 16px;
  font-size:   19px;
  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);
}

/* Aktívny tab — bez ID selektorov, párovanie cez poradie */
.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;
}

/* Viditeľný focus pri ovládaní klávesnicou */
.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:       24px;
  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: 18px 16px; }
}


/* -----------------------------------------------------------------------------
   19.3b ŠKÁLA SO SRDIEČKAMI (vnútri tabu)

   ⚠️ Znak ♥ je PRIAMO V HTML ako text — nikdy cez SVG ani ::before.
      Shoptet SVG tagy z tela striehne.

   HTML:
     <div class="pnk-vlastnost">
       <span class="pnk-vlastnost__label">Vhodnosť pre rodiny</span>
       <div class="pnk-vlastnost__skala">
         <span class="pnk-vlastnost__od">Samotár</span>
         <div class="pnk-vlastnost__srdcia">
           <span class="pnk-s pnk-s--on">♥</span>
           <span class="pnk-s pnk-s--on">♥</span>
           <span class="pnk-s pnk-s--on">♥</span>
           <span class="pnk-s pnk-s--off">♥</span>
           <span class="pnk-s pnk-s--off">♥</span>
         </div>
         <span class="pnk-vlastnost__do">Rodinný typ</span>
       </div>
       <p class="pnk-vlastnost__popis">Popis vlastnosti.</p>
     </div>
   -------------------------------------------------------------------------- */

.pnk-vlastnost {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 18px;
  padding:       16px 20px;
  background:    var(--pnk-bg-karta);
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  font-family:   var(--pnk-font);
}

.pnk-vlastnost__label {
  display:       block;
  margin-bottom: 10px;
  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:      10px 0 0;
  font-size:   12.5px;
  line-height: 1.6;
  color:       var(--pnk-text-tlmeny);
}


/* -----------------------------------------------------------------------------
   19.3c BADGE SKUPINY + FAREBNÉ BODÍKY (tab Exteriér)

   HTML:
     <div class="pnk-vlastnost">
       <span class="pnk-vlastnost__sekcia">Typ srsti</span>
       <div class="pnk-badge-row">
         <span class="pnk-badge pnk-badge--on">✓ Krátka</span>
         <span class="pnk-badge pnk-badge--off">✗ Dlhá</span>
       </div>
     </div>

   Farby srsti — inline style na bodíku je JEDINÁ povolená výnimka
   z pravidla "žiadne inline štýly", lebo farba je pre každé plemeno iná:
     <span class="pnk-badge pnk-badge--on">
       <span class="pnk-farba-dot" style="background:#1a1a1a;"></span> Čierna
     </span>
   -------------------------------------------------------------------------- */

.pnk-vlastnost__sekcia {
  display:        block;
  margin-bottom:  10px;
  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-family:   var(--pnk-font);
  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);
}


/* -----------------------------------------------------------------------------
   19.4 ZDRAVIE — plemenné predispozície
   Každá predispozícia má 4 vrstvy: čo to je / kedy / čo všímať / kedy k vetovi

   HTML:
     <section class="pnk-zdravie" aria-label="Zdravotné predispozície">
       <div class="pnk-zdravie__polozka">
         <p class="pnk-zdravie__nazov">Dysplázia bedrových kĺbov</p>
         <p class="pnk-zdravie__co">Nesprávny vývoj bedrového kĺbu…</p>
         <dl class="pnk-zdravie__detaily">
           <dt>Kedy sa prejaví</dt><dd>Typicky 6–18 mesiacov</dd>
           <dt>Čo si všímať</dt><dd>Kolísavá chôdza, neochota vyskočiť</dd>
           <dt>Kedy k veterinárovi</dt><dd>Pri opakovanom krívaní po záťaži</dd>
         </dl>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.pnk-zdravie {
  max-width:   var(--pnk-maxw);
  margin:      0 auto 44px;
  font-family: var(--pnk-font);
}

.pnk-zdravie__polozka {
  margin-bottom:  16px;
  padding:        20px 22px;
  background:     var(--pnk-bg-karta);
  border:         1px solid var(--pnk-border);
  border-left:    3px 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 8px;
  font-size:   16px;
  font-weight: 600;
  color:       var(--pnk-text-nadpis);
}

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

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

.pnk-zdravie__detaily dt {
  padding:        8px 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:     8px 0;
  font-size:   13.5px;
  line-height: 1.6;
  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; }
}


/* -----------------------------------------------------------------------------
   19.5 REALITA — úprimný reality check
   HTML:
     <section class="pnk-realita" aria-label="Reality check">
       <div class="pnk-realita__riadok">
         <span class="pnk-realita__co">Padanie srsti</span>
         <span class="pnk-realita__ako">Celoročne, dvakrát ročne intenzívne</span>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.pnk-realita {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 44px;
  border:        1px solid var(--pnk-border);
  border-radius: var(--pnk-radius);
  overflow:      hidden;
  background:    var(--pnk-bg-karta);
  font-family:   var(--pnk-font);
}

.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:      15px 20px;
  background:   var(--pnk-bg-neutral);
  border-right: 1px solid var(--pnk-border);
  font-size:    var(--pnk-fs-maly);
  font-weight:  600;
  color:        var(--pnk-text-nadpis);
}

.pnk-realita__ako {
  padding:     15px 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-border-slaba);
  }
}


/* -----------------------------------------------------------------------------
   19.6 MÝTUS — vyvrátenie mýtov o plemene
   HTML:
     <div class="pnk-mytus">
       <p class="pnk-mytus__tvrdenie">„Stafordy sú agresívne plemeno."</p>
       <p class="pnk-mytus__pravda"><strong>Čo je na tom pravdy:</strong> …</p>
       <p class="pnk-mytus__realita"><strong>Ako to je:</strong> …</p>
     </div>
   -------------------------------------------------------------------------- */

.pnk-mytus {
  max-width:     var(--pnk-maxw);
  margin:        0 auto 20px;
  padding:       22px 24px;
  background:    var(--pnk-bg-neutral);
  border-radius: var(--pnk-radius);
  font-family:   var(--pnk-font);
}

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

.pnk-mytus__pravda,
.pnk-mytus__realita {
  margin:      0 0 10px;
  font-size:   14px;
  line-height: 1.65;
  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; }


/* -----------------------------------------------------------------------------
   19.7 ALTERNATÍVNE PLEMENÁ
   HTML:
     <section class="pnk-alternativy" aria-label="Alternatívne plemená">
       <div class="pnk-alternativy__karta">
         <div class="pnk-alternativy__hlavicka">
           <span class="pnk-alternativy__vlajka">🇫🇷</span>
           <span class="pnk-alternativy__nazov">Bordeauxská doga</span>
         </div>
         <p class="pnk-alternativy__popis">Krátky popis plemena.</p>
         <p class="pnk-alternativy__rozdiel-label">Kľúčový rozdiel</p>
         <p class="pnk-alternativy__rozdiel">Text rozdielu.</p>
         <p class="pnk-alternativy__koho-label">Pre koho</p>
         <p class="pnk-alternativy__koho">Text.</p>
       </div>
       … 4 karty celkom
     </section>
   -------------------------------------------------------------------------- */

.pnk-alternativy {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   18px;
  max-width:             var(--pnk-maxw);
  margin:                0 auto 44px;
  font-family:           var(--pnk-font);
}

.pnk-alternativy__karta {
  padding:       20px 22px;
  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: 12px;
  margin-bottom:  12px;
  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);
}

/* Metriky — energia, grooming, náročnosť pre majiteľa */
.pnk-alternativy__metriky {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px;
  margin:         0 0 14px;
  padding-bottom: 14px;
  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-bg-neutral);
  border-radius: var(--pnk-radius-pill);
  font-size:     11.5px;
  color:         var(--pnk-text-tlmeny);
}

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

.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 12px;
  font-size:   13px;
  line-height: 1.6;
  color:       var(--pnk-text-body);
}

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


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

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

/* Viditeľný focus pre klávesnicu */
.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;
    color:      #000;
  }

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


/* =============================================================================
   KONIEC — pnk-blog.css v1.2.0
   ============================================================================= */
