/* Boża Droga – strona v11: wzór BibleProject. Jedna malowana ilustracja na górze, rysowane ikony,
   pastelowe pasy z wielkim pytaniem i wachlarzem przechylonych obrazków, granatowa Koronka, ciemna stopka. */
:root {
  --tusz: #1c1b19; --szary: #4b4741; --krem: #f5ede2; --mieta: #e5eeec; --cieply: #fcf8f2; --bialy: #fff;
  --morski: #23525a; --granat: #17243a; --stopka: #232323; --zloto: #c9a24a;
  --cien: 0 18px 40px rgba(28, 27, 25, .2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bialy); color: var(--tusz); font: 500 18px/1.55 Montserrat, system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(34px, 5.6vw, 66px); }
h3 { font-size: clamp(24px, 3vw, 34px); color: var(--morski); letter-spacing: -.025em; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--szary); max-width: 40ch; margin: 14px auto 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--zloto); outline-offset: 3px; }

.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--tusz); color: #fff; border: 0; border-radius: 9px;
  font: 700 16px/1 Montserrat, sans-serif; padding: 14px 20px; text-decoration: none; cursor: pointer; margin-top: 22px; }
.przycisk:hover { background: #3a3732; }
.przycisk.jasny { background: #fff; color: var(--tusz); }

/* ---------- pasek ---------- */
.pasek { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 12px 24px; color: #fff; transition: background .3s, color .3s, box-shadow .3s; }
.pasek.jasny { background: rgba(255, 255, 255, .96); color: var(--tusz); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); backdrop-filter: blur(8px); }
.marka { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-decoration: none; }
.menu { display: flex; gap: 22px; font-weight: 700; font-size: 16px; }
.menu a { text-decoration: none; opacity: .92; } .menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.pasek-zapis { margin-left: auto; background: #fff; color: var(--tusz); font-weight: 700; font-size: 15px; padding: 9px 14px; border-radius: 8px; text-decoration: none; }
.pasek.jasny .pasek-zapis { background: var(--tusz); color: #fff; }
@media (max-width: 900px) { .menu { display: none; } }

/* ---------- początek ---------- */
.glowa { position: relative; min-height: 100svh; display: grid; place-items: end center; color: #fff; text-align: center; overflow: hidden; background: var(--granat); }
.glowa-tlo, .glowa-tlo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.glowa-tlo img { object-fit: cover; object-position: 50% 12%; }
.glowa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 34, .45) 0, rgba(10, 18, 34, 0) 18%, rgba(10, 18, 34, 0) 42%, rgba(10, 18, 34, .72) 82%, rgba(10, 18, 34, .85)); }
.glowa-tekst { position: relative; z-index: 1; padding: 0 20px clamp(48px, 9vh, 96px); display: grid; justify-items: center; }
.plakietka { background: #cfe6e8; color: var(--morski); font-weight: 700; font-size: 15px; padding: 6px 13px; border-radius: 99px; }
.glowa h1 { font-size: clamp(52px, 11vw, 150px); text-transform: uppercase; letter-spacing: -.01em; line-height: .95; margin-top: 14px; text-shadow: 0 4px 30px rgba(10, 18, 34, .35); }
.glowa p { font-size: clamp(19px, 2vw, 25px); max-width: 26ch; margin: 14px 0 0; text-wrap: balance; }
.graj { width: 78px; height: 78px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .82); display: grid; place-items: center; margin-top: 24px; cursor: pointer; transition: transform .2s, background .2s; }
.graj svg { width: 34px; fill: var(--tusz); margin-left: 4px; }
.graj:hover { transform: scale(1.06); background: #fff; }

/* ---------- ikony ---------- */
.ikony { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1140px; margin: 0 auto; padding: 56px 24px 72px; text-align: center; }
.ikony a { text-decoration: none; display: grid; justify-items: center; }
.ikony svg { width: 104px; height: 104px; fill: none; stroke: var(--tusz); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ikony .ramka { stroke-width: 3.6; }
.ikony .kreski { stroke-dasharray: 4 6; }
.ikony b { font-size: 24px; letter-spacing: -.02em; margin-top: 12px; }
.ikony span { color: var(--szary); font-size: 17px; max-width: 22ch; }
.ikony a:hover b { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 760px) {
  .ikony { grid-template-columns: 1fr; gap: 22px; padding: 40px 24px 48px; text-align: left; }
  .ikony a { grid-template-columns: 76px 1fr; column-gap: 16px; justify-items: start; align-items: center; }
  .ikony svg { width: 76px; height: 76px; grid-row: span 2; }
  .ikony b { margin: 0; font-size: 21px; align-self: end; }
  .ikony span { font-size: 16px; align-self: start; }
}

/* ---------- panele i pasy ---------- */
.panel-wrap { padding: 0 24px; }
.panel { max-width: 1160px; margin: 0 auto; border-radius: 22px; padding: clamp(48px, 7vw, 92px) 24px 0; text-align: center; overflow: hidden; }
.krem { background: var(--krem); } .mieta { background: var(--mieta); } .cieply { background: var(--cieply); } .bialy { background: var(--bialy); }
.pas { padding: clamp(64px, 9vw, 120px) 24px; text-align: center; margin-top: clamp(56px, 7vw, 96px); }
.panel-wrap + .pas, .pas + .pas, .pas + .koronka, .koronka + .pas { margin-top: 0; }
.pas h3 { margin-top: 10px; }

/* kolaż: rząd przechylonych slajdów, ucięty dołem panelu */
.kolaz { display: flex; justify-content: center; margin: 48px -24px 0; height: clamp(220px, 26vw, 330px); }
.kolaz img { width: clamp(150px, 15vw, 210px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; flex: none; margin: 0 -14px; box-shadow: var(--cien);
  transform: translateY(var(--y)) rotate(var(--r)); }
.kolaz img:nth-child(even) { z-index: 1; }
@media (max-width: 760px) { .kolaz { height: 200px; } .kolaz img { width: 128px; margin: 0 -18px; } .kolaz img:nth-child(n+6) { display: none; } }

/* wachlarz: trzy karty, środkowa wyżej */
.wachlarz { display: flex; justify-content: center; align-items: flex-end; margin: 44px auto 34px; max-width: 760px; }
.wachlarz img { width: 31%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 18px; box-shadow: var(--cien); }
.wachlarz img:nth-child(1) { transform: rotate(-7deg) translate(14%, 4%); }
.wachlarz img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6%); width: 34%; }
.wachlarz img:nth-child(3) { transform: rotate(7deg) translate(-14%, 4%); }
.wachlarz.telefony { max-width: 680px; }
.wachlarz.telefony img { aspect-ratio: 540 / 1168; object-fit: cover; object-position: top; border-radius: 26px; border: 6px solid var(--tusz); }

.trzy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1040px; margin: 64px auto 0; text-align: left; }
.trzy figure { margin: 0; display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start; }
.trzy figure img { border-radius: 12px; border: 3px solid var(--tusz); }
.trzy b { display: block; font-size: 19px; letter-spacing: -.015em; margin-bottom: 4px; color: var(--tusz); }
.trzy figcaption, .trzy p { color: var(--szary); font-size: 16px; margin: 0; }
.trzy.tekst { margin-top: 48px; }
.trzy.tekst p { border-top: 2px solid var(--tusz); padding-top: 14px; }
@media (max-width: 860px) { .trzy { grid-template-columns: 1fr; max-width: 520px; gap: 26px; } }

/* ---------- rozważania i muzyka ---------- */
.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1060px; margin: 52px auto 0; text-align: left; }
.dwie article { background: #fff; border-radius: 22px; padding: 34px; }
.dwie svg { width: 92px; height: 92px; fill: none; stroke: var(--tusz); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dwie .ramka { stroke-width: 3.6; }
.dwie h3 { margin: 16px 0 10px; }
.dwie p { color: var(--szary); margin: 0 0 12px; }
.odtwarzacz { margin-top: 12px; padding: 14px 18px; }
.odtwarzacz svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.odtwarzacz .ikona-pauza, .odtwarzacz[aria-pressed=true] .ikona-graj { display: none; }
.odtwarzacz[aria-pressed=true] .ikona-pauza { display: inline; }
.odtwarzacz i { font-style: normal; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .dwie { grid-template-columns: 1fr; max-width: 560px; } .dwie article { padding: 26px 22px; } }

/* ---------- Koronka ---------- */
.koronka { background: var(--granat); color: #fff; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 6vw, 88px);
  padding: clamp(64px, 8vw, 110px) max(24px, calc((100vw - 1100px) / 2)); }
.jezus { width: 100%; max-width: 420px; justify-self: end; border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.godzina { font-size: clamp(56px, 8vw, 104px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 14px; color: #f3d998; }
.koronka h2 { font-size: clamp(30px, 4vw, 50px); }
.koronka-tekst > p:not(.godzina) { color: #d5dbe6; font-size: 19px; max-width: 42ch; }
.intencje { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.intencje li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); padding: 8px 14px; border-radius: 99px; font-size: 15px; }
@media (max-width: 800px) { .koronka { grid-template-columns: 1fr; text-align: center; } .jezus { justify-self: center; max-width: 300px; } .intencje { justify-content: center; } .koronka-tekst > p:not(.godzina) { margin-inline: auto; } }

/* ---------- Jak zacząć ---------- */
.system { display: inline-flex; gap: 4px; background: var(--krem); padding: 5px; border-radius: 12px; margin-top: 30px; }
.system button { font: 700 16px Montserrat, sans-serif; border: 0; background: none; padding: 11px 22px; border-radius: 8px; cursor: pointer; color: var(--szary); }
.system button[aria-selected=true] { background: var(--tusz); color: #fff; }
.kroki { list-style: none; counter-reset: k; padding: 0; margin: 36px auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.kroki li { counter-increment: k; background: var(--cieply); border: 2px solid var(--tusz); border-radius: 16px; padding: 20px; font-size: 17px; }
.kroki li::before { content: counter(k); display: block; font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 10px; color: var(--morski); }
.pomoc { color: var(--szary); margin: 30px auto 0; max-width: 52ch; }
@media (max-width: 860px) { .kroki { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kroki { grid-template-columns: 1fr; } }

/* ---------- Pytania ---------- */
.faq { max-width: 760px; margin: 40px auto 0; text-align: left; }
.faq details { border-top: 2px solid var(--tusz); }
.faq details:last-child { border-bottom: 2px solid var(--tusz); }
.faq summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 20px; letter-spacing: -.015em; padding: 20px 40px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 30px; font-weight: 600; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--szary); }

/* ---------- Zapis ---------- */
#zapisz { padding: clamp(56px, 7vw, 96px) 24px; }
.panel.zapis { padding-bottom: clamp(48px, 6vw, 80px); max-width: 860px; }
.z-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 34px auto 0; text-align: left; }
.cale { grid-column: 1 / -1; }
.pole span { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.pole i { font-style: normal; font-weight: 500; color: var(--szary); }
.pole input, .pole select { width: 100%; font: 500 17px Montserrat, sans-serif; padding: 13px 14px; border: 2px solid var(--tusz); border-radius: 10px; background: #fff; color: var(--tusz); }
.zgoda { display: flex; gap: 12px; font-size: 15px; color: var(--szary); align-items: flex-start; }
.zgoda input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--tusz); }
.z-form .przycisk { margin-top: 6px; padding: 17px; font-size: 17px; }
.z-komunikat { margin: 0; font-weight: 700; text-align: center; min-height: 1.5em; }
.ukryte { position: absolute; left: -9999px; }
.wyslany .pole, .wyslany .zgoda, .wyslany .przycisk { display: none; }
@media (max-width: 560px) { .z-form { grid-template-columns: 1fr; } }

/* ---------- stopka ---------- */
.stopka { background: var(--stopka); color: #e6e3de; padding: 48px 24px 40px; }
.stopka-pole { max-width: 1100px; margin: 0 auto; background: #333; border-radius: 14px; padding: 24px 28px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.stopka-pole p { margin: 0; font-weight: 700; font-size: 18px; max-width: 48ch; }
.stopka-pole .przycisk { margin: 0; flex: none; }
.stopka-dol { max-width: 1100px; margin: 36px auto 0; display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; font-size: 15px; }
.stopka-dol nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.stopka-dol a { text-decoration: none; color: #cfcac2; } .stopka-dol a:hover { color: #fff; }
.stopka-dol .marka { color: #fff; }
@media (max-width: 700px) { .stopka-pole { flex-direction: column; align-items: flex-start; } }

/* ---------- film ---------- */
.okno-filmu { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.okno-filmu[hidden] { display: none; }
.okno-tlo { position: absolute; inset: 0; background: rgba(10, 14, 22, .86); }
.okno-ramka { position: relative; width: min(1100px, 100%); }
.okno-ramka video { width: 100%; border-radius: 14px; background: #000; display: block; }
.okno-x { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 28px; line-height: 1; cursor: pointer; }

/* próbka rozważania i lista utworów */
.probka { border-left: 4px solid var(--morski); padding: 4px 0 4px 18px; margin: 18px 0 6px; }
.probka-skad { font-size: 14px; font-weight: 700; color: var(--morski) !important; margin: 0 0 4px !important; }
.probka h4 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.probka blockquote { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tusz); }
.utwory { display: grid; gap: 10px; margin-top: 16px; }
.utwor { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; width: 100%; text-align: left; background: var(--cieply); border: 2px solid var(--tusz);
  border-radius: 14px; padding: 12px 16px 12px 12px; font: 500 15px/1.35 Montserrat, sans-serif; color: var(--szary); cursor: pointer; }
.utwor svg { width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: var(--tusz); fill: #fff; stroke: none; }
.utwor b { display: block; font-size: 18px; font-weight: 800; color: var(--tusz); letter-spacing: -.015em; }
.utwor i { font-style: normal; font-weight: 700; color: var(--tusz); font-variant-numeric: tabular-nums; }
.utwor:hover { background: #fff; }
.utwor .ikona-pauza, .utwor[aria-pressed=true] .ikona-graj { display: none; }
.utwor[aria-pressed=true] .ikona-pauza { display: inline; }
.utwor[aria-pressed=true] { background: #fff; border-color: var(--morski); }
.pomoc.sklepy { margin-top: 14px; }
/* 2026-10-27: film zdjęty do czasu nagrania nowego – przyciski filmu ukryte */
[data-film] { display: none !important; }