/* /nauka — „Na czym stoi metoda” (v2, 14.10.2026). Reszta wyglądu w /web/strona.css.
 * Jedna kolumna czytania (760 px) dla wszystkich sekcji; hero i filary na pełnej szerokości.
 * Zachowanie (panele, widok dla badacza, eksperyment, plakietki, S2/S3/S5): strona/src/nauka.ts → web/nauka.js */

.nauka { --n-linia: rgba(240,248,255,.35); --granat-w: rgba(47,201,224,.12); --granat-k: #0b1a33; }

/* ── Tekst: akapity i listy jednym rozmiarem, pełnym kolorem ── */
.n-tekst p:not(.wyroznione):not(.maly):not(.lead), .n-tekst li { font-size: clamp(18px, 2vw, 20px); color: var(--text-primary); }
.n-tekst .lead { font-size: clamp(19px, 2.2vw, 22px) !important; }
.n-tekst p { max-width: none; }
.n-lista { margin: 0 0 18px; padding-left: 22px; }
.n-lista li { margin-bottom: 6px; }
.n-tekst .nadtytul { margin-bottom: 10px; }
.n-dopisek { font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--text-secondary); }

/* ── Hero na tle obrazu (H1) ── */
.n-hero-tlo { position: relative; overflow: hidden; }
.n-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: 0; }
.n-hero-tlo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,15,30,.95) 0%, rgba(6,15,30,.82) 40%, rgba(6,15,30,.25) 72%, rgba(6,15,30,.05) 100%),
              linear-gradient(180deg, rgba(6,15,30,.5) 0%, transparent 18%, transparent 80%, #060f1e 100%); }
.n-hero { position: relative; z-index: 1; min-height: calc(86vh - var(--gora) - var(--pasek)); display: flex; align-items: center; padding-top: 48px; padding-bottom: 64px; }
.n-hero-tekst { max-width: 620px; }
@media (min-width: 760px) { .n-hero-img { width: 124%; right: auto; object-position: 0 50%; } }
.n-hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.n-h1-druga { display: block; color: var(--white); }
.n-hero .cta-rzad { align-items: center; gap: 14px 22px; }
@media (max-width: 759px) {
  .n-hero-img { object-position: 78% 50%; }
  .n-hero-tlo::after { background: linear-gradient(180deg, rgba(6,15,30,.2) 0, rgba(6,15,30,.05) 18vh, rgba(6,15,30,.6) 34vh, #060f1e 46vh, #060f1e 100%); }
  .n-hero { padding-top: 36vh; min-height: 0; }
}

/* ── Filary i legenda plakietek ── */
.n-filary { padding-top: 24px; padding-bottom: 56px; }
.n-filar { align-items: flex-start; }
.n-ikona { width: 56px; height: 56px; margin-bottom: 8px; }
.n-filar h3 { color: var(--goldl); font-size: 18px; }
.n-filar p { color: var(--text-primary); margin: 0; }
.n-legenda { margin-top: 30px; }
.n-filary .karty-3 { gap: 14px; }
.n-filary .karta { padding: 22px 20px; }
@media (min-width: 760px) { .n-filary .karty-3 { grid-template-columns: repeat(3, 1fr); } }
.n-legenda p { color: var(--text-primary); line-height: 2; }
.n-badacz { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 18px; border-radius: 50px; border: 1px solid rgba(47,201,224,.35);
  background: rgba(10,25,50,.6); color: var(--tealg); font: 600 14px/1.3 'Montserrat', sans-serif; cursor: pointer; text-align: left; }
.n-badacz-kropka { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 10px; background: rgba(240,248,255,.18); position: relative; transition: background .2s; }
.n-badacz-kropka::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: transform .2s; }
.n-badacz[aria-pressed="true"] .n-badacz-kropka { background: var(--teal); }
.n-badacz[aria-pressed="true"] .n-badacz-kropka::after { transform: translateX(14px); }

/* ── Plakietki pewności (S6): kolory z tabeli w opisie strony ── */
.nauka .pewnosc { font: 700 11px/1.2 'Montserrat', sans-serif; letter-spacing: .09em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; margin: 0 2px;
  vertical-align: 2px; cursor: help; border: 1.5px solid transparent; white-space: nowrap; }
.nauka .pewnosc-wiemy { background: var(--teal); border-color: var(--teal); color: #04111f; }
.nauka .pewnosc-badania { background: transparent; border-color: var(--tealg); color: var(--tealg); }
.nauka .pewnosc-opis { background: transparent; border-color: var(--gold); color: var(--goldl); }
.nauka .pewnosc-sprawdzamy { background: #1A2744; border-color: rgba(185,138,240,.6); color: #e7ddfa; }
.n-dymek { position: absolute; z-index: 950; max-width: 280px; padding: 10px 14px; border-radius: 10px; background: #0d1d36; border: 1px solid rgba(47,201,224,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); font: 500 14px/1.45 'Montserrat', sans-serif; color: var(--white); pointer-events: none; }

/* ── Panel „Pod powierzchnią” ── */
.pod-powierzchnia { margin-top: 26px; border: 1px solid rgba(47,201,224,.2); border-radius: 14px; background: rgba(10,25,50,.5); }
.pod-powierzchnia + .pod-powierzchnia { margin-top: 12px; }
.pod-powierzchnia summary { cursor: pointer; list-style: none; padding: 15px 50px 15px 20px; position: relative; font: 700 13px/1.4 'Montserrat', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tealg); }
.pod-powierzchnia summary::-webkit-details-marker { display: none; }
.pod-powierzchnia summary::after { content: '↓'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; letter-spacing: 0; transition: transform .2s; }
.pod-powierzchnia[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.pp-tresc { padding: 4px 20px 18px; }
.n-tekst .pp-tresc p, .n-tekst .pp-tresc li { font-size: 17px; color: var(--text-secondary); }
.pp-tresc ul, .pp-tresc ol { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.pp-tresc strong { color: var(--text-primary); font-weight: 600; }
.pp-tresc h3 { margin-top: 14px; color: var(--goldl); }

/* ── Ilustracje ── */
.n-svg { margin: 26px 0; }
.n-svg svg { display: block; width: 100%; height: auto; }
.s2-podpis { font: 600 15px 'Montserrat', sans-serif; fill: var(--text-primary); }
.s2-zloty { fill: var(--goldl); } .s2-turkus { fill: var(--tealg); } .s2-jasny { fill: var(--white); font-size: 16px; } .s2-maly { font-size: 13px; font-weight: 500; fill: var(--text-secondary); }
@media (max-width: 599px) { .s2 .s2-podpis, .s3 .s2-podpis, .s4 .s2-podpis, .s2b .s2-podpis { font-size: 22px; } .s2 .s2-maly, .s4 .s2-maly, .s2b .s2-maly { font-size: 19px; } }
.s2b-poziom rect, .s2b-swiat { fill: rgba(47,201,224,.06); stroke: rgba(47,201,224,.35); stroke-width: 1.5; }
.s2b-gora { stroke-width: var(--waga, 2); transition: stroke-width .2s; }
.n-svg-panel { margin-top: 6px; }
.n-suwak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font: 600 13px 'Montserrat', sans-serif; color: var(--text-secondary); }
.n-suwak input { flex: 1 1 180px; accent-color: var(--tealg); }
.s3-panel { fill: rgba(10,25,50,.5); stroke: rgba(47,201,224,.18); }
.n-ilustracja { display: block; width: 100%; height: auto; border-radius: 16px; margin: 6px 0 24px; box-shadow: 0 18px 44px rgba(0,0,0,.35); }

@media (prefers-reduced-motion: no-preference) {
  .s2-szkic { animation: n-puls 3s ease-in-out infinite; }
  .s2-blad { stroke-dasharray: 10 8; animation: n-plyn 3s linear infinite; }
  [data-animuj].widoczny .s3-pchany { animation: n-kolys 1.6s ease-in-out infinite; transform-origin: 180px 230px; transform-box: view-box; }
  [data-animuj].widoczny .s3-ciagniety { animation: n-jazda 2.6s ease-out forwards; }
}
@keyframes n-puls { 0%, 100% { opacity: .35; } 30% { opacity: 1; } }
@keyframes n-plyn { to { stroke-dashoffset: -36; } }
@keyframes n-kolys { 0%, 100% { transform: rotate(-4deg) translateX(-4px); } 50% { transform: rotate(4deg) translateX(4px); } }
@keyframes n-jazda { from { transform: translateX(-40px); } to { transform: translateX(0); } }

/* ── Eksperyment: plamy (H2) i podpowiedź (H3) nałożone 1:1, płynne przejście ── */
.n-eksperyment { position: relative; margin: 22px 0 14px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.n-eksperyment img { display: block; width: 100%; height: auto; }
.n-podpowiedz { position: absolute; inset: 0; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.n-eksperyment.podpowiedz .n-podpowiedz { opacity: 1; }
.n-eksp-rzad { margin-bottom: 18px; }
.n-eksp-po { animation: n-pojaw .6s ease both; }
@keyframes n-pojaw { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Słownik: wiersze na komputerze, karty w bok na telefonie ── */
.n-slownik { margin: 22px 0 0; border-top: 1px solid rgba(47,201,224,.18); }
.n-slownik > div { display: grid; grid-template-columns: 220px 1fr; gap: 6px 22px; padding: 13px 0; border-bottom: 1px solid rgba(47,201,224,.18); }
.n-slownik dt { font: 700 17px/1.4 'Montserrat', sans-serif; color: var(--goldl); }
.n-slownik dd { margin: 0; font: 18px/1.6 'Lora', serif; color: var(--text-primary); }
.n-przewin { display: none; }
@media (max-width: 759px) {
  .n-slownik { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; padding-bottom: 8px; scrollbar-width: thin; }
  .n-slownik > div { flex: 0 0 78%; display: block; scroll-snap-align: start; padding: 18px; border: 1px solid rgba(47,201,224,.2); border-radius: 14px; background: rgba(10,25,50,.6); }
  .n-slownik dt { margin-bottom: 6px; }
  .n-przewin { display: block; text-align: right; margin-top: 6px; }
}
.n-tabela-wrap { overflow-x: auto; margin-bottom: 14px; }
.n-tabela { width: 100%; border-collapse: collapse; min-width: 480px; }
.n-tabela th, .n-tabela td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(47,201,224,.15); font: 16px/1.5 'Lora', serif; color: var(--text-secondary); }
.n-tabela th { font: 700 14px/1.4 'Montserrat', sans-serif; color: var(--goldl); }
.n-tabela thead th { color: var(--tealg); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* ── Rytm dnia i „Sprawdź jutro” ── */
.n-rytm { display: grid; gap: 10px; margin: 6px 0 10px; }
.n-rytm > div { display: grid; grid-template-columns: 200px 1fr; gap: 4px 18px; padding: 14px 18px; border-radius: 12px; background: rgba(10,25,50,.55); border: 1px solid rgba(47,201,224,.14); }
.n-rytm dt { font: 700 16px/1.5 'Montserrat', sans-serif; color: var(--goldl); }
.n-rytm dd { margin: 0; font: clamp(17px, 2vw, 19px)/1.6 'Lora', serif; color: var(--text-primary); }
@media (max-width: 599px) { .n-rytm > div { grid-template-columns: 1fr; } }
.n-sprawdz { display: flex; gap: 18px; align-items: flex-start; margin: 28px 0 0; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,163,184,.32), rgba(34,163,184,.14)); border: 1px solid rgba(47,201,224,.45); color: var(--tealg); }
.n-sprawdz svg { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 599px) { .n-sprawdz { flex-direction: column; gap: 10px; padding: 20px; } }
.n-sprawdz h3 { color: var(--white); margin-bottom: 6px; }
.n-tekst .n-sprawdz p { margin: 0; }

/* ── 4E: ta sama ciemna kolumna co reszta (jasny pas zdjęty 14.10 — za duży kontrast); ilustracja H5 w ramce ── */
.n-4e { display: grid; gap: 10px 34px; align-items: start; margin-top: 8px; }
.n-petla { margin: 0 auto; width: min(100%, 460px); }
.s5 .s2-podpis { font-size: 20px; } .s5 .s2-maly { font-size: 17px; }
.s5-tlo { fill: #0b1a33; stroke: rgba(47,201,224,.35); stroke-width: 1.5; }
.s5-wezel { cursor: pointer; outline: none; }
.s5-wezel circle.s5-tlo { transition: stroke .2s, stroke-width .2s; }
.s5-wezel.aktywny circle.s5-tlo, .s5-wezel:focus-visible circle.s5-tlo { stroke: var(--goldl); stroke-width: 3; }
.n-4e-akapity p { padding: 10px 14px; margin: 0 0 6px; border-radius: 12px; border-left: 3px solid transparent; transition: background .2s, border-color .2s; }
.n-4e-akapity p.aktywny { background: rgba(47,201,224,.07); border-left-color: var(--goldl); }
.n-4e-akapity strong { color: var(--goldl); }
@media (prefers-reduced-motion: reduce) { .s5-kropka { display: none; } }

/* ── Wezwanie dla badaczy (H6) ── */
.n-badacze { margin-top: 30px; border-radius: 18px; overflow: hidden; background: #0d1a33; border: 1px solid rgba(200,168,75,.3); }
.n-badacze img { display: block; width: 100%; height: auto; }
.n-badacze-tresc { padding: 24px 26px 28px; }
.n-badacze h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 3vw, 30px); color: var(--goldl); margin-bottom: 10px; }
.n-pytania { list-style: none; padding: 0 !important; counter-reset: q; }
.n-pytania li { position: relative; padding-left: 44px; counter-increment: q; }
.n-pytania li::before { content: '?'; position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 16px 'Montserrat', sans-serif; color: #04111f; background: var(--goldl); }

/* ── Biblioteka i zakończenie ── */
.n-ksiazki { padding-left: 20px; display: grid; gap: 10px; margin: 0 0 8px; }
.n-ksiazki strong { color: var(--goldl); font-weight: 600; }
.n-bibliografia { padding-left: 22px !important; }
.n-tekst .n-bibliografia li { font-size: 15px; line-height: 1.55; }
.n-stopka-sekcji { margin-top: 22px; }
[data-strona="nauka"] .pieczec { visibility: hidden; } /* hasło „Neuronauka w praktyce” przeczy sekcji „Czego u nas nie znajdziesz” */