/* FakturujOnline 2026 – BLOG (home.php /blog/, category.php, author.php, search.php, archive.php; 404.php cez w2b_css_blog()).
   Načítava sa po zaklad.css len na zoznamoch článkov (w2_typ() = "blog"). Karta článku .pcard, .box, tlačidlá a stránkovanie sú v zaklad.css.
   Maketa: docs/navrh-webu-2026-10-03/blog.html (v2). Šablóny: inc/blog.php (predpona w2b_, triedy .bh .btabs .blead .bl .binl .bside .bodp .bsearch .bnic .b404). */

/* ---------- Hlavička zoznamu ---------- */
.bh{background:var(--bg);padding:56px 0 40px;border-bottom:1px solid var(--line)}
.bh h1{font-size:46px;margin:14px 0 10px;overflow-wrap:break-word}
.bh h1:first-child{margin-top:0}
.bh__x{font-size:18px;color:var(--mut);max-width:640px}

/* Záložky kategórií (skutočné kategórie a odkazy) */
.btabs{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.btabs a{padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font:600 14px/1.2 var(--f-text);color:#344054;white-space:nowrap;text-decoration:none}
.btabs a:hover{border-color:#c5cfdf;color:var(--navy)}
.btabs a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}

/* Vyhľadávací formulár (hlavička, bočný panel, 404) */
.bsearch{display:flex;gap:10px}
.bsearch .pole{flex:1;min-width:0;padding:13px 14px}
.bsearch .btn{padding:13px 18px;font-size:15px}
.bsearch--h{max-width:560px;margin-top:24px}
.bsearch--h .pole{padding:15px 16px}
.bsearch--h .btn{padding:15px 22px}

/* ---------- Rozloženie: obsah + bočný panel ---------- */
.bwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:48px;padding-bottom:96px;align-items:start}

/* Hlavný článok (obrázok vľavo, text vpravo) */
.blead{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:36px;background:#fff;color:var(--ink);text-decoration:none!important;transition:box-shadow .15s}
.blead:hover{box-shadow:var(--sh)}
.blead__m{position:relative;min-height:300px;background:var(--bg)}
.blead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blead__b{padding:30px 30px 30px 0;display:flex;flex-direction:column}
.blead__t{font-size:28px;line-height:1.2;margin:12px 0}
.blead__x{color:var(--mut)}
.blead__mt{margin-top:16px;font-size:13.5px;color:var(--mut)}
.blead:not(:has(.blead__m)){grid-template-columns:1fr}
.blead:not(:has(.blead__m)) .blead__b{padding:30px}

/* Mriežka článkov (2 stĺpce) a vložená výzva */
.bl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.bl .pcard__x{margin-bottom:2px}
.bl .pcard--siroka{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.bl .pcard--siroka .pcard__img{height:100%;min-height:200px;aspect-ratio:auto}
.bl .pcard--siroka .pcard__b{padding:24px 26px}
.pcard--ine{border-style:dashed}
.binl{grid-column:1/-1;border-radius:20px;background:linear-gradient(120deg,#002c58,#0c4a8f);color:#d6e3fb;padding:30px 34px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.binl__t{color:#fff;font-size:24px;line-height:1.2;margin-bottom:6px}
.binl p{font-size:15.5px;line-height:1.55}
.binl .btn{flex:none}

/* Bočný panel */
.bside{display:grid;gap:22px;align-content:start;align-items:start;position:sticky;top:calc(var(--hdr-h) + 24px)}
.bside .box p:last-child{margin-bottom:0}
.bside .box--cta .ico{margin-bottom:14px;background:#fff}
.bodp ol{margin:12px 0 0;padding-left:20px;font-size:14.5px;line-height:1.45;display:grid;gap:12px}
.bodp li::marker{color:var(--blue);font-weight:800}
.bodp a{color:var(--ink)}
.bodp a:hover{color:var(--blue)}
.bside .bsearch{margin-top:12px}

/* Bez výsledkov, nadpis sekcie */
.bnic{border:1px solid var(--line);border-radius:18px;padding:26px 28px;background:#fff;margin-bottom:36px}
.bnic__t{font-size:24px;margin-bottom:8px}
.bnic p{color:var(--mut)}
.bnic .btabs{margin-top:18px}
.bsek{font-size:26px;margin:0 0 20px}

/* Stránkovanie: nadpis pre čítačky (WordPress pridáva <h2 class="screen-reader-text">) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pagination .page-numbers.dots{border-color:transparent}
.pagination a.page-numbers:hover{border-color:var(--blue);text-decoration:none}

/* ---------- 404 ---------- */
.b404 .bh__x{max-width:620px}
.b404__a{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.b404__in{padding-top:48px;padding-bottom:96px}
.b404__app{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 22px;align-items:center;margin-bottom:56px}
.b404__app p{margin:0}
.b404__app .ico{background:#fff}
.b404__btn{display:flex;gap:10px;flex-wrap:wrap}
.b404__in .pgrid{margin-bottom:56px}
.b404__in .btabs{margin-top:0}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .bwrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .bside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* výzva cez celú šírku vodorovne: ikona | nadpis + text | tlačidlo */
  .bside .box--cta{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 20px;align-items:center}
  .bside .box--cta .ico{grid-row:1/3;margin:0}
  .bside .box--cta .box__t{grid-column:2;margin:0}
  .bside .box--cta p{grid-column:2;margin:0}
  .bside .box--cta .btn{grid-column:3;grid-row:1/3;width:auto}
  .b404__app{grid-template-columns:auto minmax(0,1fr)}
  .b404__btn{grid-column:1/-1}
}
/* ---------- Mobil: kompaktný zoznam ---------- */
@media (max-width:760px){
  .bh{padding:34px 0 26px}
  .bh h1{font-size:32px;margin-bottom:8px}
  .bh__x{font-size:16px}
  /* záložky v jednom riadku s posuvom; aktívna kategória hneď za „Všetko“ */
  .btabs{flex-wrap:nowrap;overflow-x:auto;margin:22px calc(var(--gut) * -1) 0;padding:0 var(--gut) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .btabs::-webkit-scrollbar{display:none}
  .btabs a{flex:none}
  .btabs .btabs__v{order:-2}
  .btabs a[aria-current]{order:-1}
  .bnic .btabs,.b404__in .btabs{flex-wrap:wrap;overflow:visible;margin:18px 0 0;padding:0}
  .b404__in .btabs{margin-top:0}
  .bsearch--h{margin-top:18px}
  .bsearch--h .btn{padding:15px 16px}

  .bwrap{padding-top:28px;padding-bottom:64px;gap:30px}
  .blead{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:26px}
  .blead__m{min-height:0;aspect-ratio:16/9}
  .blead__b{padding:20px}
  .blead__t{font-size:23px;margin:10px 0}
  .blead__x{font-size:15.5px}

  .bl,.bkomp{grid-template-columns:minmax(0,1fr);gap:18px}
  :is(.bl,.bkomp) .pcard,:is(.bl,.bkomp) .pcard--siroka{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:start;grid-column:auto;border:0;border-bottom:1px solid var(--line);border-radius:0;padding-bottom:18px;background:none;overflow:visible}
  :is(.bl,.bkomp) .pcard:hover{box-shadow:none;transform:none}
  :is(.bl,.bkomp) .pcard__img,.bl .pcard--siroka .pcard__img{width:110px;height:110px;min-height:0;aspect-ratio:1;border-radius:12px}
  :is(.bl,.bkomp) .pcard__b,:is(.bl,.bkomp) .pcard--siroka .pcard__b{padding:0 0 0 14px;gap:6px}
  :is(.bl,.bkomp) .pcard__cat{font-size:11.5px}
  :is(.bl,.bkomp) .pcard__t{font-size:16.5px;line-height:1.28}
  :is(.bl,.bkomp) .pcard__x{display:none}
  :is(.bl,.bkomp) .pcard__m{font-size:13px}
  :is(.bl,.bkomp) .pcard:not(:has(.pcard__img)){grid-template-columns:minmax(0,1fr)}
  :is(.bl,.bkomp) .pcard:not(:has(.pcard__img)) .pcard__b{padding:0}
  :is(.bl,.bkomp) .pcard--ine .pcard__x{display:block}
  .binl{flex-direction:column;align-items:stretch;padding:24px 20px;gap:18px}
  .binl__t{font-size:22px}
  .binl .btn{width:100%}

  .bside{grid-template-columns:minmax(0,1fr)}
  .bside .box--cta{display:block}
  .bside .box--cta .ico{margin-bottom:14px}
  .bside .box--cta .box__t{margin-bottom:8px}
  .bside .box--cta p{margin-bottom:16px}
  .bside .box--cta .btn{width:100%}
  .bnic{padding:22px 20px}
  .bsek{font-size:23px}

  /* stránkovanie: až 9 položiek (‹ 1 … 5 6 7 … 12 ›) v jednom riadku aj na 360 px */
  .pagination .nav-links{gap:4px;margin-top:32px}
  .pagination .page-numbers{min-width:min(44px,calc((100vw - 2 * var(--gut) - 32px) / 9));height:42px;padding:0 2px;font-size:15px}

  .b404__in{padding-top:32px;padding-bottom:64px}
  .b404__app{grid-template-columns:minmax(0,1fr);margin-bottom:40px;padding:22px 20px}
  .b404__app .ico{display:none}
  .b404__btn .btn,.b404__a .btn{flex:1 1 auto}
}