/* Procedo — ATOM cycle (our-process)
   Os quatro diagramas dos cards sao desenhados so com divs posicionados dentro de um
   "canvas" de coordenadas fixas de 200x88 (.atom-canvas), centralizado no painel e
   reduzido com scale(.88) pra nunca encostar na borda do card. As coordenadas de cada
   forma vem inline, do array $atom_stages em _partials/our-process/atom-cycle.php; aqui
   fica so a aparencia (cor, espessura, radius).
   A cor da etapa entra uma vez so, como --atom-accent no <article>. */

.atom-cycle {
  --atom-panel-bg: #eef3fb;      /* fundo do painel do diagrama */
  --atom-neutral: #c9d9ee;       /* preenchimento neutro */
  --atom-neutral-mid: #9dbae0;
  --atom-faint: #d9e3f1;
  --atom-faintest: #e6ecf5;
  --atom-stroke: #8ba7ce;        /* linhas e contornos */
  --atom-stroke-deep: #4f7fc4;   /* colchete de medicao do Audit */
  --atom-stroke-arrow: #8fa9cd;  /* setas e chevrons */
  --atom-dash: #7896c2;          /* tracejado */
  --atom-panel-border: #cbd8ea;  /* borda dos paineis brancos */
  --atom-divider: #eef1f6;       /* divisor interno do card */
}

/* grid: 4 -> 2x2 -> 1. Nunca 3+1, que quebra a leitura das quatro etapas.
   CSS Grid e nao row-cols porque este build do Crafto so tem .gap-2 e o .row daqui
   tem os gutters sobrescritos em procedo.css. */
.atom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.atom-card {
  display: flex;
  flex-direction: column;
  /* a borda vem daqui, e nao das utilities .border / .border-color-*, que sao !important */
  border: 1px solid var(--border-gray);
}

.atom-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.atom-letter {
  color: var(--atom-accent);
}

/* o mt-auto no markup e o que alinha este divisor na mesma altura nos quatro cards,
   mesmo com paragrafos de tamanhos diferentes */
.atom-who {
  border-top: 1px solid var(--atom-divider);
}

/* painel do diagrama */
.atom-diagram {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: var(--atom-panel-bg);
  border-bottom: 1px solid var(--border-gray);
}

.atom-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 88px;
  margin: -44px 0 0 -100px;
  transform: scale(0.88);
}

.atom-canvas > * {
  position: absolute;
  display: block;
}

/* formas */
.atom-line {
  background: var(--atom-stroke);
}

.atom-line--deep {
  background: var(--atom-stroke-deep);
}

.atom-line--arrow {
  background: var(--atom-stroke-arrow);
}

.atom-dashline {
  height: 0;
  border-top: 1px dashed var(--atom-stroke);
}

.atom-dash {
  border: 1px dashed var(--atom-dash);
  border-radius: 3px;
}

.atom-dash--deep {
  border-color: var(--atom-stroke-deep);
}

.atom-fill {
  background: var(--atom-neutral);
  border-radius: 3px;
}

.atom-fill--accent {
  background: var(--atom-accent);
}

.atom-fill--mid {
  background: var(--atom-neutral-mid);
}

.atom-fill--faint {
  background: var(--atom-faint);
}

.atom-fill--faintest {
  background: var(--atom-faintest);
}

.atom-outline {
  border: 1px solid var(--atom-stroke);
  border-radius: 2px;
}

.atom-panel {
  background: #fff;
  border: 1px solid var(--atom-panel-border);
  border-radius: 5px;
}

.atom-chevron {
  border-top: 1px solid var(--atom-stroke-arrow);
  border-right: 1px solid var(--atom-stroke-arrow);
  transform: rotate(45deg);
}

.atom-chevron--accent {
  border-top-width: 2px;
  border-right-width: 2px;
  border-top-color: var(--atom-accent);
  border-right-color: var(--atom-accent);
}

.atom-ring {
  border: 1px solid var(--atom-stroke);
  border-radius: 50%;
}

.atom-arc {
  border: 2px solid transparent;
  border-top-color: var(--atom-accent);
  border-right-color: var(--atom-accent);
  border-radius: 50%;
}

/* colchete do loop: liga o quarto card de volta ao primeiro */
.atom-loop {
  position: relative;
  height: 54px;
  margin-top: 14px;
}

.atom-loop-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 22px;
  border: 1px solid var(--border-gray);
  border-top: none;
  border-radius: 0 0 14px 14px;
}

.atom-loop-arrow {
  position: absolute;
  left: -4px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-left: 1px solid #9fb2cd;
  border-top: 1px solid #9fb2cd;
  transform: rotate(45deg);
}

/* a legenda corta a linha; o fundo tem que ser o mesmo da secao (.bg-solitude-blue) */
.atom-loop-label {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  background: var(--solitude-blue);
  padding: 0 14px;
  white-space: nowrap;
}

.atom-loop-fallback {
  display: none;
}

@media (max-width: 1000px) {
  .atom-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* no layout de 2 ou 1 coluna o colchete nao liga mais o ultimo card ao primeiro,
     entao vira a mesma frase em texto */
  .atom-loop {
    display: none;
  }

  .atom-loop-fallback {
    display: block;
  }
}

@media (max-width: 640px) {
  .atom-grid {
    grid-template-columns: 1fr;
  }
}