/*
 * Dzień Dobry Długowieczność. Tokeny z makiet V2 (docs/DDD_Makiety_V2_2026-09-14):
 * biel, grafitowe ilustracje, Poppins, teal #237580, żółty #F7CF4C.
 *
 * Promienie: przyciski, pola wyszukiwania i chipy w pełni zaokrąglone; panele 16px;
 * karty i obrazy 4px; zwykłe pola formularza 8px.
 * Warstwy: przyklejony nagłówek (--z-header) i pasek zgody (--z-consent); dialog cookies leży w warstwie top layer.
 */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-400-9212f6f9860f9fc6c69b02fedf6db8c3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-ext-400-90926c36b712cb131f3f890bbb8c477e.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-500-a09f2fccfee35b7247b08a1a266f0328.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-ext-500-1f24684cbd726414ff212d90accc8cdf.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-700-25b0e113ca7cce3770d542736db26368.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-ext-700-367d2aa05bf0382d8bc48614fbaf8740.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/fonts/poppins-latin-800-af4d371a10271dafeb343f1eace762bc.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/fonts/poppins-latin-ext-800-6b2835047d683902c68c1faef3a5e94d.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --teal: #237580;
  --teal-dark: #1b5e67;
  --teal-tint: #e7f1f3;
  --yellow: #f7cf4c;
  --yellow-dark: #e9b82c;
  --ink: #1c2226;
  --muted: #4e585e;
  --line: #d3d9e6;
  --paper: #ffffff;
  --error: #9c1f18;   /* kontrast 5,3:1 na żółtym panelu zapisu i 8:1 na białym */
  --youtube: #e62117;
  --spotify: #1db954;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-pill: 999px;
  --radius-panel: 16px;
  --radius-field: 8px;
  --radius-card: 4px;

  --container: 72rem;
  --z-header: 10;
  --z-consent: 20;
  --shadow: 0 1px 2px rgb(35 117 128 / 0.08), 0 8px 24px rgb(35 117 128 / 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
/* Atrybut hidden ma zawsze wygrywać z display ustawionym przez klasy (styl UA dla [hidden] ma najniższy priorytet). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 var(--space-4); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-7); border-top: 1px solid var(--line); }
.section--tight { border-top: 0; padding-top: var(--space-5); }
.center { text-align: center; margin-top: var(--space-6); }
.muted { color: var(--muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ── Typografia ─────────────────────────────────────────── */

.display {
  margin: 0 0 var(--space-4);
  font-size: clamp(3rem, 7vw, 5.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal);
}
.display--medium { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.015em; }
.display--episode { font-size: clamp(2.2rem, 4.5vw, 3.75rem); line-height: 1.04; letter-spacing: -0.015em; }
/* Strona główna: hasło mniejsze niż dawne „Dłużej w zdrowiu.”, żeby nie przykrywało nazwy podcastu. */
.display--hero { font-size: clamp(2.6rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -0.015em; }

.heading {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.heading-teal {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--teal);
}
.subheading { margin: 0 0 var(--space-2); font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--ink); }

.prose { max-width: 65ch; }

/* ── Przyciski i linki ──────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 3rem; padding: 0.6rem 1.6rem;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font: 500 1rem/1.2 var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 2.5rem; padding: 0.4rem 1.1rem; font-size: 0.95rem; }
.btn--block { width: 100%; white-space: normal; text-align: center; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: var(--yellow-dark); }
.btn--teal { background: var(--teal); color: #fff; border-radius: var(--radius-field); font-weight: 600; }
.btn--teal:hover { background: var(--teal-dark); }
.btn--outline { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--teal-tint); }
.btn--outline-teal { background: var(--paper); border-color: var(--teal); color: var(--teal); font-weight: 600; }
.btn--outline-teal:hover { background: var(--teal-tint); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--teal);
  text-underline-offset: 0.3em; text-decoration-thickness: 2px;
}
.link-arrow .icon { transition: transform 0.2s ease; }
a:hover .link-arrow .icon, .link-arrow:hover .icon { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }

/* ── Nagłówek ───────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 4.5rem; }

.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.logo__mark { width: 3.5rem; height: auto; color: var(--yellow-dark); }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.logo__text strong { font-weight: 800; }
.logo--light { color: #fff; }
.logo--light .logo__mark { color: var(--yellow); }

.site-nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.site-nav a:not(.btn) {
  text-decoration: none; font-size: 0.95rem; padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { border-color: var(--line); }
.site-nav a.is-active { font-weight: 700; border-color: var(--teal); }
.nav-toggle { display: none; }

@media (max-width: 52rem) {
  .nav-toggle {
    display: inline-flex; margin-left: auto; padding: var(--space-2);
    background: none; border: 0; color: var(--ink); cursor: pointer;
  }
  .nav-toggle .icon { width: 1.75rem; height: 1.75rem; }
  .site-nav {
    display: none; position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-3) 1.25rem var(--space-5);
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
  .site-nav a.is-active { border-bottom-color: var(--teal); }
  .site-nav .btn { margin-top: var(--space-4); }
}

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

.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--space-6);
  padding-block: var(--space-7) var(--space-6);
}
.hero--compact { padding-bottom: var(--space-4); }
.hero__lead { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; max-width: 30ch; }
.hero__brand {
  display: inline-block; margin: 0 0 var(--space-3); padding-bottom: var(--space-1);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink); border-bottom: 4px solid var(--yellow);
}
.hero__lead--large { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.3; max-width: 30ch; }
.hero__lead--strong { font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.hero__body { font-size: 1.15rem; max-width: 36ch; }
.hero__figure { margin: 0; justify-self: end; text-align: right; }
/* Ilustracje z makiet mają złamaną biel tła; multiply wtapia je w stronę. */
.hero__figure img, .landing__figure img { mix-blend-mode: multiply; }
/* Ilustracja ma 1000 px szerokości (2x); na stronie zajmuje tyle co dawny wycinek z makiety. */
.hero__figure img { width: 100%; max-width: 30rem; }
.hero__figure figcaption { font-weight: 700; margin-top: var(--space-2); margin-right: 25%; }
.hero__figure--small img { max-width: 22rem; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-6); }
  .hero__figure { justify-self: center; text-align: center; }
  .hero__figure figcaption { margin-right: 0; }
  .hero__figure--small { display: none; }
}

/* ── Strona główna ──────────────────────────────────────── */

.fitness-band {
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  background: var(--teal-tint); border-radius: var(--radius-panel);
}
.fitness-band__img { justify-self: center; mix-blend-mode: multiply; }
@media (max-width: 40rem) {
  .fitness-band { grid-template-columns: 1fr; padding: var(--space-5); }
  /* Telefon: wezwanie do testu ma się zmieścić na pierwszym ekranie (uwaga Michała 22.10.2026),
     więc ilustracja z hero i buty z pasa znikają, a odstępy w hero są mniejsze. */
  .hero--home { padding-block: var(--space-5) var(--space-4); gap: var(--space-4); }
  .hero--home .hero__figure, .fitness-band__img { display: none; }
  .hero--home .actions { margin-top: var(--space-3); }
}

.topics {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.topics li + li { border-left: 1px solid var(--line); }
.topics__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-2); text-decoration: none; font-size: 1.1rem;
  transition: color 0.2s ease;
}
.topics__item .icon { width: 3rem; height: 3rem; color: var(--ink); transition: transform 0.2s ease; }
.topics__item:hover { color: var(--teal); }
.topics__item:hover .icon { transform: translateY(-3px); color: var(--teal); }
@media (max-width: 40rem) {
  .topics { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-4); }
  .topics li + li { border-left: 0; }
}

/* Nagłówek sekcji z linkiem po prawej; na wąskim ekranie link schodzi pod opis. */
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5);
}
.section-head .heading { margin-bottom: var(--space-2); }
.section-head .page-intro { margin: 0; }
.section-head__link { flex: none; }

.empty-state {
  padding: var(--space-6); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-panel); color: var(--muted);
}

/* ── Pas newslettera i stopka ───────────────────────────── */

.newsletter-band { background: var(--yellow); padding-block: var(--space-6); margin-top: var(--space-7); }
.newsletter-band__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-6); }
.newsletter-band__title { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
.newsletter-band__row { display: flex; gap: var(--space-3); }
.newsletter-band__row .input { flex: 1; min-width: 0; }
@media (max-width: 52rem) {
  .newsletter-band__inner { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 30rem) {
  .newsletter-band__row { flex-direction: column; }
}

.site-footer { background: var(--teal); color: #fff; padding-block: var(--space-6); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.site-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.site-footer__nav a { text-decoration: none; font-size: 0.95rem; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__social .icon { width: 1.75rem; height: 1.75rem; }
.newsletter-band + .site-footer, .site-footer { margin-top: 0; }
main + .site-footer { margin-top: var(--space-7); }

/* ── Formularze ─────────────────────────────────────────── */

.input {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.9rem;
  font: 400 1rem/1.4 var(--font); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-field);
}
.input::placeholder { color: #6b747a; }
.input[aria-invalid="true"] { border-color: var(--error); }
textarea.input { resize: vertical; }

.field { margin-bottom: var(--space-4); }
.field label:not(.consent) { display: block; margin-bottom: var(--space-1); font-weight: 500; font-size: 0.95rem; }
.field__optional { font-weight: 400; color: var(--muted); }
.field__error, .form-error { color: var(--error); font-size: 0.9rem; margin: var(--space-1) 0 0; }
.form-error { margin-bottom: var(--space-4); font-weight: 500; }
.form-note { font-size: 0.9rem; color: var(--muted); margin-top: var(--space-3); }
.form-note a, .consent a, .consent-bar a, .consent-panel__body a { text-underline-offset: 0.2em; }

.consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.9rem; line-height: 1.45; cursor: pointer; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: var(--teal); flex: none; }

/* Zgoda: niezaznaczony checkbox z treścią jak w formularzach DDP; pod nim przypomnienie o potwierdzeniu
   i skrócona informacja z art. 13 RODO. */
.consents { display: grid; gap: var(--space-3); min-width: 0; margin: 0 0 var(--space-3); padding: 0; border: 0; }
.consents__item .field__error { margin-left: 1.65rem; }
.consent-info { margin: 0 0 var(--space-4); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.consent-info a { color: inherit; text-underline-offset: 0.2em; }
.consents--compact { gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.consents--compact .consent { font-size: 0.85rem; }
.consent-info--compact { margin: 0; font-size: 0.78rem; color: var(--ink); }
.consents--compact .consent { font-size: 0.78rem; line-height: 1.45; }
.confirm-note { margin: 0 0 var(--space-3); font-size: 0.85rem; line-height: 1.45; }
.confirm-note--compact { margin: 0 0 var(--space-2); font-size: 0.8rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
.field--wide { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form-grid { grid-template-columns: 1fr; } }

/* ── Podcast ────────────────────────────────────────────── */

.search { position: relative; max-width: 34rem; margin-top: var(--space-5); }
.search .icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search__input {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 1rem 0.7rem 3rem;
  font: 400 1rem var(--font); border: 1px solid var(--line); border-radius: var(--radius-pill);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0.4rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  text-decoration: none; font-size: 0.95rem; background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.chip:hover { border-color: var(--teal); }
.chip.is-active { background: var(--yellow); border-color: var(--yellow); font-weight: 700; }

/* Trzy kolumny; porcja katalogu (EpisodeService.PAGE_SIZE = 12) wypełnia pełne rzędy przy 3 i 2 kolumnach. */
.episode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.episode-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 64rem) { .episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .episode-grid, .episode-grid--two { grid-template-columns: 1fr; } }
/* Strona główna ma 3 najnowsze rozmowy: przy dwóch kolumnach trzecia zostałaby sama w rzędzie, więc ją chowamy. */
@media (min-width: 40.01rem) and (max-width: 64rem) { .episode-grid--latest > :nth-child(n+3) { display: none; } }

.episode-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; transition: box-shadow 0.2s ease; }
.episode-card:hover { box-shadow: var(--shadow); }
.episode-card__link { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
/* Okładki odcinków mają proporcje ok. 21:10 (1816×866). Ramka w tych samych proporcjach: bez pustych pasów i bez kadrowania. */
.episode-card__media { aspect-ratio: 21 / 10; background: var(--teal-tint); overflow: hidden; border-bottom: 1px solid var(--line); }
.episode-card__media img { width: 100%; height: 100%; object-fit: cover; }
.episode-card__body { padding: var(--space-4); }
.episode-card__meta {
  display: flex; align-items: center; gap: var(--space-1);
  margin: 0 0 var(--space-2); font-size: 0.85rem; font-weight: 600; color: var(--teal);
}
.episode-card__meta .icon { width: 1.1rem; height: 1.1rem; }
.episode-card__title { margin: 0 0 var(--space-2); font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
.episode-card:hover .episode-card__title { color: var(--teal); }
.episode-card__guest { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--muted); }

.load-more { text-align: center; margin-top: var(--space-6); }

/* ── Odcinek ────────────────────────────────────────────── */

.breadcrumb { display: flex; gap: var(--space-2); padding-top: var(--space-5); font-size: 0.85rem; color: var(--muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.episode__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--space-7); padding-top: var(--space-4); }
.episode__guest { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-2); }
.episode__summary { font-size: 1.1rem; }
.episode__meta { display: flex; align-items: center; gap: var(--space-4); font-size: 0.9rem; color: var(--muted); }
.tag { padding: 0.15rem 0.75rem; border-radius: var(--radius-pill); background: var(--teal-tint); color: var(--teal-dark); text-decoration: none; font-weight: 500; }

.video { position: relative; aspect-ratio: 21 / 10; margin-block: var(--space-5) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--teal-tint); }
.video:has(iframe) { aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__facade { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center;
  width: 5rem; height: 5rem; border-radius: 50%; background: var(--teal); color: #fff;
  transform: translate(-50%, -50%); transition: transform 0.2s ease, background-color 0.2s ease;
}
.video__play .icon { width: 2.2rem; height: 2.2rem; margin-left: 0.25rem; }
.video__facade:hover .video__play { transform: translate(-50%, -50%) scale(1.06); background: var(--teal-dark); }
.video--small { margin: 0; }

.listen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.listen__btn { border-radius: var(--radius-field); border-width: 1px; }
.listen__btn--youtube .icon { color: var(--youtube); width: 1.6rem; height: 1.6rem; }
.listen__btn--spotify .icon { color: var(--spotify); width: 1.6rem; height: 1.6rem; }
@media (max-width: 30rem) { .listen { grid-template-columns: 1fr; } }

.notes { counter-reset: chapter; padding-top: var(--space-5); max-width: 70ch; }
.notes h2 { margin: 0 0 var(--space-3); font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.notes h2 + p { color: var(--muted); max-width: 48ch; margin-bottom: var(--space-5); }
.notes h3 {
  counter-increment: chapter;
  position: relative; margin: 0; padding: var(--space-5) 0 var(--space-2) 3.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.15rem; font-weight: 700; line-height: 1.35;
}
.notes h2 + p + h3 { border-top: 0; }
.notes h3::before {
  content: counter(chapter);
  position: absolute; left: 0; top: calc(var(--space-5) - 0.2rem);
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 0.95rem;
}
/* Notatki ze spisem tematów: numer dostają tylko rozdziały po spisie, tak jak w spisie (1., 2., …).
   „Najważniejsze wnioski” i sam spis są bez numeru. Spis to nagłówek, po którym idzie lista linków do kotwic.
   Przeglądarki bez :has() numerują jak dawniej wszystkie nagłówki. */
.notes:has(h3 + ol a[href^="#"]) h3 { counter-increment: none; padding-left: 0; }
.notes:has(h3 + ol a[href^="#"]) h3::before { content: none; }
.notes h3:has(+ ol a[href^="#"]) ~ h3 { counter-increment: chapter; padding-left: 3.25rem; }
.notes h3:has(+ ol a[href^="#"]) ~ h3::before { content: counter(chapter); }
.notes:has(h3 + ol a[href^="#"]) ul { padding-left: 1.4rem; }
.notes h3:has(+ ol a[href^="#"]) ~ ul { padding-left: 4.4rem; }
.notes ul { margin: 0 0 var(--space-4); padding-left: 4.4rem; }
.notes li { margin-bottom: var(--space-1); }
.notes a { color: var(--teal); font-weight: 600; text-underline-offset: 0.2em; }
.notes a.timestamp { margin-left: var(--space-1); font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) {
  .notes h3, .notes h3:has(+ ol a[href^="#"]) ~ h3 { padding-left: 2.9rem; }
  .notes ul, .notes h3:has(+ ol a[href^="#"]) ~ ul { padding-left: 1.2rem; }
}

.guest-card { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); }
.guest-card__heading, .related__heading { margin: 0 0 var(--space-4); font-size: 1.3rem; font-weight: 700; }
.guest-card__photo { width: 100%; border-radius: var(--radius-card); margin-bottom: var(--space-4); }
.guest-card__name { font-weight: 700; font-size: 1.15rem; margin-bottom: var(--space-2); }
.guest-card__bio { font-size: 0.95rem; color: var(--muted); margin: 0; }

.related { margin-top: var(--space-6); }
.related__item {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-2);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.related__item img { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius-card); aspect-ratio: 21 / 10; object-fit: cover; width: 100%; }
.related__text { display: flex; flex-direction: column; line-height: 1.3; }
.related__text span { font-size: 0.9rem; color: var(--muted); }
.related__item:hover strong { color: var(--teal); }

@media (max-width: 60rem) {
  .episode__layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── Dlaczego? ──────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.split__col + .split__col { border-left: 1px solid var(--line); padding-left: var(--space-7); }
@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split__col + .split__col { border-left: 0; padding-left: 0; }
}

.pillars { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pillars a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.pillars__icon { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border: 2px solid var(--teal); border-radius: 50%; transition: background-color 0.2s ease; }
.pillars__icon .icon { width: 1.9rem; height: 1.9rem; }
.pillars a:hover .pillars__icon { background: var(--yellow); }

.intro__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-6); }
.intro__img { border-radius: var(--radius-card); }
@media (max-width: 52rem) { .intro__grid { grid-template-columns: 1fr; } }

/* ── Współpraca ─────────────────────────────────────────── */

.offer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.offer__item { padding: var(--space-4) var(--space-6); text-align: center; }
.offer__item + .offer__item { border-left: 1px solid var(--line); }
.offer__icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--yellow); }
.offer__icon .icon { width: 1.8rem; height: 1.8rem; }
@media (max-width: 52rem) {
  .offer { grid-template-columns: 1fr; }
  .offer__item { text-align: left; padding-inline: 0; }
  .offer__item + .offer__item { border-left: 0; border-top: 1px solid var(--line); }
}

.principles { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }

/* Kafelek dla przyszłych gości podcastu (21.10.2026). */
.guest-invite {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5);
  margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
  background: var(--teal-tint); border-radius: var(--radius-panel);
}
.guest-invite .offer__icon { margin: 0; }
.guest-invite__text .subheading { margin-top: 0; }
.guest-invite__text p { margin-bottom: 0; max-width: 62ch; }
@media (max-width: 52rem) {
  .guest-invite { grid-template-columns: 1fr; padding: var(--space-5); }
  .guest-invite__cta { justify-self: start; }
}

.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); }
.contact__direct { border-left: 1px solid var(--line); padding-left: var(--space-6); align-self: end; }
.contact__mail { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; overflow-wrap: anywhere; }
.contact__mail:hover { color: var(--teal); }
@media (max-width: 52rem) {
  .contact { grid-template-columns: 1fr; gap: var(--space-5); }
  .contact__direct { border-left: 0; padding-left: 0; }
}

/* ── Landing testu i newsletter ─────────────────────────── */

.landing { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); padding-block: var(--space-7); }
.landing h1 { overflow-wrap: break-word; hyphens: auto; }
.landing__figure { margin: 0; position: relative; }
.landing__figure figcaption { display: flex; flex-direction: column; line-height: 1.35; margin-top: var(--space-2); padding-left: 25%; }
.landing__figure figcaption strong { font-size: 1.15rem; }
@media (max-width: 52rem) {
  .landing { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-6); }
  .landing__figure { max-width: 24rem; justify-self: center; }
  .landing__figure figcaption { padding-left: 0; text-align: center; }
}

/* Landing testu: skrót dla przeglądarki, która ma już dostęp, i komunikat po wejściu na test bez dostępu. */
.landing__access {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border: 2px solid var(--teal); border-radius: var(--radius-panel);
}
.landing__access p { margin: 0; font-weight: 600; }
.landing__facts { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.landing__facts li { position: relative; padding-left: var(--space-5); line-height: 1.45; }
.landing__facts li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--yellow); }
.landing__facts strong { color: var(--teal); }
.landing__notice { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); background: var(--teal-tint); border-radius: var(--radius-field); }
.landing__notice a { color: var(--teal); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.signup-panel { scroll-margin-top: 6rem; }

.signup-panel { margin-top: var(--space-5); padding: var(--space-6); background: var(--yellow); border-radius: var(--radius-panel); }
.signup-panel__title { margin: 0 0 var(--space-5); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.signup-panel .form-note { color: var(--ink); }
.signup-panel .field label:not(.consent) { color: var(--ink); }
.signup-panel--wide { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); margin-top: 0; }
.signup-panel__aside { border-left: 1px solid rgb(28 34 38 / 0.2); padding-left: var(--space-6); align-self: center; }
@media (max-width: 52rem) {
  .signup-panel { padding: var(--space-5); }
  .signup-panel--wide { grid-template-columns: 1fr; }
  .signup-panel__aside { border-left: 0; padding-left: 0; }
}

.benefits { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.benefits li { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.benefits .icon { width: 1.8rem; height: 1.8rem; }

.message-page { padding-block: var(--space-8); max-width: 48rem; }
.message-page__note { color: var(--muted); }

/* ── Zgoda na ciasteczka i podgląd odcinka ──────────────── */

/* Pasek pierwszej wizyty: przyklejony do dołu, bez przyciemnienia strony. */
.consent-bar {
  position: fixed; left: 50%; bottom: var(--space-4); z-index: var(--z-consent);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6);
  width: min(100% - 2rem, 60rem); padding: var(--space-4) var(--space-5);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow);
  transform: translateX(-50%);
}
.consent-bar__text { flex: 1 1 24rem; }
.consent-bar p { margin: 0; font-size: 0.9rem; max-width: 62ch; }
.consent-bar .consent-bar__title { margin-bottom: var(--space-1); font-size: 1rem; font-weight: 700; }
.consent-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.consent-bar .btn { min-height: 2.75rem; }
.consent-bar__settings { padding: var(--space-2); font-size: 0.95rem; font-weight: 500; color: var(--teal); }
/* Telefon: pasek ma zasłaniać jak najmniej. Tytuł zostaje dla czytników ekranu, przyciski i „Ustawienia” w jednym rzędzie. */
@media (max-width: 40rem) {
  .consent-bar { bottom: var(--space-2); width: calc(100% - 1rem); padding: var(--space-3); gap: var(--space-2); }
  .consent-bar .consent-bar__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .consent-bar__text { flex-basis: 100%; }
  .consent-bar p { font-size: 0.8rem; line-height: 1.35; }
  .consent-bar__actions { width: 100%; flex-wrap: nowrap; gap: var(--space-2); }
  .consent-bar__actions .btn { flex: 1 1 0; min-width: 0; min-height: 2.5rem; padding: 0.35rem 0.5rem; font-size: 0.875rem; line-height: 1.15; white-space: normal; }
  .consent-bar__settings { flex: 0 0 auto; padding: var(--space-1); font-size: 0.85rem; }
}

/* Dialog ustawień: natywny <dialog> daje pułapkę fokusu, Escape i warstwę nad całą stroną. */
.consent-dialog {
  width: min(100% - 2rem, 44rem); max-height: min(100% - 2rem, 46rem);
  padding: 0; border: 0; border-radius: var(--radius-panel);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.consent-dialog[open] { display: flex; }
.consent-dialog::backdrop { background: rgb(28 34 38 / 0.55); }
.consent-dialog .consent-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
@media (max-width: 40rem) {
  .consent-dialog { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent-dialog[open] { animation: consent-in 0.2s ease-out; }
  @keyframes consent-in { from { opacity: 0; transform: translateY(0.5rem); } }
}

.consent-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5) 0;
}
.consent-panel__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.consent-panel__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: calc(-1 * var(--space-2));
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink); cursor: pointer;
}
.consent-panel__close:hover { background: var(--teal-tint); }
.consent-panel__close .icon { width: 1.5rem; height: 1.5rem; }

.consent-tabs { display: flex; gap: var(--space-5); padding: 0 var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; }
.consent-tabs__tab {
  padding: var(--space-3) 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted); font: 500 0.95rem/1.3 var(--font); white-space: nowrap; cursor: pointer;
}
.consent-tabs__tab:hover { color: var(--ink); }
.consent-tabs__tab[aria-selected="true"] { color: var(--ink); font-weight: 700; border-color: var(--teal); }

.consent-panel__body { padding: var(--space-5); overflow-y: auto; min-height: 0; flex: 1; }
.consent-panel__section + .consent-panel__section { margin-top: var(--space-6); }
.consent-panel__heading { margin-bottom: var(--space-3); }
.consent-panel__body p { font-size: 0.95rem; }

.consent-option {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  padding-block: var(--space-4); border-top: 1px solid var(--line);
}
.consent-option__name { display: block; margin: 0 0 var(--space-1); font-weight: 700; }
.consent-panel .consent-option__desc { margin: 0; font-size: 0.9rem; color: var(--muted); }

.consent-table { overflow-x: auto; margin-bottom: var(--space-4); }
.consent-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.consent-table th, .consent-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.consent-table th { font-weight: 700; white-space: nowrap; }
.consent-table code { font-size: 0.85em; white-space: nowrap; }

.consent-panel__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line);
}
/* Trzy decyzje w jednym rzędzie: ten sam kształt co .btn--teal, różni je tylko wypełnienie. */
.consent-panel__actions .btn { min-height: 2.75rem; border-radius: var(--radius-field); }
@media (max-width: 40rem) {
  .consent-panel__head, .consent-tabs { padding-inline: var(--space-4); }
  .consent-tabs { gap: var(--space-4); }
  /* Tabela jako lista: każdy wiersz to blok z etykietą przy wartości, bez przewijania w bok. */
  .consent-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .consent-table tr { display: block; padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
  .consent-table td { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-3); padding: var(--space-1) 0; border: 0; }
  .consent-table td::before { content: attr(data-label); font-weight: 700; }
  .consent-panel__body { padding: var(--space-4); }
  .consent-panel__actions { flex-direction: column-reverse; padding-inline: var(--space-4); }
  .consent-panel__actions .btn { width: 100%; }
}

.consent-panel--page { margin-top: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-panel); }

/* Przełącznik: prawdziwy checkbox na wierzchu toru, więc etykieta, klawiatura i czytniki działają bez JS. */
.switch { position: relative; display: inline-block; flex: none; width: 3rem; height: 1.75rem; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch__track {
  position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--line);
  transition: background-color 0.2s ease;
}
.switch__track::after {
  content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgb(28 34 38 / 0.2);
  transition: transform 0.2s ease;
}
.switch input:checked + .switch__track { background: var(--teal); }
.switch input:checked + .switch__track::after { transform: translateX(1.25rem); }
.switch input:disabled + .switch__track { opacity: 0.5; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__track::after { transition: none; }
}

.preview-bar { background: var(--yellow); padding-block: var(--space-3); font-size: 0.95rem; }
.preview-bar__inner { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ── Ruch ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .btn:active { transform: none; }
}


/* Informacje o newsletterze i czytelne wyniki katalogu. */
.page-intro { max-width: 70ch; }
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-5); }
.value-card { border-top: 3px solid var(--yellow); padding-top: var(--space-4); }
.value-card .subheading { color: var(--teal); }
.newsletter-band__description { margin-block: var(--space-3); max-width: 48ch; }
.newsletter-band__details { text-underline-offset: 0.2em; }
.search { display: flex; gap: var(--space-2); }
.search__input { min-width: 0; flex: 1; }
.search__submit { flex-shrink: 0; }
.catalogue-context { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.catalogue-context p { margin: 0; }
.catalogue-context__reset { color: var(--teal); text-underline-offset: 0.2em; }
#zapis { scroll-margin-top: 6rem; }
@media (max-width: 52rem) { .value-grid { grid-template-columns: 1fr; } }
@media (max-width: 30rem) {
  .search { flex-wrap: wrap; }
  .search .icon { top: 1.625rem; }
  .search__input { flex-basis: 100%; }
  .search__submit { width: 100%; }
}

/* Reset snu: dyskretne wejście na home i osobny landing. */
.sleep-home-link { display: block; margin: var(--space-5) 0 0; color: var(--muted); font-size: .95rem; }
.sleep-home-link .icon { color: var(--teal); vertical-align: middle; margin-right: .3rem; }
.sleep-home-link a, .sleep-text-link { color: var(--teal); text-underline-offset: .2em; }
.sleep-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: center; padding-block: var(--space-7); }
.sleep-hero__text { min-width: 0; }
.sleep-mark { display: inline-grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--teal-tint); color: var(--teal); }
.sleep-mark .icon { width: 3rem; height: 3rem; stroke: currentColor; }
.sleep-eyebrow { color: var(--teal); font-weight: 600; margin-top: var(--space-4); }
.sleep-signup { padding: var(--space-5); border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: var(--radius-panel); background: var(--teal-tint); }
.sleep-signup .heading { font-size: 1.7rem; margin-bottom: var(--space-3); }
.sleep-signup__lead { margin-bottom: var(--space-5); }
.sleep-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.sleep-topics article { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.sleep-topics .subheading { color: var(--teal); }
.sleep-people { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.sleep-people__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-4); }
#zakres { scroll-margin-top: 6rem; }
@media (max-width: 52rem) { .sleep-hero { grid-template-columns: 1fr; gap: var(--space-5); } }
@media (max-width: 40rem) { .sleep-topics, .sleep-people__grid { grid-template-columns: 1fr; gap: var(--space-4); } }