/* ICT Managed Servisi — template-resenje-ict-managed-servisi.php.
   Shared solution-intro and illus-row primitives establish the typography,
   content measures and responsive foundations. */

/* Rows mirror the Datacenter "infrastructure overview" pairing: copy on the
   left, illustration on the right, every row the same (no alternating). */
.managed-services-section{background:var(--white)}
.managed-services-list{max-width:none;border-block:0;border-top:1px solid var(--line)}
.managed-service{
  grid-template-columns:minmax(0,62ch) 210px;justify-content:center;align-items:center;
  min-height:0;gap:clamp(var(--space-5),4vw,var(--space-7));padding:var(--space-6) 0;
}
.managed-service + .managed-service{border-top:1px solid var(--line)}
.managed-service-visual{grid-column:2;grid-row:1;width:100%;max-width:210px;justify-self:end}
.managed-service-visual img{aspect-ratio:1;object-fit:contain}
.managed-service-copy{grid-column:1;grid-row:1;max-width:62ch}
.managed-service h3{max-width:24ch;color:var(--blue);text-wrap:balance}
.managed-service-text p{max-width:62ch;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-body);text-wrap:pretty}

/* Closing section: copy paired with one supporting scene (Datacenter
   "flexible approach" layout), image cropped to a compact 3:2 so its height
   sits close to the two paragraphs. */
.managed-evolution-section{background:var(--soft)}
.managed-evolution-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,560px);align-items:stretch;
  gap:clamp(var(--space-6),5vw,var(--space-9));max-width:1040px;margin-inline:auto;
}
.managed-evolution-copy{align-self:center}
.managed-evolution-visual{align-self:stretch;min-height:300px}
.managed-evolution-visual img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}

@media (max-width:820px){
  .managed-services-section,.managed-evolution-section{padding-block:var(--space-10)}
  .managed-service{grid-template-columns:1fr;min-height:0;gap:var(--space-4);padding:var(--space-6) 0}
  .managed-service-visual{grid-column:1;grid-row:1;width:150px;max-width:150px;justify-self:center}
  .managed-service-copy{grid-column:1;grid-row:2;max-width:none}
  .managed-evolution-layout{grid-template-columns:1fr;gap:var(--space-6)}
  .managed-evolution-visual{align-self:auto;min-height:0;width:min(100%,480px);margin-inline:auto}
  .managed-evolution-visual img{aspect-ratio:3/2;height:auto}
}

@media (max-width:520px){
  .managed-service-visual{width:120px;max-width:120px}
}