/* R56 — Content Authority: tabele za poređenje, checkliste, metodologija, preuzimanje.
   Dodato 2026-07-29. Ne menja globalne stilove — svi selektori su pod .r56-* prefiksom
   ili unutar .gd-prose. */

/* ---- Metodološki okvir ---- */
.r56-method{
  border:1px solid var(--line,rgba(255,255,255,.14));
  border-left:3px solid var(--accent,#e0483c);
  border-radius:10px;
  padding:1.1rem 1.2rem;
  margin:1.6rem 0;
  background:rgba(255,255,255,.025);
}
.r56-method > h3{margin:0 0 .5rem;font-size:1.05rem}
.r56-method p{margin:.5rem 0}
.r56-method ul{margin:.5rem 0 .25rem;padding-left:1.15rem}
.r56-method li{margin:.3rem 0}
.r56-note{
  font-size:.9rem;
  color:var(--text-2,#a8a8a8);
  margin:.35rem 0 1.4rem;
}

/* ---- Tabela za poređenje ponuda ---- */
.r56-table-wrap{
  margin:1.4rem 0 .4rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line,rgba(255,255,255,.14));
  border-radius:10px;
}
.r56-table{
  width:100%;
  min-width:34rem;
  border-collapse:collapse;
  font-size:.95rem;
}
.r56-table caption{
  text-align:left;
  padding:.85rem 1rem .1rem;
  font-size:.9rem;
  color:var(--text-2,#a8a8a8);
}
.r56-table th,
.r56-table td{
  border-bottom:1px solid var(--line,rgba(255,255,255,.12));
  padding:.6rem .75rem;
  text-align:left;
  vertical-align:top;
}
.r56-table thead th{
  font-weight:600;
  white-space:nowrap;
  background:rgba(255,255,255,.04);
}
.r56-table tbody th{
  font-weight:500;
  width:44%;
}
.r56-table .r56-group th{
  background:rgba(255,255,255,.05);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-2,#a8a8a8);
}
.r56-table .r56-fill{
  color:var(--text-2,#8d8d8d);
  min-width:5.5rem;
}
.r56-table tbody tr:last-child th,
.r56-table tbody tr:last-child td{border-bottom:0}

/* ---- Checklista sa kućicama ---- */
.r56-check{margin:1.1rem 0 1.6rem}
.r56-check h3{margin:1.3rem 0 .5rem;font-size:1.05rem}
.r56-check ul{list-style:none;margin:.4rem 0;padding:0}
.r56-check li{
  position:relative;
  padding-left:1.9rem;
  margin:.5rem 0;
  line-height:1.5;
}
.r56-check li::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:1.05em;
  height:1.05em;
  border:1.5px solid var(--line-strong,rgba(255,255,255,.34));
  border-radius:3px;
}
.r56-check li .r56-why{
  display:block;
  font-size:.88rem;
  color:var(--text-2,#a8a8a8);
  margin-top:.15rem;
}

/* ---- Dugme za preuzimanje ---- */
.r56-dl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  border:1px solid var(--line,rgba(255,255,255,.14));
  border-radius:10px;
  padding:1rem 1.1rem;
  margin:1.6rem 0;
}
.r56-dl-txt{flex:1 1 16rem;min-width:0}
.r56-dl-txt strong{display:block;margin-bottom:.2rem}
.r56-dl-txt span{font-size:.9rem;color:var(--text-2,#a8a8a8)}

/* Oznake kolona unutar ćelija. Na desktopu su display:none (i za oko i za
   čitač ekrana), jer zaglavlje tabele već nosi tu informaciju. U mobilnom
   kartičnom prikazu se pale, jer display:block gasi semantiku tabele pa
   <thead> više ne može da označi kolonu. Tačno jedan izvor oznake po širini —
   nigde se ne izgovara dva puta. */
.r56-cl{display:none}

@media (max-width:520px){
  .r56-table{font-size:.9rem}
  .r56-table th,.r56-table td{padding:.5rem .55rem}
  .r56-table tbody th{width:38%}
}

/* ============================================================
   R56A — UX patch za /vodici/kako-uporediti-ponude-za-izradu-sajta/
   Sve je pod .gd-article--r56a osim ispravke dugmeta (v. dole),
   pa ostali vodiči koji učitavaju r56.css ostaju netaknuti.
   ============================================================ */

/* ---- B. Dugme unutar proze ----------------------------------
   Uzrok „praznog“ žutog dugmeta: .gd-prose a{color:var(--accent)} (0,1,1)
   nadjačava .btn-primary{color:var(--accent-deep)} (0,1,0), pa je tekst
   dugmeta bio amber #F7A81B na amber pozadini #F7A81B — kontrast 1:1.
   Ispravka vraća boju iz dizajn sistema i gasi podvlačenje iz proze.
   Nije scope-ovana na R56A jer isti kvar postoji i na
   /vodici/sta-pripremiti-pre-izrade-sajta/ (WCAG 1.4.3 fail). */
.gd-prose a.btn{text-decoration:none}
.gd-prose a.btn:hover,
.gd-prose a.btn:focus-visible{text-decoration:none}
.gd-prose a.btn-primary,
.gd-prose a.btn-primary:hover,
.gd-prose a.btn-primary:focus-visible{color:var(--accent-deep)}
.gd-prose a.btn-ghost{color:var(--text)}
.gd-prose a.btn-ghost:hover,
.gd-prose a.btn-ghost:focus-visible{color:var(--accent)}
/* Fokus prsten pada na tamnu pozadinu strane (offset 3px), ne na amber. */
.gd-prose a.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- C. Šira tabela na desktopu -----------------------------
   Tekstualna kolona ostaje 46rem (mera ~77 znakova posle E).
   Tabela simetrično izlazi iz kolone negativnom marginom; vrednosti su
   manje od slobodnog prostora u .wrap-u pa nema page-level overflow-a. */
.gd-article--r56a{--r56a-bleed:0px}
@media (min-width:1024px){.gd-article--r56a{--r56a-bleed:3.5rem}}   /* tabela 53rem ≈ 848px */
@media (min-width:1280px){.gd-article--r56a{--r56a-bleed:6rem}}     /* tabela 58rem ≈ 928px */
.gd-article--r56a .r56-table-wrap{margin-inline:calc(-1 * var(--r56a-bleed))}
.gd-article--r56a .r56-table caption{max-width:46rem}
/* Šira tabela podnosi i krupnije slovo bez lomljenja naziva stavki. */
@media (min-width:1024px){
  .gd-article--r56a .r56-table{font-size:1rem}
  .gd-article--r56a .r56-table th,
  .gd-article--r56a .r56-table td{padding:.7rem .9rem}
}

/* ---- E. Čitljivost ------------------------------------------
   Zatečeno: 16px/1.75 u --text-2 (kontrast 8,4:1) pri koloni od 46rem =
   ~83 znaka po redu, iznad WCAG 1.4.8 granice od 80.
   Posle: 1.12rem (17,9px) u --silver (11,6:1) = ~79 znakova, bez sužavanja
   kolone (Nenad je prijavio da kolona deluje usko, pa se mera popravlja
   veličinom slova, a ne užom kolonom). */
.gd-article--r56a .gd-prose p,
.gd-article--r56a .gd-prose li{color:var(--silver);font-size:1.12rem;line-height:1.7}
.gd-article--r56a .gd-prose p{margin:1.1rem 0}
.gd-article--r56a .gd-prose ul,
.gd-article--r56a .gd-prose ol{margin:1.2rem 0;gap:.65rem}
.gd-article--r56a .gd-prose h2{margin:2.9rem 0 1rem}
.gd-article--r56a .gd-prose h3{margin:2rem 0 .7rem}
.gd-article--r56a .r56-note{font-size:.98rem;color:var(--text-2);margin:.5rem 0 1.6rem}
.gd-article--r56a .faq-a-inner{color:var(--silver);font-size:1.05rem;line-height:1.68;max-width:42rem}
.gd-article--r56a .faq-item{border-bottom-color:var(--line-2)}
/* Meta i putanja su bile --muted (#727C8C) na 11,5px = 4,41:1 — ispod 4,5:1.
   --text-2 na istoj pozadini daje 8,42:1. Scope-ovano na ovaj vodič. */
.gd-article--r56a .gd-meta,
.gd-article--r56a .gd-breadcrumb{color:var(--text-2)}
.gd-article--r56a .gd-related-card .t{font-size:1.02rem;line-height:1.35}
.gd-article--r56a .gd-service-cta p{color:var(--silver)}
.gd-article--r56a .r56-dl-txt span{font-size:.95rem;color:var(--silver)}

/* ---- D. Mobilne kartice -------------------------------------
   Prelomna tačka 700px je izmerena, ne pretpostavljena: .r56-table ima
   min-width:34rem (544px), a sadržaj .wrap-a padne ispod toga oko 560px —
   tu počinje horizontalno pomeranje. Već na 700px kolona sa nazivom stavke
   pada ispod ~300px i duži nazivi se lome u 3+ reda. Zato ispod 700px
   idu kartice, iznad ostaje prava tabela. Nema DOM duplikata: isti <tr>
   se samo drugačije raspoređuje. */
@media screen and (max-width:700px){
  .gd-article--r56a .r56-table-wrap{
    border:0;border-radius:0;overflow:visible;
    -webkit-overflow-scrolling:auto;
    margin:1.4rem 0 .6rem;
  }
  .gd-article--r56a .r56-table{display:block;min-width:0;font-size:1rem}
  .gd-article--r56a .r56-table caption{
    display:block;padding:0 0 1rem;max-width:none;
    font-size:.95rem;color:var(--text-2);
  }
  .gd-article--r56a .r56-table thead{display:none}
  .gd-article--r56a .r56-table tbody{display:block}

  /* Grupni naslov ostaje naslov sekcije, ne kartica. */
  .gd-article--r56a .r56-table tbody tr.r56-group{
    display:block;padding:1.5rem 0 .45rem;margin:0;border:0;background:none;
  }
  .gd-article--r56a .r56-table tbody tr.r56-group:first-child{padding-top:0}
  .gd-article--r56a .r56-table tbody tr.r56-group th{
    display:block;width:auto;padding:0;border:0;background:none;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--accent);
  }

  /* Svaki red = jedna kartica. */
  .gd-article--r56a .r56-table tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
    border:1px solid var(--line);border-radius:12px;background:var(--panel);
    padding:.9rem .95rem 1rem;margin:0 0 .65rem;
  }
  .gd-article--r56a .r56-table tbody tr > th[scope="row"]{
    grid-column:1 / -1;width:auto;padding:0 0 .1rem;border:0;
    color:var(--text);font-weight:600;font-size:1rem;line-height:1.4;
    overflow-wrap:break-word;
  }
  .gd-article--r56a .r56-table tbody tr:last-child th,
  .gd-article--r56a .r56-table tbody tr:last-child td{border-bottom:0}

  /* Polje za popunjavanje: isprekidan okvir čita se kao „ovde se upisuje“. */
  .gd-article--r56a .r56-table .r56-fill{
    display:block;min-width:0;min-height:2.7rem;
    padding:.5rem .6rem;border:1px dashed var(--line-2);border-radius:8px;
    background:rgba(255,255,255,.02);color:var(--text-2);
  }
  .gd-article--r56a .r56-cl{
    display:block;margin-bottom:.15rem;
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.07em;
    text-transform:uppercase;color:var(--text-2);
  }

  /* Preuzimanje: dugme preko cele širine, lakše se pogađa prstom. */
  .gd-article--r56a .r56-dl{padding:1rem}
  .gd-article--r56a .r56-dl .btn{width:100%;justify-content:center}
}

/* ---- Štampa ---- */
@media print{
  .site-header,.mobile-menu,.callbar,.atmos,.site-footer,
  .r18-invite,.gd-related,.gd-service-cta,.gd-breadcrumb,.r56-dl,.skip-link{display:none !important}
  body{background:#fff;color:#000}
  .r56-table-wrap{overflow:visible;border:1px solid #000;border-radius:0}
  .r56-table{min-width:0;page-break-inside:auto}
  .r56-table tr{page-break-inside:avoid}
  .r56-table th,.r56-table td{border-bottom:1px solid #000;color:#000}
  .r56-table thead th,.r56-table .r56-group th{background:#eee;color:#000}
  .r56-check li::before{border-color:#000}
  .r56-method{border:1px solid #000;background:#fff}
  /* R56A: na papiru uvek prava tabela u punoj širini otiska, bez bleed-a. */
  .gd-article--r56a{--r56a-bleed:0px}
  .gd-article--r56a .r56-table-wrap{margin-inline:0}
  .gd-article--r56a .r56-table caption{max-width:none}
  .r56-cl{display:none}
}