/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Balíky Flexi vs Komplet (Figma "VypocetCeny-R", 569:26812)

   Sekcia biela (--color-bg), pt=section-medium 80 / pb=section-small 48 /
   px=page-padding 64. Vnútri bg-medium panel (radius-xl 40 len nahor), obsah
   nadpis+text (400px stĺpec) + 2 cenové karty (Price Box vzor 1:1 zhodný s
   `zenturi/bento-2` featured kartou - rovnaký border/shadow/gradient, REUSE
   1:1, žiadny nový shadow token). CTA = globálne `.btn`/`.btn--outline`/
   `.btn--primary`, blok len width:100% override (žiadny nový button vzhľad).

   Vlnitý spodný okraj panela (Figma Frame 15937, 569:26881, 2 vlny) =
   flattened SVG export cez <img> 100% šírka, žiadny CSS mask/tile trik
   (jednoduchšie a spolehlivejšie než reprodukovať 2× flex-1 -39px overlap).
   Rovnaká farba panela aj vlny (bg-medium) → švík medzi nimi neviditeľný.

   "Odporúčané" odznak na zvýraznenej karte = zástavka s vlnitým chvostom
   (Figma "image 5") - absolute top:0 (= vnútorná hrana ramu, horný rám ostáva
   súvislý), centered, BEZ radiusu. Zdiela asset aj mechaniku s `.zn-b2__ribbon`
   v bento-2 (ta ista Figma karta 625:28091).

   POZOR farby: telo textu (.zn-pkc__text) = literálna #000000 (Color Scheme
   1/Text, `var(--color-black)`), NIE `var(--color-text)` (#023047, Scheme
   A/Text) - iná čierna, over v Figme pred zmenou (CLAUDE.md pasca).

   MOBIL (≤767.98px): Figma node 1181:70985 (nájdený Marošom, layer "VypocetCeny-R" -
   recyklovaný Figma layer name, ale obsah zodpovedá tejto sekcii, pozícia sedí za
   "Porovnanie vs M" na "Zenturi Komplet-M"). Overené `get_design_context` +
   `get_variable_defs` V MOBILNOM MÓDE (nie JSX literály - tie majú stale desktop
   fallback, klasická "Auto (Desktop)" pasca): sekcia py=section-small 32 (OBOJSTRANNE,
   nie asymetricky ako desktop pt=medium/pb=small), px=page-padding 16, panel radius-large
   24 (nie xlarge 40), panel pt/pb/px = div-padding-small 16 / div-padding-large 24 / 16,
   row gap = div-padding-large 24, text-stĺpec gap = div-padding-medium 20, Size/H1 = 40
   (JSX literál 56px je stale desktop fallback - IGNOROVANÉ), Size/H4 (karta-name) = 24
   (JSX literál 32px rovnako stale - IGNOROVANÉ). Karty sa STACKUJÚ (Flexi nad Maximum,
   rovnaké poradie ako desktop, žiadny reorder). Cena (Price/Serif 56px) NEMÁ mobilný
   token v exporte (plain literál, nie named size premenná) → necháva sa na fluidnom
   clamp (--text-7xl), rovnako ako Top Info/hr/tlačidlo padding - identické s desktopom
   (Figma literály nezmenené). Vlna dole = rovnaký flattened asset, škáluje sám (žiadna
   zmena potrebná).

   TABLET (≤1199.98px): generický medzikrok, Figma preň nemá spec (rovnaká konvencia
   ako bento-1/section-base-2). Nahlásené Marošom: zdedený desktop side-by-side layout
   sa pri ~1000px rozpadá (fixný 400px text stĺpec necháva na 2 karty len ~500px →
   ~245px/karta → odseknutý nadpis "Maximum" + pretečený label tlačidla). Fix: text
   stĺpec nad karty (flex:none;width:100%), karty ZOSTÁVAJÚ vedľa seba (dosť miesta
   pri plnej šírke panela - ~450-500px/karta), žiadny ďalší stack potrebný.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-pkc {
  background: var(--color-bg);
  padding-inline: var(--space-16);
}
.zn-pkc.zn-block { --zn-pt: var(--space-20); --zn-pb: var(--space-12); }

.zn-pkc__container { max-width: var(--container-max); margin-inline: auto; }

.zn-pkc__panel {
  background: var(--color-bg-medium);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-20) var(--space-20) var(--space-12);
}

.zn-pkc__row { display: flex; align-items: stretch; gap: var(--space-12); }

.zn-pkc__col-text {
  flex: 0 0 400px;
  width: 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.zn-pkc__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-pkc__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);
}
.zn-pkc__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-black);           /* literálna čierna, nie --color-text - viď hlavička */
}

.zn-pkc__cards { flex: 1 1 0; min-width: 0; display: flex; gap: var(--space-2); }

.zn-pkc__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Rám = klasický `border`, nie inset tieň — horný rám musí ostať súvislý a štítok
   začína tesne pod ním (dôvod aj mechanika presne ako v `bento-2`). */
.zn-pkc__card--featured {
  border: 2px solid var(--color-primary-dark);
  box-shadow: 0 20px 24px -4px rgba(178, 95, 0, .1), 0 8px 8px -4px rgba(178, 95, 0, .05);
  background:
    linear-gradient(90deg, rgba(253, 233, 180, .1), rgba(253, 233, 180, .1)),
    var(--color-white);
}

.zn-pkc__card-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 var(--space-6) var(--space-4);   /* 24 / 16 */
}

.zn-pkc__card-top { padding: var(--space-6) var(--space-6) var(--space-2); text-align: center; border-radius: var(--radius-sm); }
.zn-pkc__card-top--featured { padding-top: 30px; }

.zn-pkc__card-name {
  margin: 0;
  font-style: italic;
  font-weight: 580;                    /* Mix Medium Italic - literál, rovnaká konvencia ako zn-b2__card-name */
  font-size: var(--text-4xl);
  line-height: 1.3;
  letter-spacing: -1px;                /* Heading/H4-A: letterSpacing -1 (nie -0.32) */
  color: var(--color-secondary);
}
.zn-pkc__card-desc { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
/* Popis zvýraznenej karty je vo Figme DVOJFAREBNÝ: prvý úsek Text/Small/Semi Bold
   (650) v Scheme A/Text #023047, zvyšok Text/Small/Normal (400) v Text Secondary.
   Bežná karta (Balik-Flexi 625:28090) `Text/Small/Semi Bold` v premenných NEMÁ
   vôbec - preto tmavú farbu dostáva len `--featured`. */
.zn-pkc__card-desc strong { font-weight: var(--weight-semibold); }
.zn-pkc__card--featured .zn-pkc__card-desc strong { color: var(--color-text); }

.zn-pkc__hr { width: 100%; height: 1px; margin: 0; border: 0; background: #dbdbdb; }

.zn-pkc__price-box { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.zn-pkc__price { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0 0 -6px; color: var(--color-primary-dark); }
.zn-pkc__price-value { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-tagline); font-size: var(--text-7xl); line-height: 1.1; }  /* Heading/H1-A: weight 420 (JSX literál hlásil SemiBold - stale, token rozhoduje) */
.zn-pkc__price-cur   { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-3xl); line-height: 1.4; }
.zn-pkc__price-period { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }

.zn-pkc__btn { width: 100%; }

/* "Odporúčané" odznak = zástavka pod horným rámom karty. Je to TEN ISTÝ prvok ako
   `.zn-b2__ribbon` v `bento-2` (Figma 625:28091 / mobil 1181:70994), preto zdieľa
   aj asset chvosta aj mechaniku: `top: 0` = vnútorná hrana rámu, takže horný rám
   ostáva súvislý. BEZ radiusu - zástavka, nie pilulka (radius 8 tu bol do v1.22.17
   a zaoblil aj vlnky, lebo ich orezával `overflow: hidden`). */
.zn-pkc__tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Chvost ako flex položka pod labelom; asset nesie len tvar, farbu dáva token
   (predtým `<img>` s vlastným 140x7 rastrom - pomer 20 namiesto Figma 22.857,
   teda vlnka o 0.875px vyššia než dizajn). */
.zn-pkc__tag::after {
  content: '';
  width: 100%;
  aspect-ratio: 2560 / 112;                    /* Figma image 5 → 140 x 6.125 */
  background: var(--color-primary);
  -webkit-mask: url('../../../assets/img/ribbon-tail.png') 0 0 / 100% 100% no-repeat;
  mask: url('../../../assets/img/ribbon-tail.png') 0 0 / 100% 100% no-repeat;
}
.zn-pkc__tag-label {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-black);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
  padding: 3px 10px 0;
}

/* Vlnitý spodný okraj panela - flattened export, škáluje na 100% šírky. */
.zn-pkc__wave { display: block; width: 100%; height: auto; }

@media (max-width: 1199.98px) {
  .zn-pkc__row { flex-direction: column; gap: var(--space-5); }
  .zn-pkc__col-text { flex: none; width: 100%; }
  /* Zlom po „Komplet" (v poli `pkc_heading_accent`) platí LEN kým je stĺpec 400 -
     tak ho má Figma 569:27043 (400x248, 4 riadky, `<br>` po „Komplet"). Tu sa
     stĺpec roztiahne na plnú šírku a vynútený zlom by nechal „Komplet" osamote
     na riadku. Mobil 1181:70985 zlom tiež nemá (3 riadky, overené ink meraním),
     takže vypnúť ho treba už od 1199.98, nie až od 767.98 ako `zn-brk` sám.
     Dvojtriedny selektor prebíja globálne `@media(min-width:768px) br.zn-brk`. */
  .zn-pkc__heading br.zn-brk { display: none; }
}

@media (max-width: 767.98px) {
  .zn-pkc { padding-inline: 16px; }
  .zn-pkc.zn-block { --zn-pt-m: 32px; --zn-pb-m: 32px; }   /* section-small 32, obojstranne */

  .zn-pkc__panel {
    padding: 16px 16px 24px;                                /* div-padding-small 16 / div-padding-large 24 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;   /* radius-large 24, nie xlarge 40 */
  }

  .zn-pkc__row { flex-direction: column; gap: 24px; }       /* div-padding-large 24 */

  .zn-pkc__col-text { flex: none; width: 100%; gap: 20px; } /* div-padding-medium 20 */
  .zn-pkc__heading { font-size: 40px; }                     /* Size/H1 mobilný mód 40 (nie stale 56 z JSX) */

  .zn-pkc__cards { flex-direction: column; }
  .zn-pkc__card { flex: none; width: 100%; }

  .zn-pkc__card-name { font-size: 24px; }                   /* Size/H4 mobilný mód 24 (nie stale 32 z JSX) */

  /* ── Karta na mobile končí popisom: oddeľovač, cena AJ tlačidlo sa skrývajú ──
     Figma inštancia Balik-Flexi (1181:70993) je 329×138 a jej Price Box vnútri 297×122,
     ale `hr` sedí na y=146, Price container na y=165 a Button na y=184 (+48) — všetko
     pod 122 je rámom ORezané, takže render nodu ukazuje len italic názov balíka a popis.
     Skrýva sa CSS-om, nie odstránením poľa či zmenou PHP — desktop musí zostať netknutý
     (tam je cena 281.8×140.8 a CTA plne funkčné) a klient si hodnoty ďalej edituje.
     `display: none` (nie `visibility`), aby po popise nezostala prázdna medzera.
     POZOR na kaskádu (CLAUDE.md): `.btn` v components.css sa načítava PO blokových
     štýloch, takže jednotriedny `.zn-pkc__btn` by prehral (`display:inline-flex` z `.btn`
     by ostal). Preto `.btn.zn-pkc__btn` — dve triedy na tom istom prvku. */
  .zn-pkc__hr,
  .zn-pkc__price-box { display: none; }
  .btn.zn-pkc__btn { display: none; }
}