/* Rešenje — Custom rešenja. Page-specific styles for the bespoke sections
   between the shared hero and CTA. */

/* "Kada je custom rešenje pravi izbor" — a "which of these is you?" qualifier:
   four modes of custom work, each led by a verb (Razviti / Dodati / Prilagoditi
   / Povezati). A centered stack under the centered header — verb large in the
   accent colour, its clause below, hairline between rows, on a narrow measure
   so the whole block sits in the middle of the page. No panel, no icons. Rows
   ease in on scroll via the global section .reveal; static under reduced motion. */
.cr-when{background:var(--soft)}

.cr-when-list{max-width:620px;margin:var(--space-8) auto 0}
.cr-when-item{
  text-align:center;text-wrap:balance;
  padding:clamp(var(--space-4),2.6vw,var(--space-6)) 0;border-top:1px solid var(--line);
  color:var(--text-secondary);font-size:clamp(18px,1.8vw,22px);line-height:var(--lh-body);
}
.cr-when-item:last-child{border-bottom:1px solid var(--line)}
.cr-when-verb{display:inline;color:var(--page-accent);font-weight:750}
.cr-when-rest{display:inline;margin:0;max-width:none}

.cr-when.reveal .cr-when-item{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 80ms);
}
.cr-when.reveal.is-visible .cr-when-item{opacity:1;transform:none}

@media (max-width:640px){
  .cr-when-list{margin-top:var(--space-7)}
}
@media (prefers-reduced-motion:reduce){
  .cr-when.reveal .cr-when-item{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   "Od potrebe do gotovog sistema" — the M.A.S.T.:GO features-grid card
   (16:7 image on top, title with a short accent underline, copy below;
   1px --line border, subtle hover) in a 2x2 grid. Ported from resenje-go.css
   since that block's CSS doesn't load here.
   ========================================================================== */
.cr-manage{background:var(--white)}
.cr-manage-cards-heading{
  margin:var(--space-8) 0 var(--space-5);
  color:var(--text);font-size:18px;font-weight:750;
  line-height:var(--lh-title);letter-spacing:var(--tracking-title);
}
.cr-manage-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);
}
.cr-manage-card{
  display:grid;grid-template-rows:auto 1fr;
  padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .18s ease;
}
.cr-manage-card:hover{border-color:#d7d9df}
.cr-manage-visual{
  position:relative;overflow:hidden;margin-bottom:22px;
  aspect-ratio:16 / 7;border-radius:16px;background:var(--soft-2);
}
.cr-manage-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-manage-visual:empty{display:grid;place-items:center}
.cr-manage-visual:empty::after{
  content:"";width:24px;height:24px;background:var(--brand-dots);color:var(--muted);opacity:.5;
}
.cr-manage-body{display:grid;gap:var(--space-4);padding:0 8px 8px}
.cr-manage-title{
  position:relative;padding-bottom:14px;border-bottom:1px solid var(--line);
  color:var(--text);font-size:var(--fs-card-title);font-weight:750;
  line-height:var(--lh-title);letter-spacing:var(--tracking-title);
}
.cr-manage-title::after{
  content:"";position:absolute;left:0;bottom:-1px;width:48px;height:2px;background:var(--page-accent);
}
.cr-manage-body p{color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-body)}

@media (max-width:1100px){
  .cr-manage-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .cr-manage-grid{grid-template-columns:1fr}
}