/* ============================================================================
   /8klasista — publiczny landing przygotowania do egzaminu ósmoklasisty
   ============================================================================

   Ten arkusz NIE definiuje własnej palety. Strona renderuje się w kontenerze
   `.korki-home .korki-e8`, więc korzysta z tokenów homepage (`--kh-primary`,
   `--kh-ink`, `--kh-muted`, `--kh-line`, `--kh-green`…) i z jej komponentów
   (`.kh-section`, `.kh-segment`, `.kh-fieldset`, `.kh-primary-button`,
   `.kh-steps`, `.kh-benefit-grid`, `.kh-bot`, `.kh-final-card`, `.kh-footer`).
   Dzięki temu /8klasista ma ten sam język wizualny co strona główna i /matura,
   a tutaj są wyłącznie komponenty, których homepage nie ma.

   Wszystkie klasy mają prefiks `k8-`, żeby nie kolidowały z `kh-` (homepage),
   `km-` (/matura) ani `zone-` (stary widok strefy, `zones.css`).

   RÓŻNICA WZGLĘDEM /matura
   Ta strona jest zbudowana z PASM DWUKOLUMNOWYCH: „co mam zrobić dzisiaj”
   stoi obok „gdzie tracisz punkty”, a tydzień nauki obok postępu. Wiąże to
   pytanie z odpowiedzią i skraca stronę. /matura używa sekcji jednokolumnowych
   z trzema panelami w rzędzie, więc siatki nie są wspólne.

   TON
   Wolno tu być odrobinę bardziej dynamicznie niż na /matura: odręczne akcenty
   (`.k8-hand`), płomień przy dniach nauki, energiczniejsze mikrocopy. Nie wolno
   wejść w stylistykę dziecięcą — odbiorcą jest uczeń 13–15 lat.

   UWAGA NA BREAKPOINTY
   `homepage.css` jest wczytywany PRZED tym plikiem, ale jego mobilne reguły
   celują w klasy `kh-*`. Każde nadpisanie komponentu homepage klasą `k8-*`
   (np. czterokolumnowa siatka kroków) musi więc powtórzyć własne breakpointy.
   ========================================================================== */

.korki-e8 {
  --k8-radius: 14px;
  --k8-radius-sm: 10px;
  --k8-shadow: 0 18px 40px rgba(16, 21, 47, 0.07);
  --k8-shadow-sm: 0 8px 18px rgba(16, 21, 47, 0.05);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.korki-e8 .kh-hero h1 {
  max-width: 700px;
}

.korki-e8 .kh-hero-copy {
  max-width: 620px;
}

/* Odręczne akcenty. Dekoracja, więc w szablonie są `aria-hidden`, a na
   mniejszych ekranach znikają, zamiast wchodzić w treść. */
.k8-hand {
  position: absolute;
  z-index: 2;
  max-width: 150px;
  color: #7a5af8;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.35;
  transform: rotate(-6deg);
  pointer-events: none;
}

.k8-hand-one {
  top: 74px;
  right: 13%;
}

.k8-hand-two {
  top: 150px;
  right: 3%;
  transform: rotate(5deg);
}

.k8-hero-card {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius);
  box-shadow: var(--k8-shadow);
  overflow: hidden;
}

.k8-hero-card > * {
  min-width: 0;
  padding: 26px 26px 24px;
}

/* ── Hero: lewa kolumna — cel ─────────────────────────────────────────── */

.k8-goal-form {
  border-right: 1px solid var(--kh-line);
}

.k8-goal-form .kh-fieldset {
  margin-bottom: 16px;
}

.k8-goal-form .kh-primary-button {
  width: 100%;
}

/* ── Hero: prawa kolumna — panel potencjału ───────────────────────────── */

.k8-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, #fbfaff, #f6f3ff);
}

.k8-preview-label,
.k8-panel-label {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 3px 8px;
  color: var(--kh-primary);
  background: var(--kh-primary-soft);
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.k8-jump {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 14px;
  align-items: center;
  justify-content: start;
}

.k8-jump-figure {
  display: flex;
  align-items: center;
  gap: 10px;
}

.k8-jump-figure > div {
  display: flex;
  flex-direction: column;
}

.k8-jump-figure span {
  color: var(--kh-muted);
  font-size: 0.63rem;
}

.k8-jump-figure strong {
  color: var(--kh-ink);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.k8-jump-figure.is-target strong {
  color: var(--kh-green);
}

.k8-jump-arrow {
  color: var(--kh-primary);
  font-size: 1.3rem;
}

/* Pierścień postępu. Procent przychodzi zmienną `--k8-ring` ustawianą w
   szablonie, więc wartość jest własnością danych, a nie klasy CSS. */
.k8-ring {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  background: conic-gradient(
    var(--kh-primary) 0 var(--k8-ring, 0%),
    #e5e2f3 var(--k8-ring, 0%) 100%
  );
  border-radius: 50%;
}

.k8-ring::after {
  width: 34px;
  height: 34px;
  content: "";
  background: #fff;
  border-radius: 50%;
}

.k8-ring.is-target {
  background: conic-gradient(
    var(--kh-green) 0 var(--k8-ring, 0%),
    #e5e2f3 var(--k8-ring, 0%) 100%
  );
}

.k8-gain-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: #1c7a55;
  background: #e6f8f0;
  border: 1px solid #bfe9d8;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
}

.k8-highlights-heading {
  margin: 0;
  color: var(--kh-ink);
  font-size: 0.72rem;
  font-weight: 700;
}

.k8-highlights {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k8-highlights li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 90px) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius-sm);
  font-size: 0.68rem;
}

.k8-highlights li.is-top {
  border-color: #d8ccff;
  box-shadow: 0 6px 14px rgba(91, 53, 242, 0.08);
}

.k8-highlights .k8-points {
  color: var(--kh-primary);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.k8-badge {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 2px 7px;
  color: #7a4a00;
  background: #fff3d6;
  border-radius: 99px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Wspólny pasek wartości. Zawsze `aria-hidden` — liczba stoi obok tekstem,
   bo szerokość paska nie jest treścią dostępną (REQ-E8-18.5). */
.k8-track {
  display: block;
  width: 100%;
  height: 6px;
  background: #ebe8f7;
  border-radius: 99px;
  overflow: hidden;
}

.k8-track > span {
  display: block;
  height: 100%;
  background: #b3a7f7;
  border-radius: 99px;
}

.k8-track.is-top > span,
.k8-highlights li.is-top .k8-track > span {
  background: var(--kh-primary);
}

.k8-track.is-positive > span {
  background: var(--kh-green);
}

/* ── Sekcja kroków: cztery zamiast trzech ─────────────────────────────── */

.k8-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  max-width: 1060px;
}

.k8-steps::before {
  left: 12.5%;
  right: 12.5%;
}

/* ── Pasmo dwukolumnowe ───────────────────────────────────────────────── */

.k8-band {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 34px;
  align-items: start;
}

.k8-band-head {
  margin-bottom: 16px;
}

.k8-band-head h2 {
  margin: 0 0 6px;
  color: var(--kh-ink);
  font-size: 1.35rem;
  font-weight: 800;
  text-align: left;
}

.k8-band-head p {
  margin: 0;
  color: var(--kh-muted) !important;
  font-size: 0.74rem;
  line-height: 1.6;
}

.k8-card {
  min-width: 0;
  padding: 22px 20px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius);
  box-shadow: var(--k8-shadow-sm);
}

.k8-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* ── Dzisiejsza sesja ─────────────────────────────────────────────────── */

.k8-today {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  gap: 16px;
  align-items: start;
}

.k8-session-topic {
  margin: 0 0 14px;
  color: var(--kh-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.k8-session-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.k8-session-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  font-size: 0.72rem;
}

.k8-session-list li > i {
  color: var(--kh-primary);
  font-size: 0.95rem;
}

.k8-session-list li > strong {
  color: var(--kh-muted);
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}

.k8-card .k8-session-cta {
  width: 100%;
}

.k8-next-heading {
  margin: 0 0 10px;
  color: var(--kh-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.k8-next-days {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k8-next-days li {
  padding: 12px 14px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius-sm);
}

.k8-next-days span {
  display: block;
  color: var(--kh-muted);
  font-size: 0.62rem;
}

.k8-next-days strong {
  display: block;
  margin: 3px 0;
  color: var(--kh-ink);
  font-size: 0.78rem;
}

.k8-next-days em {
  color: var(--kh-primary);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 600;
}

/* ── Mapa punktów ─────────────────────────────────────────────────────── */

.k8-point-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 120px) 64px;
  gap: 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--kh-line);
  color: var(--kh-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.k8-point-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k8-point-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 120px) 64px;
  gap: 10px;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid #f2f1f9;
  font-size: 0.72rem;
}

.k8-point-list li:last-child {
  border-bottom: 0;
}

.k8-point-area {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  color: var(--kh-ink);
  font-weight: 600;
}

.k8-point-level {
  color: var(--kh-muted);
  font-variant-numeric: tabular-nums;
}

.k8-point-gain {
  color: var(--kh-primary);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.k8-inline-badge {
  padding: 2px 7px;
  color: #7a4a00;
  background: #fff3d6;
  border-radius: 99px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.k8-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 12px 14px;
  color: var(--kh-muted) !important;
  background: #faf9ff;
  border: 1px solid #e7e2fb;
  border-radius: var(--k8-radius-sm);
  font-size: 0.68rem;
  line-height: 1.55;
}

.k8-note > i {
  color: var(--kh-primary);
  font-size: 0.95rem;
}

.k8-unit-note {
  margin: 8px 0 0;
  color: var(--kh-muted) !important;
  font-size: 0.66rem;
  line-height: 1.55;
}

/* ── Format egzaminu i pasek arkusza ─────────────────────────────────── */

.korki-e8 .k8-format-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.k8-paper-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  max-width: 1000px;
  margin: 26px auto 0;
  padding: 22px 26px;
  background: linear-gradient(120deg, #f4f1ff, #ecfaf4);
  border: 1px solid #ddd5fb;
  border-radius: var(--k8-radius);
}

.k8-paper-cta span {
  display: block;
  color: var(--kh-primary);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.k8-paper-cta h3 {
  margin: 6px 0 4px;
  color: var(--kh-ink);
  font-size: 1rem;
}

.k8-paper-cta p {
  margin: 0;
  color: var(--kh-muted) !important;
  font-size: 0.72rem;
  line-height: 1.55;
}

.k8-secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 20px;
  color: var(--kh-primary);
  background: #fff;
  border: 1px solid var(--kh-primary);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: 160ms ease;
}

.k8-secondary-button:hover {
  color: #fff;
  background: var(--kh-primary);
}

/* ── Sekcja AI ───────────────────────────────────────────────────────── */

.k8-ai {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: center;
}

.k8-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius);
  box-shadow: var(--k8-shadow-sm);
}

.k8-chat-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.k8-chat-row.is-student {
  justify-content: flex-end;
}

.k8-chat-bubble {
  max-width: 82%;
  margin: 0;
  padding: 11px 14px;
  color: var(--kh-ink) !important;
  background: #f5f4fb;
  border-radius: 12px 12px 12px 3px;
  font-size: 0.72rem;
  line-height: 1.55;
}

.k8-chat-row.is-student .k8-chat-bubble {
  background: #fff;
  border: 1px solid var(--kh-line);
  border-radius: 12px 12px 3px 12px;
}

.k8-chat-row.is-tutor .k8-chat-bubble {
  background: var(--kh-primary-soft);
}

.k8-chat-author {
  display: block;
  margin-bottom: 3px;
  color: var(--kh-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.korki-e8 .k8-chat .kh-bot {
  width: 40px;
  height: 40px;
  border-width: 4px;
  border-radius: 13px;
}

/* ── Tydzień nauki ───────────────────────────────────────────────────── */

.k8-week {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
  gap: 16px;
  align-items: start;
}

.k8-week-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k8-week-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid #f2f1f9;
  font-size: 0.72rem;
}

.k8-week-list li:last-child {
  border-bottom: 0;
}

.k8-week-day {
  color: var(--kh-muted);
}

.k8-week-topic {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--kh-ink);
  font-weight: 600;
}

.k8-week-topic::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  content: "";
  background: var(--kh-primary);
  border-radius: 50%;
}

.k8-week-time {
  color: var(--kh-muted);
  font-size: 0.66rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.k8-week-total {
  padding: 20px 18px;
  background: linear-gradient(180deg, #fbfaff, #f4f1ff);
  border: 1px solid #e7e2fb;
  border-radius: var(--k8-radius);
  text-align: center;
}

.k8-week-total > i {
  color: var(--kh-primary);
  font-size: 1.5rem;
}

.k8-week-total span {
  display: block;
  margin-top: 6px;
  color: var(--kh-muted);
  font-size: 0.64rem;
}

.k8-week-total strong {
  display: block;
  color: var(--kh-ink);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
}

.k8-hand-inline {
  display: block;
  margin-top: 12px;
  color: #7a5af8;
  font-size: 0.7rem;
  font-style: italic;
  transform: rotate(-3deg);
}

/* ── Wskaźniki postępu ───────────────────────────────────────────────── */

.k8-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.k8-kpi {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 18px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius);
  box-shadow: var(--k8-shadow-sm);
}

/* Najmocniejszy akcent sekcji to zmiana wyniku, nie grywalizacja
   (REQ-E8-13.7). Wyróżnienie jest własnością danych (`isPrimary`). */
.k8-kpi.is-primary {
  background: linear-gradient(180deg, #fbfaff, #f2effe);
  border-color: #d5cbfb;
  box-shadow: 0 10px 24px rgba(91, 53, 242, 0.1);
}

.k8-kpi > span {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--kh-muted);
  font-size: 0.64rem;
}

.k8-kpi > span > i {
  color: var(--kh-primary);
  font-size: 0.9rem;
}

.k8-kpi > strong {
  color: var(--kh-ink);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
}

.k8-kpi.is-primary > strong {
  color: var(--kh-primary);
}

.k8-kpi > small {
  color: var(--kh-green);
  font-size: 0.62rem;
  font-weight: 600;
}

/* ── Sekcja dla rodzica ──────────────────────────────────────────────── */

.k8-parent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 26px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius);
  box-shadow: var(--k8-shadow-sm);
}

.k8-parent-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  color: var(--kh-primary);
  background: var(--kh-primary-soft);
  border-radius: 16px;
  font-size: 1.7rem;
}

.k8-parent h2 {
  margin: 0 0 8px;
  color: var(--kh-ink);
  font-size: 1.2rem;
  font-weight: 800;
  text-align: left;
}

.k8-parent p {
  margin: 0 0 12px;
  color: var(--kh-muted) !important;
  font-size: 0.76rem;
  line-height: 1.6;
}

.k8-parent-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k8-parent-items li {
  padding: 5px 11px;
  color: #3d4460;
  background: #f7f6fd;
  border: 1px solid var(--kh-line);
  border-radius: 99px;
  font-size: 0.66rem;
}

/* ── Karty informacyjne (SEO) ────────────────────────────────────────── */

.k8-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

.k8-info-grid > article {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  background: var(--kh-surface);
  border: 1px solid var(--kh-line);
  border-radius: var(--k8-radius);
}

.k8-info-grid h3 {
  margin: 0;
  color: var(--kh-ink);
  font-size: 0.9rem;
}

.k8-info-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--kh-primary);
  background: var(--kh-primary-soft);
  border-radius: 9px;
  font-size: 1.2rem;
}

.k8-info-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k8-info-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--kh-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.k8-info-list li > i {
  color: var(--kh-green);
  font-size: 0.85rem;
}

/* ── Dostępność ──────────────────────────────────────────────────────── */

/* Skrót do treści głównej to `.kh-skip-link` ze strony głównej — ma już stałe
   pozycjonowanie, cel dotykowy 44 px i poprawny stan fokusu, więc nie ma po co
   dublować go komponentem `k8-` (REQ-E8-17.2).

   `homepage.css` stylizuje stan fokusu kotwic `#main-content` i `#jak-to-dziala`.
   Ta strona ma dwie kotwice więcej i one muszą wyglądać tak samo. */
.korki-e8 #dzisiaj:focus-visible,
.korki-e8 #gdzie-punkty:focus-visible {
  outline: 3px solid var(--kh-primary);
  outline-offset: -3px;
}

.korki-e8 a:focus-visible,
.korki-e8 button:focus-visible,
.korki-e8 .kh-segment input:focus-visible + label {
  outline: 3px solid var(--kh-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

.korki-e8 .kh-primary-button:focus-visible {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 5px var(--kh-ink);
}

/* ── Responsywność ───────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
  .k8-hand-one,
  .k8-hand-two {
    display: none;
  }
  .korki-e8 .k8-format-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .k8-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .k8-point-columns,
  .k8-point-list li {
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 90px) 60px;
  }
}

@media (max-width: 991.98px) {
  .k8-hero-card {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
  .k8-goal-form {
    border-right: 0;
    border-bottom: 1px solid var(--kh-line);
  }
  .k8-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }
  .k8-steps::before {
    display: none;
  }
  /* Pasma zwijają się do jednej kolumny. Kolejność pytań zostaje ta sama:
     najpierw „co mam zrobić dzisiaj”, potem „gdzie tracisz punkty”
     (REQ-E8-08, REQ-E8-09). */
  .k8-band,
  .k8-ai {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .korki-e8 .k8-format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .k8-hero-card > * {
    padding: 22px 20px;
  }
  .k8-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .k8-today,
  .k8-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .korki-e8 .k8-format-grid,
  .k8-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .k8-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Pasek arkusza i sekcja rodzica: ikona i CTA schodzą pod treść, zamiast
     ściskać ją do dwóch słów w kolumnie. */
  .k8-paper-cta,
  .k8-parent {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 20px;
  }
  .k8-paper-cta {
    text-align: center;
  }
  .k8-secondary-button {
    width: 100%;
    justify-content: center;
  }
  /* Mapa punktów bez paska: na wąskim ekranie pasek zjada miejsce potrzebne
     na nazwę tematu, a wartość i tak jest podana tekstem. */
  .k8-point-columns,
  .k8-point-list li {
    grid-template-columns: minmax(0, 1fr) 48px 60px;
  }
  .k8-point-columns > span:nth-child(3),
  .k8-point-list .k8-track {
    display: none;
  }
}

@media (max-width: 479.98px) {
  .k8-jump {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    justify-items: start;
  }
  .k8-jump-arrow {
    transform: rotate(90deg);
  }
  .k8-jump-figure strong {
    font-size: 1.4rem;
  }
  .k8-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .k8-highlights li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .k8-highlights .k8-track {
    display: none;
  }
  .k8-point-list li,
  .k8-week-list li {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .korki-e8 *,
  .korki-e8 *::before,
  .korki-e8 *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}