/*
 * @file_version 1.1.1
 * Styles for the AI sections of /en/ and /ro/ (platform overview, AI engine,
 * the product at work, ready-made AI applications, department and implementation
 * agents). Added 29.10.2026 from the U.S. executive brief. Everything else on the
 * page keeps using /ro/ecm-sections.css; only what that file does not have is here.
 * Tokens come from the .ro-ecm scope of ecm-sections.css (--navy-*, --line, --radius ...).
 */

/* Full-width diagram under a section head: the platform map and the AI engine. */
.ro-ecm .ai-figure { margin: 0 0 40px; }
.ro-ecm .ai-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-s); background: #fff;
}
.ro-ecm .ai-figure figcaption { margin-top: 12px; text-align: center; color: var(--muted); font-size: .9rem; }

/* A lead paragraph between the diagram and the cards. */
.ro-ecm .ai-lead { max-width: 920px; margin: 0 auto 34px; text-align: center; color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
.ro-ecm .ai-lead strong { color: var(--ink); }

/* The 'Interconnected systems' sub-head inside the platform section. */
.ro-ecm .ai-sub { max-width: 920px; margin: 48px auto 24px; text-align: center; }
.ro-ecm .ai-sub h3 { font-size: 1.5rem; color: var(--ink); }
.ro-ecm .ai-sub p { margin-top: 10px; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

/* Category cards reuse .ai-cat / .ai-chips from ecm-sections.css; three per row on wide screens. */
.ro-ecm .ai-cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .ro-ecm .ai-cat-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .ro-ecm .ai-cat-grid--3 { grid-template-columns: 1fr; } }

/* Cards with an 'own engine' line and a 'works with' list (the product at work). */
.ro-ecm .ai-engine-own { margin-top: 12px; font-size: .95rem; color: #3c4a72; line-height: 1.55; }
.ro-ecm .ai-engine-own strong { color: var(--ink); }
.ro-ecm .ai-engine-with { margin-top: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }

/* Five implementation stages on one row; the shared .wizard has four columns. */
.ro-ecm .wizard--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .ro-ecm .wizard--5 { grid-template-columns: repeat(3, 1fr); } .ro-ecm .wizard--5 .wstep:nth-child(3)::after { display: none; } }
@media (max-width: 760px)  { .ro-ecm .wizard--5 { grid-template-columns: 1fr 1fr; } .ro-ecm .wizard--5 .wstep:nth-child(3)::after { display: inline; } }

/* Department agents: a dense grid of small cards, department in bold, what the agent does under it. */
.ro-ecm .ai-dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ro-ecm .ai-dept { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-s); }
.ro-ecm .ai-dept h4 { margin: 0; font-size: .98rem; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.ro-ecm .ai-dept h4 i { color: var(--vogo-icon-blue); font-size: 18px; }
.ro-ecm .ai-dept p { margin: 6px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 1024px) { .ro-ecm .ai-dept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ro-ecm .ai-dept-grid { grid-template-columns: 1fr; } }

/* A link row under a block of cards (to the hub pages). */
.ro-ecm .ai-more { margin-top: 28px; text-align: center; }
.ro-ecm .ai-more a { font-weight: 700; color: var(--azure); text-decoration: none; }
.ro-ecm .ai-more a:hover { text-decoration: underline; }

/* ---- VOGO card style and VOGO icons style (user, 29.10.2026), as on /ro/superintell/ ----
   Model: C:\VOGO\images\modele\vogo-icons-style.png — a flat outline glyph in one blue, no tile, no gradient,
   no shadow. In a `.vogo-cards` container the icon sits in a narrow first column and the title on the same row,
   beside it; everything else in the card spans its full width. Applies to the Core modules lists and to the
   card grids of the AI engine, the own engines and the Asist suite. */
.ro-ecm { --vogo-icon-blue: #0F6CBD; }
.ro-ecm .vogo-cards .card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: start; }
.ro-ecm .vogo-cards .card > * { grid-column: 1 / -1; }
.ro-ecm .vogo-cards .card > .card-ic {
  grid-column: 1; grid-row: 1; align-self: center;
  position: static; width: auto; height: auto; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; display: block;
}
.ro-ecm .vogo-cards .card > .card-ic i { font-size: 30px; line-height: 1; color: var(--vogo-icon-blue); }
.ro-ecm .vogo-cards .card > h3,
.ro-ecm .vogo-cards .card > h4 { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
.ro-ecm .vogo-cards .card > p { margin-top: 12px; }

/* The category cards of the interconnected systems and the department cards: same flat blue glyph. */
.ro-ecm .ai-cat-ic { width: auto; height: auto; background: none; border-radius: 0; box-shadow: none; }
.ro-ecm .ai-cat-ic i { font-size: 28px; line-height: 1; color: var(--vogo-icon-blue); }

/* ---- Core modules: four area columns, each a stack of compact VOGO cards (29.10.2026) ---- */
.ro-ecm .ai-mod-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.ro-ecm .ai-mod-area__title {
  font-size: 1.05rem; color: var(--vogo-icon-blue); margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--vogo-icon-blue);
}
.ro-ecm .ai-mod-list { display: grid; gap: 12px; }
.ro-ecm .ai-mod-list .card { padding: 16px 18px; column-gap: 12px; }
.ro-ecm .ai-mod-list .card > .card-ic i { font-size: 22px; }
.ro-ecm .ai-mod-list .card > h4 { font-size: 1rem; line-height: 1.25; }
.ro-ecm .ai-mod-list .card > p { margin-top: 8px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) { .ro-ecm .ai-mod-areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ro-ecm .ai-mod-areas { grid-template-columns: 1fr; } }