/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Blog archív, sekcie 3+4: newsletter panel + druhá mriežka kariet
   s tlačidlom „Načítať ďalšie" (Figma „VypocetCeny-R" 701:32596 desktop /
   1201:104035 mobil, „Section / Bento 2" 701:31462 desktop / 1201:103380 mobil).

   NIE JE Lazy Block - `views/parts/blog-newsletter.php`, obe sekcie fixné
   partialy v `views/parts/blog-archive-body.php` (Ján: „injection", šablóna
   ich do Blog archívu vstrekuje, nie admin).

   Vlnka = ROVNAKÁ geometria ako `hero-split` (byte-identická path dáta,
   overené diffom) - lokálna kópia `assets/img/blog-newsletter/wave.svg`,
   rovnaký -3.415% overlap mechanizmus (viď interné poznámky). NIE `wave-sep` (ten je
   iný mechanizmus - dlaždicový PNG background, nie 2 prekrývajúce sa SVG).

   Druhá mriežka kariet REUSE-UJE `.zn-blog-grid`/`.zn-blog-card`
   (components.css) - karta je vo Figme na oboch mriežkach IDENTICKÁ (overené
   `get_design_context` na 701:31466-701:31468 vs 701:31455-701:31460, ten istý
   gap/padding/radius/tag). Tu je preto len OBALOVÁ sekcia (iné odsadenie než
   `.zn-tools` - symetrické pt/pb, nie 48/80) + tlačidlový rad.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Blog-scoped override sekcie 2 (tab bar + mriežka 1, Figma „Section / Bento 1"
   701:31450 desktop / 1201:103353 mobil). Sekcia samotná (`.zn-tools`,
   `.zn-tools__tabbar`) žije v tools.css a je ZDIEĽANÁ s pomôckami/integráciami
   (inc/tools-archive.php, inc/integrations-archive.php) - tie majú na mobile
   VEĽA kategórií a potrebujú scroll od ľavého okraja (`justify-content:
   flex-start`, zámerne). Blog má len 2 statické taby („Blog"/„Novinky"), Figma
   mobilný frame ich má VYCENTROVANÉ (sekcia je flex-col items-center, Tabs je
   priamy potomok - rovnaký vzor ako load-more tlačidlo vyššie). Fix preto ide
   cez `.zn-blog-tools` namespace (pridaná trieda na `<section>` v
   `blog-archive-body.php`), NIE úpravou zdieľanej `.zn-tools__tabbar` -
   pomôcky/integrácie musia zostať presne také, aké boli.

   🔴 `justify-content: center` na `.zn-tools__tabbar` SAMOTNÉ NESTAČÍ - overené
   meraním s 6 dočasnými prázdnymi kategóriami (8 tabov, pretečenie): pri
   `overflow-x: auto` + `justify-content: center` sa PRVÝ tab („Blog") stane
   TRVALO nedosiahnuteľným (nameraný `left: -366px` aj pri `scrollLeft = 0`,
   `scrollWidth` menší než reálna šírka obsahu o presne ten orezaný kus -
   centrovanie posunie obsah do záporného priestoru, kam `overflow-x: auto`
   scrollovať nevie, keďže `scrollLeft` nejde pod 0). Fix preto NIE JE na
   kontajneri, ale na `.zn-tools__tabs` (vnútorná "pilulka"):
   `margin-inline: auto` - keď je voľné miesto (2 taby, blog dnes), auto
   margin ho rozdelí rovnako na obe strany = centrovanie; keď obsah pretečie
   (8 tabov), auto margin skolabuje na 0 (nemôže byť záporný) a prvok začína
   presne na ľavom okraji = identické k pôvodnému `flex-start` správaniu,
   scroll dosiahne prvý aj posledný tab bez straty. Kategórie po overení
   zmazané (`wp term delete`). */
@media (max-width: 767.98px) {
  .zn-blog-tools .zn-tools__tabs {
    margin-inline: auto;
  }
}

/* Odstup tab bar → mriežka, DESKTOP (≥768px, nemedia-query default - mobilné
   pravidlo nižšie ho pri ≤767.98px prebije). Rovnaký chýbajúci `margin-top` ako
   mobil vyššie - Figma 701:31450 (get_design_context, sekcia = flex-col
   items-center gap-[48px] priamo medzi "Tabs" a "Container") má 48.
   `var(--space-12)` je fluid clamp(2.5rem,3.4vw,3rem) = 40-48px, ale MATEMATICKY
   sa na 48 (max) vyplošťuje pri KAŽDOM viewporte ≥ 1411,76px (kde 3.4vw
   prekročí 48) - pri 1440 aj 1920 (overené meraním, obe 48,00px) teda token
   sedí presne, nie je to odhad. Použitie tokenu namiesto literálu je zámerné:
   rovnaký token už nesie identickú hodnotu na `.zn-tools`/`.zn-blog-more`
   vyššie (aj tie sú vyladené len pre bežné desktop šírky ≥1412px, nie pre
   úzky desktop/tablet medzi 768-1411px, kde by vyšlo menej než 48 - to je
   mimo zadania tejto opravy, existujúci stav v celom súbore). */
.zn-blog-tools .zn-blog-grid {
  margin-top: var(--space-12);
}

@media (max-width: 767.98px) {
  .zn-blog-tools .zn-blog-grid {
    /* Odstup tab bar → mriežka. `.zn-tools__grid` (pomôcky/integrácie) má
       vlastný `margin-top`, `.zn-blog-grid` (components.css, zdieľaná s
       mriežkou 2 nižšie) ho nemá - blog preto bez tohto pravidla dosadal na
       tab bar bez medzery (nameraných 0 px). LITERÁL cez fixný token, nie
       fluid clamp (rovnaká pasca ako `.zn-tools`/`.zn-blog-more` vyššie):
       Div Padding/div-padding-large (mobil) = 24 = `--space-6` (fixný 1.5rem).
       Desktop rieši samostatné pravidlo vyššie (`margin-top: var(--space-12)`,
       48px) - tu len mobilný override, prebíja ho pri ≤767.98px. */
    margin-top: var(--space-6);
  }
}

.zn-blog-nwl {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
  padding-block: var(--space-4);                /* Div Padding/div-padding-xsmall 16 */
}
.zn-blog-nwl__inner {
  max-width: var(--container-max);              /* Container/container-large 1280 */
  margin-inline: auto;
}

.zn-blog-nwl__panel {
  position: relative;
  background: var(--color-text);                /* Scheme A/Foreground #023047 (Figma alias
                                                     „Background Medium" tu mieri na navy -
                                                     módová zvláštnosť súboru, hodnota rozhoduje) */
  padding: var(--space-20) var(--space-20) var(--space-12);  /* pt 80 / px 80 / pb 48 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;      /* Radius/XLarge 40 */
}

.zn-blog-nwl__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);                          /* div-padding-large 48 */
}

.zn-blog-nwl__col {
  flex: 1 1 0%;
  min-width: 0;
  width: 558px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                           /* div-padding-medium 32 */
  padding-block: 6px;                            /* Figma literál - optický posun stĺpca */
}

.zn-blog-nwl__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                    /* Size/H1 56, fluid (H2 tag, H1-veľkosť podľa Figmy) */
  line-height: 1.1;
  color: var(--color-white);
}
.zn-blog-nwl__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);            /* Mix Regular Italic */
  color: var(--color-secondary-light);           /* #8ecae6 */
}

.zn-blog-nwl__text {
  margin: 0;
  font-size: var(--text-base);                   /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-white);
}

.zn-blog-nwl__actions { display: flex; flex-direction: column; gap: var(--space-2); }  /* 8 */

/* CF7 obalí obsah do vlastného <p> (auto-paragraph) - fallback formulár ho
   nemá (rovný <form>), preto flex platí na OBOCH úrovniach, rovnaký vzor ako
   `.zn-footer__news-form form, .zn-footer__news-form .wpcf7-form p`. */
/* Cieli sa aj holé `.wpcf7-form p` (nielen wrapper `.zn-blog-nwl__form-row`):
   shortcode newsletter formulára je JEDEN pre všetky tri panely (Nastavenia →
   Zenturi - Formuláre), takže sa nedá spoliehať na to, že vložený formulár má
   práve tento wrapper. */
.zn-blog-nwl__form-row,
.zn-blog-nwl__form-row p,
.zn-blog-nwl__form .wpcf7-form > div,
.zn-blog-nwl__form .wpcf7-form p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);                            /* 16 */
  width: 100%;
  margin: 0;
}
.zn-blog-nwl__form .wpcf7-form-control-wrap { flex: 1 1 0%; }
.zn-blog-nwl__form input[type="email"] {
  display: block;
  width: 100%;
  height: 48px;                                   /* Input token 48 */
  padding: 8px 12px;
  background: var(--color-text);                  /* Scheme A/Foreground - splýva s panelom */
  /* Scheme A/Inputs/Base = --color-primary-lighter (#fde9b4) pri 60% alfe */
  border: 1px solid rgb(253 233 180 / 0.6);
  border-radius: var(--radius-input);             /* Radius/Inputs 12 */
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-base);
}
.zn-blog-nwl__form input[type="email"]::placeholder { color: var(--color-bg-medium); }
.zn-blog-nwl__form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
/* Tlačidlo = DS `.btn.btn--white` (biele na tmavom), vzhľad sa tu nedefinuje
   nanovo - len flex-shrink, nech ho input (flex:1) nezúži. */
.zn-blog-nwl__form .btn { flex-shrink: 0; }

.zn-blog-nwl__form .wpcf7-not-valid-tip { font-size: var(--text-xs); color: var(--color-primary-lighter); }
.zn-blog-nwl__form .wpcf7-response-output { color: var(--color-white); font-size: var(--text-sm); margin-top: var(--space-2); }
.zn-blog-nwl__form .wpcf7-spinner { position: absolute; }

.zn-blog-nwl__consent {
  margin: 0;
  font-size: var(--text-xs);                      /* Size/Tiny 12 */
  line-height: 1.2;
  color: var(--color-bg-medium);                  /* #ecf2f4 (Figma "Text Secondary" na tomto
                                                        paneli) - AA kontrast na #023047 = 12,79:1 */
}

.zn-blog-nwl__media {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  aspect-ratio: 514 / 342.67;                     /* namerané na 701:32608 */
  border-radius: var(--radius-base);              /* Radius/Base 16 */
  overflow: hidden;
}
.zn-blog-nwl__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Gradient rovnaký ako Figma overlay (39,042% priehľadná -> 100% plná navy) -
   asset samotný fade NEMÁ (overené alfa profilom pred exportom, interné poznámky
   pravidlo o nezapečenom fade). */
.zn-blog-nwl__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 48, 71, 0) 39.042%, var(--color-text) 100%);
  pointer-events: none;
}

.zn-blog-nwl__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-blog-nwl__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-blog-nwl__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec (konvencia hero-split) ══ */
@media (max-width: 1199.98px) {
  .zn-blog-nwl { padding-inline: var(--space-8); }
}

/* ══ Mobil (≤767.98px) - Figma „Blog-m" 1201:104035 ══ */
@media (max-width: 767.98px) {
  .zn-blog-nwl {
    padding-inline: var(--space-4);               /* Page Padding (mobil) 16 */
    padding-block: var(--space-2) var(--space-6);  /* pt 8 / pb 24 */
  }
  .zn-blog-nwl__panel {
    padding: var(--space-4) var(--space-4) var(--space-6);  /* pt 16 / px 16 / pb 24 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;   /* Radius/Large 24 */
  }
  .zn-blog-nwl__row { flex-direction: column; gap: var(--space-6); }  /* 24 */
  .zn-blog-nwl__col { width: 100%; gap: var(--space-5); }             /* div-padding-medium (mobil) 20 */
  .zn-blog-nwl__heading { font-size: 2.5rem; }     /* Size/H1 (mobil) 40 */
  .zn-blog-nwl__form-row,
  .zn-blog-nwl__form-row p { flex-direction: column; }
  .zn-blog-nwl__form .btn { width: 100%; }
  .zn-blog-nwl__media { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Druhá mriežka + „Načítať ďalšie" (Figma „Section / Bento 2" 701:31462
   desktop / 1201:103380 mobil). Mriežka/karta = `.zn-blog-grid`/`.zn-blog-card`
   (components.css, reuse - viď hlavička súboru). Tlačidlo = DS `.btn.btn--primary`,
   vzhľad sa tu nedefinuje nanovo.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-blog-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);                          /* div-padding-large 48 */
  background: var(--color-bg-medium);            /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);               /* Page Padding/padding-global 64 */
  padding-block: var(--space-20);                /* Section Padding/section-medium 80, symetrické */
}
.zn-blog-more__inner {
  width: 100%;
  max-width: var(--container-max);               /* Container/container-large 1280 */
  margin-inline: auto;
}

/* 🔴 PLACEHOLDER (blokáda `/blog/`, CONTEXT.md, 2026-08-23; interaktívny od
   2026-09-02): tlačidlo bez reálnej ďalšej stránky je teraz obyčajný
   `<button class="btn btn--primary">` bez `aria-disabled` (viď else vetva v
   `blog-archive-body.php`) - plný DS vzhľad aj hover z components.css, žiadne
   lokálne prebíjanie farieb už netreba. Pôvodné pravidlo
   `.zn-blog-more__button--placeholder[aria-disabled]` (prebitie šedej späť na
   žltú) padlo spolu s `aria-disabled` markupom. */

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec (konvencia hero-split) ══ */
@media (max-width: 1199.98px) {
  .zn-blog-more { padding-inline: var(--space-8); }
}

/* ══ Mobil (≤767.98px) - Figma „Section / Bento 2" 1201:103380 ══ */
@media (max-width: 767.98px) {
  .zn-blog-more {
    padding-inline: var(--space-4);              /* Page Padding (mobil) 16 */
    /* 🔴 LITERÁL, nie var(--space-12): --space-12 je fluid clamp(2.5rem,3.4vw,3rem)
       (div-padding-large/section-small škála), pri 393px vyjde ~40px, nie fixných
       48. Section Padding/section-medium (mobil) je vo Figme PEVNÝCH 48
       (get_variable_defs na 1201:103380), nezávisle od viewportu - rovnaká pasca
       ako hero/hero-level2 (interné poznámky, fluid token použitý tam, kde má byť fixná
       mobilná hodnota). Kontrola: computed padding-top/-bottom pri 393px = 48px. */
    padding-block: 48px;
    gap: var(--space-6);                         /* div-padding-large (mobil) 24 */
  }
}