/* ==========================================================================
   Ilustrácie z makiet (kreslené v CSS), kým nie sú reálne fotografie.
   Rozmery sú v cqw (percentá šírky ilustrácie), takže sa plynulo zmenšujú
   od desktopu po mobil a zachovávajú pomery z makiet.
   Použitie: <div class="illo illo--printer" role="img" aria-label="…">…časti…</div>
   ========================================================================== */

.illo {
  position: relative;
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  color: var(--color-on-dark);
}
.illo > * { position: absolute; }

/* ------------------------------------------------------ Spoločné časti */

.illo__grid { inset: 0; background: var(--media-grid); }
.illo__grid--soft { inset: 3cqw; opacity: .7; }

.illo__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  z-index: 3;
}
.illo__label--bl { left: 4cqw; bottom: 4cqw; }
.illo__label--br { right: 4cqw; bottom: 4cqw; }
.illo__label--ink { color: var(--color-ink); }

/* Tlačiareň (telo so svetlým plášťom, displej, nápis) */
.illo__machine {
  background: var(--illo-metal);
  border-radius: 9px;
  box-shadow: var(--illo-shadow);
  z-index: 2;
}
.illo__machine::before {
  content: "";
  position: absolute;
  left: 11%; right: 11%; top: 9%; height: 37%;
  background: var(--illo-screen);
  border-radius: 3px;
  box-shadow: inset 0 -5px 0 var(--color-brand);
}
.illo__machine b {
  position: absolute;
  left: 11.5%; bottom: 11%;
  font-size: 7cqw;
  line-height: 1;
  color: var(--illo-metal-dark);
}

/* Hadica / kábel ako otvorený kruh */
.illo__cable {
  border: 1.8cqw solid var(--color-navy);
  border-left-color: transparent;
  border-radius: 50%;
  z-index: 2; /* ako v makete: hadica ide cez telo stroja (je za ním v HTML) */
}

/* Kruh (obrys) */
.illo__ring { border: 1px solid var(--color-line-strong); border-radius: 50%; }
.illo__ring--brand { border-color: var(--color-brand); }
.illo__ring--dashed { border-style: dashed; }

/* Štítok v ilustrácii */
.illo__tag {
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg);
  border: var(--border-strong);
  color: var(--color-ink);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 3;
}

/* Šikmý dopravníkový pás */
.illo__band {
  left: 50%; top: 50%;
  width: 70cqw; height: 22cqw;
  background: var(--illo-band);
  box-shadow: var(--illo-shadow);
  transform: translate(-50%, -50%) rotate(-6deg);
}

/* Nápis na ilustrácii („SERVIS SO ZÁZEMÍM“) */
.illo__title {
  left: var(--pad-panel);
  bottom: var(--pad-panel);
  right: var(--pad-panel);
  font-size: var(--fs-h3);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  z-index: 3;
}

/* ============================================================= Varianty */

/* 1. Priemyselná tlačiareň CIJ s hadicou (kategória, produkt) */
.illo--printer { aspect-ratio: 712 / 530; background: var(--color-surface); }
.illo--printer .illo__grid { inset: 3cqw; opacity: .55; }
.illo--printer .illo__machine { right: 16cqw; top: 7.7cqw; width: 37cqw; height: 55cqw; }
.illo--printer .illo__cable { right: 4.9cqw; top: 29.5cqw; width: 25.3cqw; height: 25.3cqw; }

/* 2. Tlačová hlava nad kruhom (technológia atrament) */
.illo--printhead { aspect-ratio: 630 / 470; }
.illo--printhead .illo__ring { right: 7cqw; top: 6.3cqw; width: 55.5cqw; height: 55.5cqw; }
.illo__head {
  right: 23cqw; top: 15cqw;
  width: 32.5cqw; height: 40.5cqw;
  background: var(--color-navy);
  border-radius: 13px 13px 4px 4px;
  box-shadow: var(--illo-shadow);
}
.illo__head::before { content: ""; position: absolute; left: 21%; top: 13.7%; width: 58.5%; height: 21.6%; background: #0e3a47; border-left: 5px solid var(--color-brand); }
.illo__head::after  { content: ""; position: absolute; left: 38.5%; bottom: -32%; width: 23.4%; height: 32%; background: var(--color-black); }

/* 3. Značiaci systém v tmavom ráme (homepage hero) */
.illo--device { background: var(--media-light); }
.illo--device::before { content: ""; position: absolute; inset: 8% 10%; background: var(--color-navy); box-shadow: 0 45px 80px rgb(0 0 0 / .33); }
.illo__device {
  inset: 20% 20% 16%;
  border: 1px solid #3d5961;
  background: linear-gradient(135deg, #0b3a47, var(--color-black));
  z-index: 2;
}
.illo__device::before { content: ""; position: absolute; right: 9%; top: 10%; width: 42%; height: 24%; background: var(--color-brand-pale); border: 12px solid #123f4b; }
.illo__device::after  { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 18px; background: #f0c800; }

/* 4. Fľaše na pásoch (nápojový priemysel) */
.illo--bottles { aspect-ratio: 712 / 525; background: var(--media-light); }
.illo--bottles .illo__band { width: 115cqw; height: 16.9cqw; top: 38cqw; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); }
.illo__bottle {
  top: 14.7cqw;
  width: 13.3cqw; height: 35.1cqw;
  background: var(--illo-bottle);
  border-radius: 30px 30px 20px 20px;
  z-index: 2;
}
.illo__bottle::before { content: ""; position: absolute; left: 28%; top: -18%; width: 44%; height: 22%; background: var(--illo-bottle-neck); }
.illo__bottle--1 { left: 14cqw; }
.illo__bottle--2 { left: 31.6cqw; }
.illo__bottle--3 { left: 49.2cqw; }

/* 5. Schéma prepojenia systémov (integrácia) */
.illo--scheme {
  aspect-ratio: 712 / 535;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding-inline: 4cqw;
  background: var(--media-grid), var(--color-surface);
}
.illo--scheme > * { position: relative; }
.illo--scheme .illo__label { position: absolute; }
.illo__line { position: absolute !important; left: 9cqw; right: 9cqw; top: 50%; height: 2px; background: var(--color-brand); }
.illo__node {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16.9cqw; aspect-ratio: 1;
  padding: 1cqw;
  background: var(--color-bg);
  border: var(--border-strong);
  box-shadow: 0 18px 35px rgb(185 196 200 / .8);
  color: var(--color-ink);
  font-size: clamp(.5625rem, 1.7cqw, .75rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}
.illo__node--dark { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }

/* 6. Servisný model: stroj v kruhoch so štítkami (servis) */
.illo--service { aspect-ratio: 720 / 535; background: var(--media-grid), var(--color-surface); }
.illo--service .illo__ring { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.illo--service .illo__ring--outer { width: 62.5cqw; height: 62.5cqw; border-color: var(--color-brand); border-style: dashed; }
.illo--service .illo__ring--inner { width: 45.8cqw; height: 45.8cqw; border-color: var(--color-brand); }
.illo--service .illo__machine {
  left: 50%; top: 50%;
  width: 32.6cqw; height: 43.8cqw;
  transform: translate(-50%, -50%);
  background: var(--illo-metal-light);
  border: var(--border-strong);
  border-radius: 0;
}
.illo--service .illo__machine::before { top: 11%; height: 33%; border-radius: 0; }
.illo--service .illo__machine b { left: 8%; bottom: 6%; font-size: clamp(.5rem, 1.3cqw, .5625rem); letter-spacing: .13em; color: var(--color-ink); font-weight: var(--fw-medium); }
.illo--service .illo__tag--1 { left: 4.9cqw; top: 11.1cqw; }
.illo--service .illo__tag--2 { right: 3.5cqw; top: 20.1cqw; }
.illo--service .illo__tag--3 { left: 6.3cqw; bottom: 11.1cqw; }
.illo--service .illo__tag--4 { right: 4.2cqw; bottom: 10.4cqw; }

/* 7. Kosoštvorec (servisný stack) */
.illo--diamond { background: #e5ebed; min-height: 300px; }
.illo__diamond { left: 50%; top: 50%; width: min(30cqw, 250px); aspect-ratio: 1; border: 1px solid #9da9ae; transform: translate(-50%, -50%) rotate(45deg); }

/* 8. Výrobná hala, perspektívna plocha (o spoločnosti) */
.illo--facility { aspect-ratio: 712 / 535; background: linear-gradient(145deg, #dce4e6, #a8b7bc); }
.illo__plane { left: 8%; right: 8%; top: 17%; height: 58%; background: #c9d2d5; clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%); box-shadow: var(--illo-shadow); }

/* 9. Ľudia, siluety (o spoločnosti) */
.illo--people { background: linear-gradient(145deg, #d7e0e2, #9fadb3); min-height: 360px; }
.illo__person { bottom: 0; width: 26.4cqw; height: 44.3cqw; border-radius: 13cqw 13cqw 0 0; background: #c2ccd0; }
.illo__person--1 { left: 14.3cqw; }
.illo__person--2 { right: 14.3cqw; background: #b5c1c5; }

/* 10. Stroj stredom plochy (produktový stack, detail) */
.illo--unit { background: var(--media-light); min-height: 320px; }
.illo--unit .illo__machine { left: 50%; top: 50%; width: 33cqw; height: 46.5cqw; transform: translate(-50%, -50%); border-radius: 7px; }
.illo--unit .illo__machine::before { top: 12%; height: 37%; }

/* 11. Malý stroj v karte (karty modelov a technológií) */
.illo--card { aspect-ratio: 600 / 280; background: var(--illo-media-soft); }
.illo--card .illo__machine { left: 50%; top: 4.2cqw; width: 28.3cqw; height: 38.3cqw; transform: translateX(-50%); border-radius: 7px; }
.illo--card .illo__machine::before { left: 14.7%; right: 14.7%; top: 14.3%; height: 39%; }

/* 12. Blok s tieňom v karte (karty technológií na stránke atrament) */
.illo--block { aspect-ratio: 368 / 205; background: var(--illo-media-paper); }
.illo__block { right: 10.3cqw; top: 7.6cqw; width: 36.7cqw; height: 40.8cqw; background: var(--color-navy); box-shadow: -6cqw 4.9cqw 0 #aeb9bd; }

/* 13. Pás s aplikáciou (aplikácie, článok) */
.illo--band { background: var(--media-light); min-height: 320px; }

/* 14. Titulná ilustrácia článku: stroj nad pásom */
.illo--cover { aspect-ratio: 1332 / 610; background: linear-gradient(145deg, #dce4e6, #9dabb1); }
.illo--cover .illo__band { width: 108%; height: 20.5%; top: 55%; }
.illo--cover .illo__machine { left: 20%; top: 9cqw; width: 15.8cqw; height: 23.3cqw; border-radius: 7px; }
.illo--cover .illo__machine::before { top: 10%; height: 37%; }

/* Ilustrácia ako vizuál v hero (výška podľa pomeru strán) */
.hero__media.illo { min-height: 0; align-self: center; }

/* Ilustrácia v karte: výšku dáva pomer strán (min-height z .card__media by cez pomer rozšíril kartu v mriežke) */
.card__media.illo { min-height: 0; }

/* Značiaci systém v hero (bez pevného pomeru): na mobile pomer z makety, od 900 px výška stĺpca */
.hero__media.illo--device { align-self: stretch; aspect-ratio: 560 / 700; }
@media (min-width: 900px) { .hero__media.illo--device { aspect-ratio: auto; } }

/* Servisný model: nápis na stroji verzálkami ako v makete */
.illo--service .illo__machine b { text-transform: uppercase; }

/* Ilustrácia v texte článku: odsadenie ako obrázok v .prose */
.prose > .illo { margin-block: var(--space-9); }

/* Schéma: odsadenie a medzera v % šírky ilustrácie (cqw na samotnom kontajneri sa počíta z viewportu) */
.illo--scheme { padding-inline: 4%; gap: 2%; }

/* Fotografia namiesto kreslenej ilustrácie: rozmer a pomer strán ostávajú z variantu (.illo--band, .illo--printer…),
   kreslené časti sa nevykresľujú. Vizuály: design/system/img/foto/, návrh: docs/vizualy.md. */
.illo--photo { background: var(--color-surface); }
.illo--photo::before, .illo--photo::after { content: none; }
.illo--photo > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }