/* Rešenje — Virtuelizacija. Page-specific sections between the shared hero
   and the shared CTA: VVF/VCF product panels + decision checklist, and the
   VMware partnership panel (adapted from o-nama.css's
   .about-page-partnership 3-column pattern — same shape, own classes since
   this is a one-off section, not a shared block). */

.virt-products{
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-6);
  margin-top:var(--space-8);
}
.virt-product{overflow:hidden;transition:.18s ease}
.virt-product:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}
/* Vendor mark gets its own white plate, ruled off from the copy — both
   supplied logos are opaque WebP with a baked-in white background, so this
   zone must stay white; a tinted panel would show as a white rectangle
   behind the mark. Both are stacked lockups (icon over two lines of type),
   so they're centred rather than left-pinned — left-aligning a ~1.8:1 mark
   in a full-width plate leaves an obvious dead zone on the right.
   min-height keeps the two cards' plates aligned despite the lockups
   differing in proportion. Decorative (aria-hidden): the <h3> below
   carries the product name as real text. */
.virt-product-header{
  display:flex;align-items:center;justify-content:center;
  min-height:196px;padding:var(--space-7);
  border-bottom:1px solid var(--line);
}
.virt-product-logo{width:auto;max-width:min(100%,320px);height:auto;max-height:144px;object-fit:contain}
.virt-product-body{padding:var(--space-7)}
.virt-product-title{color:var(--blue);text-wrap:balance}
.virt-product-tagline{color:var(--text);font-weight:700;font-size:var(--fs-body-lg);line-height:var(--lh-body);text-wrap:pretty}
.virt-product-copy p{color:var(--text-secondary)}
/* Side by side, one tagline runs to a second line and the other doesn't,
   which starts the two cards' body copy at different heights. Reserving two
   lines keeps the pair aligned; dropped once the cards stack. */
@media (min-width:821px){
  .virt-product-tagline{min-height:3.2em}
}

/* Qualifying criteria as hairline-ruled rows, each marked with the AIGO
   logo mark itself — the 3x3 dot grid from --brand-dots, same token and
   muted-dot treatment as .compare-aigo-mark. Rows are centred as units, so
   the list reads as a centred column under the centred heading rather than
   a full-width block of left-hanging text. */
.virt-decision{max-width:820px;margin:var(--space-10) auto 0}
.virt-decision-heading{margin-bottom:var(--space-7);color:var(--blue);text-align:center;text-wrap:balance}
.virt-decision-list{list-style:none;border-block:1px solid var(--line)}
.virt-decision-item{
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-4);padding:var(--space-5) var(--space-2);
}
.virt-decision-item + .virt-decision-item{border-top:1px solid var(--line)}
.virt-decision-mark{
  width:16px;height:16px;flex:0 0 16px;
  background:var(--brand-dots);color:var(--red);--dot-muted:var(--line);
}
.virt-decision-item p{color:var(--text);font-size:var(--fs-body-lg);line-height:var(--lh-body);text-wrap:pretty}

/* Three illustrated rows on the shared .illus-rows component (styles.css) —
   this section sets the dividers and the copy measure; the image sizing and
   the mobile column shrink come from there. On desktop the copy column is
   held to its measure and the image+copy pair is centred as a unit, so the
   rows read as a centred column under the centred heading rather than
   left-hanging text with dead space on the right (same treatment as
   .virt-decision above, and the datacenter/ICT illustrated rows). */
.virt-partnership-list{max-width:920px;border-block:0;border-top:1px solid var(--line)}
.virt-partnership-row + .virt-partnership-row{border-top:1px solid var(--line)}
.virt-partnership-visual img{aspect-ratio:1}
.virt-partnership-row p{max-width:62ch;font-size:var(--fs-body-lg);line-height:var(--lh-body);text-wrap:pretty}

@media (min-width:821px){
  .virt-partnership-row{
    grid-template-columns:minmax(140px,180px) minmax(0,62ch);
    justify-content:center;
  }
}

@media (max-width:820px){
  .virt-products{grid-template-columns:1fr}
  /* Matches .solution-intro, which also drops to left-aligned here — and
     the rows follow it, since centring wrapped criteria reads badly. */
  .virt-decision-heading{text-align:left}
  .virt-decision-item{align-items:flex-start;justify-content:flex-start}
  .virt-decision-mark{margin-top:.4em}
}

@media (max-width:680px){
  .virt-decision-item{gap:var(--space-4);padding:var(--space-5) 0}
  .virt-decision-item p{font-size:var(--fs-body)}
  .virt-partnership-row p{font-size:var(--fs-body)}
  .virt-product-header{min-height:150px;padding:var(--space-6)}
  .virt-product-logo{max-width:min(100%,240px);max-height:108px}
  .virt-product-body{padding:var(--space-6)}
}