/* ============================================================
   Početna: kategorije (po uzoru na blumdecals.com, samo raspored, bez njihovih tekstova i slika).
   .kat-hub   = prva sekcija početne: traka s karticama naljepnica (debeli rub, natpis u "pilulici")
   .kat-panel = panel po kategoriji: naslov s riječi u "naljepnici" koja se izmjenjuje
                (initRotators() u app.js), tekst, čipovi, gumb i vizual
   .kat-moto  = Moto grafike, zasebna sekcija ispod naljepnica
   Vizual (.kat-art) se slaže od .stk komada: središte --x/--y, širina --w (u % širine vizuala,
   bez jedinice), kut --r. Kad stigne prava fotka, sadržaj .kat-art zamijeni jednim <img>.
   Mobile first.
   ============================================================ */

/* ---------- Traka kategorija (prva sekcija ispod zaglavlja, tamna kao ostatak stranice) ---------- */
.kat-hub{position:relative;overflow:hidden;color:var(--bone);padding:clamp(36px,6vw,80px) 0 clamp(44px,6vw,80px);
  background:radial-gradient(ellipse 70% 60% at 92% 0%,rgba(196,67,42,.2),transparent 70%),var(--ink)}
.kat-hub__head{max-width:640px;margin-bottom:clamp(26px,4vw,42px)}
.kat-hub .tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--clay)}
/* naslov kaže sve što radimo (naljepnice, majice, moto), pa je duži: manji od starog "Što lijepimo?" */
.kat-hub h1{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(2.2rem,9.4vw,4.6rem);line-height:.95;margin:.3em 0 14px;max-width:16ch}
.kat-hub__head p{color:var(--bone-dim);max-width:520px}
@media(max-width:559px){.kat-hub{padding-top:26px}.kat-hub__head{margin-bottom:22px}}

.kat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
@media(min-width:760px){.kat-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}}
@media(min-width:1000px){
  .kat-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 16px}
  .kat-tile__lbl{font-size:.95rem}
  .kat-hub h1{max-width:22ch;font-size:clamp(3rem,5.2vw,4.6rem)}
}
/* prava slika umjesto složenih komada (majice, moto) */
.kat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.kat-photo--contain{inset:8%;width:84%;height:84%;object-fit:contain}
.kat-tile:hover .kat-photo{transform:scale(1.04)}
.kat-bg--bone{background:radial-gradient(120% 90% at 50% 10%,#fffaf2 0%,#e9dfcf 60%,#cdbfa8 100%)}
.kat-bg--moto{background:#120e0b}
.kat-tile{display:flex;flex-direction:column;align-items:center;color:var(--bone);text-align:center}
.kat-tile__img{position:relative;display:block;width:100%;aspect-ratio:4/5;border:3px solid var(--bone);border-radius:16px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.kat-tile__lbl{position:relative;z-index:1;width:92%;margin-top:-23px;padding:9px 8px 8px;background:var(--bone);color:var(--ink);border:3px solid var(--ink);border-radius:var(--pill);font-family:var(--display);text-transform:uppercase;font-size:clamp(.86rem,3.5vw,1.2rem);line-height:1.1;letter-spacing:.01em;transition:background .25s,color .25s}
.kat-tile__sub{margin-top:8px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;line-height:1.4;color:var(--bone-dim)}
.kat-tile--soon .kat-tile__img{border-style:dashed}
.kat-tile--soon .kat-tile__lbl{border-style:dashed}
.kat-tile:focus-visible{outline:none}
.kat-tile:focus-visible .kat-tile__img{outline:3px solid var(--clay);outline-offset:3px}
@media(hover:hover){
  .kat-tile:hover .kat-tile__img{transform:translateY(-4px) rotate(-.6deg);box-shadow:6px 8px 0 var(--terra-deep)}
  .kat-tile:hover .kat-tile__lbl{background:var(--terra-deep);color:var(--bone)}
}
.kat-hub__more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:clamp(28px,4vw,44px);padding-top:16px;border-top:1px solid var(--line);font-size:.92rem;color:var(--bone-dim)}
.kat-hub__more a{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--bone);border-bottom:2px solid var(--terra)}
.kat-hub__more a:hover{color:var(--clay)}

/* ---------- Vizual: komadi naljepnica ---------- */
.kat-art{position:absolute;inset:0;display:block;container-type:inline-size}
.stk{position:absolute;left:var(--x);top:var(--y);display:block;width:calc(var(--w) * 1%);width:calc(var(--w) * 1cqi);height:auto;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1));transition:transform .5s var(--ease)}
.stk--svg{overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.stk--sign{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
/* izrezano po obliku s bijelim rubom (isto kao bijeli rub u konfiguratoru) */
.stk--die{filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 10px 14px rgba(0,0,0,.4));
  filter:drop-shadow(1.1cqi 0 0 #fff) drop-shadow(-1.1cqi 0 0 #fff) drop-shadow(0 1.1cqi 0 #fff) drop-shadow(0 -1.1cqi 0 #fff) drop-shadow(0 2cqi 3cqi rgba(0,0,0,.4))}
.stk--circle,.stk--rect{display:grid;place-items:center;background:var(--bg);color:var(--fg);font-family:var(--display);text-transform:uppercase;line-height:1;letter-spacing:.02em;
  box-shadow:0 0 0 4px #fff,0 8px 14px rgba(0,0,0,.35);box-shadow:0 0 0 calc(var(--w) * .045cqi) #fff,0 2cqi 3.4cqi rgba(0,0,0,.35)}
.stk--circle{aspect-ratio:1;border-radius:50%;font-size:1.2rem;font-size:calc(var(--w) * .26cqi)}
.stk--rect{aspect-ratio:1.45;border-radius:12px;border-radius:calc(var(--w) * .12cqi);font-size:1.4rem;font-size:calc(var(--w) * .3cqi)}
/* naljepnice s logom unutra (primjeri su uvijek Terra Print logo ili @terraprintistra, vlasnik 3. 11. 2026) */
.stk--circle img,.stk--rect img{display:block;width:auto;height:auto;max-width:64%;max-height:64%}
.stk--rect img{max-height:76%}
.stk--word{aspect-ratio:3.2}
.stk--word img{width:84%;max-width:84%}
.stk--ghost{background:rgba(236,227,212,.05);border:2px dashed rgba(236,227,212,.32);box-shadow:none}
.stk--stamp{padding:.55em .4em .45em;background:var(--terra-deep);color:var(--bone);font-family:var(--display);text-transform:uppercase;text-align:center;line-height:1;letter-spacing:.06em;border-radius:.3em;
  font-size:1rem;font-size:calc(var(--w) * .2cqi);box-shadow:0 0 0 .16em #fff,0 1.6cqi 3cqi rgba(0,0,0,.3)}
.kat-art__cap{position:absolute;left:14px;bottom:14px;z-index:2;padding:6px 10px;border:1px solid var(--line);border-radius:2px;background:rgba(16,13,11,.8);color:var(--bone);font-size:.6rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.kat-bg--glass{background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.07) 45%,transparent 55%),linear-gradient(160deg,#3a434d 0%,#171c21 55%,#0b0d10 100%)}
.kat-bg--clay{background:radial-gradient(120% 90% at 25% 15%,#eaa47b 0%,#cf6a44 45%,#8c2d1a 100%)}
.kat-bg--olive{background:radial-gradient(120% 90% at 50% 0%,#87a171 0%,#4b6a48 52%,#2f4a35 100%)}
.kat-bg--ghost{background:repeating-linear-gradient(-45deg,rgba(236,227,212,.035) 0 10px,transparent 10px 20px),var(--ink-2)}

/* ---------- Paneli kategorija ---------- */
.kat-stack{display:grid;gap:clamp(18px,2.6vw,28px);padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,80px)}
.kat-panel{--acc:var(--terra);--acc-ink:var(--bone);--rim:var(--bone);--glow:rgba(196,67,42,.16);--edge:rgba(236,227,212,.14);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);border:2px solid var(--edge);border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse at 0% 0%,var(--glow),transparent 62%),var(--ink-2)}
.kat-panel__txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:clamp(26px,5vw,60px) clamp(22px,5vw,60px)}
.kat-panel .tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--clay)}
.kat-panel__txt>p{color:var(--bone-dim);max-width:480px}
/* veličina naslova prati širinu stupca (cqi), pa i najdulja riječ ("tvoju konobu") stane u jedan red */
.kat-panel__txt,.kat-panel .tm-head{container-type:inline-size}
.kat-h{max-width:100%;margin:12px 0 18px;font-family:var(--display);text-transform:uppercase;font-weight:400;line-height:.98;
  font-size:clamp(2rem,5.4vw,4.4rem);font-size:clamp(2rem,15cqi,4.4rem)}
/* riječ u "naljepnici": vlastiti red, pa promjena duljine ne pomiče ostatak naslova */
.kat-rot{display:block;width:max-content;max-width:100%;margin:.18em 0 .08em .05em;padding:.08em .26em .02em;overflow:hidden;white-space:nowrap;
  background:var(--acc);color:var(--acc-ink);border-radius:.14em;box-shadow:0 0 0 .065em var(--rim),0 .1em .22em rgba(0,0,0,.45);
  transform:rotate(-2deg);transform-origin:0 50%;transition:width .45s var(--ease)}
.kat-rot__w{display:block;transition:transform .42s var(--ease),opacity .3s ease}
.kat-rot__w.is-out{transform:translateY(-105%);opacity:0}
.kat-rot__w.is-pre{transform:translateY(105%);opacity:0;transition:none}
.kat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.kat-chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--pill);background:rgba(16,13,11,.35);color:var(--bone);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:.62rem;line-height:1.3}
.kat-chips li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.kat-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn--acc{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn--acc:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}

.kat-panel__vis{position:relative;display:block;order:-1;aspect-ratio:4/3;overflow:hidden;border-bottom:2px solid var(--edge)}
.kat-panel__vis:hover .stk{--s:1.04}
@media(min-width:900px){
  .kat-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kat-panel__vis{order:0;aspect-ratio:auto;min-height:460px;border-bottom:0;border-left:2px solid var(--edge)}
  .kat-panel--flip .kat-panel__vis{order:-1;border-left:0;border-right:2px solid var(--edge)}
}

.kat-panel--clay{--acc:var(--clay);--acc-ink:var(--ink);--rim:#fff;--glow:rgba(221,138,91,.16)}
/* bijela folija s crvenim obrubom, kao handle naljepnica */
.kat-panel--social{--acc:#e6e9ee;--acc-ink:var(--ink);--rim:#b0000d;--glow:rgba(176,0,13,.16)}
.kat-panel--yellow{--acc:#ffd900;--acc-ink:#100d0b;--rim:#100d0b;--glow:rgba(255,217,0,.1)}
/* žuta tabla: žuti rub, crni okvir, žuto polje */
.kat-panel--yellow .kat-rot{border-radius:.1em;box-shadow:inset 0 0 0 .035em #ffd900,inset 0 0 0 .075em #100d0b,0 .1em .22em rgba(0,0,0,.45);padding:.1em .3em .04em}

/* Table mjesta: panel bez stupca s vizualom (pozornica i obrazac su u .tm-grid) */
.kat-panel--free{display:block;padding:clamp(24px,5vw,56px)}
.kat-panel--free .tm-pop__list{margin:0 calc(-1 * clamp(24px,5vw,56px));padding:6px clamp(24px,5vw,56px) 14px}
@media(min-width:920px){.kat-panel--free .tm-pop__list{margin:0;padding:0}}

/* Gotovi modeli: najava, isprekidani rubovi */
.kat-panel--soon{--acc:var(--bone);--acc-ink:var(--bone);--glow:rgba(236,227,212,.06);border-style:dashed}
.kat-panel--soon .kat-rot{background:transparent;box-shadow:none;border:.05em dashed var(--bone);padding:.06em .26em 0}
.kat-panel--soon .kat-panel__vis{display:grid;place-items:center;aspect-ratio:auto;padding:clamp(20px,4vw,44px);background:repeating-linear-gradient(-45deg,rgba(236,227,212,.025) 0 12px,transparent 12px 24px)}
.kat-ghosts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:440px}
.kat-ghost{display:flex;flex-direction:column;gap:8px}
.kat-ghost__img{display:grid;place-items:center;aspect-ratio:1;border:2px dashed rgba(236,227,212,.2);border-radius:14px;background:rgba(236,227,212,.03)}
.kat-ghost__shape{display:block;width:46%;aspect-ratio:1;border:2px dashed rgba(236,227,212,.3);border-radius:50%;background:rgba(236,227,212,.06)}
.kat-ghost__shape--rect{width:56%;aspect-ratio:1.4;border-radius:10px}
.kat-ghost__shape--wide{width:72%;aspect-ratio:2.6;border-radius:6px}
.kat-ghost__shape--die{width:50%;aspect-ratio:.85;border-radius:58% 42% 55% 45% / 48% 60% 40% 52%}
.kat-ghost__t{color:var(--bone-dim);font-size:.6rem;text-align:center}

/* ---------- Moto grafike: zasebna sekcija ---------- */
.kat-moto{padding:clamp(48px,7vw,96px) 0;background:radial-gradient(ellipse at 80% 40%,rgba(196,67,42,.18),transparent 60%),var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kat-panel--moto{--glow:rgba(196,67,42,.2);--edge:rgba(196,67,42,.4);background:radial-gradient(ellipse at 0% 0%,var(--glow),transparent 62%),var(--ink)}
/* promo video (bivši hero); gumb za zvuk je .hero__sound iz styles.css, vodi ga initPromoVideos() */
.kat-panel__vis--video{display:grid;place-items:center;aspect-ratio:auto;background:#0c0908}
.kat-panel__vis--video > a{display:block;width:100%}
.kat-panel__vis--video .kat-art__cap{top:14px;bottom:auto}
@media(min-width:900px){
  .kat-panel--moto{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

/* ---------- Kako ide: 3 koraka + kratki odgovori (količina, datoteka, proof), odmah ispod kartica ---------- */
.kako{padding:clamp(36px,6vw,64px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.kako__h{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.8rem,6vw,2.8rem);line-height:1;margin-bottom:22px}
.kako__steps{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.kako__step{position:relative;padding:18px 18px 18px 66px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink)}
.kako__step b{display:block;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.kako__step p{color:var(--bone-dim);font-size:.9rem}
.kako__n{position:absolute;left:16px;top:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--terra-deep);color:var(--bone);font-family:var(--display);font-size:1.1rem}
.kako__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.kako__facts li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-left:3px solid var(--clay);background:rgba(236,227,212,.04);border-radius:0 var(--r) var(--r) 0}
.kako__facts b{font-size:.92rem}
.kako__facts span{color:var(--bone-dim);font-size:.78rem;line-height:1.35}
@media(min-width:760px){
  .kako__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kako__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}