/* SPOJAK.sk — Kategórie (mriežka dlaždíc)
   Unikátne: dlaždicová mriežka kategórií s variantmi pozadia A/B/C/D + badge.
   Zdieľané chrome (header/footer/nav/crumbs) sú v base.css. Ikony cez spojak-icons.js. */

.catwrap{padding:34px 28px 48px;background:var(--bg)}
.cat-head{margin-bottom:28px;max-width:760px}
.cat-head .ke{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:10px}
.cat-head h1{font-size:34px;font-weight:600;letter-spacing:-1px;line-height:1.08}
.cat-head .sub{font-size:15px;color:var(--muted);margin-top:10px}.cat-head .sub b{color:var(--ink);font-weight:600}

.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.tile{height:240px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-decoration:none;cursor:pointer;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s}
.tile>*{position:relative;z-index:1}
.tile .ico{width:60px;height:60px;color:var(--red);transition:transform .22s;display:flex;align-items:center;justify-content:center}.tile .ico [data-ic]{font-size:54px}
.tile .tname{font-size:18px;font-weight:600;color:var(--ink);margin-top:20px;letter-spacing:-0.3px;text-align:center;padding:0 16px}
.tile .tcount{font-size:12px;color:var(--muted);margin-top:7px}
.tile .arr{position:absolute;bottom:18px;right:18px;color:var(--red);opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s;z-index:2}.tile .arr [data-ic]{font-size:22px}
.tile:hover{background:var(--pink);border-color:var(--red);box-shadow:0 12px 28px rgba(200,35,44,.10);transform:translateY(-3px)}
.tile:hover .ico{transform:scale(1.1)}
.tile:hover .arr{opacity:1;transform:translateX(0)}

/* variant A — clean white grid */
.tile.va{background-color:#fff;background-image:linear-gradient(rgba(200,35,44,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,35,44,.04) 1px,transparent 1px);background-size:30px 30px}
/* variant B — grey diagonal stripes */
.tile.vb{background-color:#F5F5F5;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 28px,rgba(0,0,0,.025) 28px,rgba(0,0,0,.025) 56px)}
/* variant D — hex pattern */
.tile.vd{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23C8232C' stroke-opacity='0.06' stroke-width='1.5'/%3E%3C/svg%3E");background-size:56px 64px}
/* variant C — antracit red glow */
.tile.vc{background:var(--ink);border:none}
.tile.vc::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(200,35,44,.20),transparent 68%);z-index:0;transition:background .22s}
.tile.vc .tname{color:#fff}.tile.vc .tcount{color:rgba(255,255,255,.6)}
.tile.vc:hover{background:var(--ink);border-color:transparent;box-shadow:0 14px 32px rgba(200,35,44,.22)}
.tile.vc:hover::before{background:radial-gradient(circle at 50% 44%,rgba(200,35,44,.36),transparent 70%)}

/* badges */
.tile .badge{position:absolute;top:14px;right:14px;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-radius:4px;font-weight:600;z-index:3;display:inline-flex;align-items:center;gap:4px;line-height:1.3}
.tile .badge [data-ic]{font-size:11px}
.tile .badge.new{background:var(--green);color:#fff}
.tile .badge.top{background:var(--red);color:#fff}
.tile .badge.akcia{background:var(--pink);color:var(--red)}

/* all-categories dark tile */
.tile.allcat{background:var(--ink);border:none}
.tile.allcat .ico{color:#fff}.tile.allcat .tname{color:#fff}.tile.allcat .tcount{color:rgba(255,255,255,.55)}
.tile.allcat:hover{background:#000;transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.tile.allcat:hover .ico{transform:translateX(5px)}

@media(max-width:1100px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .catwrap{padding:24px 16px 36px}.cat-head h1{font-size:26px}
  .catgrid{grid-template-columns:1fr 1fr;gap:12px}
  .tile{height:200px}.tile .ico [data-ic]{font-size:44px}
}