/* ==========================================================================
   NanoMatma: strona „Jak się uczyć”
   Wczytywana z functions.php tylko dla is_page( 'jak-sie-uczyc' ).
   Zmienne kolorów i klasy .button / .section-shell / .section-kicker
   pochodzą z assets/css/screen.css.
   ========================================================================== */

.learning-page {
  --rule-a: var(--blue);
  --rule-b: var(--red);
  --rule-c: #1d8f85;
  --rule-d: #b4601f;
  background: var(--paper);
  color: var(--ink);
}

/* --- Wspólne nagłówki sekcji --------------------------------------------- */

.learning-head {
  max-width: 68ch;
  margin: 0 0 clamp(40px, 5vw, 68px);
}

.learning-head h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.1vw, 56px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.06;
}

.learning-head > p {
  margin: 0;
  max-width: 62ch;
  color: rgba(16, 47, 73, .72);
  font-size: 17px;
  line-height: 1.68;
}

.learning-head > p + p { margin-top: 14px; }

.learning-head--light h2 { color: var(--paper); }
.learning-head--light > p { color: rgba(251, 248, 241, .72); }

.learning-footnote {
  max-width: 76ch;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 47, 73, .14);
  color: rgba(16, 47, 73, .56);
  font-size: 13px;
  line-height: 1.62;
}

.learning-footnote--light {
  border-top-color: rgba(251, 248, 241, .18);
  color: rgba(251, 248, 241, .56);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.learning-hero {
  position: relative;
  padding: 160px max(24px, calc((100vw - 1420px) / 2)) clamp(86px, 10vw, 120px);
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(400px, .78fr);
  gap: clamp(48px, 6vw, 92px);
  align-items: center;
  background: var(--navy);
  color: var(--paper);
  isolation: isolate;
}

.learning-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0 0 0 auto;
  width: 46%;
  background: var(--blue);
  border-bottom-left-radius: 48% 28%;
}

.learning-hero__copy { max-width: 760px; }

.learning-hero__copy h1 {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.6vw, 84px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
}

.learning-hero__lead {
  max-width: 56ch;
  margin: 30px 0 0;
  color: rgba(251, 248, 241, .76);
  font-size: 18px;
  line-height: 1.68;
}

.learning-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 248, 241, .16);
}

.learning-jumps a {
  padding: 9px 15px;
  border: 1px solid rgba(251, 248, 241, .22);
  border-radius: 999px;
  color: rgba(251, 248, 241, .8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.learning-jumps a:hover,
.learning-jumps a:focus-visible {
  background: rgba(122, 219, 212, .12);
  border-color: var(--mint);
  color: var(--mint);
}

/* --- Panel z liczbami ---------------------------------------------------- */

.learning-hero__panel {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 32px);
  background: var(--cream);
  color: var(--ink);
  border-radius: 34% 8% 8% 8% / 13% 6% 6% 6%;
  box-shadow: 0 32px 80px rgba(5, 22, 34, .32);
}

.learning-hero__panel-label {
  margin: 0 0 26px;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: right;
}

.learning-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.learning-preview li { display: block; }

.learning-preview a {
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: center;
  gap: 4px 12px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid rgba(16, 47, 73, .11);
  border-left: 3px solid var(--accent, var(--rule-a));
  color: inherit;
}

.learning-preview li:nth-child(1) a { --accent: var(--rule-a); }
.learning-preview li:nth-child(2) a { --accent: var(--rule-b); }
.learning-preview li:nth-child(3) a { --accent: var(--rule-c); }
.learning-preview li:nth-child(4) a { --accent: var(--rule-d); }

.learning-preview strong {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.learning-preview span {
  grid-column: 1;
  color: rgba(16, 47, 73, .62);
  font-size: 13px;
  line-height: 1.5;
}

.learning-preview i {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  color: var(--accent, var(--rule-a));
  font-size: 17px;
  font-style: normal;
  opacity: .55;
}

.learning-hero__panel-note {
  margin: 20px 0 0;
  color: rgba(16, 47, 73, .6);
  font-size: 12.5px;
  line-height: 1.55;
}

.learning-hero__panel-note a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ==========================================================================
   CZTERY ZASADY
   ========================================================================== */

.learning-rules,
.learning-myths {
  position: relative;
  padding: clamp(80px, 9vw, 134px) 0;
  background: var(--paper);
  color: var(--ink);
}

/* Papier w kratke - rozwiniecie motywu .hero-grid z motywu glownego. */
.learning-rules::before,
.learning-myths::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(16, 47, 73, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 47, 73, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

.learning-rules > .section-shell,
.learning-myths > .section-shell { position: relative; }

.learning-rules__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.rule-card {
  --accent: var(--rule-a);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.8vw, 40px);
  background: #fff;
  border: 1px solid rgba(16, 47, 73, .1);
  border-top: 4px solid var(--accent);
  box-shadow: 0 18px 44px rgba(9, 36, 56, .07);
  scroll-margin-top: 120px;
}

.learning-rules__grid .rule-card:nth-child(2) { --accent: var(--rule-b); }
.learning-rules__grid .rule-card:nth-child(3) { --accent: var(--rule-c); }
.learning-rules__grid .rule-card:nth-child(4) { --accent: var(--rule-d); }

.rule-card__tag {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rule-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.16;
}

.rule-card__lead {
  margin: 0 0 26px;
  color: rgba(16, 47, 73, .76);
  font-size: 15.5px;
  line-height: 1.68;
}

.rule-card__label {
  margin: 0 0 12px;
  color: rgba(16, 47, 73, .5);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rule-card__how {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: grid;
  gap: 11px;
}

.rule-card__how li {
  position: relative;
  padding-left: 30px;
  color: rgba(16, 47, 73, .82);
  font-size: 14.5px;
  line-height: 1.6;
}

.rule-card__how li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

.rule-card__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 47, 73, .12);
}

.rule-card__source > span {
  color: rgba(16, 47, 73, .45);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rule-card__source a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rule-card__source a i { font-size: 15px; font-style: normal; }
.rule-card__source a:hover { text-decoration-thickness: 2px; }

.rule-card__source b {
  margin-left: auto;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ==========================================================================
   BLOK CZY MIESZANKA
   ========================================================================== */

.learning-compare {
  position: relative;
  padding: clamp(80px, 9vw, 134px) 0;
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}

.learning-compare::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -200px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(122, 219, 212, .34);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(122, 219, 212, .03);
  pointer-events: none;
}

.compare-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 56px;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.compare-arrow path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

@media (max-width: 900px) {
  .compare-arrow { display: none; }
}

.compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}

.compare-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  background: rgba(251, 248, 241, .05);
  border: 1px solid rgba(251, 248, 241, .14);
  border-radius: 20px;
}

.compare-card--mixed {
  background: var(--cream);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 28px 64px rgba(5, 22, 34, .3);
}

.compare-card__tag {
  margin: 0 0 12px;
  color: var(--mint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.compare-card--mixed .compare-card__tag { color: var(--red); }

.compare-card h3 {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.compare-list {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: grid;
  gap: 5px;
}

.compare-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 12px;
}

.compare-list__index {
  color: rgba(251, 248, 241, .4);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.compare-card--mixed .compare-list__index { color: rgba(16, 47, 73, .42); }

.compare-list__chip {
  display: block;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* W bloku pięć kafelków z rzędu to ta sama metoda. Zaokrąglamy tylko
   pierwszy i ostatni z serii, żeby blok czytał się jak jeden słup. */
.compare-card--blocked .compare-list li:nth-child(5n + 2) .compare-list__chip,
.compare-card--blocked .compare-list li:nth-child(5n + 3) .compare-list__chip,
.compare-card--blocked .compare-list li:nth-child(5n + 4) .compare-list__chip {
  border-radius: 0;
}

.compare-card--blocked .compare-list li:nth-child(5n + 1) .compare-list__chip {
  border-radius: 4px 4px 0 0;
}

.compare-card--blocked .compare-list li:nth-child(5n) .compare-list__chip {
  border-radius: 0 0 4px 4px;
}

.compare-card--blocked .compare-list { gap: 2px; }
.compare-card--blocked .compare-list li:nth-child(5n) { margin-bottom: 10px; }

/* Jeden temat = jeden kolor. Blok to osiem razy ten sam. */
.compare-list__chip[data-topic="a"] { background: rgba(45, 72, 155, .9);  color: #fff; }
.compare-list__chip[data-topic="b"] { background: rgba(239, 52, 35, .9);  color: #fff; }
.compare-list__chip[data-topic="c"] { background: rgba(29, 143, 133, .92); color: #fff; }

.compare-card footer {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 248, 241, .16);
}

.compare-card--mixed footer { border-top-color: rgba(16, 47, 73, .14); }

.compare-card__feel {
  margin: 0 0 18px;
  color: rgba(251, 248, 241, .72);
  font-size: 14px;
  line-height: 1.62;
}

.compare-card--mixed .compare-card__feel { color: rgba(16, 47, 73, .72); }

.compare-card__feel strong { color: var(--mint); }
.compare-card--mixed .compare-card__feel strong { color: var(--red); }

.compare-card__score { position: relative; }

.compare-card__score p {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
}

.score-bar {
  height: 10px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(251, 248, 241, .13);
  overflow: hidden;
}

.compare-card--mixed .score-bar { background: rgba(16, 47, 73, .1); }

.score-bar__fill {
  display: block;
  width: var(--score, 0%);
  height: 100%;
  border-radius: inherit;
  background: rgba(251, 248, 241, .42);
}

.compare-card--mixed .score-bar__fill {
  background: linear-gradient(90deg, var(--red), var(--orange));
}

/* Slupki startuja od zera i rosna, gdy sekcja wejdzie w kadr. */
.score-bar__fill { width: 0; }
.is-visible .score-bar__fill { width: var(--score, 0%); }

@media (prefers-reduced-motion: no-preference) {
  .score-bar__fill { transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .score-bar__fill { width: var(--score, 0%); }
}

.compare-card__score b {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: rgba(251, 248, 241, .55);
}

.compare-card--mixed .compare-card__score b { color: var(--red); }

.compare-card__score span {
  max-width: 20ch;
  color: rgba(251, 248, 241, .6);
  font-size: 12.5px;
  line-height: 1.45;
}

.compare-card--mixed .compare-card__score span { color: rgba(16, 47, 73, .65); }

/* ==========================================================================
   ODSTĘPY POWTÓREK
   ========================================================================== */

.learning-gaps {
  padding: clamp(80px, 9vw, 134px) 0;
  background: var(--cream);
  color: var(--ink);
}

.learning-gaps__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.learning-gaps .learning-head { margin-bottom: 0; }

.learning-gaps__caveat {
  margin-top: 22px;
  padding: 18px 20px;
  background: rgba(45, 72, 155, .07);
  border-left: 3px solid var(--blue);
  color: rgba(16, 47, 73, .72);
  font-size: 13px;
  line-height: 1.62;
}

/* ==========================================================================
   PLAN TYGODNIA
   ========================================================================== */

.learning-week {
  padding: clamp(80px, 9vw, 134px) 0;
  background: var(--navy-deep);
  color: var(--paper);
}

.week-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.week-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 30px;
  background: rgba(251, 248, 241, .055);
  border: 1px solid rgba(251, 248, 241, .13);
  border-radius: 18px;
}

.week-step::after {
  content: "";
  position: absolute;
  top: 46px;
  right: -1px;
  width: 11px;
  height: 11px;
  background: var(--mint);
  border-radius: 50%;
  transform: translateX(50%);
  box-shadow: 0 0 0 6px rgba(122, 219, 212, .13);
}

.week-step:last-child::after { background: var(--red); box-shadow: 0 0 0 6px rgba(239, 52, 35, .16); }

.week-step__when {
  margin: 0 0 16px;
  color: var(--mint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.week-step h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.22;
}

.week-step__time {
  margin: 0 0 16px;
  color: rgba(251, 248, 241, .5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

.week-step__body {
  margin: 0;
  color: rgba(251, 248, 241, .72);
  font-size: 13.5px;
  line-height: 1.62;
}

/* ==========================================================================
   CO NIE DZIAŁA
   ========================================================================== */

.learning-myths__layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.learning-myths .learning-head { margin-bottom: 0; }

.myth-list {
  display: grid;
  border-top: 1px solid rgba(16, 47, 73, .18);
}

.myth-list details { border-bottom: 1px solid rgba(16, 47, 73, .18); }

.myth-list summary {
  padding: 24px 6px;
  display: grid;
  grid-template-columns: 34px 1fr 40px;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: background .25s ease, transform .25s ease;
}

.myth-list summary::-webkit-details-marker { display: none; }

.myth-list summary > span {
  color: var(--red);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
}

.myth-list summary strong {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.myth-list summary i {
  justify-self: end;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 47, 73, .35);
  border-radius: 50%;
  font-size: 19px;
  font-style: normal;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.myth-list details[open] summary i {
  transform: rotate(45deg);
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.myth-list__body {
  margin: 0 46px 28px 50px;
  max-width: 68ch;
}

.myth-list__body p {
  margin: 0;
  color: rgba(16, 47, 73, .72);
  font-size: 14.5px;
  line-height: 1.7;
}

.myth-list__tip {
  display: grid;
  gap: 6px;
  margin-top: 16px !important;
  padding: 14px 16px 15px;
  background: rgba(29, 143, 133, .09);
  border-left: 3px solid var(--rule-c);
  border-radius: 0 6px 6px 0;
  color: rgba(16, 47, 73, .82) !important;
  font-size: 14px !important;
}

.myth-list__tip b {
  color: var(--rule-c);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ==========================================================================
   ŹRÓDŁA
   ========================================================================== */

.learning-sources {
  padding: clamp(80px, 9vw, 134px) 0;
  background: var(--navy);
  color: var(--paper);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid rgba(251, 248, 241, .16);
}

.source-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(251, 248, 241, .16);
}

.source-item__year {
  color: var(--mint);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.source-item__main { display: grid; gap: 6px; min-width: 0; }

.source-item__title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.32;
}

.source-item__meta {
  color: rgba(251, 248, 241, .62);
  font-size: 13px;
  line-height: 1.55;
}

.source-item__meta--journal { color: rgba(251, 248, 241, .48); font-size: 12.5px; }

.source-item__meta a {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.source-item__meta a:hover { color: var(--paper); }

/* ==========================================================================
   CTA
   ========================================================================== */

.learning-cta {
  padding: clamp(70px, 8vw, 110px) 0;
  background: var(--cream);
  color: var(--ink);
}

.learning-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.learning-cta h2 {
  margin: 0 0 14px;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.learning-cta p {
  margin: 0;
  max-width: 60ch;
  color: rgba(16, 47, 73, .72);
  font-size: 16px;
  line-height: 1.68;
}

.learning-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.learning-cta .button-ghost {
  border-color: rgba(16, 47, 73, .28);
  color: var(--ink);
}

.learning-cta .button-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ==========================================================================
   INTERAKCJE (tylko tam, gdzie jest kursor i brak prefers-reduced-motion)
   ========================================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rule-card,
  .week-step,
  .compare-list__chip {
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
  }
  .rule-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(9, 36, 56, .13); }
  .learning-preview a { transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .25s ease; }
  .learning-preview a:hover { transform: translateX(6px); background: #fff; }
  .learning-preview a:hover i { opacity: 1; }
  .week-step:hover { transform: translateY(-5px); }
  .myth-list summary:hover { background: rgba(122, 219, 212, .13); transform: translateX(8px); }
  .compare-card--mixed .compare-list li:hover .compare-list__chip { transform: translateX(6px); }
}

@media (hover: hover) {
  .learning-page .button:hover span,
  .learning-page .header-cta:hover span { transform: rotate(45deg); }
  .learning-page .button span { transition: transform .25s ease; }
}

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */

@media (max-width: 1180px) {
  .week-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .week-step::after { display: none; }
}

@media (max-width: 1080px) {
  .learning-hero {
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 130px max(24px, calc((100vw - 1420px) / 2)) 86px;
  }
  .learning-hero::before {
    inset: auto 0 0 0;
    width: 100%;
    height: 42%;
    border-radius: 42% 42% 0 0 / 11% 11% 0 0;
  }
  .learning-hero__panel { border-radius: 24px 10px 10px 10px / 10px 6px 6px 6px; }
  .learning-hero__panel-label { text-align: left; }
  .learning-gaps__layout,
  .learning-myths__layout { grid-template-columns: 1fr; }
  .learning-gaps .learning-head,
  .learning-myths .learning-head { margin-bottom: 8px; }
}

@media (max-width: 900px) {
  .learning-rules__grid,
  .source-list { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .learning-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .week-track { grid-template-columns: 1fr; }
  .learning-hero__copy h1 { font-size: clamp(36px, 10vw, 50px); }
  .learning-hero__lead { font-size: 16.5px; }
  .learning-jumps a { font-size: 11.5px; padding: 8px 13px; }
  .compare-card__score b { font-size: 44px; }
  .myth-list summary { grid-template-columns: 26px 1fr 34px; gap: 11px; padding: 20px 2px; }
  .myth-list summary i { width: 32px; height: 32px; font-size: 17px; }
  .myth-list__body { margin: 0 34px 24px 38px; }
  .learning-page .button { width: 100%; }
}

/* ==========================================================================
   WYKRES: CO SIĘ DZIEJE Z PAMIĘCIĄ MIĘDZY POWTÓRKAMI
   ========================================================================== */

.memory-chart {
  margin: 0;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 28px) clamp(18px, 2vw, 24px);
  background: var(--paper);
  border: 1px solid rgba(16, 47, 73, .12);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(9, 36, 56, .07);
}

.memory-chart figcaption {
  margin-bottom: 10px;
  color: rgba(16, 47, 73, .5);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.memory-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.memory-chart__axes line {
  stroke: rgba(16, 47, 73, .22);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.memory-chart__axis-label {
  fill: rgba(16, 47, 73, .45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.memory-chart__axis-label--x { text-anchor: end; }

.memory-chart__decay {
  fill: none;
  stroke: rgba(16, 47, 73, .3);
  stroke-width: 2.2;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
}

.memory-chart__line {
  fill: none;
  stroke: var(--rule-c);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.memory-chart__marks line {
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
}

.memory-chart__marks circle { fill: var(--red); }

.memory-chart__ticks text {
  fill: rgba(16, 47, 73, .5);
  font-size: 10.5px;
  font-weight: 700;
  text-anchor: middle;
}

.memory-chart__note {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 13px;
  font-weight: 700;
}

.memory-chart__note--decay { fill: rgba(16, 47, 73, .45); }
.memory-chart__note--keep { fill: var(--rule-c); text-anchor: end; }

.memory-chart__exam line {
  stroke: rgba(16, 47, 73, .45);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.memory-chart__exam text {
  fill: rgba(16, 47, 73, .62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-anchor: middle;
}

/* Klamra po prawej: ile wiedzy zostaje w dniu sprawdzianu. */
.memory-chart__gap path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.memory-chart__gap text {
  fill: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-anchor: middle;
}

.memory-chart__legend {
  margin: 14px 0 0;
  color: rgba(16, 47, 73, .66);
  font-size: 13px;
  line-height: 1.6;
}

/* Linia rysuje się sama, gdy wykres wjedzie w kadr.
   Długość ścieżki mierzy JS (getTotalLength), bo zgadywanie jej w CSS
   kończy się albo urwaną, albo nieruchomą linią. */
@media (prefers-reduced-motion: no-preference) {
  .memory-chart__line { transition: stroke-dashoffset 1.5s ease-out; }

  .memory-chart__decay,
  .memory-chart__marks,
  .memory-chart__note,
  .memory-chart__ticks,
  .memory-chart__exam,
  .memory-chart__gap {
    opacity: 0;
    transition: opacity .6s ease;
  }

  .memory-chart.is-visible .memory-chart__decay { opacity: 1; transition-delay: 1.1s; }
  .memory-chart.is-visible .memory-chart__marks,
  .memory-chart.is-visible .memory-chart__ticks { opacity: 1; transition-delay: .8s; }
  .memory-chart.is-visible .memory-chart__note { opacity: 1; transition-delay: 1.3s; }
  .memory-chart.is-visible .memory-chart__exam { opacity: 1; transition-delay: 1.4s; }
  /* Klamra z roznica wchodzi na koncu - to pointa wykresu. */
  .memory-chart.is-visible .memory-chart__gap { opacity: 1; transition-delay: 1.8s; }
}

/* ==========================================================================
   PLANNER POWTÓREK
   ========================================================================== */

.planner {
  margin-top: clamp(40px, 5vw, 68px);
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--paper);
  border: 1px solid rgba(16, 47, 73, .12);
  border-radius: 22px;
}

.planner__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.planner__switch button {
  padding: 11px 17px;
  background: transparent;
  color: rgba(16, 47, 73, .7);
  border: 1px solid rgba(16, 47, 73, .2);
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.planner__switch button:hover { border-color: var(--blue); color: var(--blue); }

.planner__switch button[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.planner__panel {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.planner__panel[hidden] { display: none; }

.planner__summary strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.planner__summary p {
  margin: 0;
  color: rgba(16, 47, 73, .68);
  font-size: 14px;
  line-height: 1.62;
}

.planner__count {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 47, 73, .14);
}

.planner__count b {
  color: var(--red);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}

.planner__grid-wrap { min-width: 0; }

.planner__unit {
  margin: 0 0 12px;
  color: rgba(16, 47, 73, .5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.planner__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.planner__cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: rgba(16, 47, 73, .05);
  border: 1px solid rgba(16, 47, 73, .09);
  border-radius: 7px;
  color: rgba(16, 47, 73, .4);
  font-size: 11px;
  font-weight: 700;
}

.planner__cell--start {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.planner__cell--rev {
  background: rgba(29, 143, 133, .16);
  border-color: var(--rule-c);
  color: var(--rule-c);
}

.planner__cell--exam {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.planner__key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding: 0;
  color: rgba(16, 47, 73, .62);
  font-size: 12.5px;
}

.planner__key li { display: flex; align-items: center; gap: 8px; }

.planner__chip {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.planner__chip--start { background: var(--navy); }
.planner__chip--rev { background: rgba(29, 143, 133, .16); border-color: var(--rule-c); }
.planner__chip--exam { background: var(--red); }

/* Widoczne tylko bez JS - skrypt chowa ten akapit. */
.planner__fallback {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  color: rgba(16, 47, 73, .6);
  font-size: 13px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
  .planner__cell {
    opacity: 0;
    transform: scale(.82);
    animation: planner-pop .32s cubic-bezier(.2, .9, .3, 1.3) forwards;
  }
}

@keyframes planner-pop {
  to { opacity: 1; transform: scale(1); }
}

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

@media (max-width: 560px) {
  .planner__switch button { font-size: 12.5px; padding: 9px 13px; }
  .planner__cell { font-size: 9.5px; border-radius: 5px; }
  .planner__grid { gap: 5px; }
}