/* ============================================================================
   BIRO 404 — SR CORE ROLLOUT R01
   Jedan deljeni sloj nad postojećim sistemom. Uklanjanje ovog <link> reda sa
   dirnutih strana vraća sajt u stanje R404_HOMEPAGE_FINAL_CORRECTION_R01.

   Naslovna se NE dira — ovaj fajl se na nju ne linkuje.

   Sadrži četiri stvari i ništa više:
     A · .tier-tag   — imenovanje komercijalnog sloja (Standard/Signature/Custom)
     B · .wg-head    — vidljiva hijerarhija u mreži radova
     C · .tcase      — traka „prepoznajte svoj slučaj" na /cene/
     D · sitne korekcije postojećih komponenti koje nove stavke traže

   Pravila:
     · nijedna nova boja — samo --gold, --ink, --line iz osnovnog sistema;
     · nijedan novi font;
     · nula JS-a, nula mrežnih poziva, nula zavisnosti;
     · sitan tekst ne koristi --muted (4,41:1 pada AA) nego --core-fine.
   ========================================================================== */

:root {
  /* --muted (#b7b2a6) pada WCAG AA za sitan tekst — nalaz R58D.
     Nove sitne linije koriste ovu vrednost, koja prolazi na --bg. */
  --core-fine: #cdc8bb;
}

/* ==========================================================================
   A · TIER TAG — komercijalni sloj imenovan tamo gde stvarno pomaže
   Nije ukras i ne stoji uz svaki pasus (§10 brifa). Stoji samo tamo gde
   posetilac inače ne bi znao u koji razgovor njegov posao spada.
   ========================================================================== */
.tier-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.tier-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.tier-tag--sig { color: var(--gold-hi); }
.tier-tag--cst { color: var(--core-fine); }

/* Red koji imenuje sloj i vodi na njegovo objašnjenje. */
.tier-map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--core-fine);
}
.tier-map a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--t-flash) var(--ease-out), border-color var(--t-flash) var(--ease-out);
}
.tier-map a:hover,
.tier-map a:focus-visible { color: var(--gold); border-color: var(--gold); }

/* Kada tag stoji u zaglavlju kolone (case-col, plan). */
.case-col .tier-tag,
.plan .tier-tag { align-self: start; }

/* ==========================================================================
   B · WG-HEAD — vidljiva hijerarhija portfolija (§12 brifa)
   Do sada je „Ostali radovi" bio sr-only naslov: mreža je izgledala kao
   jedan ravan spisak od šest jednakih kartica. Hijerarhija koja postoji samo
   za čitač ekrana nije hijerarhija.
   ========================================================================== */
.wg-head {
  display: grid;
  gap: 10px;
  margin: clamp(40px, 5vw, 72px) 0 clamp(22px, 2.6vw, 34px);
  max-width: 760px;
}
.wg-head:first-of-type { margin-top: clamp(24px, 3vw, 44px); }
.wg-head h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.wg-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--core-fine);
  max-width: 62ch;
}
.wg-head .rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--line) 42%, transparent 100%);
  margin-top: 6px;
}

/* ==========================================================================
   C · TCASE — „prepoznajte svoj slučaj" (§6 brifa, /cene/)
   Tri reda, bez interakcije: opis situacije → sloj → gde se čita dalje.
   Nije četvrta cenovna priča: ne nosi nijedan broj.
   ========================================================================== */
.tcase {
  border-top: 1px solid var(--line);
  margin-top: clamp(34px, 4vw, 56px);
}
.tcase-r {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr);
  gap: 14px clamp(18px, 2.4vw, 34px);
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.tcase-r .sit {
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.tcase-r .go {
  font-family: var(--font-m);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--core-fine);
  text-decoration: none;
  justify-self: end;
  text-align: right;
  border-bottom: 1px solid transparent;
  transition: color var(--t-flash) var(--ease-out), border-color var(--t-flash) var(--ease-out);
  /* WCAG 2.2 · 2.5.8: samostalan link, ne inline u rečenici — meta mora
     biti >= 24 px. Merenjem je bio 21 px (QA 390). */
  display: inline-flex;
  align-items: center;
  /* `inline-flex` pojede razmak između teksta i strelice — zato `gap`,
     a ne oslanjanje na beli prostor u HTML-u. Uočeno gledanjem isečka. */
  gap: 7px;
  min-height: 24px;
}
.tcase-r .go:hover,
.tcase-r .go:focus-visible { color: var(--gold); border-color: var(--gold); }

@media (max-width: 720px) {
  .tcase-r {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 2px;
  }
  .tcase-r .tier-tag { justify-self: start; }
  .tcase-r .go { justify-self: start; text-align: left; }
}

/* ==========================================================================
   D · SITNE KOREKCIJE
   ========================================================================== */

/* Cena izražena rečima unutar postojeće .plan kartice — treći stepenik na
   /izrada-sajtova/ nema broj i ne sme da glumi da ga ima. */
.plan .p-price--words {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan .p-price--words {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.plan .p-price--words .num {
  /* Gold kao i kod ostale dve kartice — to JESTE cenovna izjava i mora imati
     istu težinu u oku. Manje od broja, jer nije broj i ne sme da glumi da
     jeste; bez `sig-num` sjaja, koji je rezervisan za cifre.
     (Prvi pokušaj je bio beo i 40 px — čitao se kao još jedan naslov i tukao
     se sa imenom kartice. Uočeno gledanjem isečka.) */
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--gold);
}
.plan .p-price--words .per {
  color: var(--core-fine);
  max-width: 34ch;
  line-height: 1.5;
}

/* Vodeći rad na /radovi/ je prešao sa <h3> na <h2> zbog redosleda nivoa.
   Izgled ostaje identičan — ista pravila kao `.sg-proj-cap h3` u
   srfinal-r01.css, uključujući i mobilni prelom. */
.sg-proj-cap h2 {
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
  margin: 0 0 10px;
}
@media (max-width: 860px) {
  .sg-proj-cap h2 { font-size: clamp(24px, 6.4vw, 34px); }
}

/* Zaglavlje kolone koje sada nosi i tier-tag. */
.case-col-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.case-col-top h3 { margin: 0; }

/* --------------------------------------------------------------------------
   FOKUS NA POLJIMA KONTAKT FORME — nalaz QA ove runde (§28, tastatura).

   Zatečeno u `site.css`:
       .field input:focus { outline: none; border-color: rgba(233,184,80,.55); }

   Fokus je bio označen SAMO promenom boje jedne piksel-tanke ivice, i to na
   55 % prozirnosti. To pada WCAG 2.2 „Focus Appearance": premalo površine i
   preslab kontrast prema susednoj boji. Playwright prolaz kroz tabove je to
   i izmerio — četiri polja forme su prijavljena bez ijedne oznake fokusa.

   Ovo NIJE regresija ove runde; zatečeno je. Popravlja se ovde jer je forma
   na `/kontakt/`, koja je ionako dirnuta, a ispravka je čist dodatak.
   Ivica ostaje kakva je bila — dodaje se prsten OKO polja, pa se izgled u
   mirovanju ne menja ni za jedan piksel.
   -------------------------------------------------------------------------- */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.cform .consent input:focus-visible,
.cform-more summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}
/* Miš i dodir ne dobijaju prsten — samo tastatura. */
.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .tier-map a,
  .tcase-r .go { transition: none; }
}