/* ==========================================================================
   R26B — Case study visual polish (Sudski veštak za poljoprivredu)
   Scoped enrichment layer. Reuses site.css tokens. Dark BIRO 404 aesthetic.
   No JS. Loaded AFTER cs-slider.css so mobile-compare tweaks win.
   ========================================================================== */

/* ---------- Shared card head (used by contrast panels + work cards) ---------- */
.cs-panel{
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(1.25rem,2.6vw,1.75rem);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  display:flex;flex-direction:column;
}
.cs-panel--accent{
  border-color:rgba(247,168,27,.24);
  background:linear-gradient(180deg,rgba(247,168,27,.05),var(--panel));
}
.cs-panel__head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.05rem}
.cs-panel__ic{
  flex:none;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--muted);
}
.cs-panel__ic svg{width:20px;height:20px}
.cs-panel--accent .cs-panel__ic{
  color:var(--accent);border-color:rgba(247,168,27,.4);background:rgba(247,168,27,.08);
}
.cs-panel__t{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:1.2rem;color:var(--text);margin:0;line-height:1.05;letter-spacing:.01em;
}
.cs-panel__sub{
  display:block;margin-top:.28rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.cs-panel__lead{color:var(--text-2);font-size:.92rem;line-height:1.6;margin:0 0 .9rem}

/* ---------- 2. Problem ↔ Cilj + Šta/Kako contrast grid ---------- */
.cs-contrast{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2.4vw,1.5rem);
  align-items:stretch;
}
@media (max-width:760px){.cs-contrast{grid-template-columns:1fr}}

/* marked lists inside panels */
.cs-marklist{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.cs-marklist li{
  position:relative;padding-left:1.65rem;
  color:var(--text-2);font-size:.92rem;line-height:1.55;
}
/* problem = subtle minus */
.cs-marklist--x li::before{
  content:"";position:absolute;left:.1rem;top:.62em;
  width:11px;height:2px;border-radius:2px;background:var(--muted);
}
/* positive = amber check */
.cs-marklist--check li::before{
  content:"";position:absolute;left:.32rem;top:.28em;
  width:6px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(42deg);
}

/* ---------- 3. Evidence block "Iz nove verzije" (authentic site crops) ---------- */
.cs-ev-2{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.8rem,2vw,1.25rem);margin-top:1.2rem;
}
@media (max-width:640px){.cs-ev-2{grid-template-columns:1fr}}

.cs-frame{
  border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:#0C0F14;box-shadow:var(--shadow);
  display:flex;flex-direction:column;margin-top:1.2rem;
}
.cs-ev-2 .cs-frame{margin-top:0;height:100%}
.cs-frame__bar{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem .75rem;border-bottom:1px solid var(--line);
  background:var(--panel);
}
.cs-frame__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.cs-frame__url{
  margin-left:.45rem;font-family:var(--font-mono);font-size:.6rem;
  color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-frame figure{margin:0;display:flex;flex-direction:column;flex:1}
.cs-frame img{width:100%;height:auto;display:block}
.cs-frame figcaption{
  font-family:var(--font-mono);font-size:.7rem;color:var(--muted);
  padding:.6rem .85rem;line-height:1.45;border-top:1px solid var(--line);margin-top:auto;
}
.cs-frame figcaption b{color:var(--text-2);font-weight:600}

/* ---------- 4. Rezultati — stat tiles + verified checklist ---------- */
.cs-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.7rem,1.7vw,1rem);margin:1.2rem 0;
}
@media (max-width:720px){.cs-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.cs-stats{grid-template-columns:1fr}}
.cs-stat{
  border:1px solid var(--line);border-radius:14px;
  padding:1.05rem 1.1rem;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.cs-stat__n{
  font-family:var(--font-display);font-weight:400;line-height:1;
  font-size:clamp(1.5rem,3.2vw,2rem);color:var(--text);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.cs-stat__n .u{color:var(--accent);font-size:.6em}
.cs-stat__k{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);margin-top:.55rem;line-height:1.45}
.cs-stat__sub{font-size:.72rem;color:var(--muted);margin-top:.25rem;line-height:1.4}

.cs-checks{
  list-style:none;margin:1.1rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.55rem .95rem;
}
@media (max-width:640px){.cs-checks{grid-template-columns:1fr}}
.cs-checks li{
  position:relative;padding-left:1.55rem;
  color:var(--text-2);font-size:.9rem;line-height:1.5;
}
.cs-checks li::before{
  content:"";position:absolute;left:.2rem;top:.3em;
  width:6px;height:10px;
  border-right:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(42deg);
}

/* ---------- 5. Kvalitativna poboljšanja — info-cards ---------- */
.cs-qual{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.8rem;margin:1.1rem 0;
}
.cs-qcard{
  border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.05rem;background:var(--panel);
  display:flex;gap:.75rem;align-items:flex-start;
}
.cs-qcard__ic{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:var(--accent);
  border:1px solid rgba(247,168,27,.3);background:rgba(247,168,27,.06);
}
.cs-qcard__ic svg{width:17px;height:17px}
.cs-qcard p{margin:0;color:var(--text-2);font-size:.88rem;line-height:1.5}

/* ---------- 6. Discreet PRE/POSLE teaser (standard project → izrada-sajtova) ---------- */
.cs-teaser{
  display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:border-color .25s,transform .25s;
}
.cs-teaser:hover{border-color:rgba(247,168,27,.4);transform:translateY(-2px)}
.cs-teaser__imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-2)}
.cs-teaser figure{margin:0;position:relative;background:#0C0F14;overflow:hidden}
.cs-teaser img{width:100%;height:auto;display:block;aspect-ratio:1440/760;object-fit:cover;object-position:top center}
.cs-teaser figcaption{
  position:absolute;top:9px;left:9px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);background:rgba(8,9,12,.72);border:1px solid var(--line-2);
  padding:.24rem .55rem;border-radius:99px;backdrop-filter:blur(6px);
}
.cs-teaser figcaption.is-after{color:var(--accent);border-color:rgba(247,168,27,.4)}
.cs-teaser__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;
}
.cs-teaser__bar span{font-size:.9rem;color:var(--text-2);line-height:1.5}
.cs-teaser__bar span b{color:var(--text);font-weight:600}
.cs-teaser__go{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);
}
.cs-teaser__go svg{width:15px;height:15px}
@media (max-width:480px){
  .cs-teaser__bar{flex-direction:column;align-items:flex-start;gap:.5rem}
}