/* ==========================================================================
   SCENA MIMO STRACHU — LAYOUT
   Szkielet strony (sticky footer, siatka głównego contentu) + kompozycje
   sekcji, które łączą kilka komponentów z components.css w konkretny układ.
   ========================================================================== */

html,
body {
  height: 100%;
}

/* div.page, nie samo .page: WordPress dokłada klasę "page" do <body> na każdej
   stronie, a wtedy body dostawało falę i flex o wysokości ekranu (fala kafelkowała
   się co wysokość okna z twardym szwem, header się ściskał). */
div.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* Delikatna, CIĄGLE POWTARZAJĄCA SIĘ fala żółty → turkus → żółty w tle
     całej strony (nie pojedynczej sekcji) — na stronie tej długości jedno
     przejście top-to-bottom byłoby niezauważalne przez 90% scrolla, więc
     zamiast tego cykl ok. 1500px (~1,5 ekranu), symetryczny na brzegach
     żeby zapętlał się bez szwu. Czysty CSS, bez JS/scroll-listenera —
     przegląda się naturalnie wraz z przewijaniem, zero szarpania. Widoczne
     tylko w sekcjach bez własnego tła (.section), .section--soft i karty
     nadal w pełni zasłaniają swoim kolorem. */
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 201, 60, 0.18) 0px,
    rgba(46, 204, 148, 0.24) 700px,
    rgba(255, 201, 60, 0.18) 1400px
  );
}

.page__main {
  flex: 1 1 auto;
}

@media (max-width: 640px) {
  :root {
    --header-h: 72px;
  }
}

/* --- Manifest: cytat wyśrodkowany, oddech --------------------------------- */

.manifest {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.manifest__lede {
  margin-top: var(--space-lg);
  font-size: var(--fs-body-lg);
  color: var(--c-ink-dim);
}

/* --- Sekcja "Znajdź swoją scenę" jako kotwica dla CTA hero ---------------- */

#znajdz-program {
  scroll-margin-top: calc(var(--header-h) + var(--space-md));
}

/* --- Metoda pracy: nagłówek + stepper w jednej kolumnie na desktopie ------ */

.method-section .section__head {
  max-width: 34rem;
}

/* --- O prowadzącym: zdjęcie w ramie + treść -------------------------------- */

.about-section .grid-2 {
  gap: var(--space-2xl);
}

.about-section .pillars {
  margin-top: var(--space-lg);
}

/* Bio bywa dłuższa niż ramka ze zdjęciem (np. pełna wersja na /o-mnie/,
   nie tylko skrót na stronie głównej) — zdjęcie zostaje przypięte, zamiast
   zostawiać pustą przestrzeń pod sobą, kiedy tekst obok jest dłuższy. */
@media (min-width: 900px) {
  .about-section .grid-2 {
    align-items: start;
  }

  .about-section .grid-2__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
  }
}

/* --- Newsletter: pełna szerokość, wydzielona ------------------------------- */

.newsletter-section {
  background: linear-gradient(180deg, var(--c-bg-soft), var(--c-bg));
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.newsletter-section .grid-2 {
  align-items: center;
}

/* --- Sekcja "Decyzja" i "Wiedza" współdzielą odstęp nagłówka -------------- */

.section__head .section__lede {
  margin-top: var(--space-sm);
}

/* --- Strony wewnętrzne: sekcja treści tuż pod page-hero ------------------- */

.page-content > .section:first-child {
  padding-top: var(--space-2xl);
}

/* --- B2B pas na stronie /warsztaty/nauczyciele ---------------------------- */

.b2b-banner {
  /* Pełnoszerokościowy pas, nie kontener z marginesem — wyłamuje się z .container,
     ale wewnętrzny padding rośnie na szerokich ekranach, żeby treść trzymała się
     tej samej kolumny co reszta strony (funkcja max() zamiast osobnego wrappera). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--space-xl) max(var(--container-pad), calc((100% - var(--container-max)) / 2));
  background: var(--c-mint-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 860px) {
  .b2b-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .b2b-banner__actions {
    flex-shrink: 0;
  }
}

.b2b-banner__title {
  max-width: 30rem;
}

.b2b-banner__desc {
  margin-top: var(--space-sm);
  color: var(--c-ink-dim);
  max-width: 34rem;
}

/* --- Print: uprość do treści ----------------------------------------------- */

@media print {
  .site-header,
  .mobile-nav,
  .hamburger,
  .hero__beam,
  .site-footer__social {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }
}