/* zones.css – strefy portalu (namespace .zone-*). Znaczniki: assets/js/zones.js.
   Jeden arkusz dla trzech miejsc: sekcja #strefy na portal.html (karty + kursy),
   strefy/index.html (te same karty) i strony strefy/<id>.html (bloki „centrum sterowania").

   Wszystkie bloki leżą na kartach (--card-bg) – tekst nie stoi wprost na kolażu Aero,
   więc kontrast nie zależy od tego, który fragment tła wypadł pod akapitem.
   Barwy wyłącznie z tokens.css; zdjęcie jest treścią karty (<img>), nie tłem pod
   tekstem, więc karta nie potrzebuje nakładki ani białego tekstu na fotografii. */

/* ---------- Karty wyboru strefy ---------- */

/* Liczba stref pochodzi z JSON-a, więc tory rosną z danymi (auto-fit), a nie są wpisane
   na sztywno – pięć kart mieści się w jednym rzędzie od ~1200 px. */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
}
.zone-card {
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-fast);
}
.zone-card:hover, .zone-card:focus-visible { border-color: var(--accent); }
.zone-card__media { display: block; aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.zone-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zone-card__body { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.zone-card__num { font: 500 .72rem/1.3 var(--f-mono); color: var(--ink-60); }
.zone-card__title { font: 700 1.08rem/1.25 var(--f-head); color: var(--ink); }
.zone-card__question { flex: 1; font: 400 .84rem/1.5 var(--f-body); color: var(--ink-60); }
.zone-card__cta { margin-top: .35rem; font: 600 .8rem/1.3 var(--f-body); color: var(--accent-ink); }

/* Skrót do kursów pod kartami – ścieżki edukacyjne zostają o jedno kliknięcie od strony głównej. */
.zone-courses {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  margin-top: var(--gap);
  padding: .9rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
}
.zone-courses:empty { display: none; }
.zone-courses__label { margin: 0; font: 700 .82rem/1.4 var(--f-head); color: var(--ink); }
.zone-courses__list { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.zone-courses__link, .zone-courses__all { font: 500 .84rem/1.4 var(--f-body); color: var(--accent-ink); }
.zone-courses__all { margin-left: auto; font-weight: 600; }

/* ---------- Strona strefy ---------- */

.zone-page { max-width: var(--w-wide); margin: 0 auto; padding: var(--gap) var(--page-gutter) 3rem; }
.zone-page .zone-grid { margin-top: var(--gap); }
.zone-empty { padding: var(--card-pad); background: var(--card-bg); border-radius: var(--card-radius); color: var(--ink-60); }

/* Mapa procesu obok terminów i narzędzi; bez kolumny bocznej mapa bierze całą szerokość. */
.zone-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.zone-top--single { grid-template-columns: minmax(0, 1fr); }
.zone-top__side { display: flex; flex-direction: column; gap: var(--gap); }

.zone-block {
  margin-top: var(--gap);
  padding: var(--card-pad);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.zone-top .zone-block { margin-top: 0; }
.zone-block__h { margin: 0 0 1rem; font: 700 1.15rem/1.3 var(--f-head); color: var(--ink); }

/* Kroki – numer z licznika CSS, nie z danych: kolejność w JSON-ie jest kolejnością sprawy. */
.zone-steps { margin: 0; padding: 0; list-style: none; counter-reset: zone-step; }
.zone-step { position: relative; padding: 0 0 1.25rem 2.6rem; counter-increment: zone-step; }
.zone-step:last-child { padding-bottom: 0; }
.zone-step::before {
  content: counter(zone-step);
  position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem; border-radius: var(--r-full);
  display: grid; place-items: center;
  font: 700 .82rem/1 var(--f-mono);
  color: var(--on-accent); background: var(--accent);
}
/* Linia łącząca kroki – kształt, nie kolor, niesie ciągłość procesu. */
.zone-step:not(:last-child)::after {
  content: ''; position: absolute; left: calc(.9rem - .5px); top: 2.1rem; bottom: .3rem;
  border-left: 1px solid var(--rule);
}
.zone-step__title { margin: .2rem 0 .3rem; font: 700 .98rem/1.35 var(--f-head); color: var(--ink); }
.zone-step__text { margin: 0; font: 400 .88rem/1.6 var(--f-body); color: var(--ink); max-width: 68ch; }
.zone-step__basis { margin: .35rem 0 0; font: 400 .76rem/1.4 var(--f-mono); color: var(--ink-60); }
.zone-step__refs { display: flex; flex-direction: column; gap: .3rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.zone-step__ref { display: flex; align-items: baseline; gap: .55rem; font: 400 .84rem/1.4 var(--f-body); }
.zone-step__kind { flex: 0 0 5.6rem; font: 500 .7rem/1.4 var(--f-body); color: var(--ink-60); }
.zone-step__ref a { color: var(--accent-ink); }

/* Terminy */
.zone-terms { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.zone-term { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .1rem .75rem; }
.zone-term__date { grid-row: span 2; font: 700 .8rem/1.4 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.zone-term__title { font: 400 .84rem/1.45 var(--f-body); color: var(--ink); }
.zone-term__meta { display: flex; flex-wrap: wrap; gap: .4rem; font: 400 .72rem/1.4 var(--f-body); color: var(--ink-60); }
.zone-term__meta:empty { display: none; }
.zone-term__est { padding: 0 .4rem; border: 1px solid var(--rule); border-radius: var(--r-full); }
.zone-terms__note { margin: .9rem 0 0; font: 400 .74rem/1.45 var(--f-body); color: var(--ink-60); }
.zone-terms__roles { margin: .5rem 0 0; font: 400 .8rem/1.6 var(--f-body); color: var(--ink-60); }
.zone-terms__roles a { color: var(--accent-ink); }
.zone-terms__all { margin-top: .9rem; }

/* Narzędzia */
.zone-tools { display: flex; flex-direction: column; gap: .6rem; }
.zone-tool {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .85rem 1rem;
  border: 1px solid var(--card-border); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast);
}
a.zone-tool:hover, a.zone-tool:focus-visible { border-color: var(--accent); }
.zone-tool__name { font: 700 .92rem/1.3 var(--f-head); }
.zone-tool__desc { font: 400 .8rem/1.5 var(--f-body); color: var(--ink-60); }
.zone-tool__cta { font: 600 .78rem/1.3 var(--f-body); color: var(--accent-ink); }
.zone-tool__badge { align-self: flex-start; padding: .1rem .55rem; border: 1px solid var(--rule); border-radius: var(--r-full); font: 500 .72rem/1.4 var(--f-body); color: var(--ink-60); }

/* Artykuły */
.zone-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.zone-art {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--card-border); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast);
}
.zone-art:hover, .zone-art:focus-visible { border-color: var(--accent); }
.zone-art__title { font: 700 .98rem/1.3 var(--f-head); }
.zone-art__excerpt {
  flex: 1; font: 400 .8rem/1.55 var(--f-body); color: var(--ink-60);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.zone-art__meta { font: 400 .72rem/1.4 var(--f-mono); color: var(--ink-60); }

/* Ucz się – kurs + filmy (karty filmów: media.css) */
.zone-learn { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); align-items: start; }
.zone-course {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--card-border); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast);
}
.zone-course:hover, .zone-course:focus-visible { border-color: var(--accent); }
.zone-course__kicker { font: 500 .72rem/1.4 var(--f-body); color: var(--ink-60); }
.zone-course__title { font: 700 1rem/1.3 var(--f-read); }
.zone-course__desc { font: 400 .82rem/1.55 var(--f-body); color: var(--ink-60); }
.zone-course__steps { margin: .2rem 0 0; padding-left: 1.2rem; font: 400 .8rem/1.6 var(--f-body); color: var(--ink); }
.zone-course__cta { margin-top: .2rem; font: 600 .8rem/1.3 var(--f-body); color: var(--accent-ink); }

/* Pojęcia */
.zone-concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem var(--gap); margin: 0; padding: 0; list-style: none; }
.zone-concept { display: flex; flex-direction: column; gap: .2rem; }
.zone-concept__title { font: 700 .9rem/1.35 var(--f-head); color: var(--accent-ink); }
.zone-concept__def { font: 400 .78rem/1.5 var(--f-body); color: var(--ink-60); }

/* Następny etap i pozostałe strefy */
.zone-next {
  display: flex; flex-direction: column; gap: .8rem;
  margin-top: var(--gap);
  padding: var(--card-pad);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
}
.zone-next__main { display: flex; flex-direction: column; gap: .2rem; color: var(--ink); text-decoration: none; }
.zone-next__kicker { font: 500 .74rem/1.4 var(--f-body); color: var(--ink-60); }
.zone-next__title { font: 700 1.15rem/1.3 var(--f-head); color: var(--accent-ink); }
.zone-next__q { font: 400 .86rem/1.5 var(--f-body); color: var(--ink-60); }
.zone-next__others { margin: 0; font: 400 .84rem/1.6 var(--f-body); color: var(--ink-60); }
.zone-next__others a { color: var(--accent-ink); }

/* ---------- „Dalej w strefie” – koniec artykułu (artykuly/*.html, initArticleZones) ---------- */

/* Ta sama szerokość i karta co .art-end-cta pod spodem: blok czyta się jako część zakończenia
   artykułu, nie jako obca wstawka. */
.zone-in-art {
  max-width: 680px; margin: 2rem auto 0;
  padding: var(--card-pad);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.zone-in-art + .zone-in-art { margin-top: var(--gap); }
.zone-in-art__kicker { margin: 0; font: 500 .74rem/1.4 var(--f-body); color: var(--ink-60); }
.zone-in-art__title { margin: .2rem 0 .3rem; font: 700 1.1rem/1.3 var(--f-head); }
.zone-in-art__title a { color: var(--accent-ink); text-decoration: none; }
.zone-in-art__title a:hover, .zone-in-art__title a:focus-visible { text-decoration: underline; }
.zone-in-art__q { margin: 0; font: 400 .86rem/1.5 var(--f-body); color: var(--ink-60); }
.zone-in-art__list { display: flex; flex-direction: column; gap: .35rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.zone-in-art__item { display: flex; align-items: baseline; gap: .55rem; font: 400 .86rem/1.45 var(--f-body); }
.zone-in-art__item a { color: var(--accent-ink); }
.zone-in-art__cta { margin-top: 1rem; }

@media (max-width: 880px) {
  .zone-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .zone-step { padding-left: 2.3rem; }
  .zone-step__ref { flex-direction: column; gap: 0; }
  .zone-step__kind { flex-basis: auto; }
  .zone-courses__all { margin-left: 0; }
  .zone-in-art__item { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zone-card, .zone-tool, .zone-art, .zone-course { transition: none; }
}