/* ============================================================
   hero-tekst.css — tipografski tretman hero tekst-bloka
   na triptih stranama (/zakon/, /incident/, /pomoc/).
   Port dizajnerske predaje design_handoff_hero_tipografija
   (spoj A+B, 2026-07-14). Prefiks .axct-* (title tretman) — ne
   dira postojeće .axc-* (kicker, sub, mods) da ne pravi regresije.
   Uključuje se preko extra_css u sve tri triptih rute.
   ============================================================ */

/* Trobojka Srbije kao akcenti (crvena / plava / topla bela) — nezavisno
   od --al-brand tokena strane, isti izgled u dark/light temi. */
.axct-stack, .axct-pill, .axct-dot, .axct-kick, .axct-h1, .axct-sub {
  --axct-red:   #d13b32;
  --axct-blue:  #6f9bc4;
  --axct-white: #f2efe9;
  --axct-amber: #b98a3e;
  --axct-forest:#6b8f5a;
  /* Trobojka nosi i podloge (tacka, zastavica, oznake na cipovima), pa se
     osnovni tokeni ne diraju. Tekst ide na -text varijante; svetla tema ih
     gazi nize jer je podloga svetla. */
  --axct-red-text:  var(--brand-on-dark);
  --axct-blue-text: var(--axct-blue);
  --axct-amber-text:var(--axct-amber);
}
html[data-theme="light"] .axct-stack, html[data-theme="light"] .axct-pill,
html[data-theme="light"] .axct-dot, html[data-theme="light"] .axct-kick,
html[data-theme="light"] .axct-h1, html[data-theme="light"] .axct-sub {
  --axct-red-text:  #b0301f;
  --axct-blue-text: #3d6a94;
  --axct-amber-text:#7f5f2b;
}

/* ---- KICKER (crvena tačka sa halo + mono tekst) ---- */
.axct-kick{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#9a9a98;
  margin:0 0 40px;
}
.axct-kick .axct-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--axct-red);
  box-shadow:0 0 0 4px rgba(209,59,50,.16);
  flex:none;
}
.axct-kick b{ color:#c9c6c0; font-weight:600; }
.axct-kick .sep{ color:var(--al-mute-text); }

/* ---- NASLOV — grid: trobojka + tri reda ---- */
.axct-stack{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:24px;
  align-items:stretch;
}
.axct-flag{
  grid-row:1;
  width:5px; border-radius:2px;
  background:linear-gradient(
    var(--axct-red)   0     33.33%,
    var(--axct-blue)  33.33% 66.66%,
    var(--axct-white) 66.66% 100%
  );
}
/* .axc h1 (0,1,1) postoji u route CSS-ovima za starije H1; povećavamo
   specifičnost preko `.axc .axct-h1` (0,2,1) da naši stilovi drže. */
.axc .axct-h1{
  font-family:var(--font-sans);
  font-weight:700; font-size:60px; line-height:1;
  letter-spacing:-.028em;
  margin:0;
  color:#c4c1bb;
  display:flex; flex-direction:column; gap:6px;
}
.axct-row{
  display:flex; align-items:baseline; gap:18px;
  white-space:nowrap;
}
.axct-ix{
  font-family:var(--font-mono);
  font-weight:500; font-size:15px; letter-spacing:0;
  transform:translateY(-16px);
  flex:none;
}
.axct-row em{ font-style:normal; font-weight:800; }
.axct-row--1 .axct-ix, .axct-row--1 em{ color:var(--axct-red-text); }
.axct-row--2 .axct-ix, .axct-row--2 em{ color:var(--axct-blue-text); }
.axct-row--3 .axct-ix{ color:#8f8d87; }
.axct-row--3 em{ color:var(--axct-white); }

/* ---- PODNASLOV ---- */
.axct-sub{
  font-size:16px; line-height:1.65;
  color:#a0a09e;
  max-width:440px;
  margin:34px 0 0 29px;
  text-wrap:pretty;
}

/* ---- ČIPOVI ---- */
.axct-pills{
  display:flex; flex-wrap:nowrap; gap:10px;
  margin:36px 0 0 29px;
}
/* Specifičnost pojačana kroz .axc prefiks (0,3,0) jer /pomoc/ ima globalno
   `body.page-alat-pomoc a { color: --al-brand-hi }` (0,1,2) koje bi inače
   pobedilo `.axct-pill` (0,1,0) i obojilo čipove crveno. */
.axc .axct-pills .axct-pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:#b6b3ad !important;
  border:1px solid #2e2e2c;
  padding:9px 13px 8px;
  background:rgba(23,23,21,.56);
  white-space:nowrap;
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.axc .axct-pills .axct-pill:hover, .axc .axct-pills .axct-pill:focus-visible{
  color:#ece9e3 !important; border-color:#3a3a37; background:rgba(23,23,21,.85);
}
.axc .axct-pills .axct-pill__n{ color:var(--al-mute-text) !important; }
.axc .axct-pills .axct-pill__t{ color:inherit !important; }
.axct-pill i{
  width:6px; height:6px; border-radius:50%;
  background:var(--axct-red);
  display:inline-block; flex:none;
}
.axct-pill--2 i{ background:var(--axct-amber); }
.axct-pill--3 i{ background:var(--axct-blue); }
.axct-pill--4 i{ background:var(--axct-forest); }

/* ---- Light tema — dizajn nije eksplicitno naveo,
   drži trobojku istu, samo priguši tekst-boje ka tamnoj ---- */
html[data-theme="light"] .axct-kick{ color:#5b574f; }
html[data-theme="light"] .axct-kick b{ color:#1a1917; }
html[data-theme="light"] .axct-kick .sep{ color:var(--al-mute-text); }
html[data-theme="light"] .axc .axct-h1{ color:#403d37; }
html[data-theme="light"] .axct-row--3 em{ color:var(--axct-amber-text); }
html[data-theme="light"] .axct-row--3 .axct-ix{ color:var(--al-mute-text); }
html[data-theme="light"] .axct-sub{ color:#5b574f; }
html[data-theme="light"] .axc .axct-pills .axct-pill{
  color:#403d37 !important; border-color:#e3dfd4; background:rgba(255,255,255,.7);
}
html[data-theme="light"] .axc .axct-pills .axct-pill:hover, html[data-theme="light"] .axc .axct-pills .axct-pill:focus-visible{
  color:#1a1917 !important; border-color:#cec9bb; background:#ffffff;
}
html[data-theme="light"] .axc .axct-pills .axct-pill__n{ color:var(--al-mute-text) !important; }

/* ---- Responzivno ---- */
@media (max-width:900px){
  .axc .axct-h1{ font-size:clamp(34px, 6.6vw, 56px); }
  .axct-ix{ transform:translateY(-12px); font-size:14px; }
  .axct-row{ white-space:normal; }
}
@media (max-width:560px){
  .axct-kick{ font-size:11.5px; margin-bottom:28px; }
  .axc .axct-h1{ font-size:clamp(30px, 8vw, 40px); gap:4px; }
  .axct-ix{ transform:translateY(-8px); font-size:12.5px; }
  .axct-sub{ margin-left:22px; margin-top:26px; }
  .axct-pills{ margin-left:22px; margin-top:26px; flex-wrap:wrap; }
}

/* ============================================================
   MOBILNA STABILIZACIJA HEROA (S85, Denis: „hero igra gore-dole,
   tap na Pomoć sve pomeri — pomeraj ne sme da se primeti").
   Sadržaj je usidren na DNO 600px heroa (align-items:end), pa
   svaka razlika u visini (kicker 1 vs 2 reda, čipovi 2 vs 3 reda)
   gura naslov vertikalno. Ovde se geometrija FIKSIRA, ista na
   sve tri strane:
   · kicker = tri reda (code / label / tail), fiksna visina
   · čipovi = mreža 2 kolone → jednake širine, uvek 2 reda
   · padding ujednačen (pomoc je imao 32/28 vs 30/26)
   ============================================================ */
@media (max-width:767px){
  .axct-kick{
    display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:3px;
    align-items:start;
  }
  .axct-kick .axct-dot{ grid-column:1; grid-row:1; margin-top:5px; }
  .axct-kick__code{ grid-column:2; grid-row:1; }
  .axct-kick b{ grid-column:2; grid-row:2; }
  .axct-kick__tail{ grid-column:2; grid-row:3; }
  .axct-kick .sep{ display:none; }

  .axct-pills{
    /* minmax(0,1fr): bez toga min-content najdužeg čipa (SASTAVI PRIJAVU)
       razvlači kolone → ceo sadržaj-stub se širi preko viewporta i menja
       prelome naslova (upravo pomeraj koji ubijamo) */
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px;
  }
  .axct-pills .axct-pill{
    width:auto; justify-content:flex-start; min-width:0;
    padding-left:10px; padding-right:10px;
  }
  /* Redni broj se krije na mobilnom (tačka u boji ostaje identitet) i
     spacing se stišava — bez toga se „Sastavi prijavu" seče u polućeliji. */
  .axct-pills .axct-pill__n{ display:none; }
  .axct-pills .axct-pill__t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.05em; }

  .axc-inner{ padding:30px 18px 26px; }
}