/* ============================================================
   Strona glowna - wyglad z projektu "Landing Chwilki" (Claude Design, 14.10.2026).
   Tylko index.html: reszta serwisu zostaje na serwis.css. Klasy z przedrostkiem lp-,
   zeby nic stad nie zlapalo stron kreatora ani konta. Paleta --lp-*, przyciski i naglowek
   strony sa wspolne dla calego serwisu - siedza w serwis.css (sekcja "Naglowek serwisu").
   Okladki, galeria i pytania rysuja sie jak dotad (app.js) - tu jest tylko ich oprawa.
   ============================================================ */


body[data-route="index"], body[data-route="artykul"] { background: var(--lp-papier); color: var(--lp-tusz); font-family: Karla, system-ui, sans-serif; }
.lp a { color: var(--lp-tusz); text-decoration: none; }
.lp a:hover { color: var(--lp-roz); }
.lp-szer-waska { max-width: 860px; }
.lp-sekcja { padding: 96px 0; }
.lp-bez-gory { padding-top: 0; }
.lp-tlo-piasek { background: var(--lp-piasek); }

/* --- przyciski (podstawa .lp-btn w serwis.css) --- */
.lp-btn-jasny { background: var(--lp-papier); color: var(--lp-tusz); }
.lp-btn-jasny:hover { background: var(--lp-roz-jasny); }
.lp-btn-obrys { background: transparent; color: var(--lp-tusz); border-color: var(--lp-tusz); }
.lp-btn-obrys:hover { background: var(--lp-tusz); color: var(--lp-papier); }
.lp-btn-duzy { padding: 20px 36px; font-size: 19px; box-shadow: 0 10px 24px -10px rgba(46, 41, 37, 0.5); }
.lp-btn-szeroki { width: 100%; padding: 20px; font-size: 18px; font-weight: 700; }

/* --- naglowki tekstu --- */
.lp-nadtytul { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp-szalwia); }
.lp-nadtytul-roz { color: var(--lp-roz-ciemny); }
.lp-nadtytul-szalwia { color: #4F5A3B; }
.lp-h1, .lp-h2, .lp-h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: var(--lp-tusz); text-wrap: balance; }
.lp-h1 { font-size: clamp(44px, 5.2vw, 72px); line-height: 1; letter-spacing: -0.01em; }
.lp-h2 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.05; }
.lp-h3 { font-size: 38px; line-height: 1.1; }
.lp-h1 em, .lp-h2 em { font-style: italic; color: var(--lp-roz); }
.lp-opis { margin: 0; font-size: 19px; line-height: 1.6; color: var(--lp-tusz-2); }
.lp-naglowek-sekcji { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: 44px; }
.lp-naglowek-z-przyciskiem { max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lp-naglowek-z-przyciskiem > div { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }

/* Kotwice z menu nie chowaja tytulu sekcji pod przyklejonym naglowkiem. */
html:has(body[data-route="index"]) { scroll-padding-top: 90px; }

/* --- hero --- */
.lp-hero {
  background:
    radial-gradient(ellipse 70% 60% at 85% 30%, #F3E6E1 0%, rgba(243, 230, 225, 0) 70%),
    radial-gradient(ellipse 60% 60% at 10% 90%, #EDEEE3 0%, rgba(237, 238, 227, 0) 70%),
    var(--lp-papier);
}
.lp-hero-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 64px; }
.lp-hero-tekst { display: flex; flex-direction: column; gap: 22px; }
.lp-plakietka {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin: 0;
  background: var(--lp-roz-jasny); color: var(--lp-roz-ciemny); padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
}
.lp-plakietka span { width: 7px; height: 7px; border-radius: 50%; background: #B9726B; }
.lp-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--lp-tusz-2); max-width: 34em; text-wrap: pretty; }
.lp-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.lp-cena-obok { display: flex; flex-direction: column; gap: 2px; }
.lp-cena-obok b { font-size: 24px; font-weight: 600; }
.lp-cena-obok span { font-size: 15px; color: var(--lp-tusz-3); }
.lp-ptaszki { list-style: none; margin: 0; padding: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--lp-tusz-2); }
.lp-ptaszki li { display: flex; align-items: baseline; gap: 8px; }
.lp-ptaszki li::before { content: "✓"; color: var(--lp-szalwia); }

/* Dwie okladki z imieniem: Laka z przodu, Gwiazdy przechylone za nia (okladkaWHero w app.js). */
.lp-hero-okladki { position: relative; width: min(100%, 460px, 62vh); aspect-ratio: 1; justify-self: center; }
.lp-okladka-tyl, .lp-okladka-przod { position: absolute; width: 88%; border-radius: 10px; overflow: hidden; }
.lp-okladka-tyl { top: 2%; left: 10%; transform: rotate(6deg); box-shadow: 0 20px 40px -20px rgba(60, 40, 30, 0.35); }
.lp-okladka-przod { top: 4%; left: 2%; transform: rotate(-2deg); box-shadow: 0 34px 60px -24px rgba(60, 40, 30, 0.45), 0 2px 6px rgba(60, 40, 30, 0.08); }
.lp-okladka-tyl .okl-przod, .lp-okladka-przod .okl-przod { width: 100%; }

/* --- okladki do wyboru (karty rysuje okladkiDoWyboru w app.js) --- */
.lp-okladki { gap: 28px; }
.lp-okladki .okladka-karta { gap: 16px; }
.lp-okladki .okladka-karta .okl-przod { border-radius: 10px; overflow: hidden; box-shadow: 0 22px 40px -24px rgba(60, 40, 30, 0.45); }
.lp-okladki .okladka-karta figcaption h3 { font-size: 20px; color: var(--lp-tusz); }
.lp-okladki .okladka-karta figcaption p { font-size: 16px; color: var(--lp-tusz-3); }

/* --- zajrzyj do srodka --- */
.lp-galeria-ramka { background: var(--lp-piasek-2); border-radius: 28px; padding: clamp(20px, 4vw, 48px) clamp(8px, 2vw, 24px); }
/* Talia miesci sie w ramce (inaczej skrajne strony wystawaly poza bezowe tlo):
   ramka ma najwyzej 1136 px w srodku, 8 x 214 - 7 x 86 = 1110. */
.lp-galeria-ramka .galeria-karta { width: clamp(140px, 15.5vw, 214px); }
.lp-galeria-ramka .galeria-karta + .galeria-karta { margin-left: clamp(-86px, -6.3vw, -46px); }
.lp-galeria-wskazowka { margin: 14px 0 0; text-align: center; font-size: 15px; color: var(--lp-tusz-3); }
.lp-srodek { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 18px 24px; }
/* Karta = kadr ilustracji z tej strony albumu + tytul i zdanie. Bez paska na gorze: na
   zaokraglonych rogach zawijal sie w uciety luk. Kadr lezy na kolorze papieru (webp jest
   przezroczysty), jak strona w kreatorze. */
.lp-srodek li {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 22px;
  padding: 16px 24px 16px 16px; background: #FFFFFF; border: 1px solid var(--lp-linia); border-radius: 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-srodek li:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(60, 40, 30, 0.45); }
.lp-srodek img { display: block; width: 120px; height: 120px; border-radius: 16px; background: var(--lp-piasek); object-fit: cover; }
.lp-srodek li > div { display: grid; gap: 6px; }
.lp-srodek h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 600; line-height: 1.1; }
.lp-srodek p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--lp-tusz-2); }
@media (prefers-reduced-motion: reduce) { .lp-srodek li, .lp-srodek li:hover { transition: none; transform: none; } }
@media (max-width: 640px) {
  .lp-srodek { gap: 12px; }
  .lp-srodek li { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; }
  .lp-srodek img { width: 88px; height: 88px; border-radius: 12px; }
  .lp-srodek h3 { font-size: 22px; }
}

/* --- jak to dziala --- */
.lp-ciemna { background: var(--lp-tusz); color: #F3ECE2; }
.lp-ciemna .lp-nadtytul { color: #C9B9A3; }
.lp-ciemna .lp-h2 { color: var(--lp-papier); }
.lp-kroki { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.lp-kroki li { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid rgba(243, 236, 226, 0.16); border-radius: 20px; }
.lp-krok-nr { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 48px; line-height: 1; color: #E3B7B1; }
.lp-kroki h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--lp-papier); }
.lp-kroki p { margin: 0; font-size: 16px; line-height: 1.6; color: #CFC4B6; }

/* --- cena --- */
.lp-cena-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: stretch; }
.lp-cena-karta { background: var(--lp-tusz); color: #F3ECE2; border-radius: 28px; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.lp-cena-kwota { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 84px; line-height: 1; color: var(--lp-papier); }
.lp-cena-opis { margin: 6px 0 0; font-size: 17px; color: #CFC4B6; }
.lp-ptaszki-jasne { flex-direction: column; gap: 12px; padding: 0; font-size: 18px; color: #F3ECE2; }
.lp-ptaszki-jasne li::before { color: #E3B7B1; }
.lp-prezent { border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; background: var(--lp-roz-jasny); }
/* Dwie okladki lezace na papierze pakowym - cale, razem z wiankiem i zwierzatkiem.
   Rozmiar w px, nie w % szerokosci karty: przy procentach szersza karta dawala wieksza
   okladke, ktora nie miescila sie w wysokosci i ucinalo jej dol. 214 + 28 z gory < 270.
   Tlo to tylko gradienty - bez dodatkowego obrazka do pobrania. */
.lp-prezent-obraz {
  position: relative; height: 270px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 12% 30%, rgba(255, 250, 240, 0.35), transparent 70%),
    radial-gradient(ellipse 50% 70% at 88% 75%, rgba(120, 95, 65, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 60% at 60% 10%, rgba(255, 248, 235, 0.25), transparent 70%),
    #D9C9B0;
}
.lp-prezent-tyl, .lp-prezent-przod { position: absolute; border-radius: 10px; overflow: hidden; }
.lp-prezent-tyl { width: 182px; top: 40px; left: calc(50% - 160px); transform: rotate(-6deg); box-shadow: 0 18px 30px -18px rgba(60, 40, 30, 0.45); }
.lp-prezent-przod { width: 214px; top: 28px; left: calc(50% - 85px); transform: rotate(3deg); box-shadow: 0 24px 40px -20px rgba(60, 40, 30, 0.5); }
.lp-prezent-obraz .okl-przod { width: 100%; }
.lp-prezent-tekst { padding: 32px 40px 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; flex: 1; }
.lp-prezent-tekst > p.lp-prezent-okazje { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--lp-tusz-2); }
.lp-prezent-okazje a { color: var(--lp-roz-ciemny); text-decoration: underline; text-underline-offset: 3px; }
.lp-prezent-tekst > p:not(.lp-nadtytul):not(.lp-prezent-okazje) { margin: 0; font-size: 21px; line-height: 1.5; text-wrap: pretty; }

/* --- pytania (lista z app.js / npm run sync: <details>) --- */
.lp-pytania .lp-szer { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.lp-pytania { padding-top: 24px; }
/* Karty pytan (wyglad w serwis.css) - na stronie glownej wieksze, bo stoja na cala szerokosc. */
.lp-pytania .faq { width: 100%; }
.lp-pytania .faq summary { padding: 22px 24px; font-size: 18px; }
.lp-pytania .faq summary::after { width: 30px; height: 30px; font-size: 20px; }
.lp-pytania .faq details p { padding: 0 24px 22px; max-width: none; font-size: 17px; line-height: 1.6; color: var(--lp-tusz-2); }

/* --- nabor pomyslow --- */
.lp-pomysl {
  background: #E9ECDF; border-radius: 28px; padding: 44px 48px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center;
}
.lp-pomysl > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.lp-pomysl p:not(.lp-nadtytul) { margin: 0; font-size: 17px; line-height: 1.6; color: #4E5544; }
.lp-pomysl-akcja { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lp-pomysl-akcja p { font-size: 15px !important; }

/* --- ostatnie wezwanie --- */
.lp-koniec .lp-szer { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 40px; padding-bottom: 40px; text-align: center; }
.lp-koniec-tytul { font-size: clamp(40px, 5vw, 64px); max-width: 16em; }

/* --- stopka: wspolna dla calego serwisu, w serwis.css --- */

@media (max-width: 640px) {
  .lp-sekcja { padding: 64px 0; }
  .lp-bez-gory { padding-top: 0; }
  .lp-cena-karta { padding: 32px 24px; }
  .lp-cena-kwota { font-size: 64px; }
  .lp-prezent-tekst { padding: 24px; }
  .lp-pomysl { padding: 28px 24px; }
  html:has(body[data-route="index"]) { scroll-padding-top: 72px; }
}

/* ============================================================
   Poradnik i strony pod frazy (generuje je npm run sync z content/articles.pl.json).
   Ten sam jezyk co strona glowna: Cormorant w tytulach, karty jak "Co jest w srodku".
   ============================================================ */
.lp-artykul { padding: 28px 0 72px; }
.lp-okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 36px; font-size: 14.5px; color: var(--lp-tusz-3); }
.lp-okruszki a { color: var(--lp-tusz-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(46, 41, 37, 0.25); }
.lp-artykul-glowa { display: grid; gap: 28px; align-items: center; margin-bottom: 48px; }
.lp-artykul-glowa.z-obrazem { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); }
.lp-artykul-glowa > div { display: grid; gap: 16px; }
.lp-artykul-glowa .lp-h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.05; }
.lp-artykul-glowny { margin: 0; justify-self: center; width: min(100%, 340px); }
.lp-artykul-glowny img { display: block; width: 100%; height: auto; border-radius: 22px; background: var(--lp-piasek); box-shadow: 0 30px 60px -34px rgba(60, 40, 30, 0.5); }
.lp-artykul-tresc { max-width: 760px; display: grid; gap: 36px; }
.lp-artykul-sekcja { display: grid; gap: 14px; }
.lp-artykul-sekcja .lp-h3 { font-size: clamp(28px, 3vw, 36px); }
.lp-artykul-sekcja p, .lp-artykul-sekcja li { margin: 0; font-size: 18px; line-height: 1.7; color: var(--lp-tusz-2); }
.lp-artykul-sekcja b { color: var(--lp-tusz); font-weight: 600; }
.lp-artykul-sekcja a, .lp-artykul-pytania a { color: var(--lp-roz-ciemny); text-decoration: underline; text-underline-offset: 3px; }
.lp-artykul-sekcja ul:not(.lp-karty-artykulow) { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-artykul-sekcja ul:not(.lp-karty-artykulow) > li { position: relative; padding-left: 26px; }
.lp-artykul-sekcja ul:not(.lp-karty-artykulow) > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: #D9A9A2; }
/* Sekcja z obrazkiem: blok zamiast siatki, zeby tekst oplywal kadr z prawej. */
.lp-artykul-sekcja.z-obrazem { display: block; }
.lp-artykul-sekcja.z-obrazem > * + * { margin-top: 14px; }
.lp-artykul-sekcja.z-obrazem::after { content: ""; display: block; clear: both; }
.lp-artykul-obraz { float: right; margin: 4px 0 12px 28px !important; }
.lp-artykul-obraz img { display: block; width: 180px; height: 180px; border-radius: 20px; background: var(--lp-piasek); object-fit: cover; }
/* Spis poradnika: karty na cala szerokosc strony, nie w kolumnie tekstu. */
.lp-artykul-tresc:has(.lp-karty-artykulow) { max-width: none; }
/* Telefon: bez oplywania - obok kadru zostawalo kilka slow w linijce. */
@media (max-width: 560px) {
  .lp-artykul-obraz { float: none; margin: 0 0 4px !important; }
  .lp-artykul-obraz img { width: 120px; height: 120px; }
}
.lp-artykul-zrodla { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lp-tusz-3); }
.lp-artykul-cta { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: var(--lp-tusz); color: #E8DFD3; }
.lp-artykul-cta .lp-nadtytul { color: #E3B7B1; }
.lp-artykul-cta .lp-h3 { color: var(--lp-papier); font-size: clamp(26px, 3vw, 34px); }
.lp-artykul-cta p { margin: 0; font-size: 17px; line-height: 1.6; }
.lp-artykul-pytania .lp-szer { display: grid; gap: 24px; }
.lp-powiazane-tytul { margin-bottom: 22px; }
/* Karty artykulow: spis poradnika i "Zobacz tez" - jak karty "Co jest w srodku". */
.lp-karty-artykulow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 18px 24px; }
.lp-karty-artykulow a {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 22px; height: 100%;
  padding: 16px 24px 16px 16px; background: #FFFFFF; border: 1px solid var(--lp-linia); border-radius: 22px;
  text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-karty-artykulow a:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(60, 40, 30, 0.45); }
.lp-karty-artykulow img { width: 120px; height: 120px; border-radius: 16px; background: var(--lp-piasek); object-fit: cover; }
.lp-karty-artykulow a > span { display: grid; gap: 6px; }
.lp-karty-artykulow .lp-nadtytul { font-size: 12.5px; }
.lp-karty-artykulow b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; font-weight: 600; line-height: 1.12; color: var(--lp-tusz); }
.lp-karty-artykulow b em { font-style: italic; color: var(--lp-roz); }
.lp-karta-opis { font-size: 15px; line-height: 1.5; color: var(--lp-tusz-2); }
@media (prefers-reduced-motion: reduce) { .lp-karty-artykulow a, .lp-karty-artykulow a:hover { transition: none; transform: none; } }
@media (max-width: 760px) {
  .lp-artykul-glowa.z-obrazem { grid-template-columns: minmax(0, 1fr); }
  .lp-artykul-glowny { width: min(70%, 260px); }
  .lp-artykul-sekcja p, .lp-artykul-sekcja li { font-size: 17px; }
  .lp-karty-artykulow a { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; }
  .lp-karty-artykulow img { width: 88px; height: 88px; border-radius: 12px; }
  .lp-karty-artykulow b { font-size: 21px; }
}