/* Wariant B hero: zdjęcie wypełnia kartę, hasło stoi na nim. */
.hb {
  position: relative;
  height: calc(100svh - 175px); min-height: 520px; max-height: 920px;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid; place-items: center;
  text-align: center;
  isolation: isolate;
}
.hb__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
/* Przyciemnienie tylko tam, gdzie stoi tekst — środek i dół, nie całe zdjęcie. */
.hb::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 50% 50%, rgba(20,30,60,.55), rgba(20,30,60,.15) 70%, transparent); }
.hb__tresc { padding: 0 var(--pad) 4rem; max-width: 1100px; }
.hero .hb__h1 {
  font-family: 'Baloo 2', var(--font-naglowek); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 6.2vw, 7rem);
  color: #fff; -webkit-text-stroke: .05em var(--tusz); paint-order: stroke fill;
  text-shadow: 0 .08em 0 var(--tusz);
}
.hb__h1 span { color: var(--zol); display: block; }
.hb__lead { color: #fff; font-weight: 700; font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem); margin: 1.2rem auto 1.8rem; max-width: 34rem; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.hb__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* Malowana fala zamiast prostej dolnej krawędzi. */
.hb__fala { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 90px); }
.hb__fakty { position: absolute; bottom: clamp(.6rem, 2vw, 1.4rem); left: 50%; transform: translateX(-50%); display: flex; gap: .8rem; z-index: 2; }
@media (max-width: 760px) {
  .hb { height: auto; min-height: 0; padding: 4rem 0 6rem; }
  .hb__fakty { position: static; transform: none; justify-content: center; flex-wrap: wrap; margin-top: -1rem; padding: 0 var(--pad); }
}
/* Zdjęcie odbite w poziomie: dziewczynka po prawej, tekst po lewej — hasło
   nie wchodzi już na twarz. Przyciemnienie od lewej, tylko pod tekstem. */
.hb { place-items: center start; text-align: left; }
.hb__foto { object-position: 70% 35%; }
.hb::after { background: linear-gradient(90deg, rgba(20,30,60,.65) 0%, rgba(20,30,60,.35) 40%, transparent 65%); }
.hb__tresc { padding-left: clamp(1.5rem, 5vw, 5rem); max-width: 760px; }
.hb__lead { margin-left: 0; }
.hb__cta { justify-content: flex-start; }
@media (max-width: 760px) {
  .hb { place-items: center; text-align: center; }
  .hb::after { background: rgba(20,30,60,.5); }
  .hb__cta { justify-content: center; }
}
/* Hasło: Baloo 2 zamiast bajkowego Sniglet — pulchne i przyjazne, ale schludne.
   Bez konturu i cienia, tylko delikatny cień dla czytelności na zdjęciu. */
.hero .hb__h1 {
  font-family: 'Baloo 2', var(--font-naglowek);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 18px rgba(0,0,0,.25);
}

/* ---- Karta zapisu po prawej stronie hero --------------------------------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hb__karta {
  position: absolute; right: clamp(1.5rem, 4vw, 4rem); top: 50%;
  transform: translateY(-50%) rotate(2deg);
  width: min(380px, 32vw);
  padding: 1.6rem 1.6rem 1.3rem;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 50px -20px rgba(20,30,60,.45);
  text-align: left;
  animation: kartaWjazd .9s .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes kartaWjazd { from { opacity: 0; transform: translateY(-40%) rotate(8deg) scale(.9); } }
/* Okrągła plakietka z rabatem przyczepiona do rogu karty. */
.hb__karta-znak {
  position: absolute; top: -1.4rem; right: -1rem;
  display: grid; place-items: center;
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: var(--roz); color: #fff;
  font-family: 'Baloo 2', var(--font-naglowek); font-weight: 800; font-size: 1.35rem;
  transform: rotate(-12deg);
  box-shadow: 0 8px 18px rgba(255,79,150,.4);
}
.hb__karta-tytul { font-family: 'Baloo 2', var(--font-naglowek); font-weight: 800; font-size: 1.6rem; line-height: 1.05; color: var(--tusz); margin-bottom: .5rem; padding-right: 2.5rem; }
.hb__karta-tekst { font-size: .95rem; color: var(--tusz-2); margin-bottom: 1rem; }
.hb__karta-pole { display: flex; gap: .5rem; }
.hb__karta-pole input {
  flex: 1; min-width: 0;
  padding: .8rem 1rem; border: 2px solid #E3E8F0; border-radius: 14px;
  font: inherit; font-size: .95rem;
}
.hb__karta-pole input:focus { outline: none; border-color: var(--nieb); }
.hb__karta-pole .btn { padding: .8rem 1rem; font-size: .9rem; box-shadow: 0 4px 0 var(--pom-2); }
.hb__karta-zgoda { font-size: .76rem; color: var(--tusz-2); margin-top: .7rem; }

/* Poniżej 1100 px karta nie mieści się obok tekstu — schodzi pod hero. */
@media (max-width: 1100px) {
  .hb__karta { position: relative; right: auto; top: auto; transform: none; width: auto; margin: 1.5rem var(--pad) 0; animation: none; }
}
.hb picture { display: contents; }
/* Dolne rogi hero zakrywa biała fala — zaokrąglenie dawało tam cienką ciemną
   linię (wygładzone krawędzie zdjęcia przebijały spod fali). */
.hb { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* max-width: none — globalne `svg { max-width: 100% }` ucinało falę o 4 px
   i spod prawej krawędzi wystawał pasek zdjęcia. */
.hb__fala { left: -2px; right: -2px; width: calc(100% + 4px); max-width: none; bottom: -2px; }
/* Data otwarcia z panelu (Strona → Data otwarcia): plakietka nad hasłem, znika po otwarciu. */
.hb__otwarcie { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-bottom: 1rem; padding: .45rem 1.1rem; border-radius: 999px;
  background: var(--zol); color: var(--tusz); font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.hb__otwarcie[hidden] { display: none; }
.hb__otwarcie small { font: inherit; font-weight: 700; opacity: .75; }