/* Planello.pl — sekcja /swieta/. Ładowany po style.css, tylko na stronach
   świątecznych (body.strona-swieta). Ta sama typografia i siatka co reszta
   marki, cieplejsza baza i akcenty: czerwień, butelkowa zieleń, złoto. */

.strona-swieta {
  --papier:          #FBF7F1;
  --zaglebienie:     #F5EDE1;
  --linia:           #E8DFD1;
  --linia-mocna:     #D6C8B3;
  --mosiadz:         #B07A2A;
  --mosiadz-tlo:     #F6EAD6;

  --czerwien:        #A3241F;
  --czerwien-ciemna: #7E1A16;
  --czerwien-tlo:    #FBEDEA;
  --zielen:          #1E4A38;
  --zielen-ciemna:   #143528;
  --zielen-tlo:      #E7EFEA;
}
.strona-swieta .akcent { color: var(--czerwien); }
.strona-swieta .eyebrow { color: var(--zielen); }

/* Mniejszy rytm sekcji na telefonie — strona jest długa, więc liczy się
   każdy ekran. */
.strona-swieta section { padding-block: 56px; }
@media (min-width: 768px) { .strona-swieta section { padding-block: 88px; } }
.strona-swieta h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem); text-wrap: balance; }
.strona-swieta h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); }
.tlo-zaglebienie { background: var(--zaglebienie); }

.naglowek-sekcji { text-align: center; margin-bottom: 32px; }
.naglowek-sekcji p { color: var(--tekst-2); margin-top: 14px; }
@media (min-width: 768px) { .naglowek-sekcji { margin-bottom: 44px; } }

.proza p { color: var(--tekst-2); }
.proza p + p { margin-top: 14px; }
.proza strong { color: var(--tekst); }

/* ————— Przyciski ————— */
.strona-swieta .btn-mikolaj {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  padding: 16px 26px;
  width: 100%;
  max-width: 440px;
  border-radius: 999px;
  background: linear-gradient(180deg, #B82E28, var(--czerwien) 55%, var(--czerwien-ciemna));
  box-shadow: 0 16px 30px -14px rgba(126, 26, 22, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
  font-size: var(--krok-0);
  line-height: 1.25;
  text-align: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.strona-swieta .btn-mikolaj:hover {
  background: linear-gradient(180deg, #B82E28, var(--czerwien) 55%, var(--czerwien-ciemna));
  box-shadow: 0 22px 36px -16px rgba(126, 26, 22, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}
.strona-swieta .btn-mikolaj:active { transform: translateY(0); }
.strona-swieta .btn-mikolaj svg { flex-shrink: 0; transition: transform 200ms ease; }
.strona-swieta .btn-mikolaj:hover svg { transform: translateX(3px); }
@media (min-width: 600px) { .strona-swieta .btn-mikolaj { width: auto; padding-inline: 34px; } }

.cta-linia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  text-align: center;
}
.cta-mikro {
  font-size: var(--krok--1);
  color: var(--tekst-3);
}
.cta-mikro span:not(:last-child)::after { content: ' · '; }

/* ————— Hero ————— */
.hero--swieta {
  background:
    radial-gradient(ellipse 80% 55% at 100% -10%, var(--czerwien-tlo), transparent 60%),
    radial-gradient(ellipse 70% 60% at -10% 100%, var(--zielen-tlo), transparent 55%),
    var(--papier);
}
.hero--swieta .hero-siatka { gap: 20px; }
.hero--swieta h1 {
  font-size: clamp(1.8rem, 1.25rem + 2.6vw, 3.2rem);
  line-height: 1.12;
  max-width: 20ch;
  margin-bottom: 0;
}
.hero-lead { color: var(--tekst-2); font-size: var(--krok-0); }
.hero-lead strong { color: var(--tekst); font-weight: 600; }
.hero--swieta .hero-cena-linia { margin: 0; }
.hero--swieta .hero-cena-linia .cena { color: var(--czerwien); }
.hero--swieta .hero-cta-mikro { margin-top: 0; }
.hero--swieta .hero-kolumna { display: grid; gap: 18px; }
.hero--swieta .eyebrow { margin-bottom: 0; }
.hero--swieta .pasek-zaufania { margin-top: 4px; }

/* Na telefonie zdjęcie wskakuje zaraz pod H1 (przed cenę i przycisk) —
   display: contents spłaszcza kolumnę tekstu, żeby dało się ustawić
   kolejność wszystkich elementów w jednej siatce. */
@media (max-width: 899px) {
  .hero--swieta .hero-siatka { display: flex; flex-direction: column; gap: 16px; }
  .hero--swieta .hero-kolumna { display: contents; }
  .hero--swieta .eyebrow { order: -3; }
  .hero--swieta h1 { order: -2; max-width: none; text-align: center; }
  .hero--swieta .hero-wizual-wrap { order: -1; margin-block: 4px 6px; }
  .hero--swieta .pasek-zaufania { order: 2; }
  .hero--swieta .eyebrow,
  .hero--swieta .hero-cena-linia,
  .hero--swieta .hero-cta-mikro { text-align: center; }
  .hero--swieta .hero-cta-wrap { display: flex; justify-content: center; }
}
@media (min-width: 900px) {
  .hero--swieta .hero-siatka { grid-template-columns: 1.05fr 1fr; gap: 56px; }
}

.hero--swieta .hero-wizual {
  position: relative;
  padding: 0;
  border: 4px solid var(--powierzchnia);
  border-radius: var(--r-duza);
  overflow: hidden;
  transform: none;
  box-shadow: 0 30px 60px -30px rgba(60, 30, 10, .45);
  isolation: isolate;
}
@media (min-width: 900px) { .hero--swieta .hero-wizual { transform: rotate(-1.5deg); border-width: 8px; } }
.hero--swieta .hero-wizual img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
@media (max-width: 899px) {
  /* Kadr 16:11 — mniej wysokości na telefonie, dziecko i ekran nadal w kadrze. */
  .hero--swieta .hero-wizual img { aspect-ratio: 16 / 11; object-position: 40% 50%; }
}

/* Delikatny śnieg nad zdjęciem — dwie warstwy kropek przesuwane transformem
   (tanie dla GPU). 480px = NWW rozmiarów kafli, więc pętla jest płynna. */
.snieg {
  position: absolute;
  inset: -480px 0 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 30px 40px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(2px 2px at 110px 120px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(3px 3px at 70px 150px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 200px 60px, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2.4px 2.4px at 160px 200px, rgba(255,255,255,.7) 50%, transparent 52%);
  background-size: 160px 160px, 160px 160px, 240px 240px, 240px 240px, 240px 240px;
  animation: snieg-opad 22s linear infinite;
  opacity: .8;
}
@keyframes snieg-opad {
  from { transform: translateY(0); }
  to   { transform: translateY(480px); }
}
@media (prefers-reduced-motion: reduce) { .snieg { animation: none; } }

.hero-plakietka-swieta {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4);
}
.hero-plakietka-swieta svg { color: var(--czerwien); }

.strona-swieta .pasek-zaufania svg { color: var(--zielen); }

/* ————— Czym jest + parametry ————— */
.dwie-kolumny { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .dwie-kolumny { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .dwie-kolumny--odwrocone > :first-child { order: 2; }
}
.foto {
  margin: 0;
  border-radius: var(--r-duza);
  overflow: hidden;
  box-shadow: 0 26px 50px -30px rgba(60, 30, 10, .45);
}
.foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.parametry {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  overflow: hidden;
}
.parametry h3 {
  padding: 20px 20px 4px;
  margin: 0;
}
.parametry table { width: 100%; border-collapse: collapse; font-size: var(--krok--1); }
.parametry thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.parametry td { padding: 12px 20px; border-top: 1px solid var(--linia); vertical-align: top; }
.parametry td:first-child { color: var(--tekst-3); width: 45%; }
.parametry td:last-child { color: var(--tekst); font-weight: 600; }
.parametry tr.wyroznij td:last-child { color: var(--czerwien); }
@media (min-width: 700px) {
  .parametry table { font-size: var(--krok-0); }
  .parametry h3 { padding: 28px 32px 8px; }
  .parametry td { padding: 14px 32px; }
}
.przypis { font-size: var(--krok--1); color: var(--tekst-3); margin-top: 16px; }

/* ————— Fabuła: oś pięciu scen ————— */
.os-scen { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.os-scen::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(var(--czerwien), var(--zielen));
  opacity: .25;
}
.scena {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.scena-numer {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--powierzchnia);
  border: 2px solid var(--czerwien);
  color: var(--czerwien);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  position: relative;
  z-index: 1;
}
.scena-karta {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  padding: 16px 18px;
}
.scena-karta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--krok-1);
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 4px;
}
.scena-karta p { color: var(--tekst-2); font-size: var(--krok--1); }

.karty-dwie { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .karty-dwie { grid-template-columns: 1fr 1fr; gap: 20px; } }
.karta-info {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  padding: 22px 20px;
}
.karta-info h3 { margin-bottom: 10px; }
.karta-info p { color: var(--tekst-2); }
.karta-info--zielona { background: var(--zielen-tlo); border-color: transparent; }
.karta-info--czerwona { background: var(--czerwien-tlo); border-color: transparent; }

/* ————— Cennik ————— */
.cennik {
  background: var(--powierzchnia);
  border: 2px solid var(--czerwien);
  border-radius: var(--r-duza);
  overflow: hidden;
  margin-top: 28px;
  box-shadow: 0 30px 60px -40px rgba(126, 26, 22, .55);
}
.cennik table { width: 100%; border-collapse: collapse; font-size: var(--krok--1); }
.cennik th, .cennik td { padding: 12px 10px; text-align: left; vertical-align: middle; }
.cennik thead th {
  background: var(--czerwien);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
}
.cennik tbody td { border-top: 1px solid var(--linia); }
.cennik tbody tr:first-child td { border-top: none; }
.cennik td:first-child { font-weight: 600; color: var(--tekst); }
.cennik .kwota { font-family: var(--font-display); font-size: var(--krok-1); font-weight: 600; color: var(--czerwien); white-space: nowrap; }
.cennik td a { color: var(--zielen); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 600px) {
  .cennik table { font-size: var(--krok-0); }
  .cennik th, .cennik td { padding: 16px 24px; }
}

.ramki-info { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 760px) { .ramki-info { grid-template-columns: 1fr 1fr; } }
.ramka-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-srednia);
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  color: var(--tekst-2);
  font-size: var(--krok--1);
}
.ramka-info svg { flex-shrink: 0; color: var(--zielen); margin-top: 2px; }

/* ————— Kroki zamówienia / seansu ————— */
.kroki-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: krok;
}
@media (min-width: 700px) { .kroki-lista { grid-template-columns: 1fr 1fr; gap: 16px; } }
.kroki-lista li {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  padding: 16px;
  color: var(--tekst-2);
  font-size: var(--krok--1);
}
.kroki-lista li::before {
  content: counter(krok);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--zielen);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.kroki-lista li strong { display: block; color: var(--tekst); font-size: var(--krok-0); margin-bottom: 2px; }

/* ————— Przygotowanie danych ————— */
.zamiana { display: grid; gap: 10px; margin-top: 20px; }
.zamiana table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-top: 10px; }
.zamiana thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekst-3);
  text-align: left;
  padding: 0 16px;
}
.zamiana td {
  background: var(--powierzchnia);
  padding: 14px 16px;
  border-block: 1px solid var(--linia);
  font-size: var(--krok--1);
}
.zamiana td:first-child {
  border-left: 1px solid var(--linia);
  border-radius: var(--r-srednia) 0 0 var(--r-srednia);
  color: var(--tekst-3);
  text-decoration: line-through;
  text-decoration-color: rgba(163, 36, 31, .55);
  width: 38%;
}
.zamiana td:last-child {
  border-right: 1px solid var(--linia);
  border-radius: 0 var(--r-srednia) var(--r-srednia) 0;
  color: var(--tekst);
  font-weight: 600;
}
@media (max-width: 559px) {
  /* Na wąskim ekranie każdy wiersz to osobna karta: ogólnik nad konkretem. */
  .zamiana table, .zamiana tbody, .zamiana tr, .zamiana td { display: block; width: auto; }
  .zamiana thead { display: none; }
  .zamiana table { border-spacing: 0; }
  .zamiana tr {
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--r-srednia);
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .zamiana td,
  .zamiana td:first-child,
  .zamiana td:last-child { border: none; border-radius: 0; padding: 0; background: none; width: auto; }
  .zamiana td:last-child { margin-top: 6px; display: flex; gap: 8px; }
  .zamiana td:last-child::before { content: '→'; color: var(--zielen); font-weight: 700; }
}
.uwaga-tekst { color: var(--tekst-2); margin-top: 12px; font-size: var(--krok--1); }

.porady { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 760px) { .porady { grid-template-columns: 1fr 1fr; gap: 18px; } }
.porada {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  padding: 22px 20px;
}
.porada-ikona {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--czerwien-tlo);
  color: var(--czerwien);
  margin-bottom: 12px;
}
.porada h3 { margin-bottom: 8px; }
.porada p { color: var(--tekst-2); font-size: var(--krok--1); }

/* ————— Blok CTA w środku ————— */
.blok-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-duza);
  padding: 36px 22px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(184, 46, 40, .55), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(176, 122, 42, .35), transparent 60%),
    var(--zielen);
  box-shadow: 0 40px 70px -40px rgba(20, 53, 40, .8);
}
.blok-cta .snieg { opacity: .35; }
.blok-cta > * { position: relative; z-index: 2; }
.blok-cta-tytul {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.blok-cta-tytul strong { font-weight: 600; }
.blok-cta p.blok-cta-opis { color: rgba(255, 255, 255, .85); max-width: 56ch; margin: 14px auto 0; }
.blok-cta .cta-linia { margin-top: 24px; }
.blok-cta .btn-mikolaj { background: #fff; color: var(--czerwien-ciemna); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
.blok-cta .btn-mikolaj:hover { background: #fff; }
.blok-cta .cta-mikro { color: rgba(255, 255, 255, .75); }
@media (min-width: 768px) { .blok-cta { padding: 56px 48px; } }

/* ————— Wiek ————— */
.wiek-siatka { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 640px) { .wiek-siatka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wiek-siatka { grid-template-columns: repeat(4, 1fr); } }
.wiek-karta {
  position: relative;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  padding: 20px 18px;
  color: var(--tekst-2);
  font-size: var(--krok--1);
}
.wiek-karta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--krok-2);
  color: var(--tekst);
  font-weight: 600;
  margin-bottom: 6px;
}
.wiek-karta--najlepszy { border: 2px solid var(--czerwien); background: var(--czerwien-tlo); }
.wiek-znaczek {
  position: absolute;
  top: -11px;
  right: 14px;
  background: var(--czerwien);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ————— Film czy list ————— */
.porownanie {
  margin-top: 28px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  overflow: hidden;
}
.porownanie table { width: 100%; border-collapse: collapse; font-size: var(--krok--1); }
.porownanie th, .porownanie td { padding: 12px 14px; text-align: left; vertical-align: top; }
.porownanie thead th { background: var(--zaglebienie); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-2); }
.porownanie thead th:nth-child(2) { background: var(--czerwien); color: #fff; }
.porownanie tbody td { border-top: 1px solid var(--linia); color: var(--tekst-2); }
.porownanie tbody td:first-child { color: var(--tekst); font-weight: 600; }
.porownanie tbody td:nth-child(2) { background: rgba(251, 237, 234, .55); color: var(--tekst); }
@media (max-width: 559px) {
  /* Trzy kolumny nie mieszczą się na telefonie — wiersz zamienia się w kartę
     z podpisami z data-etykieta. */
  .porownanie table, .porownanie tbody, .porownanie tr, .porownanie td { display: block; }
  .porownanie thead { display: none; }
  .porownanie tr { padding: 14px 16px; border-top: 1px solid var(--linia); }
  .porownanie tr:first-child { border-top: none; }
  .porownanie tbody td { border: none; padding: 2px 0; background: none !important; display: flex; gap: 8px; }
  .porownanie tbody td:first-child { font-family: var(--font-display); font-size: var(--krok-1); margin-bottom: 4px; }
  .porownanie tbody td[data-etykieta]::before {
    content: attr(data-etykieta);
    flex: 0 0 96px;
    color: var(--tekst-3);
    font-size: 12px;
    padding-top: 2px;
  }
  .porownanie tbody td:nth-child(2) { color: var(--czerwien-ciemna); font-weight: 600; }
}
@media (min-width: 700px) { .porownanie table { font-size: var(--krok-0); } .porownanie th, .porownanie td { padding: 14px 22px; } }

/* ————— FAQ ————— */
.strona-swieta details.faq-item[open] { border-color: var(--czerwien); box-shadow: 0 16px 28px -18px rgba(126, 26, 22, .35); }
.strona-swieta details.faq-item[open] summary,
.strona-swieta details.faq-item[open] summary:hover { background: var(--czerwien-tlo); color: var(--czerwien-ciemna); }
.strona-swieta details.faq-item[open] .faq-strzalka { color: var(--czerwien); }

/* ————— Finał ————— */
.final {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--zielen-ciemna);
  text-align: center;
  isolation: isolate;
}
.final-tlo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 53, 40, .62), rgba(20, 53, 40, .9));
}
.final .snieg { opacity: .45; z-index: 0; }
.final .kontener { position: relative; z-index: 1; }
.final p { color: rgba(255, 255, 255, .88); font-size: var(--krok-1); font-family: var(--font-display); line-height: 1.45; }
.final .btn-mikolaj { background: #fff; color: var(--czerwien-ciemna); }
.final .btn-mikolaj:hover { background: #fff; }
.final .cta-mikro { color: rgba(255, 255, 255, .7); font-family: var(--font-tekst); font-size: var(--krok--1); }

/* ————— Sekcja zwijana (przewodnik SEO) ————— */
.przewodnik h2 { text-align: left; }
.przewodnik > .kontener > p { color: var(--tekst-2); margin-top: 16px; }
details.czytaj-wiecej { margin-top: 18px; }
details.czytaj-wiecej > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--linia-mocna);
  background: var(--powierzchnia);
  color: var(--zielen);
  font-weight: 600;
  font-size: var(--krok--1);
}
details.czytaj-wiecej > summary::-webkit-details-marker { display: none; }
details.czytaj-wiecej > summary:focus-visible { outline: 2px solid var(--mosiadz); outline-offset: 2px; }
details.czytaj-wiecej > summary svg { transition: transform 200ms ease; }
details.czytaj-wiecej[open] > summary svg { transform: rotate(180deg); }
details.czytaj-wiecej > summary .zwin { display: none; }
details.czytaj-wiecej[open] > summary .rozwin { display: none; }
details.czytaj-wiecej[open] > summary .zwin { display: inline; }
.czytaj-wiecej-tresc { padding-top: 8px; }
.czytaj-wiecej-tresc h3 { margin: 28px 0 10px; }
.czytaj-wiecej-tresc p { color: var(--tekst-2); }
.czytaj-wiecej-tresc ul { margin: 12px 0 0; padding-left: 20px; color: var(--tekst-2); display: grid; gap: 8px; }
.czytaj-wiecej-tresc li strong { color: var(--tekst); }

/* Sticky CTA: czerwony przycisk, cena w kolorze akcentu. */
.strona-swieta .sticky-cta .btn-mikolaj { min-height: 48px; padding: 12px 18px; width: auto; flex: 1; max-width: 240px; font-size: var(--krok--1); }
.sticky-cta-cena { display: grid; line-height: 1.2; }
.sticky-cta-cena small { font-size: 11px; color: var(--tekst-3); }
.sticky-cta-cena strong { font-family: var(--font-display); font-size: var(--krok-1); color: var(--czerwien); }

/* Desktop: zdjęcie obok osi scen zostaje w kadrze przy przewijaniu,
   tabela parametrów nie rozlewa się na całą szerokość, przyciski w jednej linii. */
@media (min-width: 900px) {
  .dwie-kolumny--odwrocone .foto { position: sticky; top: 96px; }
}
@media (min-width: 600px) { .strona-swieta .btn-mikolaj { max-width: 640px; } }

/* ————— Hero: krótki lead landingowy ————— */
.hero--swieta .hero-lead { font-size: var(--krok-1); line-height: 1.5; max-width: 34ch; }
.hero--swieta .hero-lead strong { color: var(--czerwien-ciemna); font-weight: 600; }
@media (max-width: 899px) { .hero--swieta .hero-lead { text-align: center; margin-inline: auto; order: -1; } }

/* ————— Jak to działa w 3 krokach (pasek pod hero) ————— */
.trzy-kroki-sekcja { padding-block: 0 8px; }
@media (min-width: 768px) { .strona-swieta .trzy-kroki-sekcja { padding-block: 0 24px; } }
.trzy-kroki {
  list-style: none;
  margin: -8px 0 0;
  padding: 8px;
  display: grid;
  gap: 6px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  box-shadow: 0 30px 60px -40px rgba(60, 30, 10, .4);
  position: relative;
  z-index: 2;
}
@media (min-width: 760px) { .trzy-kroki { grid-template-columns: repeat(3, 1fr); margin-top: -36px; padding: 12px; } }
.trzy-kroki li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-radius: var(--r-srednia);
}
.trzy-kroki li + li { border-top: 1px dashed var(--linia); }
@media (min-width: 760px) {
  .trzy-kroki li + li { border-top: none; border-left: 1px dashed var(--linia); border-radius: 0; }
}
.trzy-kroki-ikona {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--czerwien-tlo);
  color: var(--czerwien);
}
.trzy-kroki li:nth-child(2) .trzy-kroki-ikona { background: var(--mosiadz-tlo); color: var(--mosiadz); }
.trzy-kroki li:nth-child(3) .trzy-kroki-ikona { background: var(--zielen-tlo); color: var(--zielen); }
.trzy-kroki-tekst { font-size: var(--krok--1); color: var(--tekst-2); line-height: 1.45; }
.trzy-kroki-tekst strong { display: block; font-family: var(--font-display); font-size: var(--krok-1); color: var(--tekst); font-weight: 600; margin-bottom: 2px; }

/* ————— Dobre uczynki: szeroki, wyróżniony panel ————— */
.uczynki-panel {
  margin-top: 48px;
  display: grid;
  gap: 24px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--czerwien);
  border-radius: var(--r-duza);
  padding: 28px 18px 18px;
  box-shadow: 0 40px 70px -48px rgba(126, 26, 22, .5);
}
@media (min-width: 900px) {
  .uczynki-panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; padding: 48px; align-items: center; }
}
.uczynki-znaczek {
  display: inline-block;
  background: var(--czerwien);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.uczynki-intro h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); margin-bottom: 12px; }
.uczynki-intro > p { color: var(--tekst-2); }
.uczynki-uwaga {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-srednia);
  background: var(--mosiadz-tlo);
  color: var(--tekst-2);
  font-size: var(--krok--1);
}
.uczynki-uwaga svg { flex-shrink: 0; color: var(--mosiadz); margin-top: 2px; }
.uczynki-panel .zamiana { margin-top: 0; }
.uczynki-panel .zamiana table { margin-top: 0; }
.uczynki-panel .zamiana td { background: var(--papier); }
@media (min-width: 560px) {
  .uczynki-panel .zamiana td:last-child { position: relative; padding-left: 40px; }
  .uczynki-panel .zamiana td:last-child::before {
    content: '→';
    position: absolute;
    left: 14px;
    color: var(--zielen);
    font-weight: 700;
  }
}
@media (max-width: 559px) { .uczynki-panel .zamiana tr { background: var(--papier); } }

/* ————— Zalety ————— */
.zalety-siatka { display: grid; gap: 14px; }
@media (min-width: 640px) { .zalety-siatka { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .zalety-siatka { grid-template-columns: repeat(3, 1fr); } }
.zaleta {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  padding: 26px 22px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) {
  .zaleta:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(60, 30, 10, .45); }
}
.zaleta-ikona {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--zielen-tlo);
  color: var(--zielen);
  margin-bottom: 16px;
}
.zaleta h3 { margin-bottom: 8px; }
.zaleta p { color: var(--tekst-2); font-size: var(--krok--1); }
.zaleta--cta {
  display: grid;
  gap: 18px;
  align-content: start;
  color: #fff;
  border: none;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(160deg, #B82E28, var(--czerwien-ciemna));
}
.zaleta--cta .zaleta-ikona { background: rgba(255, 255, 255, .16); color: #fff; margin-bottom: 0; }
.zaleta--cta p { color: rgba(255, 255, 255, .85); }
.strona-swieta .zaleta--cta .btn-mikolaj { background: #fff; color: var(--czerwien-ciemna); max-width: none; width: 100%; }
@media (min-width: 1000px) {
  .zaleta--cta { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .zaleta--cta .btn-mikolaj { grid-column: 1 / -1; }
}

/* ————— Podsumowanie „Czego dowiedziałeś się" ————— */
.podsumowanie {
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, var(--czerwien-tlo), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, var(--zielen-tlo), transparent 60%),
    var(--zaglebienie);
}
.podsumowanie-siatka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 640px) { .podsumowanie-siatka { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .podsumowanie-siatka { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.podsumowanie-karta {
  position: relative;
  overflow: hidden;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  padding: 24px 20px 22px;
  color: var(--tekst-2);
  font-size: var(--krok--1);
}
.podsumowanie-karta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--krok-1);
  font-weight: 600;
  color: var(--tekst);
  line-height: 1.25;
  margin: 10px 0 8px;
}
.podsumowanie-nr {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  color: var(--czerwien);
  opacity: .9;
}
.podsumowanie-karta::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--czerwien-tlo);
  z-index: 0;
}
.podsumowanie-karta > * { position: relative; z-index: 1; }
.podsumowanie-karta--cena { background: var(--zielen); border-color: transparent; color: rgba(255, 255, 255, .85); }
.podsumowanie-karta--cena strong { color: #fff; }
.podsumowanie-karta--cena .podsumowanie-nr { color: #E9C98E; }
.podsumowanie-karta--cena::after { background: rgba(255, 255, 255, .08); }
@media (min-width: 640px) and (max-width: 1099px) { .podsumowanie-karta:last-child { grid-column: 1 / -1; } }

/* Oznaczenie linków partnerskich — na dole strony, małą czcionką. */
.ujawnienie-dol {
  text-align: center;
  font-size: 12px;
  color: var(--tekst-3);
  padding-block: 0 24px;
}

/* Krótki H1 — można go pokazać większym stopniem. */
.hero--swieta h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem); line-height: 1.05; }
@media (min-width: 900px) { .hero--swieta h1 { font-size: clamp(2.6rem, 1.2rem + 2.9vw, 3.9rem); max-width: none; } }

/* ————— Wideo YouTube obok tabeli parametrów ————— */
.parametry-siatka { display: grid; gap: 24px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) {
  .parametry-siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .wideo { position: sticky; top: 96px; }
}
.wideo { margin: 0; }
.wideo-tytul {
  font-family: var(--font-display);
  font-size: var(--krok-1);
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 12px;
}
.wideo-fasada,
.wideo iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-duza);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px -34px rgba(60, 30, 10, .55);
}
.wideo-fasada { position: relative; padding: 0; cursor: pointer; }
.wideo-fasada img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease, opacity 200ms; }
.wideo-fasada:hover img { transform: scale(1.03); opacity: .92; }
.wideo-fasada:focus-visible { outline: 3px solid var(--mosiadz); outline-offset: 3px; }
.wideo-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 4px;
  background: var(--czerwien);
  color: #fff;
  box-shadow: 0 0 0 10px rgba(163, 36, 31, .25), 0 16px 30px -10px rgba(0, 0, 0, .5);
  transition: transform 200ms ease;
}
.wideo-fasada:hover .wideo-play { transform: scale(1.08); }
.wideo figcaption { font-size: var(--krok--1); color: var(--tekst-3); margin-top: 12px; }
.strona-swieta .faq-wnetrze a { color: var(--czerwien); text-underline-offset: 3px; }