/*
 * Kurs jogi dla początkujących — style podstrony.
 *
 * Wszystko jest zagnieżdżone pod .kjw, żeby nie wyciekło na nagłówek, stopkę ani
 * resztę serwisu. Świadomie bez resetu/preflight — motyw ma własny i nadpisanie
 * go zepsułoby header i footer renderowane na tej samej stronie.
 *
 * Każdy kolor podany dwa razy: hex dla starszych przeglądarek, oklch dla nowych
 * (druga deklaracja wygrywa tam, gdzie jest wspierana).
 */

.kjw {
  --kjw-brand: #d5003f;
  --kjw-brand: oklch(0.552 0.222 17.5);
  --kjw-brand-fg: #fcfcf9;
  --kjw-brand-fg: oklch(0.99 0.003 90);
  --kjw-ink: #26292e;
  --kjw-ink: oklch(0.28 0.01 260);
  --kjw-sand: #f8f7f2;
  --kjw-sand: oklch(0.975 0.006 90);
  --kjw-muted: #5f636a;
  --kjw-muted: oklch(0.5 0.012 260);
  --kjw-border: #e0e3e8;
  --kjw-border: oklch(0.915 0.008 260);

  --kjw-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --kjw-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-family: var(--kjw-sans);
  color: var(--kjw-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/*
 * Nagłówek motywu ma margines dolny (102px na desktopie, 30px na mobile), w którym
 * wisi wystające logo. To margines, więc prześwituje przez niego szare tło strony
 * (#f6f8f9) i nad naszą białą treścią powstaje szary pas.
 *
 * Nie wybielamy body — stopka jest przezroczysta i na tej jednej stronie wyszłaby
 * inna niż w reszcie serwisu. Zamiast tego podkładamy biel tylko pod sam prześwit.
 * z-index: -1 trzyma podkład pod zdjęciem i logo, więc nadmiarowa wysokość niczego
 * nie zasłania, a jedna wartość obsługuje oba warianty marginesu.
 */
.kjw {
  position: relative;
}

.kjw::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: #fff;
  z-index: -1;
}

.kjw *,
.kjw *::before,
.kjw *::after {
  box-sizing: border-box;
}

.kjw img {
  max-width: 100%;
  display: block;
}

/* --- układ ------------------------------------------------------------- */

.kjw-section {
  padding: 3.5rem 0;
}

.kjw-section--tight {
  padding-top: 2.75rem;
  padding-bottom: 1rem;
}

.kjw-section--top-tight {
  padding-top: 0;
}

.kjw-section--sand {
  background: var(--kjw-sand);
}

.kjw-section--brand {
  background: var(--kjw-brand);
  color: var(--kjw-brand-fg);
  padding: 4rem 0;
}

.kjw-wrap {
  margin: 0 auto;
  padding: 0 1.25rem;
  width: 100%;
}

.kjw-wrap--narrow {
  max-width: 48rem;
}

.kjw-wrap--wide {
  max-width: 64rem;
}

.kjw-u-center {
  text-align: center;
}

/* --- typografia -------------------------------------------------------- */

.kjw-eyebrow {
  margin: 0;
  font-family: var(--kjw-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--kjw-brand);
}

.kjw-title {
  margin: 1.25rem 0 0;
  font-family: var(--kjw-display);
  font-size: 1.875rem;
  line-height: 1.15;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kjw-ink);
}

.kjw-lead {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--kjw-muted);
}

/* Domknięcie wstępu: "Zapraszamy na kurs jogi dla początkujących!" */
.kjw-invite {
  margin: 1.5rem 0 0;
  font-family: var(--kjw-display);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--kjw-brand);
}

.kjw-h2 {
  margin: 0;
  font-family: var(--kjw-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kjw-brand);
}

/* Kreska pod nagłówkiem — odpowiednik rule-brand z projektu. */
.kjw-h2::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: var(--kjw-brand);
  margin-top: 0.75rem;
}

.kjw-statement {
  margin: 0;
  font-family: var(--kjw-display);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--kjw-ink);
}

.kjw-prose {
  margin-top: 1.75rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--kjw-muted);
}

.kjw-prose p {
  margin: 0 0 1.5rem;
}

.kjw-prose p:last-child {
  margin-bottom: 0;
}

.kjw-prose--center {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.kjw-prose--lead {
  max-width: 42rem;
  margin-top: 1.5rem;
}

/* Akapit bez nagłówka nad sobą — nie potrzebuje odstępu na kreskę pod h2. */
.kjw-prose--flush {
  margin-top: 0;
}

/* --- przyciski --------------------------------------------------------- */

.kjw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--kjw-brand);
  font-family: var(--kjw-display);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--kjw-brand);
  background: transparent;
  transition: background-color 0.2s, color 0.2s;
}

.kjw-btn:hover,
.kjw-btn:focus-visible {
  background: var(--kjw-brand);
  color: var(--kjw-brand-fg);
}

.kjw-btn--sm {
  margin-top: 1.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.7rem;
}

.kjw-btn--invert {
  border-color: var(--kjw-brand-fg);
  color: var(--kjw-brand-fg);
  margin-top: 2.25rem;
}

.kjw-btn--invert:hover,
.kjw-btn--invert:focus-visible {
  background: var(--kjw-brand-fg);
  color: var(--kjw-brand);
}

/* --- sekcja dwukolumnowa ----------------------------------------------- */

.kjw-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.kjw-split__media {
  height: 420px;
  overflow: hidden;
}

.kjw-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- liczba 14 --------------------------------------------------------- */

.kjw-stat {
  margin: 0;
  font-family: var(--kjw-display);
  font-size: 3.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--kjw-brand);
}

.kjw-stat__label {
  margin: 0.5rem 0 0;
  font-family: var(--kjw-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--kjw-ink);
}

/* --- listy ------------------------------------------------------------- */

.kjw-bullets {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.kjw-bullets li {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--kjw-border);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--kjw-ink);
}

.kjw-bullets__dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--kjw-brand);
}

.kjw-arrows {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem 2.5rem;
}

.kjw-arrows li {
  display: flex;
  gap: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--kjw-ink);
}

.kjw-arrows__mark {
  font-family: var(--kjw-display);
  color: var(--kjw-brand);
}

/* Trzy wyróżniki pod wstępem — bez nagłówka, więc mocniejszy krój niż zwykła lista. */
.kjw-arrows--three {
  margin-top: 0;
}

.kjw-arrows--three li {
  font-family: var(--kjw-display);
  font-weight: 500;
  color: var(--kjw-ink);
}

.kjw-banner {
  margin-top: 3rem;
  width: 100%;
  height: 16rem;
  object-fit: cover;
}

/* --- terminy ----------------------------------------------------------- */

.kjw-terms {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.kjw-term {
  border: 1px solid var(--kjw-border);
  padding: 1.75rem;
}

.kjw-term__day {
  margin: 0;
  font-family: var(--kjw-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kjw-brand);
}

.kjw-term__hour {
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
  color: var(--kjw-ink);
}

.kjw-term__start {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--kjw-muted);
}

.kjw-term__meta {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--kjw-border);
  font-family: var(--kjw-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kjw-ink);
}

.kjw-note {
  margin: 2rem 0 0;
  font-size: 0.875rem;
  color: var(--kjw-muted);
}

.kjw-note a {
  color: var(--kjw-brand);
}

/* --- nauczycielki ------------------------------------------------------ */

.kjw-teachers {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 3rem 2rem;
}

.kjw-teacher__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.kjw-teacher__media {
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.kjw-teacher__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.kjw-teacher__trigger:hover .kjw-teacher__image {
  transform: scale(1.05);
}

.kjw-teacher__name {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--kjw-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kjw-brand);
}

.kjw-teacher__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: 0.75rem auto 0;
  background: var(--kjw-brand);
}

.kjw-teacher__excerpt {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--kjw-muted);
}

.kjw-teacher__more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--kjw-display);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kjw-brand);
  text-underline-offset: 4px;
}

.kjw-teacher__trigger:hover .kjw-teacher__more {
  text-decoration: underline;
}

/* --- panel boczny ------------------------------------------------------ */

.kjw-sheet[hidden] {
  display: none;
}

.kjw-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.kjw-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: kjw-fade 0.2s ease both;
}

.kjw-sheet__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 32rem;
  padding: 2rem 1.75rem 3rem;
  background: #fff;
  overflow-y: auto;
  animation: kjw-slide 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.kjw-sheet__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--kjw-ink);
}

.kjw-sheet__media img {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
}

.kjw-sheet__name {
  margin: 1rem 0 0;
  font-family: var(--kjw-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kjw-brand);
}

.kjw-sheet__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--kjw-brand);
}

.kjw-sheet__excerpt {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--kjw-muted);
}

.kjw-sheet__body {
  margin-top: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--kjw-muted);
}

.kjw-sheet__body p {
  margin: 0 0 1rem;
}

.kjw-sheet__link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--kjw-brand);
}

/* Blokada przewijania tła, gdy panel jest otwarty. */
body.kjw-sheet-open {
  overflow: hidden;
}

@keyframes kjw-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes kjw-slide {
  from { transform: translateX(100%); }
  to { transform: none; }
}

/* --- zakończenie ------------------------------------------------------- */

.kjw-outro__title {
  margin: 0;
  font-family: var(--kjw-display);
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: inherit;
}

.kjw-outro__text {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.7;
  opacity: 0.9;
}

.kjw-outro__sign {
  margin: 2rem 0 0;
  font-family: var(--kjw-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

/* --- większe ekrany ---------------------------------------------------- */

@media (min-width: 640px) {
  .kjw-section { padding: 5rem 0; }
  .kjw-section--tight { padding-top: 3.5rem; padding-bottom: 1rem; }
  .kjw-section--top-tight { padding-top: 0; }
  .kjw-section--brand { padding: 5rem 0; }

  .kjw-title { font-size: 3rem; }
  .kjw-h2 { font-size: 1.5rem; }
  .kjw-statement { font-size: 1.5rem; }
  .kjw-stat { font-size: 4.5rem; }
  .kjw-outro__title { font-size: 1.875rem; }

  .kjw-split__media { height: 520px; }
  .kjw-banner { height: 20rem; }

  .kjw-arrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Musi być PO .kjw-arrows — ta sama specyficzność, decyduje kolejność. */
  .kjw-arrows--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kjw-invite { font-size: 1.5rem; }
  .kjw-arrows--three li { font-size: 1.125rem; }
  .kjw-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kjw-teachers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kjw-teacher__media { width: 11rem; height: 11rem; }
  .kjw-sheet__panel { padding: 2.5rem 2.25rem 3.5rem; }
}

@media (min-width: 768px) {
  .kjw-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
}

@media (min-width: 1024px) {
  .kjw-teachers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .kjw-sheet__overlay,
  .kjw-sheet__panel,
  .kjw-teacher__image {
    animation: none;
    transition: none;
  }
}