/* SPOJAK.sk — Magazín (rozcestník článkov)
   Unikátne sekcie: featured hero + side, topics strip, filter, grid kariet článkov, newsletter.
   Zdieľané (header/footer/nav/btn/toast/crumbs) sú v base.css — NEduplikovať.
   .chip/.sec/.nlstrip/.nohit existujú aj v akcie.css, ale stránky sa nenačítajú spolu. */

.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{background:#f0f0f0}

/* ===== HERO (featured) ===== */
.mhero{padding:26px 28px;display:grid;grid-template-columns:1.5fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.feat{background:var(--ink);color:#fff;border-radius:var(--rad-lg) 0 0 var(--rad-lg);padding:34px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;text-decoration:none}
.feat .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px}
.feat .ficon{position:absolute;top:30px;right:34px;font-size:90px;color:rgba(200,35,44,.25)}
.feat .rel{position:relative}
.feat .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red-on-dark);font-weight:500;margin-bottom:14px}
.feat .eyebrow .cat{background:var(--red);color:#fff;padding:3px 9px;border-radius:4px}
.feat h1{font-size:32px;font-weight:600;letter-spacing:-0.9px;line-height:1.1;margin-bottom:12px;max-width:520px;color:#fff}
.feat p{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:18px;max-width:480px}
.feat .meta{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.55)}.feat .meta .av{width:30px;height:30px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.feat .fcta{margin-top:18px}
/* side featured small */
.featside{display:flex;flex-direction:column;border:1px solid var(--line);border-left:none;border-radius:0 var(--rad-lg) var(--rad-lg) 0;overflow:hidden}
.fside{display:flex;gap:13px;padding:16px;border-bottom:1px solid var(--div);text-decoration:none;color:var(--ink);transition:.12s;flex:1;align-items:center}
.fside:last-child{border-bottom:none}
.fside:hover{background:var(--bg)}
.fside .si{width:54px;height:54px;border-radius:var(--rad);background:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0}.fside .si [data-ic]{font-size:26px;color:var(--red)}
.fside .se{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--red);text-transform:uppercase}
.fside .st{font-size:14px;font-weight:600;line-height:1.3;margin-top:3px;letter-spacing:-0.2px}
.fside .sm{font-size:11px;color:var(--muted);margin-top:4px}

/* filter */
.mfilter{display:flex;align-items:center;gap:9px;padding:18px 28px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mfilter .fl{font-size:12px;font-weight:600;color:var(--muted)}
.chip{border:1px solid var(--line);background:#fff;border-radius:100px;padding:8px 15px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:#bdbdbd}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip [data-ic]{font-size:15px}
.msearch{margin-left:auto;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--rad);overflow:hidden;background:#fff}
.msearch [data-ic]{margin:0 0 0 11px;color:var(--muted);font-size:17px}.msearch input{border:none;padding:9px 12px;font:inherit;font-size:13px;outline:none;width:190px}
/* Viditeľný fokus (WCAG 2.4.7): vnútorný <input> má outline:none a rám má rodič s overflow:hidden —
   obrys kreslíme na celý rám, ako pri .search-bar v base.css. */
.msearch:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(200,35,44,.35)}

/* grid */
.sec{padding:24px 28px 8px}
.sec h2{font-size:18px;font-weight:600;letter-spacing:-0.3px;display:flex;align-items:center;gap:8px;margin-bottom:16px}.sec h2 [data-ic]{font-size:20px;color:var(--red)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bcard{border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:.15s;display:flex;flex-direction:column}
.bcard:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.06)}
.bcard .bimg{height:150px;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative}.bcard .bimg [data-ic]{font-size:48px;color:var(--red)}
.bcard .bimg::after{content:'';position:absolute;bottom:0;left:0;height:3px;width:55%;background:var(--red)}
.bcard .bimg .ph{position:absolute;bottom:8px;right:10px;font-family:var(--mono);font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.4);text-transform:uppercase}
.bcard .bi{padding:16px;display:flex;flex-direction:column;flex:1}
.bcard .be{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.bcard .bt{font-size:16px;font-weight:600;line-height:1.32;letter-spacing:-0.2px;margin-bottom:7px}
.bcard .bd{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.bcard .bm{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);padding-top:12px;border-top:1px solid var(--div)}
.bcard .bm .av{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600}
.bcard .bm .rt{margin-left:auto;display:inline-flex;align-items:center;gap:4px}.bcard .bm .rt [data-ic]{font-size:13px}
/* .nohit → base.css */

/* topics strip */
.topics{padding:8px 28px 4px}
.topicgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.topic{border:1px solid var(--line);border-radius:var(--rad-lg);padding:16px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);transition:.15s}
.topic:hover{border-color:var(--red)}
.topic .ti{width:42px;height:42px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.topic .ti [data-ic]{font-size:21px;color:var(--red)}
.topic .tn{font-size:13.5px;font-weight:600}.topic .tc{font-size:11.5px;color:var(--muted);margin-top:1px}

/* reálne obrázky článkov (OpenCart oc_category.image) — inak ikona */
.fside .si{overflow:hidden}.fside .si img{width:100%;height:100%;object-fit:cover}
.bcard .bimg{overflow:hidden}.bcard .bimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip .cc{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.chip.on .cc{color:rgba(255,255,255,.65)}
.sec h2 .rc{font-size:13px;font-weight:500;color:var(--muted)}

/* rubrika blogu (blog/list.blade.php) */
.mhead{padding:28px 28px 20px;border-bottom:1px solid var(--line)}
.mhead h1{font-size:30px;font-weight:600;letter-spacing:-0.8px;line-height:1.15;margin-bottom:8px}
.mhead p{font-size:15px;color:var(--muted);line-height:1.6;max-width:760px}
.mback{margin:22px 0 4px}.mback .btn [data-ic]{font-size:16px}

/* newsletter (.nlstrip + súhlas .nl-row/.nl-consent/.nl-err/.nl-done) → celé v base.css */

@media(max-width:860px){
  .mhead{padding:20px 16px 14px}.mhead h1{font-size:24px}
  .mhero{grid-template-columns:1fr;padding:16px}
  .feat{border-radius:var(--rad-lg) var(--rad-lg) 0 0;padding:24px;min-height:220px}.feat h1{font-size:24px}
  .featside{border-left:1px solid var(--line);border-top:none;border-radius:0 0 var(--rad-lg) var(--rad-lg)}
  .mfilter{padding:14px 16px}.msearch{margin-left:0;flex-basis:100%}.msearch input{flex:1;width:auto}
  .bgrid{grid-template-columns:1fr}
  .topicgrid{grid-template-columns:1fr 1fr}
  .sec{padding:18px 16px 4px}
}