.section--hero .section__content {
  position: relative;
  z-index: 1;
}

.section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.01), rgba(10, 10, 10, 0));
  pointer-events: none;
}

.section--hero::after {
  content: "";
  position: absolute;
  inset-inline: clamp(24px, 5vw, 60px);
  bottom: clamp(120px, 10vh, 160px);
  top: clamp(60px, 8vh, 120px);
  border: 1px solid rgba(10, 10, 10, 0.05);
  border-radius: clamp(28px, 5vw, 70px);
  pointer-events: none;
}

.section--core .section__content,
.section--zalozenia .section__content,
.section--uklad .section__content,
.section--chapters .section__content,
.section--zawias .section__content,
.section--unikalne .section__content,
.section--probka .section__content {
  position: relative;
  z-index: 1;
}

.section--core::before,
.section--unikalne::before,
.section--probka::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.01), rgba(10, 10, 10, 0));
  pointer-events: none;
}

.section--core::after,
.section--unikalne::after,
.section--probka::after {
  content: "";
  position: absolute;
  inset-inline: clamp(24px, 5vw, 60px);
  bottom: clamp(120px, 10vh, 160px);
  top: clamp(60px, 8vh, 120px);
  border: 1px solid rgba(10, 10, 10, 0.05);
  border-radius: clamp(32px, 6vw, 80px);
  pointer-events: none;
}

.section--core::after {
  border-radius: clamp(24px, 4vw, 60px);
}

.section--unikalne::after {
  border-radius: clamp(36px, 8vw, 100px);
}

.section--probka::after {
  border-radius: clamp(28px, 6vw, 80px);
}

.section--core .section__header,
.section--zalozenia .section__header,
.section--uklad .section__header,
.section--chapters .section__header,
.section--zawias .section__header {
  margin-bottom: clamp(26px, 4.2vw, 48px);
}

.section--unikalne .section__header {
  margin-bottom: clamp(14px, 2.5vh, 20px);
}

@media (max-width: 720px) {
  .section--unikalne .section__header {
    margin-bottom: clamp(10px, 2vh, 16px);
  }
}

@media (max-width: 400px) {
  .section--unikalne .section__header {
    margin-bottom: clamp(8px, 1.5vh, 12px);
  }
  
  .section--unikalne .section__header h2 {
    font-size: clamp(18px, 4.5vw, 24px);
    margin-bottom: clamp(6px, 1vh, 8px);
  }
  
  .section--unikalne .section__header p {
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.4;
  }
}

.section--probka .section__header {
  margin-bottom: clamp(20px, 3.5vw, 32px);
}

.section--chapters .section__header p,
.section--zawias .section__header p {
  max-width: 580px;
}

.section--chapters .chapter-card {
  backdrop-filter: blur(10px);
}

.section--chapters .chapter-card[open] {
  background: rgba(255, 255, 255, 0.94);
}

.section--chapters:has(.chapter-card__toggle:focus-visible) {
  outline: none;
}

.section--zawias .zawias__body p::first-letter {
  font-size: 130%;
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
}

@media (max-width: 900px) {
  .section--hero::after,
  .section--core::after,
  .section--unikalne::after,
  .section--probka::after {
    inset-inline: clamp(16px, 4vw, 28px);
    border-radius: clamp(18px, 6vw, 32px);
  }
}

/* === CINEMATIC TIMELINE (UKŁAD) === */
.section--uklad .section__content {
  /* wyłączamy wewnętrzny scroll, całość mieści się w sekcji */
  max-height: none;
  overflow: visible;
}

/* === CHAPTERS PANE (Życie przed / Życie po) === */
/* Layout sekcji: header statyczny u góry, poniżej w 100% wysokości – panel z listą i opisem */
.section--chapters .section__content {
  /* sekcja nie przewija się w dół – wewnętrzny grid zarządza przestrzenią */
  max-height: calc(100svh - (var(--section-padding) * 2));
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.chapters {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(220px, 32%, 360px) 1fr;
  gap: clamp(14px, 2.5vw, 24px);
  align-items: stretch;
}

/* Lista rozdziałów */
.chapters__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(8px, 1.6vw, 12px);
  background: #fff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  overflow: auto;
  scrollbar-width: thin;
}
.chapters__nav::-webkit-scrollbar { width: 6px; }
.chapters__nav::-webkit-scrollbar-thumb { background: rgba(10,10,10,0.18); border-radius: 3px; }

.chapters__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(10,10,10,0.08);
  background: #fff;
  border-radius: 12px;
  font-family: var(--font-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.8vw, 12.5px);
  text-align: left;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.chapters__tab:hover { transform: translateY(-2px); border-color: rgba(10,10,10,0.18); }
.chapters__tab.is-active {
  border-color: rgba(10,10,10,0.24);
  box-shadow: 0 10px 28px -18px rgba(10,10,10,0.3);
  background: linear-gradient(145deg, rgba(10,10,10,0.03), rgba(10,10,10,0.005));
}
.chapters__index {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.chapters__label { opacity: 0.9; }

/* Panel opisu rozdziału */
.chapters__panel {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: var(--radius-card);
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 30px 80px -60px rgba(10,10,10,0.18);
  overflow: hidden;
  min-width: 0;
}
.chapters__panel[data-empty] .chapters__close { display: none; }

.chapters__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(6px, 1.2vh, 8px);
}
.chapters__panel-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(14px, 2vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity var(--transition-base);
}
.chapters__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; 
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(10,10,10,0.12);
  color: var(--color-text);
  opacity: 0.6;
  transition: opacity var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.chapters__close:hover { 
  opacity: 1; 
  border-color: rgba(10,10,10,0.24);
  background: rgba(10,10,10,0.02);
}
.chapters__close svg {
  width: 14px;
  height: 14px;
}

.chapters__panel-body {
  overflow: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 40px);
  color: var(--color-muted);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.6;
  text-align: center;
  transition: justify-content var(--transition-base), align-items var(--transition-base), text-align var(--transition-base);
}
.chapters__panel-body > * {
  flex: 0 1 60ch;
  width: min(100%, 60ch);
}
.chapters__panel-body--scrollable {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.chapters__panel-body--placeholder {
  color: var(--color-muted);
}
.chapters__panel-body--placeholder .chapters__placeholder {
  margin: 0 auto;
  display: grid;
  gap: clamp(10px, 2vw, 16px);
}
.chapters__panel-body--placeholder .chapters__placeholder p { margin: 0; }
.chapters__panel--has-selection .chapters__panel-title {
  opacity: 0;
  pointer-events: none;
}
.chapters__description {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  justify-items: center;
  text-align: center;
  color: var(--color-text);
}
.chapters__description-head {
  display: grid;
  gap: clamp(12px, 1.8vw, 16px);
  justify-items: center;
}
.chapters__description-title {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2.6vw, 18px);
  letter-spacing: 0.18em;
}
.chapters__description-rule {
  width: 46px;
  height: 2px;
  background: rgba(10, 10, 10, 0.18);
  display: block;
}
.chapters__description-body {
  font-family: var(--font-body);
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: rgba(10, 10, 10, 0.92);
}
.chapters__description-body p {
  margin: 0;
}
.chapters__description-body p + p {
  margin-top: 1em;
  color: rgba(10, 10, 10, 0.78);
}
.chapters__panel-body--scrollable .chapters__description {
  justify-items: start;
  text-align: left;
}
.chapters__panel-body--scrollable .chapters__description-head {
  justify-items: start;
}
.chapters__panel-body--scrollable .chapters__description-title {
  font-size: clamp(16px, 2.2vw, 17px);
}
.chapters__panel-body--scrollable .chapters__description-body {
  text-wrap: pretty;
}
.chapters__panel-body--scrollable .chapters__description-rule {
  margin-inline: 0;
}
.chapters__panel-body--scrollable .chapters__description-body p + p {
  color: rgba(10, 10, 10, 0.7);
}

@media (min-width: 901px) {
  .section--chapters .chapters__panel,
  .section--chapters .chapters__nav {
    min-height: var(--chapters-panel-fixed-height, auto);
    height: var(--chapters-panel-fixed-height, auto);
  }
}

/* Mobile: lista jako horyzontalne chipsy u góry, panel poniżej */
@media (max-width: 900px) {
  .chapters {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .chapters__nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: clamp(10px, 2.6vw, 14px);
  }
  .chapters__tab {
    grid-template-columns: auto;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .chapters__index { width: 24px; height: 24px; font-size: 10px; }
  .chapters__panel {
    --chapters-mobile-panel-height: clamp(260px, 58vh, 420px);
    height: var(--chapters-mobile-panel-height);
    min-height: var(--chapters-mobile-panel-height);
  }
  .chapters__panel-body {
    min-height: 0;
    padding: clamp(14px, 3.5vw, 24px);
    font-size: clamp(14px, 3.4vw, 15px);
    line-height: 1.55;
  }
  .chapters__description-title {
    font-size: clamp(14px, 3.4vw, 15px);
    letter-spacing: 0.14em;
  }
  .chapters__description-body {
    font-size: clamp(15px, 3.6vw, 17px);
    line-height: 1.58;
  }
  .chapters__panel-body--scrollable .chapters__description-title {
    font-size: clamp(13px, 3.2vw, 14px);
  }
}

/* Drobne dopasowania do bardzo małych ekranów */
@media (max-width: 400px) {
  .chapters__panel { padding: 14px; }
  .chapters__panel-title { font-size: 12px; letter-spacing: 0.18em; }
}

.timeline {
  --stage-h: clamp(300px, 50vh, 480px);
  --rail-h: clamp(92px, 16vh, 150px);
  --gap: clamp(16px, 3vw, 28px);
  display: grid;
  grid-template-rows: minmax(0, var(--stage-h)) var(--rail-h);
  gap: var(--gap);
}
.timeline.is-collapsed {
  grid-template-rows: minmax(0, var(--stage-h)) 0px;
}
.timeline.is-collapsed .timeline__stage {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.timeline.is-collapsed .timeline__progress {
  display: none;
}
.timeline.is-collapsed .timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
  padding-inline: clamp(0px, 1vw, 8px);
  overflow: visible;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: center;
}
.timeline.is-collapsed .timeline__step {
  width: clamp(220px, 60vw, 280px);
  min-width: clamp(220px, 60vw, 280px);
  margin: 0;
}

.timeline:not(.is-collapsed) .timeline__step {
  width: clamp(120px, 12vw, 170px);
  min-width: clamp(120px, 12vw, 170px);
}

.timeline__stage {
  position: relative;
  border-radius: clamp(18px, 3.5vw, 28px);
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(10,10,10,0.05), transparent 60%),
    linear-gradient(145deg, rgba(10,10,10,0.06), rgba(10,10,10,0.02));
  border: 1px solid rgba(10,10,10,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px);
  height: 100%;
  min-height: 0;
  opacity: 1;
  visibility: visible;
}

.timeline__counter {
  position: absolute;
  bottom: clamp(14px, 2.5vh, 20px);
  right: clamp(16px, 3vw, 24px);
  font-family: var(--font-heading);
  letter-spacing: 0.14em;
  font-size: clamp(12px, 1.8vw, 14px);
  opacity: 0.6;
}

.timeline__title {
  margin: 0 0 clamp(2px, 0.4vh, 4px);
  font-size: clamp(20px, 3.4vw, 32px);
  letter-spacing: 0.16em;
}

.timeline__desc {
  margin: 0;
  max-width: 60ch;
  color: var(--color-muted);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
}

.timeline__text {
  flex: 0 0 auto;
  display: grid;
  gap: clamp(2px, 0.6vw, 6px);
  justify-items: start;
  align-content: start;
}

.timeline__media {
  flex: 1 1 0;
  width: 100%;
  max-height: 100%;
  border-radius: clamp(16px, 3vw, 24px);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.timeline__media[hidden] {
  display: none;
}

.timeline__video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  background: #fff;
}

/* Specjalne tło dla "Życie po" (czwarty element) */
.timeline__media--alt-bg {
  background: #f5f5f5;
}

.timeline__video--alt-bg {
  background: #f5f5f5;
}

.timeline__rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 24px);
  padding-inline: clamp(8px, 1.6vw, 16px);
}

.timeline__step {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 1.6vw, 14px) clamp(12px, 2vw, 16px);
  border: 1px solid rgba(10,10,10,0.08);
  background: #fff;
  border-radius: 14px;
  font-family: var(--font-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.8vw, 12.5px);
  white-space: nowrap;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.timeline__step:hover { transform: translateY(-2px); border-color: rgba(10,10,10,0.18); }
.timeline__step.is-active {
  border-color: rgba(10,10,10,0.24);
  box-shadow: 0 10px 30px -20px rgba(10,10,10,0.35);
}

.timeline__index {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.timeline__label { opacity: 0.8; }

.timeline__rail {
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
}
.timeline__rail::-webkit-scrollbar { height: 6px; }
.timeline__rail::-webkit-scrollbar-thumb { background: rgba(10,10,10,0.2); border-radius: 3px; }

/* progres całej osi (w tle szyny) */
.timeline__progress {
  position: absolute;
  inset-inline: clamp(8px, 1.6vw, 16px);
  top: 0;
  height: 3px;
  background: rgba(10,10,10,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.timeline__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-text), rgba(10,10,10,0.85));
  transition: width 520ms var(--transition-base);
}

/* Zawias – subtelne podbicie napięcia kolorem */
.timeline__step[data-index="2"].is-active .timeline__index {
  background: linear-gradient(135deg, #1a1a1a, #000);
  box-shadow: 0 4px 14px rgba(10,10,10,0.35);
}

/* Responsywność */
@media (max-width: 720px) {
  .timeline { --stage-h: clamp(260px, 46vh, 380px); --rail-h: clamp(100px, 20vh, 140px); }
  .timeline__desc { max-width: 38ch; }
  
  /* Licznik niżej na mobile, aby nie nachodzić na napisy */
  .timeline__counter {
    bottom: clamp(8px, 1.5vh, 12px);
    font-size: clamp(10px, 1.5vw, 12px);
  }
  .timeline.is-collapsed .timeline__rail {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 4vw, 18px);
  }
  .timeline.is-collapsed .timeline__step {
    width: 100%;
    min-width: 0;
    padding: clamp(12px, 3.2vw, 16px);
    justify-content: space-between;
  }
  .timeline.is-collapsed .timeline__label { display: inline; }

  .timeline:not(.is-collapsed) .timeline__rail {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(2px, 1.5vw, 6px);
    width: 100%;
    padding-inline: clamp(4px, 1.5vw, 10px);
    overflow-x: hidden;
  }
  .timeline:not(.is-collapsed) .timeline__step {
    flex: 0 0 auto;
    width: clamp(32px, 9vw, 38px);
    height: clamp(32px, 9vw, 38px);
    min-width: clamp(32px, 9vw, 38px);
    min-height: clamp(32px, 9vw, 38px);
    padding: clamp(2px, 0.8vw, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    letter-spacing: 0;
    text-transform: none;
    aspect-ratio: 1 / 1;
    border-radius: clamp(10px, 3vw, 12px);
  }
  .timeline:not(.is-collapsed) .timeline__label {
    display: none;
  }
  .timeline:not(.is-collapsed) .timeline__index {
    width: clamp(22px, 7vw, 28px);
    height: clamp(22px, 7vw, 28px);
    font-size: clamp(8px, 2.4vw, 10px);
  }
}
@media (max-width: 420px) {
  .timeline { --stage-h: clamp(230px, 42vh, 300px); }
}

/* Szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .timeline__reveal { display: none; }
  .timeline__bar { transition: none; }
  .timeline__step { transition: none; }
}

@media (max-width: 600px) {
  .section--hero::after,
  .section--core::after,
  .section--unikalne::after,
  .section--probka::after {
    top: clamp(80px, 8vh, 120px);
    bottom: clamp(80px, 8vh, 120px);
  }
}

@media (max-width: 400px) {
  .section--hero::after,
  .section--core::after,
  .section--unikalne::after,
  .section--probka::after {
    top: clamp(60px, 6vh, 90px);
    bottom: clamp(60px, 6vh, 90px);
    inset-inline: clamp(12px, 3.5vw, 20px);
    border-radius: clamp(16px, 5vw, 24px);
  }
}