/* ==========================================================================
   Bez śladu - Adam Bielecki, Dominik Szczepański
   Statyczna wersja landingu. Paleta i typografia przeniesione 1:1
   z motywu imkreator (WordPress), układ naprawiony.
   ========================================================================== */

/* --- Fonty ---------------------------------------------------------------- */
@font-face {
  font-family: Strawford;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/strawford-light.woff2') format('woff2');
}
@font-face {
  font-family: Strawford;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/strawford-regular.woff2') format('woff2');
}
@font-face {
  font-family: Strawford;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/strawford-medium.woff2') format('woff2');
}
@font-face {
  font-family: Strawford;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/strawford-bold.woff2') format('woff2');
}
@font-face {
  font-family: Strawford;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/strawford-black.woff2') format('woff2');
}

/* --- Zmienne -------------------------------------------------------------- */
:root {
  --granat: #001b48;
  --granat-ciemny: #001334;
  --jasny: #dde8f3;
  --rozowy: #f03d83;
  --rozowy-ciemny: #d32d6f;
  --tekst: #030303;
  --bialy: #fff;
  --radius: 4px;
  --radius-karta: 6px;

  --szer-strony: 1180px;
  --szer-tekstu: 62ch;
  --luz-sekcji: clamp(56px, 7vw, 96px);
  --luz-kontenera: clamp(20px, 4vw, 40px);
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--jasny);
  color: var(--tekst);
  font-family: Strawford, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

button { font: inherit; }

::selection { background: var(--rozowy); color: #fff; }

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

/* --- Szkielet ------------------------------------------------------------- */
.kontener {
  width: 100%;
  max-width: var(--szer-strony);
  margin-inline: auto;
  padding-inline: var(--luz-kontenera);
}

.kontener--waski { max-width: 900px; }

.sekcja {
  padding-block: var(--luz-sekcji);
}

/* Kilka sekcji na tym samym granacie czyta się jak jeden blok -
   bez tego między nimi rośnie podwójny margines. */
.sekcja--granat + .sekcja--granat { padding-top: 0; }

.sekcja--granat {
  background: var(--granat);
  color: var(--bialy);
}

.sekcja--jasna {
  background: var(--jasny);
  color: var(--tekst);
}

.proza {
  max-width: var(--szer-tekstu);
  font-size: 1.05rem;
}

.center { text-align: center; }

/* Nagłówek sekcji + różowa kreska pod spodem (jak w oryginale) */
.tytul-sekcji {
  font-size: clamp(30px, 4.4vw, 48px);
  text-align: center;
  text-wrap: balance;
}

.tytul-sekcji--mniejszy { font-size: clamp(26px, 3.2vw, 32px); }

.kreska {
  height: 2px;
  border: 0;
  margin: 32px auto 0;
  background: var(--rozowy);
  width: 100%;
  max-width: var(--szer-strony);
}

.sekcja--granat .kreska { opacity: .9; }

/* --- Przyciski ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: var(--radius);
  background: var(--rozowy);
  color: var(--bialy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.btn:hover { background: var(--rozowy-ciemny); }
.btn:active { transform: translateY(1px); }

.btn--duzy {
  padding: 18px 44px;
  font-size: 17px;
}

/* --- Górny pasek ---------------------------------------------------------- */
.pasek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0, 27, 72, .08);
}

.pasek__srodek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.pasek__logo img {
  width: 86px;
  height: auto;
}

.pasek__nawigacja {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.pasek__nawigacja a {
  color: var(--granat);
  font-size: 16px;
  text-decoration: none;
}

.pasek__nawigacja a:hover { color: var(--rozowy); }

.pasek__mobilne { display: none; }

.hamburger {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--granat);
  font-size: 15px;
  cursor: pointer;
}

.hamburger svg { width: 22px; height: 22px; }

/* Szuflada mobilna */
.szuflada {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(0, 19, 52, .55);
}

.szuflada[open],
.szuflada.jest-otwarta { display: block; }

.szuflada__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(84vw, 340px);
  padding: 24px;
  background: var(--bialy);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.szuflada__zamknij {
  align-self: flex-end;
  margin-bottom: 16px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--granat);
  cursor: pointer;
}

.szuflada__panel a {
  padding: 14px 4px;
  border-bottom: 1px solid rgba(0, 27, 72, .1);
  color: var(--granat);
  font-size: 19px;
  text-decoration: none;
}

.szuflada__panel .btn { margin-top: 20px; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--jasny) url('../assets/img/bck.png') no-repeat center bottom / 100% auto;
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px);
  overflow: hidden;
}

.hero__srodek {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.hero h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.14;
  text-wrap: balance;
}

.hero__lead {
  margin-top: 24px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.35;
}

.hero__cta { margin-top: 32px; }

.hero__produkt {
  justify-self: center;
  max-width: 520px;
  filter: drop-shadow(0 24px 48px rgba(0, 19, 52, .22));
}

/* --- Cytat ---------------------------------------------------------------- */
.cytat {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(19px, 2vw, 25px);
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
}

.cytat__znak {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4em;
  font-style: normal;
  line-height: 0;
  vertical-align: -.15em;
}

.cytat__foto {
  border-radius: var(--radius-karta);
  overflow: hidden;
}

.cytat + .cytat__foto { margin-top: clamp(32px, 5vw, 56px); }

/* --- Boksy „Co znajdziesz w środku” --------------------------------------- */
.boksy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: clamp(32px, 5vw, 56px);
}

.boks {
  padding: 28px;
  border-radius: var(--radius-karta);
  background: rgba(221, 232, 243, .2);
}

.boks h3 {
  margin-bottom: 10px;
  font-size: 21px;
  font-weight: 700;
}

.boks p {
  font-size: 17px;
  line-height: 1.5;
  opacity: .92;
}

/* --- Karuzele ------------------------------------------------------------- */
.karuzela { position: relative; }

.karuzela__tor {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.karuzela__tor::-webkit-scrollbar { display: none; }

.karuzela__slajd {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.karuzela--strony .karuzela__slajd {
  flex-basis: min(420px, 78vw);
}

.karuzela--strony img {
  width: 100%;
  border-radius: var(--radius-karta);
  box-shadow: 0 18px 40px rgba(0, 19, 52, .3);
}

.karuzela--zdjecia .karuzela__slajd {
  flex-basis: min(760px, 88vw);
}

.karuzela--zdjecia img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-karta);
}

.karuzela__strzalka {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  border-radius: 50%;
  background: var(--bialy);
  color: var(--granat);
  box-shadow: 0 6px 18px rgba(0, 19, 52, .25);
  cursor: pointer;
  transition: background .18s ease;
}

.karuzela__strzalka:hover { background: var(--jasny); }
.karuzela__strzalka[disabled] { opacity: .35; cursor: default; }
.karuzela__strzalka--wstecz { left: -8px; }
.karuzela__strzalka--dalej { right: -8px; }
.karuzela__strzalka svg { width: 20px; height: 20px; }

.karuzela__kropki {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.karuzela__kropka {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--granat);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.karuzela__kropka[aria-current='true'] { background: var(--granat); }

.sekcja--granat .karuzela__kropka { border-color: var(--bialy); }
.sekcja--granat .karuzela__kropka[aria-current='true'] { background: var(--bialy); }

/* --- „O książce” ---------------------------------------------------------- */
.o-ksiazce {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.o-ksiazce > * {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.o-ksiazce .proza { max-width: 860px; }

.o-ksiazce__foto {
  border-radius: var(--radius-karta);
  overflow: hidden;
}

/* Karta „Poprzednia książka…” - w oryginale kartka z cieniem */
.kartka {
  position: relative;
  max-width: 860px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  background: var(--bialy);
  color: var(--tekst);
  border-radius: 2px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .28);
  font-size: clamp(18px, 1.7vw, 21px);
  text-align: center;
}

.kartka::before,
.kartka::after {
  content: '';
  position: absolute;
  inset: 12px -10px -12px;
  z-index: -1;
  background: rgba(255, 255, 255, .55);
  border-radius: 2px;
}

.kartka::after {
  inset: 22px -20px -22px;
  background: rgba(255, 255, 255, .3);
}

/* --- Opinie --------------------------------------------------------------- */
.okladka-mini {
  width: 200px;
  margin: 0 auto clamp(28px, 4vw, 40px);
  filter: drop-shadow(0 16px 32px rgba(0, 19, 52, .25));
}

.opinie {
  display: grid;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 40px);
}

.opinia {
  position: relative;
  padding: 72px 28px 28px;
  border-radius: var(--radius-karta);
  background: rgba(63, 131, 248, .1);
  font-size: 18px;
  line-height: 1.5;
}

.sekcja--granat .opinia { background: rgba(221, 232, 243, .12); }

.opinia::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  width: 34px;
  height: 26px;
  background: url('../assets/img/quote.svg') no-repeat center / contain;
  opacity: .85;
}

.opinia__autor {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
}

.opinia__zrodlo {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

/* --- Autorzy -------------------------------------------------------------- */
.autorzy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(32px, 5vw, 48px);
}

.autor img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-karta);
}

.autor h3 {
  margin: 24px 0 12px;
  font-size: clamp(24px, 2.6vw, 30px);
}

.autor p {
  font-size: 17px;
  line-height: 1.55;
}

.podsumowanie {
  max-width: 860px;
  margin: clamp(32px, 5vw, 48px) auto 0;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

/* Karuzela opinii - jedna karta na widok */
.karuzela--opinie .karuzela__slajd { flex-basis: 100%; }
.karuzela--opinie .karuzela__tor { gap: 24px; }
.karuzela--opinie .opinia { height: 100%; }

/* --- Galeria (tło z górami) ----------------------------------------------- */
.gory {
  background: var(--jasny) url('../assets/img/mountain-bck.webp') no-repeat center bottom / cover;
}

.gory2 {
  background: var(--jasny) url('../assets/img/mountain-bck2.webp') no-repeat center top / cover;
}

.galeria__wstep {
  max-width: 900px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* --- Sklep ---------------------------------------------------------------- */
.produkty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

.produkty--zestawy {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 940px;
  margin-inline: auto;
}

/* Grafiki zestawów są kwadratowe i mają cenę wypaloną drobnym drukiem -
   kadr trzyma je w rozmiarze z oryginału, inaczej cena robi się nieczytelna. */
.produkty--zestawy .produkt__foto { height: clamp(300px, 34vw, 470px); }
.produkty--jeden .produkt__foto { height: clamp(320px, 38vw, 530px); }

.produkty--jeden {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

.produkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.produkt__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(280px, 30vw, 400px);
  margin: 0;
}

/* Grafiki produktowe mają wypaloną cenę u dołu i różne proporcje.
   Stała wysokość kadru + contain trzyma przyciski w jednej linii
   i nie pozwala obrazkowi wyjść poza swój box. */
.produkt__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.produkt .btn { margin-top: auto; }

/* Cena tekstowa pod grafiką - włączana w panelu dla produktów bez ceny na grafice. */
.produkt__cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin: 0;
  color: var(--granat);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.produkt__cena s { font-size: 0.62em; font-weight: 400; }

.ukryte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sklep__grupa + .sklep__grupa { margin-top: clamp(40px, 5vw, 64px); }

.sklep__grupa .kreska { margin-bottom: clamp(40px, 5vw, 64px); }

/* --- Stopka --------------------------------------------------------------- */
.stopka { background: var(--granat); color: var(--bialy); }

.stopka__srodek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  align-items: start;
  padding-block: var(--luz-sekcji);
}

.stopka__linki {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stopka__linki a {
  color: var(--bialy);
  text-decoration: none;
  opacity: .9;
}

.stopka__linki a:hover { opacity: 1; text-decoration: underline; }

.stopka__kontakt { text-align: center; }

.stopka__kontakt h2 {
  margin-bottom: 24px;
  font-size: clamp(26px, 3vw, 32px);
}

.stopka__mail {
  font-size: clamp(21px, 2.4vw, 28px);
  color: var(--bialy);
  text-decoration: none;
}

.stopka__mail:hover { text-decoration: underline; }

.stopka__dol {
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.stopka__dol-srodek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  font-size: 15px;
}

.stopka__dol a { color: var(--bialy); text-decoration: none; }
.stopka__dol a:hover { text-decoration: underline; }

.stopka__imker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stopka__imker img { width: 67px; }

/* --- Podstrony (teksty prawne) -------------------------------------------- */
.strona-tresci {
  padding-block: clamp(48px, 6vw, 80px);
}

.strona-tresci h1 {
  margin-bottom: 32px;
  font-size: clamp(30px, 4vw, 44px);
}

.strona-tresci h2 {
  margin: 40px 0 16px;
  font-size: clamp(22px, 2.4vw, 28px);
}

.strona-tresci h3 {
  margin: 32px 0 12px;
  font-size: 21px;
}

.strona-tresci p,
.strona-tresci li {
  font-size: 17px;
  line-height: 1.6;
}

.strona-tresci ul,
.strona-tresci ol {
  padding-left: 24px;
  margin: 0 0 1em;
}

.strona-tresci li { margin-bottom: .5em; }

.strona-tresci table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 16px;
}

.strona-tresci th,
.strona-tresci td {
  padding: 12px 14px;
  border: 1px solid rgba(0, 27, 72, .18);
  text-align: left;
  vertical-align: top;
}

.strona-tresci th { background: rgba(0, 27, 72, .06); font-weight: 700; }

.strona-tresci a { color: var(--granat); }

.powrot {
  display: inline-block;
  margin-bottom: 32px;
  font-size: 16px;
  color: var(--granat);
  text-decoration: none;
}

.powrot:hover { text-decoration: underline; }

/* --- Widoki mobilne ------------------------------------------------------- */
@media (max-width: 980px) {
  .produkty--zestawy .produkt__foto,
  .produkty--jeden .produkt__foto { height: 320px; }

  .hero__srodek {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .hero__lead { margin-inline: auto; }

  .hero__produkt {
    order: -1;
    max-width: min(380px, 100%);
  }

  .produkt__foto { height: 280px; }
}

@media (max-width: 800px) {
  .pasek__nawigacja { display: none; }
  .hamburger { display: inline-flex; }

  .pasek__srodek { min-height: 72px; }

  .pasek__logo img { width: 64px; }

  .karuzela__strzalka--wstecz { left: 0; }
  .karuzela__strzalka--dalej { right: 0; }

  .stopka__kontakt { text-align: left; }

  .stopka__dol-srodek { justify-content: flex-start; }
}

@media (max-width: 560px) {
  body { font-size: 18px; }

  .hero h1 {
    font-size: 27px;
    text-wrap: pretty;
  }

  .hero__lead { font-size: 18px; }

  .opinia { padding: 64px 20px 24px; }

  .produkt__foto { height: 240px; }

  .karuzela__strzalka { width: 40px; height: 40px; margin-top: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .karuzela__tor { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}