/* ==========================================================================
   HOME MASTER — dedykowana warstwa prezentacyjna strony głównej.
   Zbudowana bezpośrednio z pomiarów SZCZURKOWO-HOME-MASTER-REFERENCE-FINAL.png
   (nie dziedziczy geometrii ze starych reguł .hero/.animal-card/.product-card
   w main.css — te zostają nietknięte dla stron produktowych/Woo, które ich
   nadal używają). Klasy w przestrzeni nazw .sz-* są unikalne dla tego pliku.
   Design tokeny (--sp-*, --fs-*, --color-*, --radius-*, --shadow-*) pochodzą
   z :root w main.css — to warstwa wspólna, nie geometria sekcji.
   ========================================================================== */

.sz-home { background: var(--color-bg); }

/* Etykieta "eyebrow" bez dekoracyjnej kreski (MASTER REFERENCE jej nie ma) */
.sz-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-block;
}

/* Topbar/Header: przeniesione do main.css (współdzielone na całej stronie,
   header.php ładuje się wszędzie, home-master.css tylko na stronie głównej). */

/* ---- Hero ---- */
.sz-hero {
  background: var(--color-canvas);
  padding: var(--sp-6) 0;
  overflow: hidden;
  position: relative;
}
.sz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  align-items: center;
  gap: var(--sp-6);
}
.sz-hero-copy { max-width: 620px; min-width: 0; }
.sz-hero-copy h1 {
  font-family: var(--font-display);
  font-size: 45px;
  line-height: 1.13;
  font-weight: 500;
  color: var(--color-ink-deep);
  margin: var(--sp-2) 0 var(--sp-3);
}
.sz-hero-copy h1 .hl { color: var(--color-primary); display: inline; }
.sz-hero-copy .lead { font-size: 18px; line-height: 1.4; color: #5a5d5a; margin: 0 0 var(--sp-4); max-width: 46ch; }
.sz-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.sz-hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
.sz-hero-trust-item { display: flex; align-items: center; gap: 10px; }
.sz-hero-trust-item .icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; }
.sz-hero-trust-item .icon .icon-svg { width: 20px; height: 20px; }
.sz-hero-trust-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--color-ink); }
.sz-hero-trust-item span span { display: block; font-size: 12.5px; color: var(--color-ink-soft); }

/* Fotografia to teraz jedyny element w kompozycji po prawej — duża, czysta,
   bez żadnych naklejek na zwierzętach (decyzja właścicielska). Jedyny akcent
   to odręczny podpis w rogu, nad tłem/liśćmi, nigdy nad pyskami zwierząt. */
.sz-hero-media { position: relative; width: calc(100% + var(--sp-6)); min-width: 0; height: 100%; min-height: 420px; margin-right: calc(-1 * var(--sp-6)); }
.sz-hero-photo {
  width: 100%; height: 100%; min-height: 420px;
  border-radius: var(--radius-lg);
  background-size: cover; background-position: center 40%;
  box-shadow: var(--shadow-lg);
}
.sz-hero-photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #EFE9DA, #EFE9DA 10px, #E6DFCC 10px, #E6DFCC 20px);
  border: 2px dashed var(--color-line);
  text-align: center; color: var(--color-ink-faint); font-weight: 700; font-size: 13px; letter-spacing: 0.05em;
}
.sz-hero-photo--placeholder code { display: block; margin-top: 6px; font-weight: 400; font-size: 12px; }
.sz-hero-script {
  position: absolute; top: 5%; right: 6%;
  font-family: var(--font-script); font-size: 1.35rem; color: #fff;
  text-shadow: 0 2px 10px rgba(20,14,9,0.45);
  text-align: right; line-height: 1.15; transform: rotate(-3deg);
  pointer-events: none;
}

/* ---- Animal nav — pełnokadrowe zdjęcie + dolny scrim (nigdy na pysku
   zwierzęcia — kadrowanie center/30% trzyma głowę w górnej połowie kadru,
   gradient zaciemnia tylko dolną strefę, gdzie leży tekst). ---- */
.sz-animal-nav { background: var(--color-canvas); padding-bottom: var(--sp-6); }
.sz-animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.sz-animal-card {
  position: relative; display: flex; align-items: flex-end;
  min-height: 300px; border-radius: 20px; overflow: hidden;
  color: #fff; isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sz-animal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sz-animal-card-photo {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 28%;
  transition: transform .45s ease;
}
.sz-animal-card:hover .sz-animal-card-photo { transform: scale(1.08); }
.sz-animal-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,10,0) 34%, rgba(20,16,10,0.30) 62%, var(--sz-animal-scrim, rgba(20,16,10,0.86)) 100%);
}
.sz-animal-card--rat { --sz-animal-scrim: rgba(58,36,20,0.88); }
.sz-animal-card--hamster { --sz-animal-scrim: rgba(66,49,10,0.88); }
.sz-animal-card--rabbit { --sz-animal-scrim: rgba(15,30,46,0.88); }
.sz-animal-card--rat .sz-animal-card-photo { background-image: var(--photo-rat-2); background-position: center 30%; }
.sz-animal-card--hamster .sz-animal-card-photo { background-image: var(--photo-hamster-1); background-position: center 42%; }
.sz-animal-card--rabbit .sz-animal-card-photo { background-image: var(--photo-rabbit-2); background-position: center 22%; }
.sz-animal-card-content { position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4); width: 100%; }
.sz-animal-card h3 { margin: 0 0 4px; color: #fff; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sz-animal-card h3 .icon-svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s ease; }
.sz-animal-card:hover h3 .icon-svg { transform: translateX(4px); }
.sz-animal-card p { font-size: 13px; color: rgba(255,255,255,0.88); margin: 0; line-height: 1.3; }

/* ---- Bestsellery — karty samodzielnie stojące na tle sekcji (.card
   z main.css: białe tło + shadow-sm + hover lift), bez opakowującego
   "pudełka w pudełku" — dzięki temu hover każdej karty jest faktycznie
   widoczny. Identyfikacja zwierzęcia po kolorze: tintowane tło okładki +
   górny pasek koloru + kolorowy CTA. ---- */
.sz-bestsellers { padding: var(--sp-4) 0 var(--sp-6); background: var(--color-bg); }
.sz-bestsellers-head { max-width: 620px; margin: 0 auto var(--sp-5); text-align: center; }
.sz-bestsellers-head h2 { font-size: 1.55rem; font-weight: 500; margin: 4px 0 4px; color: var(--color-ink); }
.sz-bestsellers-head p { font-size: 13.5px; color: var(--color-ink-soft); margin: 0; }

.sz-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.sz-product-card { display: flex; flex-direction: column; border-top: 4px solid var(--color-line); }
.sz-product-card--rat { border-top-color: var(--color-rat); }
.sz-product-card--hamster { border-top-color: var(--color-hamster); }
.sz-product-card--rabbit { border-top-color: var(--color-rabbit); }
.sz-product-card-cover { display: flex; justify-content: center; padding: var(--sp-4) 0 var(--sp-2); background: var(--color-canvas); position: relative; overflow: hidden; transition: background .2s ease; }
.sz-product-card--rat .sz-product-card-cover { background: var(--color-rat-tint); }
.sz-product-card--hamster .sz-product-card-cover { background: var(--color-hamster-tint); }
.sz-product-card--rabbit .sz-product-card-cover { background: var(--color-rabbit-tint); }
.sz-product-card-cover .book { width: 200px; aspect-ratio: 3/3.5; transition: transform .3s ease, box-shadow .3s ease; }
.sz-product-card:hover .sz-product-card-cover .book { transform: translateY(-4px) rotate(-1.5deg) scale(1.03); box-shadow: var(--shadow-lg); }
.sz-product-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.sz-product-card-body h3 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--color-ink); }
.sz-product-card-body p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--color-ink-soft); }
.sz-product-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.sz-product-facts .chip { font-size: 11px; padding: 3px 10px; }
.sz-product-price-row { display: flex; align-items: baseline; gap: 8px; margin: auto 0 0; padding-top: var(--sp-2); }
.sz-product-price-row .price-now { font-size: 1.4rem; }
.sz-product-price-row .price-was { font-size: 12px; }
.sz-product-card-body .btn { height: 42px; font-size: 13.5px; margin-top: 4px; }

/* ---- Pakiet ---- */
.sz-bundle-wrap { padding: var(--sp-5) 0; background: var(--color-bg); }
.sz-bundle {
  background: var(--color-cream);
  border: 1px solid var(--color-cream-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 0.85fr 0.8fr;
  gap: var(--sp-4);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
.sz-bundle:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.sz-bundle .ribbon {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2;
  background: var(--color-accent); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.sz-bundle-info { padding-top: var(--sp-5); }
.sz-bundle-info h2 { font-size: 1.6rem; font-weight: 500; margin: 0; color: var(--color-ink); }
.sz-bundle-kicker { display: block; font-size: 12px; color: var(--color-ink-faint); font-weight: 600; letter-spacing: 0.03em; margin-top: 3px; }
.sz-bundle-desc { font-size: 13px; color: var(--color-ink-soft); margin: 8px 0 0; line-height: 1.4; }
.sz-bundle-save { display: block; color: var(--color-accent); font-weight: 700; font-size: 12.5px; margin-top: 8px; }
.sz-bundle-price { margin: 8px 0 0; display: flex; align-items: baseline; gap: 8px; }
.sz-bundle-price .price-now { font-size: 1.45rem; }
.sz-bundle .btn { margin-top: var(--sp-3); height: 44px; }

.sz-bundle-stack { display: flex; flex-direction: column; align-items: center; position: relative; }
.sz-bundle-stack .book-stack { padding-top: 16px; }
.sz-bundle-badge {
  position: relative; margin-bottom: -10px; z-index: 5;
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: 0.6rem; font-weight: 700; line-height: 1.2;
  box-shadow: var(--shadow-md); transform: rotate(-6deg);
}
.sz-bundle-stack .book-stack .book { width: 130px; }

.sz-bundle-benefits { display: flex; flex-direction: column; gap: 7px; background: var(--color-surface); border-radius: var(--radius-md); padding: var(--sp-3); box-shadow: var(--shadow-sm); margin: 0; list-style: none; }
.sz-bundle-benefits li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-ink); }
.sz-bundle-benefits .icon { width: 19px; height: 19px; border-radius: 50%; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sz-bundle-benefits .icon svg { width: 11px; height: 11px; color: var(--color-primary); stroke: var(--color-primary); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Trust strip ---- */
.sz-trust-wrap { padding: var(--sp-3) 0 var(--sp-4); background: var(--color-bg); }
.sz-trust { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.sz-trust-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sz-trust-item > span:last-child { min-width: 0; }
.sz-trust-item .icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.sz-trust-item:hover .icon { background: var(--color-primary); transform: translateY(-2px); }
.sz-trust-item:hover .icon-svg { color: #fff; }
.sz-trust-item .icon-svg { width: 15px; height: 15px; color: var(--color-primary); transition: color .2s ease; }
.sz-trust-item strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--color-ink); }
.sz-trust-item .sub { display: block; font-size: 11px; color: var(--color-ink-faint); }

/* ---- Baza Wiedzy ----
   Asset docelowy: theme/szczurkowo/assets/images/knowledge/knowledge-animals.webp
   (te same 3 zwierzaki razem co w Hero, kadr poziomy ok. 3:2 — patrz fallback
   file_exists() w front-page.php). Dopóki plik nie istnieje, pokazujemy
   uczciwy placeholder zamiast rozciągniętego zdjęcia szczura. */
.sz-knowledge {
  position: relative;
  display: grid; grid-template-columns: 0.6fr 1fr; align-items: center; gap: var(--sp-5);
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-primary-tint) 100%);
  padding: var(--sp-5) var(--sp-6);
}
.sz-knowledge-photo { height: 180px; border-radius: var(--radius-lg); background-size: cover; background-position: center 30%; box-shadow: var(--shadow-md); }
.sz-knowledge-photo--placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, #EFE9DA, #EFE9DA 10px, #E6DFCC 10px, #E6DFCC 20px);
  border: 2px dashed var(--color-line);
  color: var(--color-ink-faint); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; line-height: 1.4; padding: var(--sp-2);
}
.sz-knowledge-photo--placeholder code { display: block; margin-top: 4px; font-weight: 400; font-size: 11px; }
.sz-knowledge-body h2 { font-size: 1.45rem; font-weight: 500; margin: 4px 0 8px; color: var(--color-ink); }
.sz-knowledge-body p { color: var(--color-ink-soft); font-size: 13.5px; line-height: 1.4; max-width: 420px; margin: 0 0 var(--sp-4); }
.sz-knowledge-body .btn { height: 42px; font-size: 13.5px; }
.sz-knowledge-script {
  position: absolute; right: var(--sp-5); top: var(--sp-4);
  font-family: var(--font-script); font-size: 1.05rem; color: var(--color-primary);
  transform: rotate(3deg); text-align: right; line-height: 1.2; display: none;
}
@media (min-width: 1180px) { .sz-knowledge-script { display: block; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .sz-hero-grid { grid-template-columns: 1fr; }
  .sz-hero-media { order: -1; }
  .sz-hero-photo { aspect-ratio: 16/10; min-height: 0; }
  .sz-hero-script { display: none; }
  .sz-bundle { grid-template-columns: minmax(0,1fr); }
  .sz-knowledge { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sz-animal-grid, .sz-product-grid { grid-template-columns: 1fr; }
  .sz-trust { justify-content: flex-start; }
  .sz-bundle-stack .book-stack .book { width: 100px; }
}
@media (max-width: 560px) {
  .sz-hero-copy h1 { font-size: 32px; }
  .sz-product-card-cover .book { width: 160px; }
}

/* ==========================================================================
   TREŚĆ DRUGORZĘDNA (poniżej Bazy Wiedzy) — nie może konkurować wizualnie
   z Hero/Bestsellery/Pakietem. Jeden spójny, kompaktowy rytm pionowy.
   ========================================================================== */
.sz-secondary { padding: var(--sp-3) 0; }
.sz-secondary .section-head h3,
.sz-secondary .ps-card h3 { font-size: 1.1rem; }
.sz-secondary .ps-card p,
.sz-secondary .why-card p,
.sz-secondary .konsultacja-body .lead { font-size: 13px; }
.sz-secondary .accordion-trigger { transition: color .15s ease; }
.sz-secondary .accordion-trigger:hover { color: var(--color-primary); }
.sz-secondary .why-card,
.sz-secondary .step { transition: transform .2s ease; }
.sz-secondary .why-card:hover,
.sz-secondary .step:hover { transform: translateY(-3px); }