/* error-cycle — zamknięta pętla przepływu, theme noraline.
   Plain CSS (zero nowych klas Tailwind). Zastąpił układ kołowy, który przy
   kartach z tekstem różnej długości wyglądał krzywo i marnował ~700px pionu.

   Animacja: podświetlenie wędruje po kartach w nieskończonej pętli.
   Karty NIE mają .nl-reveal — mają własny transform w keyframes, a .nl-reveal
   animuje tę samą właściwość i by ją nadpisała. */

.ecyc { padding: 4rem 0; }
.ecyc__wrap { max-width: 78rem; margin: 0 auto; padding: 0 1.5rem; }
.ecyc__head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.ecyc__title { margin: 10px auto 0; color: var(--nl-ink); }
.ecyc__intro { margin: 1rem auto 0; max-width: 42rem; font-size: 1.05rem; line-height: 1.6; color: var(--nl-muted); }

.ecyc__loop { display: flex; flex-direction: column; gap: 0; }

.ecyc__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;      /* równa wysokość kart — to naprawia „krzywiznę” */
  gap: 0;
}
/* strzałki nie mają być kolumną 1fr — zwężamy je do własnej szerokości */
.ecyc__row .ecyc__arrow { grid-column: auto; }

.ecyc__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--line, #d9d3e8);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: 5px 5px 0 var(--line, #d9d3e8);
  animation: ecyc-live calc(var(--n, 6) * 1.5s) linear infinite;
  animation-delay: calc(var(--i, 0) * 1.5s);
}

@keyframes ecyc-live {
  0%, 11% {
    border-color: var(--nl-ink);
    box-shadow: 8px 8px 0 var(--nl-amber);
    transform: translateY(-4px);
  }
  22%, 100% {
    border-color: var(--line, #d9d3e8);
    box-shadow: 5px 5px 0 var(--line, #d9d3e8);
    transform: translateY(0);
  }
}

.ecyc__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
  border-radius: 999px; background: var(--nl-ink); color: #fff;
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 0.85rem;
  margin-bottom: 0.85rem;
}
.ecyc__ic { display: none; }   /* numer wystarcza — ikona dubluje sygnał w ciasnej karcie */

.ecyc__ct {
  margin: 0 0 0.45rem;
  font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: 1.02rem; line-height: 1.25; color: var(--nl-ink);
}
.ecyc__cd { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--nl-muted); }

.ecyc__arrow {
  align-self: center;
  padding: 0 0.9rem;
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--nl-amber);
}

/* Środek: strzałka powrotu po lewej, etykieta, zejście po prawej */
.ecyc__mid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2.2rem;
}
.ecyc__turn { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--nl-amber); }
.ecyc__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--nl-muted);
  padding: 0.5rem 1.1rem; border: 2px dashed var(--line, #d9d3e8); border-radius: 999px;
}

.ecyc__cta { text-align: center; margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .ecyc__card { animation: none; }
}

/* Mobile — pętla rozwija się w pionową listę, wszystkie strzałki w dół */
@media (max-width: 900px) {
  .ecyc { padding: 3rem 0; }
  .ecyc__row { grid-auto-flow: row; gap: 0; }
  .ecyc__card { animation: none; box-shadow: 5px 5px 0 var(--line, #d9d3e8); }
  .ecyc__arrow { padding: 0.55rem 0; text-align: center; }
  .ecyc__arrow::before { content: "↓"; }
  .ecyc__arrow { font-size: 0; }          /* chowamy →/← , pokazujemy ↓ z ::before */
  .ecyc__arrow::before { font-size: 1.5rem; }
  .ecyc__mid { flex-direction: column; gap: 0.6rem; padding: 0.8rem 0; }
  .ecyc__turn { display: none; }
}