/* Podstrona „Zajęcia”: pasek jednej godziny (R12), kafelek wariantu C. Nagłówek i karty: podstrony.css. */

/* Jedna godzina */
.godzina { padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(3rem, 10vh, 6rem); }
.godzina-in { max-width: var(--max); margin: 0 auto; }
.godzina h2 { margin-top: 0.75rem; font-size: var(--fs-h2); line-height: 1.05; color: var(--brand-ink); }

.os {
  position: relative;
  margin-top: clamp(2rem, 6vh, 3.5rem);
  height: 18px;
  border-radius: 9px;
  background: var(--surface-2);
  overflow: hidden;
}
.os-etap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--od) / 60 * 100%);
  width: calc(var(--min) / 60 * 100% - 3px);
  background: var(--purple);
  transform-origin: left;
}
.os-etap:nth-child(2) { background: var(--purple-muted); }
.os-etap:nth-child(3) { background: #D9B9DC; }
.os-etap:nth-child(4) { background: var(--purple); }
.os-etap:nth-child(5) { background: var(--purple-muted); }

/* Pasek „wypełnia się” jak godzina zajęć, gdy sekcja przewija się przez ekran. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .os-etap {
      animation: os-wypelnij linear both;
      animation-timeline: view();
      animation-range: entry calc(20% + var(--od) * 1%) cover calc(35% + var(--od) * 0.6%);
    }
  }
}
@keyframes os-wypelnij { from { transform: scaleX(0); } }

.etapy {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  /* Szerokości jak minuty na pasku, ale nie węższe niż wygodna kolumna tekstu. */
  grid-template-columns: minmax(10rem, 5fr) minmax(10rem, 13fr) minmax(10rem, 12fr) minmax(10rem, 22fr) minmax(10rem, 8fr);
  gap: 1.25rem;
}
.etapy li { border-top: 2px solid var(--rule); padding-top: 1rem; min-width: 0; }
.etapy li:nth-child(1) { border-top-color: var(--purple); }
.etapy li:nth-child(2) { border-top-color: var(--purple-muted); }
.etapy li:nth-child(3) { border-top-color: #D9B9DC; }
.etapy li:nth-child(4) { border-top-color: var(--purple); }
.etapy li:nth-child(5) { border-top-color: var(--purple-muted); }
.etap-min { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink-muted); }
.etapy h3 { margin-top: 0.4rem; font-size: 1.2rem; line-height: 1.2; color: var(--ink); }
.etapy h3 + p { margin-top: 0.5rem; font-size: 1rem; line-height: 1.45; }
/* Wąskie kolumny (5 i 8 minut) dostają tekst pod spodem na średnich ekranach. */
@media (max-width: 1200px) {
  .etapy { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Kafelek „Nie ufaj AI w ciemno” nad stopką */
.kafel-sekcja { padding: clamp(2rem, 6vh, 4rem) var(--gutter) calc(clamp(3rem, 10vh, 6rem) + var(--arkusz-r)); }
.kafel-in { max-width: var(--max); margin: 0 auto; }
.nu-kafel {
  margin-top: 1rem;
  border-radius: var(--arkusz-r);
  padding: clamp(1.5rem, 4vw, 4rem);
  overflow: hidden;
  color: var(--na-scenie);
}
.nu-kafel .nu-plakat { font-size: clamp(2.3rem, 5.2vw, 5.4rem); }
.nu-kafel .nu-h1 { margin-top: 0; }

@media (max-width: 767px) {
  .etapy { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .os { height: 12px; }
  .nu-kafel { padding: 1.25rem; border-radius: 24px; }
}