/* ==========================================================================
   Anahata Healing Centre (anahata.love)
   Etap 12: static home. Tokeny: tokens.md. Kolory WYŁĄCZNIE przez var(--...).
   ========================================================================== */

:root {
  /* kolory (tokens.md, sekcja 1) */
  --c-green: #2E5E4E;
  --c-green-deep: #15271F;
  --c-gold: #C2A24E;
  --c-gold-light: #E4CF93;
  --c-cream: #F8F4EB;
  --c-sand: #EFE6D4;
  --c-ink: #26302A;
  --c-ink-soft: #5A625C;
  --c-on-dark: #F3EEE0;
  --c-alert: #6D2A37;  /* burgund - SEMANTYCZNY status/alert (brak miejsc, błędy form, pilne). Jedyny nie-markowy akcent, NIGDY ozdobnie */

  /* typografia (tokens.md, sekcja 2) */
  --font-display: 'Cinzel', serif;
  --font-head: 'Cinzel', serif;
  --font-body: 'Mona Sans', sans-serif;

  /* ===== SKALA TYPOGRAFICZNA — JEDYNE ŹRÓDŁO ROZMIARÓW =====
     9 stopni: 4 nagłówki + lead + big + body + small + eyebrow. Skala ~1.18-1.25.
     Sekcje i podstrony używają WYŁĄCZNIE tych zmiennych; zero font-size na
     sztywno (jedyny wyjątek: .k360-hero-title-sub = 0.5em, proporcjonalny do H1).
     h5/h6 nieużywane na home - dodaj, gdy podstrona będzie potrzebować. */
  --fs-eyebrow: 0.875rem;   /* etykiety uppercase: eyebrow sekcji, nav, logo, kickery, przyciski */
  --fs-small:   0.9375rem;  /* drobny tekst: meta, noty, podpisy, dane, liczniki, copyright */
  --fs-body:    1.125rem;   /* tekst podstawowy (p) */
  --fs-big:     1.25rem;    /* większy tekst: pozycje list, nagłówki kolumn, hero-lead, wyróżnienia */
  --fs-lead:    1.375rem;   /* leady, intro sekcji, statementy */
  --fs-h3:      clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem); /* podtytuły, tytuły kart/paneli, cytaty */
  --fs-h2:      clamp(1.9rem, 1.35rem + 1.9vw, 2.6rem); /* główne tytuły sekcji */
  --fs-h1:      clamp(2.4rem, 1.6rem + 3.2vw, 4.1rem);  /* tytuł hero/strony, duża liczba 100% */

  /* skala odstępów: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 128 */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;
  --s8: 8rem;

  --wrap: 1320px;
  --radius: 12px;
  --section-y: clamp(5rem, 9vw, 8rem);
  /* wspólna oś splitów 2-kolumnowych: ten sam gap w każdej sekcji,
     żeby prawa kolumna zaczynała się w jednej linii przez całą stronę */
  --gap-split: clamp(2.5rem, 4vw, 4.5rem);

  /* ===== TOKENY TREATMENTU (skin-ready) — kontrakt K360 =====
     Każdy rozwija się do dokładnie obecnej wartości; podmiana jednym theme.json.
     Literały podmienione na te zmienne w całym pliku (zero zmiany wyglądu). */
  --radius-media: var(--radius);          /* zaokrąglenie zdjęć (.ph) = 12px */
  --btn-radius: 999px;                     /* pill przycisków */
  --input-radius: 999px;                   /* pill inputów (newsletter/kontakt) */
  --textarea-radius: 18px;                 /* miękki textarea */
  --head-transform: uppercase;             /* wielkość liter nagłówków h1-h3 */
  --head-tracking: 0.04em;                 /* tracking nagłówków h1-h3 */
  --shadow-media: 0 30px 60px -34px color-mix(in srgb, var(--c-green-deep) 50%, transparent);       /* cień zdjęć entry/about */
  --shadow-media-soft: 0 26px 50px -34px color-mix(in srgb, var(--c-green-deep) 45%, transparent);  /* lżejszy cień (blog) */
  --bg-dark: var(--c-green-deep) url('assets/background.png') center / cover no-repeat;              /* ciemny band: hero/pasek/proof/footer */
  /* proporcje layoutu splitów (asymetryczne gridy) */
  --ratio-entry: 55fr 45fr;
  --ratio-entry-rev: 45fr 55fr;
  --ratio-about: minmax(0, 5fr) minmax(0, 6fr);
  --ratio-cta: 1.35fr 1fr;
}

/* --------------------------------------------------------------------------
   Reset i baza
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: inherit;            /* nagłówek bierze kolor sekcji - zero nadpisań per sekcja */
  margin: 0 0 var(--s4);
  letter-spacing: var(--head-tracking);
  /* jednolite wielkie litery: Cinzel domyślnie miesza kapitaliki (duże/małe) */
  text-transform: var(--head-transform);
}

h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
a:hover { color: var(--c-gold); }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--c-gold-light); color: var(--c-green-deep); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* kotwice nie chowają się pod fixed headerem */
section[id] { scroll-margin-top: 84px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-green-deep);
  color: var(--c-on-dark);
  padding: var(--s2) var(--s3);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Komponenty: piórko (ikona), obróbka zdjęć
   -------------------------------------------------------------------------- */

.feather { flex: none; }

/* spójna obróbka zdjęć: lekka zielona mgiełka skleja różne sesje */
.ph { position: relative; overflow: hidden; border-radius: var(--radius-media); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--c-green-deep));
  opacity: 0.14;
  pointer-events: none;
}

/* ==========================================================================
   K360: Header + 1. Hero + 2. Pasek zaufania (mobile-first)
   Sekcje gotowe do ekstrakcji: /sections/header.php, /sections/hero.php
   ========================================================================== */

/* ---- przyciski hero (premium: pill, uppercase, złoto na ciemnym) ---- */

.k360-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  /* było white-space:nowrap — na mobile długie etykiety rozpychały kontener/grid
     poza ekran (hero, CTA band, sesje). Auto-width buttony i tak zostają w 1 linii
     na desktop; zawijają dopiero gdy zabraknie miejsca. */
  white-space: normal;
  overflow-wrap: break-word;
  padding: 1.1em 2.3em;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.k360-btn-gold { background: var(--c-gold); color: var(--c-green-deep); }
.k360-btn-gold:hover { background: var(--c-gold-light); color: var(--c-green-deep); }
.k360-btn-ghost { border-color: color-mix(in srgb, var(--c-gold) 60%, transparent); color: var(--c-on-dark); }
.k360-btn-ghost:hover { border-color: var(--c-gold-light); color: var(--c-gold-light); }
/* outline na jasnym tle (sekcje sand/cream): zielony, drugorzędny */
.k360-btn-line { border-color: var(--c-green); color: var(--c-green); }
.k360-btn-line:hover { background: var(--c-green); color: var(--c-cream); }
/* zielony pełny: akcje drugorzędne na jasnym tle (np. submit formularza) - nie złoty */
.k360-btn-green { background: var(--c-green); color: var(--c-cream); cursor: pointer; }
.k360-btn-green:hover { background: var(--c-green-deep); color: var(--c-cream); }

/* ---- header: transparentny nad hero, ciemny po scrollu ---- */

.k360-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.k360-header.is-scrolled,
.k360-header.is-open {
  background: color-mix(in srgb, var(--c-green-deep) 96%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: color-mix(in srgb, var(--c-gold) 22%, transparent);
}

.k360-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
  padding-block: clamp(0.5rem, 1.4vw, 0.9rem);
}

.k360-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--c-gold);
  text-decoration: none;
  white-space: nowrap;
}
.k360-logo:hover { color: var(--c-gold-light); }
.k360-logo-img { display: block; width: auto; height: clamp(40px, 6vw, 60px); }

.k360-nav-toggle {
  background: none;
  border: none;
  padding: var(--s2);
  cursor: pointer;
  color: var(--c-on-dark);
}
.k360-nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
}

.k360-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  background: var(--c-green-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 22%, transparent);
}
.k360-nav.is-open { display: block; }
.k360-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--s3) clamp(1.25rem, 4vw, 2.5rem) var(--s4);
  display: flex;
  flex-direction: column;
}
.k360-nav a {
  display: block;
  padding: var(--s3) 0;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--c-on-dark) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.k360-nav a:hover { color: var(--c-gold-light); }
.k360-nav a[aria-current='page'] { color: var(--c-gold); }

/* ---- hero: warstwy (tekstura zieleni / zdjęcie / scrim / treść) ---- */

.k360-hero {
  position: relative;
  background: var(--bg-dark);
  color: var(--c-on-dark);
  overflow: clip;
}

.k360-hero-inner {
  position: relative;
  z-index: 3;
  padding-top: calc(68px + var(--s6));
  padding-bottom: var(--s2);
}

.k360-hero-content { max-width: 700px; }


.k360-hero-title {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: 0.015em;
  color: var(--c-cream);
  margin-bottom: var(--s4);
}
.k360-hero-title-sub {
  display: block;
  margin-top: 0.6em;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: var(--c-gold-light);
}

.k360-hero-lead {
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: color-mix(in srgb, var(--c-on-dark) 88%, transparent);
  max-width: 50ch;
  margin-bottom: var(--s5);
}

.k360-hero-cta {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: stretch;
}
/* długie etykiety (np. „Discover the transformation program") mają się zawinąć
   w pełnoszerokościowym przycisku na mobile zamiast wystawać poza ekran */
.k360-hero-cta .k360-btn { white-space: normal; }

/* mobile: zdjęcie pod treścią, wtopione w zieleń od góry i od dołu */
.k360-hero-visual {
  position: relative;
  z-index: 1;
  margin-top: var(--s5);
  height: min(62vh, 540px);
}
.k360-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.k360-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--c-green-deep) 24%, transparent), color-mix(in srgb, var(--c-green-deep) 24%, transparent)),
    linear-gradient(180deg, var(--c-green-deep) 0%, transparent 34%),
    linear-gradient(0deg, var(--c-green-deep) 0%, transparent 26%);
}

.k360-hero-ornament {
  display: none;
  position: absolute;
  z-index: 2;
  right: 5%;
  top: 16%;
  color: var(--c-gold);
  opacity: 0.55;
  transform: rotate(-18deg);
}

/* ---- pasek zaufania: kompaktowy 4-kolumnowy expertise strip ---- */

.k360-expertise-strip {
  background: var(--bg-dark);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 16%, transparent);
  color: var(--c-on-dark);
  padding-block: var(--s5);
}
.k360-expertise-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.k360-expertise-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-on-dark) 95%, transparent);
  padding: var(--s3) var(--s4);
  text-wrap: balance;
}
.k360-expertise-strip-item + .k360-expertise-strip-item {
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 14%, transparent);
}

@media (min-width: 600px) {
  .k360-expertise-strip-list { grid-template-columns: repeat(2, 1fr); }
  .k360-expertise-strip-item + .k360-expertise-strip-item { border-top: 0; }
  .k360-expertise-strip-item:nth-child(even) {
    border-left: 1px solid color-mix(in srgb, var(--c-gold) 18%, transparent);
  }
  .k360-expertise-strip-item:nth-child(n+3) {
    border-top: 1px solid color-mix(in srgb, var(--c-gold) 14%, transparent);
  }
}

@media (min-width: 1000px) {
  .k360-expertise-strip { padding-block: var(--s6); }
  .k360-expertise-strip-list { grid-template-columns: repeat(4, 1fr); }
  .k360-expertise-strip-item { padding: var(--s2) var(--s4); }
  .k360-expertise-strip-item:nth-child(n+2) {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--c-gold) 18%, transparent);
  }
}

/* ---- desktop ---- */

@media (min-width: 700px) {
  .k360-logo { font-size: var(--fs-body); }
  .k360-hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 1000px) {
  .k360-nav-toggle { display: none; }
  .k360-nav {
    position: static;
    display: block;
    background: none;
    border: 0;
  }
  .k360-nav ul {
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.9rem);
    padding: 0;
  }
  .k360-nav a { padding: 0.4em 0; font-size: var(--fs-eyebrow); }
  .k360-nav a[aria-current='page'] { border-bottom-color: var(--c-gold); }

  /* hero: zdjęcie jako warstwa po prawej, treść wycentrowana w pionie */
  .k360-hero {
    display: flex;
    align-items: center;
    /* wypełnia ekran na typowych wysokościach, ale nie rośnie w nieskończoność
       na wysokich monitorach / przy oddaleniu (treść nie tonie w pustce) */
    min-height: clamp(640px, 100svh, 920px);
  }
  .k360-hero-inner {
    width: 100%;
    padding-block: calc(68px + var(--s6)) var(--s7);
  }
  .k360-hero-visual {
    position: absolute;
    inset: 0 0 0 28%;
    margin: 0;
    height: auto;
    /* maska alfa rozpuszcza lewą krawędź zdjęcia w teksturze tła
       (czerń w masce to tylko kanał krycia, nie kolor marki) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  }
  .k360-hero-image { object-position: 55% 20%; }
  .k360-hero-visual::before {
    background:
      linear-gradient(color-mix(in srgb, var(--c-green-deep) 26%, transparent), color-mix(in srgb, var(--c-green-deep) 26%, transparent)),
      linear-gradient(90deg, var(--c-green-deep) 0%, color-mix(in srgb, var(--c-green-deep) 45%, transparent) 34%, transparent 62%),
      linear-gradient(180deg, color-mix(in srgb, var(--c-green-deep) 78%, transparent) 0%, color-mix(in srgb, var(--c-green-deep) 38%, transparent) 14%, transparent 30%),
      linear-gradient(0deg, var(--c-green-deep) 0%, transparent 16%);
  }

}

@media (min-width: 1200px) {
  .k360-hero-ornament { display: block; }
}

/* --------------------------------------------------------------------------
   Globalne prymitywy głowy sekcji (.k360-eyebrow / .k360-head / .k360-lead)
   + 3. Dla kogo (k360-audience: głowa pełnej szerokości + lista 2-kol)
   -------------------------------------------------------------------------- */

/* wspólny eyebrow sekcji jasnych */
.k360-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--s3);     /* margines wbudowany - zero nadpisań w sekcjach */
}

/* GŁOWA SEKCJI (uniwersalna): wycentrowany eyebrow + h2 + lead.
   Sekcja = <div class="k360-head"><p class="k360-eyebrow">..<h2>..<p class="k360-lead">.. */
.k360-head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--s6);
}

/* LEAD/INTRO (uniwersalny): jeden styl globalny. Kolor = przyciemniony kolor
   sekcji (currentColor), więc działa na jasnym i ciemnym tle bez nadpisań. */
.k360-lead {
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: color-mix(in srgb, currentColor 72%, transparent);
  max-width: 58ch;
  margin: var(--s4) 0 0;
}
.k360-head .k360-lead { margin-inline: auto; }  /* w wycentrowanej głowie lead też centrowany */

/* layout: głowa pełnej szerokości (eyebrow + duży 2-liniowy H2 + intro),
   pod nią lista rozpoznań 2-kolumnowa, na dole separator + zdanie domykające.
   Mobile-first: 1 kolumna. Marker pozycji = małe złote piórko (#i-feather). */
.k360-audience {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3.25rem);
}
.k360-audience-head { margin-bottom: 2rem; }        /* odstęp głowa -> lista */
.k360-audience-head h2 { margin-bottom: 0; }        /* odstęp daje head, nie h2 */
.k360-audience-head .k360-lead { max-width: 52ch; } /* węższe intro */

.k360-audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
}
.k360-audience-item {
  position: relative;
  font-weight: 300;
  font-size: var(--fs-big);
  line-height: 1.65;
  color: var(--c-ink);
  padding-left: var(--s4);
}
/* marker: małe złote piórko (stroke=currentColor), przygaszone - ma szeptać */
.k360-audience-mark {
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 12px;
  color: var(--c-gold);
  opacity: 0.6;
}

/* belka domykająca: separator + wycentrowane zdanie zamykające */
.k360-audience-closing {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 32%, transparent);
  text-align: center;
}
.k360-audience-closing p {
  max-width: 54ch;
  margin: 0 auto;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-green);
}

@media (min-width: 700px) {
  /* lista 2-kolumnowa: zawężony obszar (punkty się nie rozciągają), oddech
     między kolumnami; tekst łamie się naturalnie */
  .k360-audience-list {
    grid-template-columns: 1fr 1fr;
    max-width: 1080px;
    gap: var(--s5) clamp(2.5rem, 4.5vw, 4rem);
  }
}
@media (min-width: 900px) {
  .k360-audience-closing { margin-top: var(--s6); padding-top: var(--s6); }
}

/* --------------------------------------------------------------------------
   4. Oferta wiodąca (program)
   -------------------------------------------------------------------------- */

/* band produktowy: wycentrowany, na ozdobnym tle bg3 (złote mandale),
   bez zdjęcia - produkt jest niematerialny (program/mentoring) */
.k360-offer {
  background: var(--c-green-deep) url('assets/bg3.png') center / cover no-repeat;
  color: var(--c-on-dark);
  padding-block: clamp(4.5rem, 8vw, 7rem);
  position: relative;
}
/* lekki scrim pod treść: mandale w rogach zostają, środek wyciszony */
.k360-offer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, color-mix(in srgb, var(--c-green-deep) 55%, transparent), transparent 70%);
  pointer-events: none;
}
.k360-offer-inner {
  position: relative;
  max-width: 940px;
  text-align: center;
}
.k360-offer-title {
  color: var(--c-cream);
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}
.k360-offer-desc {
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: color-mix(in srgb, var(--c-on-dark) 88%, transparent);
  max-width: 58ch;
  margin: 0 auto var(--s5);
}
.k360-offer-features {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: grid;
  text-align: center;
}
.k360-offer-feature {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: color-mix(in srgb, var(--c-on-dark) 82%, transparent);
  padding: var(--s3) var(--s4);
  max-width: 44ch;
  margin-inline: auto;
}
.k360-offer-feature strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin-bottom: var(--s2);
}
.k360-offer-feature + .k360-offer-feature {
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 14%, transparent);
}
@media (min-width: 800px) {
  .k360-offer-features { grid-template-columns: repeat(3, 1fr); }
  /* nagłówek cechy = stała wysokość 2 linii, by opisy w 3 kolumnach startowały równo */
  .k360-offer-feature strong { min-height: 2.6em; }
  .k360-offer-feature + .k360-offer-feature {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--c-gold) 18%, transparent);
  }
}

/* --------------------------------------------------------------------------
   5. Ścieżki wejścia (k360-entry: dwa równe editorial-rows, etykiety, bez kart)
   -------------------------------------------------------------------------- */

.k360-entry {
  background: var(--c-sand);
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: var(--section-y);
}

/* nieco mniejszy nagłówek; łamany na 2 linie przez <br> w HTML */

.k360-entry-item { margin-bottom: var(--s5); }
.k360-entry-item:last-child { margin-bottom: 0; }

/* metryczka czas/cena (tylko sesja na żywo - online bez ceny: świadomie) */
.k360-entry-meta {
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--c-green);
  margin-bottom: var(--s4);
}

/* zdjęcie "pływające": miękki cień podłogowy, nie karta */
.k360-entry-media {
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-media);
}
.k360-entry-media img { aspect-ratio: 3 / 2; object-position: 50% 38%; }
/* portret online: kadr wyżej, żeby nie ucinać twarzy */
.k360-entry-item--rev .k360-entry-media img { object-position: 50% 18%; }

/* etykieta NA ŻYWO / ONLINE (zamiast numeru - audyt) */
.k360-entry-text h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s3);
}
.k360-entry-text p {
  color: var(--c-ink-soft);
  max-width: 42ch;
  margin-bottom: var(--s5);
}
/* ---- Moja droga: 3 rozdziały editorial (k360-chapter) ----
   Naprzemienny układ foto|tekst. Tytuł rozdziału W KOLUMNIE TEKSTU (nad akapitem),
   subtelny serif zielony (NIE wersaliki, mniejszy niż H2 sekcji). Zdjęcie węższe
   od kolumny tekstu, wyrównanie do góry - tekst i tytuł nie toną w pustce. */
.k360-chapter { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.k360-chapter:last-child { margin-bottom: 0; }
.k360-chapter-title {
  color: var(--c-green);
  text-transform: none;
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  margin: 0 0 var(--s4);
}
.k360-chapter-media { box-shadow: var(--shadow-media); margin-bottom: var(--s4); }
.k360-chapter-media img { aspect-ratio: 4 / 5; object-position: 50% 22%; }
.k360-chapter-text p { color: var(--c-ink-soft); }

@media (min-width: 820px) {
  /* zdjęcie = węższa kolumna (do 440px), tekst+tytuł = szersza; góra do góry */
  .k360-chapter-row {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: var(--gap-split);
    align-items: start;
  }
  .k360-chapter-media { margin-bottom: 0; grid-column: 1; grid-row: 1; }
  .k360-chapter-text { grid-column: 2; grid-row: 1; max-width: 48ch; }
  /* wariant odwrócony: tekst lewo, zdjęcie prawo */
  .k360-chapter--rev .k360-chapter-row { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .k360-chapter--rev .k360-chapter-media { grid-column: 2; grid-row: 1; }
  .k360-chapter--rev .k360-chapter-text { grid-column: 1; grid-row: 1; justify-self: end; }
}

@media (min-width: 820px) {
  /* zbalansowany editorial split: oba rzędy 55/45, naprzemiennie strony,
     zdjęcia tej samej wagi/proporcji/cienia (nie 50/50, nie 60/40) */
  .k360-entry-item {
    display: grid;
    grid-template-columns: var(--ratio-entry);
    gap: var(--gap-split);
    align-items: center;
    margin-bottom: clamp(3.5rem, 5vw, 5rem);
  }
  .k360-entry-media { margin-bottom: 0; grid-column: 1; grid-row: 1; }
  .k360-entry-text { grid-column: 2; grid-row: 1; }
  /* rząd 2: tekst lewo (45%), zdjęcie prawo (55%) - równa waga.
     grid-row: 1 wymusza oba elementy w tym samym wierszu (inaczej tekst
     z grid-column:1 po zdjęciu w col:2 spada do nowego wiersza) */
  .k360-entry-item--rev { grid-template-columns: var(--ratio-entry-rev); }
  .k360-entry-item--rev .k360-entry-media { grid-column: 2; grid-row: 1; }
  .k360-entry-item--rev .k360-entry-text { grid-column: 1; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   6. Jak pracuję
   -------------------------------------------------------------------------- */

/* Metoda: filary jako interaktywne taby (desktop) / lista (mobile).
   Tło kremowe = jaśniejsze niż piaskowa sekcja sesji powyżej (rytm tonalny,
   przerwanie monotonii układu split). Bez zdjęcia (nie recyklujemy kadru
   z sesji; sekcja metodyczna, nie produktowa). */
.k360-method {
  background: var(--c-cream);
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: var(--section-y);
}


/* nawigacja filarów: ukryta dopóki JS jej nie włączy (bez JS lista paneli
   jest w pełni widoczna i czytelna) */
.k360-method-nav { display: none; }

.k360-method-panels { position: relative; }

/* duże, wyciszone piórko jako znak marki w tle panelu (tylko desktop) */
.k360-method-leaf {
  display: none;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  color: var(--c-gold);
  opacity: 0.1;
  pointer-events: none;
}

.k360-method-panel { position: relative; }
.k360-method-panel + .k360-method-panel {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 28%, transparent);
}
.k360-method-panel-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: var(--s2);
}
.k360-method-panel h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s3);
}
.k360-method-panel p {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-soft);
  max-width: 54ch;
  margin: 0;
}

/* ---- desktop: dwie kolumny, taby po lewej + aktywny panel po prawej ----
   Struktura wg sprawdzonej starej wersji (.essence): pionowa krecha NALEŻY
   do panelu (lewa krawędź panelu), a tekst panelu jest odsunięty za nią
   paddingiem - dzięki temu krecha nigdy nie nachodzi na tekst. Aktywny tab
   ma wycentrowany złoty pasek (::before), nie pełnowysoki border. */
@media (min-width: 860px) {
  .k360-method-body.is-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
  }

  .k360-method-body.is-enhanced .k360-method-nav {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .k360-method-tab {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--s4);
    width: 100%;
    padding: 1.15rem 1.5rem 1.15rem 1.4rem;
    background: none;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 22%, transparent);
    text-align: left;
    cursor: pointer;
    color: var(--c-ink-soft);
    transition: color 0.25s ease;
  }
  .k360-method-nav li:first-child .k360-method-tab {
    border-top: 1px solid color-mix(in srgb, var(--c-gold) 22%, transparent);
  }
  /* wycentrowany złoty marker aktywnego filaru */
  .k360-method-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 60%;
    background: var(--c-gold);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }
  .k360-method-tab.is-active::before { transform: translateY(-50%) scaleY(1); }
  .k360-method-num {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0.12em;
    color: var(--c-gold);
    min-width: 2.2ch;
  }
  .k360-method-name {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: var(--fs-big);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.25;
  }
  .k360-method-tab:hover { color: var(--c-green); }
  .k360-method-tab:focus-visible { outline: none; color: var(--c-green); }
  .k360-method-tab:focus-visible::before { transform: translateY(-50%) scaleY(1); }
  .k360-method-tab.is-active { color: var(--c-green); }
  .k360-method-tab.is-active .k360-method-name { color: var(--c-green); }

  /* prawa kolumna: panel z pionową krechą po lewej (jak .essence) */
  .k360-method-panels {
    padding: 0.4rem 0 0.4rem clamp(1.75rem, 3vw, 2.6rem);
    max-width: 30rem;
  }
  .k360-method-panels::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 1px;
    height: 13rem;
    background: var(--c-gold);
    opacity: 0.55;
  }
  .k360-method-body.is-enhanced .k360-method-leaf { display: block; }

  .k360-method-body.is-enhanced .k360-method-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  /* tylko aktywny panel widoczny po włączeniu JS */
  .k360-method-body.is-enhanced .k360-method-panel { display: none; }
  .k360-method-body.is-enhanced .k360-method-panel.is-active {
    display: block;
    animation: k360-method-fade 0.4s ease both;
  }
  .k360-method-body.is-enhanced .k360-method-panel-num { display: none; }
  .k360-method-panel h3 {
    font-size: var(--fs-h3);
    color: var(--c-green);
  }
  .k360-method-panel p { font-size: var(--fs-body); line-height: 1.8; }
}

@keyframes k360-method-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .k360-method-body.is-enhanced .k360-method-panel.is-active { animation: none; }
}

/* --------------------------------------------------------------------------
   7. Dowód (opinie)
   -------------------------------------------------------------------------- */

/* Dowód: kompozycja redakcyjna (agregat-stat + rotator opinii). Bez kart -
   de-kartonizacja; hierarchia przez skalę i asymetrię. Tło CIEMNOZIELONE
   (decyzja Tomasza 2026-06-14): kotwica przełamująca beżowy środek strony,
   "100%" świeci na zieleni. Tekstura background.png jak hero/pasek/footer
   (NIE bg3-mandala = to nie band sprzedażowy). Źródło: testimonials.txt (FB). */
.k360-proof {
  background: var(--bg-dark);
  color: var(--c-on-dark);
  padding-block: var(--section-y);
}
/* mniejszy odstęp głowa->rotator (globalny .k360-head s6 = za dużo pustki nad
   cytatem); scoped do .k360-proof - dotyczy home i podstron jednolicie */
.k360-proof .k360-head { margin-bottom: var(--s4); }


/* rotator opinii: WYCENTROWANY (stat 100% + krecha usunięte - decyzja Tomasza).
   bez JS wszystkie slajdy widoczne (stack, hairline); z JS jeden + nawigacja */
.k360-proof-slider {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.k360-proof-slide { margin: 0; position: relative; }
.k360-proof-slide + .k360-proof-slide {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 22%, transparent);
}
.k360-proof-slide::before {
  content: '\201E';
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  line-height: 0.6;
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--s2);
}
.k360-proof-slide blockquote {
  margin: 0 auto;
  max-width: 56ch;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-cream);
}
.k360-proof-slide figcaption {
  margin-top: var(--s4);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--c-on-dark) 70%, transparent);
}
.k360-proof-name {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-gold-light);
  margin-right: var(--s2);
}

/* nawigacja (strzałki + licznik) - tylko po włączeniu JS */
.k360-proof-nav { display: none; }
.k360-proof-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--c-gold) 50%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--c-on-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.k360-proof-arrow:hover { background: var(--c-gold); color: var(--c-green-deep); border-color: var(--c-gold); }
.k360-proof-arrow:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.k360-proof-counter {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--c-on-dark) 75%, transparent);
  min-width: 5ch;
  text-align: center;
}
/* wyciszony podpis-źródło pod rotatorem (weryfikowalny agregat FB, taktownie -
   nie w leadzie; na home stat usunięty świadomie, tu zostaje jako mała nota) */
.k360-proof-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: var(--s5) 0 0;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--c-on-dark) 56%, transparent);
}
.k360-proof-source .k360-social-icon { color: var(--c-gold); opacity: 0.85; }

/* tryb JS: jeden slajd naraz + widoczna nawigacja */
.k360-proof-slider.is-enhanced .k360-proof-track { min-height: clamp(5.5rem, 12vh, 8rem); }
.k360-proof-slider.is-enhanced .k360-proof-slide {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.k360-proof-slider.is-enhanced .k360-proof-slide.is-active {
  display: block;
  animation: k360-proof-fade 0.4s ease both;
}
.k360-proof-slider.is-enhanced .k360-proof-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s5);
}

@keyframes k360-proof-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .k360-proof-slider.is-enhanced .k360-proof-slide.is-active { animation: none; }
}


/* --------------------------------------------------------------------------
   8. O mnie (skrót)
   -------------------------------------------------------------------------- */

.k360-about { padding-block: var(--section-y); }

.k360-about-grid {
  display: grid;
  grid-template-columns: var(--ratio-about);
  gap: clamp(var(--s5), 6vw, var(--s8));
  align-items: center;
}

/* zdjęcie pływające: radius + miękki cień podłogowy (jak sekcja sesji), bez ramek */
.k360-about-media {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-media);
}
.k360-about-media img { object-position: 50% 22%; }

.k360-about-copy p { max-width: 56ch; }
.k360-about-copy .k360-btn { margin-top: var(--s5); }

/* --------------------------------------------------------------------------
   12. Blog (najnowsze wpisy: foto + tytuł)
   -------------------------------------------------------------------------- */

.k360-blog { background: var(--c-cream); padding-block: var(--section-y); }


.k360-blog-grid { display: grid; gap: var(--gap-split); }

/* "Wszystkie wpisy" jako wycentrowany przycisk pod kartami (nie link w rogu) */
.k360-blog-more {
  text-align: center;
  margin-top: var(--s6);
}

.k360-blog-card { display: block; text-decoration: none; color: inherit; }
.k360-blog-media {
  aspect-ratio: 3 / 2;
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-media-soft);
}
.k360-blog-card:first-child .k360-blog-media img { object-position: 50% 26%; }
.k360-blog-media img { transition: transform 0.5s ease; }
.k360-blog-card:hover .k360-blog-media img { transform: scale(1.04); }
/* tytuł wpisu: czytelny (Montserrat, normalna wielkość liter - NIE wersaliki) */
.k360-blog-title {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-big);
  line-height: 1.35;
  color: var(--c-ink);
  margin: 0;
  max-width: 30ch;
  transition: color 0.2s ease;
}
.k360-blog-card:hover .k360-blog-title { color: var(--c-green); }

@media (min-width: 680px) {
  .k360-blog-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   9. Atmosfera (galeria)
   -------------------------------------------------------------------------- */

/* Atmosfera: galeria contained editorial, 1 duże + 5 wspierających.
   Asymetryczny grid (nie masonry, nie full-bleed). Spójny radius, bez kart,
   bez ciężkich cieni. Tło PIASKOWE: alternacja tonalna po przeniesieniu bloga
   (o-mnie krem -> atmosfera sand -> faq krem; wcześniej 3x krem pod rząd). */
.k360-gallery { background: var(--c-sand); padding-block: var(--section-y); }


/* galeria: STEROWALNE rzędy. Każdy .k360-gallery-row to osobny rząd; kafle
   rosną proporcjonalnie do --r (proporcja zdjęcia) z flex-basis 0, więc
   szerokość ~ proporcji => WSZYSTKIE w rzędzie mają RÓWNĄ wysokość, rząd
   wypełnia całą szerokość, zdjęcia w CAŁOŚCI (bez przycięcia), dolna krawędź
   prosta. Zero JS - kompozycję rzędów ustawiasz w HTML (ile zdjęć, jakie).
   Działa płynnie na każdej szerokości (rzędy skalują się same). */
.k360-gallery-grid {
  --gallery-gap: clamp(0.6rem, 1vw, 0.9rem);
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}
.k360-gallery-row {
  display: flex;
  gap: var(--gallery-gap);
}
.k360-gallery-grid .ph {
  flex: var(--r, 1) 1 0;       /* grow ~ proporcji zdjęcia */
  aspect-ratio: var(--r, 1);   /* wysokość z szerokości => równa w rzędzie */
  min-width: 0;
}
.k360-gallery-grid .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* proporcja kafla == zdjęcia => brak przycięcia */
  display: block;
  transition: transform 0.5s ease;
}
.k360-gallery-grid .ph:hover img { transform: scale(1.04); }

/* mobile: mniej na szerokość - rzędy "rozpływają się", zdjęcia w 2 kolumny
   (masonry), wciąż całe (height auto). */
@media (max-width: 600px) {
  .k360-gallery-grid {
    display: block;
    column-count: 2;
    column-gap: var(--gallery-gap);
  }
  .k360-gallery-row { display: contents; }
  .k360-gallery-grid .ph {
    display: block;
    width: 100%;
    aspect-ratio: auto;
    break-inside: avoid;
    margin-bottom: var(--gallery-gap);
  }
  .k360-gallery-grid .ph img { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .k360-gallery-grid .ph:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   14. Newsletter (lead magnet)
   -------------------------------------------------------------------------- */

/* Kompaktowy blok zapisu + ebook. Mikro-konwersja TUŻ PRZED STOPKĄ (najniższe
   zobowiązanie = koniec lejka: program -> kontakt -> newsletter). Dwie kolumny:
   tekst | formularz. Bez kart, bez ikon.
   TŁO: dedykowany baner assets/bg_cream.png (2172x724: czysty kremowy środek
   pod tekst, botanika + złota mandala w rogach), bez welonu - środek jest już
   jasny. Padding obniżony: slim pasek domykający stronę przed stopką. */
.k360-newsletter {
  position: relative;
  background: var(--c-cream) url('assets/bg_cream.png') center / cover no-repeat;
  padding-block: clamp(2.25rem, 3.5vw, 3.5rem);
  overflow: hidden;
}

.k360-newsletter-inner {
  position: relative;          /* nad teksturą */
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
/* forma węższa i dosunięta do tekstu -> mniej "rozstrzelone" w szerokim kontenerze */
.k360-newsletter-form-col { max-width: 470px; }

.k360-newsletter-desc {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin: 0;
}

.k360-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.k360-newsletter-form label {
  flex: 100%;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.k360-newsletter-form input[type='email'] {
  flex: 1 1 12rem;
  min-width: 0;
  border-radius: var(--input-radius);    /* pełny pill, jak przycisk; przycisk bez zmian */
  padding-inline: 1.25em;  /* więcej luzu w bok przy zaokrągleniu */
}
.k360-newsletter-form .k360-btn { flex: 0 0 auto; }

.k360-newsletter-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: none;            /* wypełnia kolumnę formularza → nota mieści się w 2 liniach */
  margin: var(--s3) 0 0;
}

@media (min-width: 780px) {
  .k360-newsletter-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .k360-newsletter-form-col { justify-self: start; }
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */

/* FAQ: jedna kolumna, dynamiczny akordeon (natywny details, "jeden naraz" przez
   name="faq"). Cały blok zwężony do ~1000px i wyrównany do jednego kontenera -
   bez imbalansu nagłówek/lista. Bez kart, bez cieni - tylko hairline'y. */
.k360-faq { padding-block: var(--section-y); }
.k360-faq-inner { max-width: 1000px; margin-inline: auto; }


.k360-faq-list details {
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 35%, transparent);
}
.k360-faq-list details:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 35%, transparent);
}
.k360-faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: var(--fs-body);
  padding: var(--s4) 0;
  transition: color 0.2s ease;
}
.k360-faq-list summary::-webkit-details-marker { display: none; }
.k360-faq-list summary::after {
  content: '+';
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  color: var(--c-gold);
  flex: none;
  line-height: 1;
  transition: transform 0.25s ease;
}
.k360-faq-list details[open] summary { color: var(--c-green); }
.k360-faq-list details[open] summary::after { transform: rotate(45deg); }
.k360-faq-list summary:hover { color: var(--c-green); }
.k360-faq-list summary:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.k360-faq-answer {
  padding: 0 0 var(--s4);
  color: var(--c-ink-soft);
  max-width: 720px;
}
.k360-faq-answer p { line-height: 1.75; margin: 0; }

/* --------------------------------------------------------------------------
   11. CTA końcowy
   -------------------------------------------------------------------------- */

/* Finalny CTA: ciemny zielony band, dwie kolumny - obietnica+CTA | recap programu.
   Recap zwięzły/editorial (nie karta, nie druga sekcja programu). */
.k360-cta {
  /* bg3: złota mandala (z sercem) po prawej, botanika po bokach, bez świec;
     center right -> mandala trzyma się prawej, lewa zostaje ciemna pod tekst */
  background: var(--c-green-deep) url('assets/bg3.png') right center / cover no-repeat;
  color: var(--c-on-dark);
  padding-block: clamp(var(--s6), 8vw, 7rem);
  position: relative;
}
/* lekki scrim: tekstura bg3 (liście, poświata) widoczna też po lewej, tekst
   wciąż czytelny (lewa bg3 jest ciemnozielona) */
.k360-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-green-deep) 50%, transparent) 0%, color-mix(in srgb, var(--c-green-deep) 22%, transparent) 45%, transparent 70%);
}
.k360-cta-inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, var(--gap-split));
  align-items: center;
}

.k360-cta-desc {
  color: var(--c-on-dark);
  font-weight: 300;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 var(--s5);
  opacity: 0.92;
}
.k360-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
}
/* recap programu: bez karty - hairline'y między pozycjami */
.k360-cta-summary-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-lead);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin: 0 0 var(--s4);
}
.k360-cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* czysta lista bez separatorów - spokojny odstęp, większa czcionka (była za mała
   przy dużym nagłówku); ramuje ją pionowa złota krecha kolumny */
.k360-cta-list li {
  padding: var(--s3) 0;
  font-size: var(--fs-big);
  line-height: 1.4;
  color: var(--c-on-dark);
}
/* wariant z ciaśniejszą listą (np. podstrona sesji: krótkie hasła, nie chcą
   dużego odstępu jak długie pozycje "W programie" na home) */
.k360-cta--tight .k360-cta-list li { padding-block: var(--s2); }

@media (min-width: 820px) {
  .k360-cta-inner { grid-template-columns: var(--ratio-cta); }
  /* recap oddzielony pionową złotą krechą (należy do recapu) */
  .k360-cta-summary {
    padding-left: clamp(1.75rem, 3vw, 2.75rem);
    border-left: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  }
}

/* ---- CTA jasny (k360-cta-soft): spokojny, pergaminowy band domykający stronę
   gdy zaraz pod nim jest ciemna stopka. Tło bg_cream (jak newsletter) + złoty
   hairline u góry (delikatny akcent, separacja od kremowej sekcji wyżej).
   Wycentrowany: eyebrow + H2 + opis + 2 przyciski. Bez kart i ciężkich boxów. */
.k360-cta-soft {
  position: relative;
  background: var(--c-cream) url('assets/bg_cream.png') center / cover no-repeat;
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
}
/* inner szerszy niż mierzy tekst, żeby 2 przyciski mieściły się w JEDNEJ linii
   (desc i tak ma własny węższy max-width). Mobile: actions same się zawijają. */
.k360-cta-soft-inner {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.k360-cta-soft-desc {
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 50ch;
  margin: var(--s3) auto var(--s4);
}
.k360-cta-soft-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}

/* --------------------------------------------------------------------------
   13. Kontakt (skrót)
   -------------------------------------------------------------------------- */

.k360-contact { background: var(--c-sand); padding-block: var(--section-y); }

.k360-contact-grid {
  display: grid;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: start;
}

/* lewa kolumna: zaproszenie + minimalne dane (bez kart, bez ikon) */
/* dane kontaktowe: równy układ label | wartość (wyrównane w kolumnie),
   oddzielone cienką linią; bez kart, bez ikon */
.k360-contact-details {
  margin: var(--s5) 0 0;
  display: grid;
  gap: var(--s3);
}
.k360-contact-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s4);
  align-items: baseline;
}
/* wiersz z ikonami social: baseline nie działa dla SVG (siadają za wysoko) ->
   wyśrodkuj etykietę z ikonami */
.k360-contact-row:has(.k360-contact-social) { align-items: center; }
.k360-contact-row dt {
  font-family: var(--font-body);   /* etykieta sans (jak wartości) - spójny blok danych, bez serif-przy-sansie */
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.k360-contact-row dd { margin: 0; color: var(--c-ink); }
.k360-contact-row a {
  color: var(--c-green);
  text-decoration: none;
  transition: color 0.2s ease;
}
.k360-contact-row a:hover { color: var(--c-green-deep); text-decoration: underline; text-underline-offset: 3px; }
/* social w kontakcie: ikony (jak w stopce), zielone na piaskowym tle */
.k360-contact-social { display: flex; align-items: center; gap: var(--s4); }
.k360-contact-social a { display: inline-flex; }
.k360-contact-social a:hover { text-decoration: none; }

/* prawa kolumna: formularz; pola miękko zaokrąglone (spójnie z newsletterem) */
.k360-field { margin-bottom: var(--s4); }
.k360-field label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--s2);
}
.k360-contact-form input[type='text'],
.k360-contact-form input[type='email'] { border-radius: var(--input-radius); }
.k360-contact-form textarea { border-radius: var(--textarea-radius); }
.k360-contact-form input,
.k360-contact-form textarea {
  border-color: color-mix(in srgb, var(--c-ink-soft) 45%, transparent);
}
.k360-contact-form .k360-btn { margin-top: var(--s2); border: none; }

/* opt-in newslettera w formularzu: checkbox + etykieta (małe litery, NIE label
   wersalikowy jak pola). Domyślnie odznaczony (zgoda dobrowolna). */
.k360-field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  /* podciągnięty bliżej pola Wiadomość (jego dolny margines s4 zbity ujemnym
     górnym -> ~0.5rem odstępu), oddech przed przyciskiem zostaje */
  margin: calc(var(--s2) - var(--s4)) 0 var(--s5);
}
/* custom checkbox: miękki kwadrat z kremowym ptaszkiem na zieleni - spójny z marką,
   nie domyślny element systemowy */
.k360-field-check input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  min-height: 0;
  margin: 0.15em 0 0;        /* wyrównanie z pierwszą linią tekstu */
  display: grid;
  place-content: center;
  border: 1px solid color-mix(in srgb, var(--c-ink-soft) 55%, transparent);
  border-radius: 6px;
  background: var(--c-cream);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.k360-field-check input[type='checkbox']::before {
  content: "";
  width: 0.62rem;
  height: 0.34rem;
  margin-top: -0.12rem;
  border-left: 2px solid var(--c-cream);
  border-bottom: 2px solid var(--c-cream);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.18s ease;
}
.k360-field-check input[type='checkbox']:hover { border-color: var(--c-green); }
.k360-field-check input[type='checkbox']:checked {
  background: var(--c-green);
  border-color: var(--c-green);
}
.k360-field-check input[type='checkbox']:checked::before { transform: rotate(-45deg) scale(1); }
.k360-field-check input[type='checkbox']:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.k360-field-check label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--c-ink-soft);
  cursor: pointer;
}

@media (min-width: 820px) {
  .k360-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

input[type='text'],
input[type='email'],
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75em 1em;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-cream);
  border: 1px solid color-mix(in srgb, var(--c-ink-soft) 40%, transparent);
  border-radius: 6px;
  transition: border-color 0.2s ease;
}
textarea { resize: vertical; min-height: 140px; }
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 1px;
  border-color: var(--c-gold);
}
::placeholder { color: var(--c-ink-soft); opacity: 0.7; }

/* --------------------------------------------------------------------------
   Lokalizacja / dojazd (k360-location) — adres + osadzona mapa Google.
   Tło kremowe (alternacja od piaskowego kontaktu). Mapa: ten sam radius/cień
   co zdjęcia (.ph). Mobile: 1 kolumna (info, potem mapa).
   -------------------------------------------------------------------------- */
.k360-location { padding-block: var(--section-y); }
.k360-location-grid {
  display: grid;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: start;   /* głowa + dane lewej kolumny równo z górą mapy */
}
.k360-location-info .k360-contact-details { margin-top: var(--s5); }
.k360-location-info .k360-btn { margin-top: var(--s5); }
.k360-location-map {
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-media);
  aspect-ratio: 4 / 3;
  background: var(--c-sand);
}
.k360-location-map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 820px) {
  .k360-location-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* --------------------------------------------------------------------------
   Strony tekstowe / prawne (k360-pagehead + k360-legal)
   pagehead: krótki ciemny pasek pod fixed-headerem (nawigacja widoczna na jasnej
   stronie). legal: wąska kolumna czytelnej prozy. Reuse tokenów, zero nowej palety.
   -------------------------------------------------------------------------- */
.k360-pagehead {
  background: var(--bg-dark);
  color: var(--c-on-dark);
  padding-top: calc(68px + var(--s6));
  padding-bottom: var(--s6);
}
.k360-pagehead h1 {
  color: var(--c-cream);
  font-size: var(--fs-h1);
  margin: 0;
}

.k360-legal { padding-block: var(--section-y); }
.k360-legal-inner { max-width: 760px; margin-inline: auto; }
.k360-legal-inner > p:first-of-type {
  font-size: var(--fs-big);
  color: var(--c-ink-soft);
  line-height: 1.7;
}
.k360-legal-inner h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s6);
}
.k360-legal-inner h2:first-of-type { margin-top: var(--s4); }
.k360-legal-inner ul {
  margin: 0 0 var(--s3);
  padding-left: 1.2em;
}
.k360-legal-inner li { margin-bottom: var(--s2); }
.k360-legal-note {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.k360-footer {
  background: var(--bg-dark);
  color: var(--c-on-dark);
  padding-block: var(--s7) var(--s5);
  font-size: var(--fs-body);
}
.k360-footer a { color: var(--c-on-dark); transition: color 0.2s ease; }
.k360-footer a:hover { color: var(--c-gold-light); }

.k360-footer-grid {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s6);
}

.k360-footer-brand img { width: auto; max-width: 180px; height: auto; margin-bottom: var(--s3); }
.k360-footer-brand p {
  color: color-mix(in srgb, var(--c-on-dark) 78%, transparent);
  max-width: 34ch;
  line-height: 1.6;
  margin: 0;
}

.k360-footer-heading {
  font-family: var(--font-head);
  font-size: var(--fs-big);                 /* nagłówek kolumny - większy niż linki pod nim */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin: 0 0 var(--s4);
}
.k360-footer-col ul { list-style: none; margin: 0; padding: 0; }
.k360-footer-col li { margin-bottom: var(--s2); }
.k360-footer-col a { text-decoration: none; }
.k360-footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

.k360-footer-social {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s4);
}
.k360-footer-social a { display: inline-flex; }
.k360-social-icon { display: block; width: 28px; height: 28px; }
.k360-footer-sep { color: var(--c-gold); }

.k360-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 20%, transparent);
  padding-top: var(--s4);
  color: color-mix(in srgb, var(--c-on-dark) 65%, transparent);
  font-size: var(--fs-small);
}
.k360-footer-bottom p { margin: 0; }
.k360-footer-legal a { text-decoration: none; }
.k360-footer-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.k360-footer-legal .k360-footer-sep { margin: 0 0.4em; }

@media (min-width: 760px) {
  .k360-footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* --------------------------------------------------------------------------
   9b. Wydarzenia (events) — jasny band (sand), 3 typy jako elegancka lista
   numerowana z hairline'ami; bez kart/ramek/dat. Złoto+zieleń jako akcent.
   -------------------------------------------------------------------------- */
.k360-events {
  background: var(--c-sand);
  padding-block: var(--section-y);
}
/* teaser home: pozycja = POZIOMA karta (zdjęcie + treść + CTA), 1/wiersz, de-kartonizowana
   (hairline, bez pudełka). Mobile-first: stack. Odróżnia się od 2-up gridów reszty witryny. */
.k360-eventfeed { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; }
.k360-eventfeed-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding: var(--s5) 0;
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 26%, transparent);
}
.k360-eventfeed-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 26%, transparent); }
.k360-eventfeed-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-media-soft);
}
.k360-eventfeed-media img { transition: transform 0.5s ease; }
.k360-eventfeed-item:hover .k360-eventfeed-media img { transform: scale(1.04); }
.k360-eventfeed-body { min-width: 0; }
.k360-eventfeed-meta {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s1);
}
.k360-eventfeed-type { color: var(--c-gold); }
.k360-eventfeed-title { font-size: var(--fs-big); line-height: 1.25; margin: 0 0 var(--s1); }
.k360-eventfeed-title a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
.k360-eventfeed-item:hover .k360-eventfeed-title a { color: var(--c-green); }
.k360-eventfeed-place { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }
.k360-eventfeed-action { padding-top: var(--s2); }

/* dolny przycisk: wszystkie wydarzenia (wycentrowany, zielony outline) */
.k360-events-more {
  text-align: center;
  margin-top: var(--s6);
}

@media (min-width: 760px) {
  /* zdjęcie | treść | CTA w jednym rzędzie */
  .k360-eventfeed-item {
    grid-template-columns: clamp(220px, 32%, 300px) 1fr auto;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
  }
  .k360-eventfeed-action { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Animacja wejścia (raz, subtelnie)
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Responsywność
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .k360-about-grid { grid-template-columns: 1fr; }
  .k360-about-media { max-width: 26rem; }

  .k360-cta::before { background: var(--c-green-deep); opacity: 0.85; }
}

@media (max-width: 560px) {
  .k360-newsletter-form { flex-direction: column; }
  .k360-newsletter-form input[type='email'] { flex: 1 1 auto; }
}

/* ==========================================================================
   BLOG — archiwum (parent) + wpis (single). Etap 13. Tokeny tylko z :root.
   De-kartonizacja: zdjęcie (radius + cień) + tekst pod spodem, bez ramek/pudełek.
   Tytuły wpisów: Montserrat, normalna wielkość liter (długie tytuły zdaniowe
   w wersalikach Cinzel są nieczytelne — wyjątek od globalnego uppercase, jak teaser).
   Sekcje gotowe do ekstrakcji: archive.php / single.php (natywny Gutenberg).
   ========================================================================== */

/* --- prymitywy wspólne (karta wpisu, meta, tytuł) --- */
.k360-post-title {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.32;
  color: var(--c-ink);
  margin: 0 0 var(--s3);
}
.k360-post-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.k360-post-title a:hover { color: var(--c-green); }

.k360-post-excerpt {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 46ch;
  margin: 0 0 var(--s3);
}
.k360-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
  margin: 0;
}
.k360-post-dot { color: var(--c-gold); }

/* --- archiwum: intro (lead na ciemnym pagehead) --- */
.k360-archive-head .k360-lead { max-width: 56ch; margin-top: var(--s4); }

/* --- archiwum: sekcja listy --- */
.k360-archive { background: var(--c-cream); padding-block: var(--section-y); }

/* filtry kategorii: chipy z hairline (nie pełne kafle). Aktywny = zielony. */
.k360-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s6);
}
.k360-chip {
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink-soft);
  padding: 0.55em 1.2em;
  border: 1px solid color-mix(in srgb, var(--c-gold) 32%, transparent);
  border-radius: var(--btn-radius);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.k360-chip:hover { color: var(--c-green); border-color: var(--c-green); }
.k360-chip.is-active {
  color: var(--c-cream);
  background: var(--c-green);
  border-color: var(--c-green);
}

/* grid wpisów/wydarzeń (2-up, bez featured). Gap: pion szerszy (rytm), poziom węższy. */
.k360-archive-grid {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 3vw, 3.25rem);
}
.k360-postcard-media {
  display: block;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-media-soft);
}
.k360-postcard-media img { transition: transform 0.5s ease; }
.k360-postcard:hover .k360-postcard-media img { transform: scale(1.04); }
.k360-postcard:hover .k360-post-title a { color: var(--c-green); }
.k360-postcard .k360-post-title { font-size: var(--fs-big); }
.k360-postcard .k360-post-excerpt { font-size: var(--fs-small); line-height: 1.55; }
.k360-postcard .k360-eyebrow { font-size: var(--fs-small); letter-spacing: 0.18em; margin-bottom: var(--s2); }

/* paginacja: hairline'owa, wycentrowana */
.k360-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s7);
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
}
.k360-pagination a, .k360-pagination span {
  min-width: 2.6em;
  padding: 0.6em 0.8em;
  text-align: center;
  text-decoration: none;
  color: var(--c-ink-soft);
  border-radius: var(--radius);
}
.k360-pagination a:hover { color: var(--c-green); }
.k360-pagination .k360-pagination-current {
  color: var(--c-cream);
  background: var(--c-green);
}
.k360-pagination-next { color: var(--c-green); }

@media (min-width: 600px) {
  /* 2 w wierszu globalnie (blog + wydarzenia) — spójnie z teaserami; marka premium, mało itemów */
  .k360-archive-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   BLOG — wpis (single). Kolumna czytania ~720px, uniwersalna dla klientów.
   -------------------------------------------------------------------------- */

/* nagłówek wpisu: ciemny band (kontrast pod fixed header) */
.k360-articlehead {
  background: var(--bg-dark);
  color: var(--c-on-dark);
  padding-top: calc(68px + var(--s6));
  padding-bottom: var(--s6);
}

/* META-HEAD kolumny treści: breadcrumb + byline (autor · data · czas) — na kremie */
.k360-article-meta-head { margin-bottom: var(--s5); }

/* byline (E-E-A-T): małe okrągłe foto autorki + imię · data · czas czytania */
.k360-byline {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}
.k360-byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  box-shadow: var(--shadow-media-soft);
}
.k360-byline-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.k360-byline-name { color: var(--c-green); text-decoration: none; }
.k360-byline-name:hover { color: var(--c-gold); }

.k360-crumbs { margin: 0; }
.k360-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em var(--s2);
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
}
.k360-crumbs a {
  color: var(--c-ink-soft);
  text-decoration: none;
}
.k360-crumbs a:hover { color: var(--c-green); }
.k360-crumbs li:not(:last-child)::after {
  content: '›';
  margin-left: var(--s2);
  color: var(--c-gold);
}
.k360-crumbs li[aria-current] { color: var(--c-ink); }

/* tytuł wpisu: Cinzel WERSALIKI (jak pozostałe H1 strony) */
.k360-article-title {
  color: var(--c-cream);
  font-size: var(--fs-h1);
  letter-spacing: 0.015em;
  line-height: 1.08;
  max-width: 26ch;
  margin: 0 0 var(--s4);
}
.k360-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-on-dark) 72%, transparent);
  margin: 0;
}
.k360-article-author { color: var(--c-gold-light); }

/* zdjęcie wiodące (featured) — teraz w kolumnie treści (jak Neil), nie full-width */
.k360-article-figure {
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-media);
  margin: 0 0 var(--s5);
}

/* obszar treści */
.k360-article { background: var(--c-cream); padding-block: var(--s6) var(--section-y); }

/* layout: mobile = jedna kolumna (DOM: figure → rail → body, czyli zdjęcie pierwsze) */
.k360-article-layout { display: block; }
.k360-article-body { max-width: 46rem; margin-inline: auto; }

/* --- boczna szyna (rail) --- */
.k360-article-rail { margin-bottom: var(--s6); }

/* TOC w railu: na mobile zwijany (details), na desktop stały sticky z active-highlight */
.k360-rail-toc {
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
}
.k360-rail-toc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: var(--s4) 0;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.k360-rail-toc summary::-webkit-details-marker { display: none; }
.k360-rail-toc summary::after {
  content: '+';
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--c-gold);
  transition: transform 0.25s ease;
}
.k360-rail-toc[open] summary::after { transform: rotate(45deg); }
.k360-rail-toc nav { padding-bottom: var(--s4); }
.k360-rail-toc ol { list-style: none; margin: 0; padding: 0; }
.k360-rail-toc li { margin: 0; line-height: 1.4; }
.k360-rail-toc a {
  display: block;
  padding: 0.4em 0 0.4em var(--s3);
  border-left: 2px solid transparent;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.k360-rail-toc a:hover { color: var(--c-green); }
.k360-rail-toc a.is-active { color: var(--c-green); border-left-color: var(--c-gold); }

/* mini-CTA w railu (tylko desktop) */
.k360-rail-cta { display: none; }
.k360-rail-cta-title { font-family: var(--font-head); font-size: var(--fs-h3); color: var(--c-green); line-height: 1.2; margin: 0 0 var(--s2); }

@media (min-width: 1080px) {
  .k360-article-layout {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    grid-template-areas:
      "rail meta"
      "rail body";
    grid-template-rows: auto 1fr;
    column-gap: clamp(3.5rem, 6vw, 6.5rem);
    align-items: start;
  }
  /* meta-head (breadcrumb + data) col 2 wiersz 1; body wiersz 2; rail spina dwa wiersze po lewej */
  .k360-article-meta-head { grid-area: meta; }
  .k360-article-rail { grid-area: rail; }
  .k360-article-body { grid-area: body; }
  /* kolumna treści wypełnia całą szerokość do prawej krawędzi (bez prawego marginesu) */
  .k360-article-body { max-width: none; margin-inline: 0; }

  /* rail = sticky kolumna flex: scrolluje się TYLKO spis, CTA zostaje przyklejone na dole */
  .k360-article-rail {
    position: sticky;
    top: calc(68px + var(--s4));
    max-height: calc(100vh - 68px - var(--s5));
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  /* spis (details) = jedyny obszar scrollowany; padding-right, by scrollbar nie wchodził na tekst */
  .k360-rail-toc {
    border-top: none; border-bottom: none;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding-right: var(--s4);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--c-gold) 45%, transparent) transparent;
  }
  .k360-rail-toc summary { pointer-events: none; padding: 0 0 var(--s3); position: sticky; top: 0; background: var(--c-cream); }
  .k360-rail-toc summary::after { display: none; }
  .k360-rail-toc nav { padding-bottom: 0; }

  /* mini-CTA: ciemna karta zawsze widoczna na dole railu, promuje sesje online */
  .k360-rail-cta {
    display: block;
    flex: none;
    margin-top: var(--s5);
    background: var(--bg-dark);
    color: var(--c-on-dark);
    border-radius: var(--radius);
    padding: var(--s4);
    box-shadow: var(--shadow-media-soft);
  }
  .k360-rail-cta .k360-eyebrow { color: var(--c-gold-light); margin-bottom: var(--s2); }
  .k360-rail-cta .k360-rail-cta-title { color: var(--c-cream); }
  .k360-rail-cta p { font-size: var(--fs-small); color: color-mix(in srgb, var(--c-on-dark) 85%, transparent); line-height: 1.55; margin: 0 0 var(--s4); }
  .k360-rail-cta .k360-btn { display: block; text-align: center; }
}

/* TL;DR / key takeaways: spokojny callout na piasku, bez lewego akcentu (zero "AI-box") */
.k360-takeaways {
  background: var(--c-sand);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--s5);
}
.k360-takeaways .k360-eyebrow { margin-bottom: var(--s3); }
.k360-takeaways ul { list-style: none; margin: 0; padding: 0; }
.k360-takeaways li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: var(--s3);
  line-height: 1.55;
}
.k360-takeaways li:last-child { margin-bottom: 0; }
.k360-takeaways li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c-gold);
}

/* TOC — zwijany, hairline'owy (nie box) */
.k360-toc {
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  margin-bottom: var(--s6);
}
.k360-toc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: var(--s4) 0;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.k360-toc summary::-webkit-details-marker { display: none; }
.k360-toc summary::after {
  content: '+';
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--c-gold);
  transition: transform 0.25s ease;
}
.k360-toc[open] summary::after { transform: rotate(45deg); }
.k360-toc nav { padding-bottom: var(--s4); }
.k360-toc ol {
  margin: 0;
  padding-left: 1.3em;
  color: var(--c-ink-soft);
}
.k360-toc li { margin-bottom: var(--s2); line-height: 1.5; }
.k360-toc li::marker { color: var(--c-gold); }
.k360-toc a { color: var(--c-ink); text-decoration: none; }
.k360-toc a:hover { color: var(--c-green); text-decoration: underline; text-underline-offset: 3px; }

/* PROZA WPISU (obszar Gutenberga): typografia treści. Własna klasa, by NIE kolidować
   z sekcyjnym .k360-prose (transformacja.html), które ma tło + padding-block. */
.k360-article-prose { font-size: var(--fs-body); }
.k360-article-prose p { line-height: 1.78; margin: 0 0 var(--s4); }
.k360-article-prose .k360-lead-para {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: var(--s5);
}
.k360-article-prose h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--c-green);
  margin: var(--s6) 0 var(--s3);
  scroll-margin-top: 96px;
}
.k360-article-prose h3 {
  font-size: var(--fs-h3);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-ink);
  margin: var(--s5) 0 var(--s2);
  scroll-margin-top: 96px;
}
.k360-article-prose ul, .k360-article-prose ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
.k360-article-prose li { margin-bottom: var(--s2); line-height: 1.7; }
.k360-article-prose li::marker { color: var(--c-gold); }
.k360-article-prose blockquote {
  margin: var(--s5) 0;
  padding-left: var(--s4);
  border-left: 3px solid var(--c-gold);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--c-green);
}
.k360-article-prose blockquote p { margin: 0; line-height: 1.4; }
.k360-article-prose figure { margin: var(--s5) 0; }
.k360-article-prose figure img { border-radius: var(--radius-media); box-shadow: var(--shadow-media-soft); }
.k360-article-prose figcaption {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  text-align: center;
}
.k360-article-prose strong { font-weight: 600; }

/* CTA in-content (do oferty/kontaktu) */
.k360-inline-cta {
  background: var(--bg-dark);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin: var(--s6) 0;
  text-align: center;
}
.k360-inline-cta .k360-eyebrow { justify-content: center; margin-bottom: var(--s3); }
.k360-inline-cta h2 { color: var(--c-cream); font-size: var(--fs-h3); margin: 0 0 var(--s3); }
.k360-inline-cta p {
  color: color-mix(in srgb, var(--c-on-dark) 85%, transparent);
  max-width: 44ch;
  margin: 0 auto var(--s4);
  line-height: 1.6;
}

/* FAQ wpisu — reuse stylów .k360-faq-list; tylko nagłówek sekcji */
.k360-article-faq { margin-top: var(--s5); }
.k360-article-faq h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--s4);
}

/* udostępnianie */
.k360-share {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
/* share przeniesiony na górę railu (jak Neil): label + ikony w jednej linii, hairline pod spodem */
.k360-rail-share {
  flex: none;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
}
.k360-share-label {
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.k360-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--c-gold) 32%, transparent);
  border-radius: 50%;
  color: var(--c-green);
  background: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.k360-share-btn:hover { color: var(--c-green-deep); border-color: var(--c-green); }
.k360-copy-link { position: relative; }
.k360-copy-feedback {
  position: absolute;
  top: -1.8em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-green);
}

/* bio autorki (E-E-A-T). Bez własnej linii u góry — separatorem jest kreska zamykająca FAQ */
.k360-author {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
}
.k360-author-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex: none;
  box-shadow: var(--shadow-media-soft);
}
.k360-author-name {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  color: var(--c-ink);
  margin: 0 0 var(--s2);
}
.k360-author-bio { color: var(--c-ink-soft); line-height: 1.65; margin: 0 0 var(--s3); max-width: 54ch; }
/* linki autora = okrągłe ikonki SM (follow); okrągły styl z .k360-share-btn */
.k360-author-links { display: flex; gap: var(--s2); margin: var(--s2) 0 0; }

@media (min-width: 620px) {
  .k360-author { grid-template-columns: auto 1fr; align-items: start; }
}

/* powiązane wpisy — band sand */
.k360-related { background: var(--c-sand); padding-block: var(--section-y); }
.k360-related .k360-blog-more { margin-top: var(--s6); }

/* ==========================================================================
   /transformacja (LP produktu wiodącego) - 3 nowe typy sekcji
   ========================================================================== */

/* PROSE — sekcja tekstowa wycentrowana (cream): problem/agitacja, jak-to-dziala.
   Intymny blok narracyjny, bez zdjęcia (de-kartonizacja). */
.k360-prose { background: var(--c-cream); padding-block: var(--section-y); }
.k360-prose-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.k360-prose-inner .k360-head { margin-bottom: var(--s5); }
.k360-prose-inner p {
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: color-mix(in srgb, var(--c-ink) 86%, transparent);
  max-width: 62ch;
  margin: 0 auto var(--s4);
}
.k360-prose-inner p:last-child { margin-bottom: 0; }

/* ROADMAP — pionowa ścieżka 5 tygodni (dark). CENTERPIECE: numery-przystanki
   spięte złotą linią, editorial (nie karty). */
.k360-roadmap { background: var(--bg-dark); color: var(--c-on-dark); padding-block: var(--section-y); }
.k360-roadmap-list { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.k360-roadmap-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.k360-roadmap-step:last-child { padding-bottom: 0; }
/* linia ścieżki łącząca numery (przystanki) - przerwana w numerze (zielone tło) */
.k360-roadmap-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(1.5rem - 0.5px);
  top: 3rem;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--c-gold) 26%, transparent);
}
.k360-roadmap-num {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--c-gold-light);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-gold) 45%, transparent);
  border-radius: 50%;
}
.k360-roadmap-body { padding-top: 0.35rem; }
.k360-roadmap-week {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--s2);
}
.k360-roadmap-name { font-size: var(--fs-h3); color: var(--c-cream); margin: 0 0 var(--s3); }
.k360-roadmap-desc {
  font-weight: 300;
  line-height: 1.7;
  color: color-mix(in srgb, var(--c-on-dark) 80%, transparent);
  max-width: 52ch;
  margin: 0;
}

/* TIERS — cennik: 2 ścieżki edytorialnie (sand). Program + Mentoring premium,
   rozdzielone złotym hairline'em, cena = akcent. BEZ kart-pudełek (de-kartonizacja). */
.k360-tiers { background: var(--c-sand); padding-block: var(--section-y); }
.k360-tiers-grid { display: grid; gap: var(--s6); max-width: 1000px; margin-inline: auto; }
.k360-tier-name { color: var(--c-green); margin: 0 0 var(--s2); }
.k360-tier-tagline {
  font-family: var(--font-head);
  font-size: var(--fs-big);
  color: var(--c-green);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s4);
}
.k360-tier-price { margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.k360-tier-amount {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--c-green-deep);
  letter-spacing: 0.02em;
}
.k360-tier-unit { font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--c-ink-soft); }
.k360-tier-desc {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
  max-width: 46ch;
  margin: 0 0 var(--s5);
}
.k360-tier-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.k360-tier-list li {
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s4);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-ink);
}
.k360-tier-list li + li { border-top: 1px solid color-mix(in srgb, var(--c-gold) 20%, transparent); }
.k360-tier-mark { position: absolute; left: 0; top: calc(var(--s3) + 0.5em); width: 12px; height: 12px; color: var(--c-gold); opacity: 0.65; }
.k360-tier-note { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0 0 var(--s5); }
.k360-tier .k360-btn { margin-top: var(--s2); }

/* wariant POJEDYNCZA ścieżka (po usunięciu mentoringu): wycentrowany blok
   wartość + cena. Lista hairline'owa zostaje wyrównana do lewej w kolumnie. */
.k360-tiers-single { max-width: 600px; margin-inline: auto; }
.k360-tiers-single .k360-tier-price {
  align-items: center;
  text-align: center;
  gap: var(--s2);
  margin: var(--s6) 0 0;
}
.k360-tiers-single .k360-btn { display: block; width: fit-content; margin: var(--s5) auto 0; }

@media (min-width: 820px) {
  .k360-tiers-grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .k360-tier--premium {
    padding-left: clamp(2.5rem, 5vw, 4.5rem);
    border-left: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  }
}

/* --------------------------------------------------------------------------
   WYDARZENIA (CPT) - archiwum (parent) + single (child)
   Reuse: k360-archive / k360-archive-grid / k360-archive-filters / k360-chip /
   k360-pagination (parent), k360-hero / k360-contact / k360-location / k360-related (child).
   Tu tylko elementy specyficzne dla eventu (karty, badge, pasek faktów, opis).
   -------------------------------------------------------------------------- */

/* --- parent: karta wydarzenia = .k360-postcard (reuse) + lekka meta eventu.
       Równy grid: k360-archive-grid; filtry: k360-archive-filters + k360-chip;
       paginacja: k360-pagination (wszystko z bloga). Cena NIE na liście. --- */
.k360-events-card { display: flex; flex-direction: column; height: 100%; }
.k360-events-card .k360-postcard-media { position: relative; }
.k360-events-card .k360-eyebrow { font-size: var(--fs-small); letter-spacing: 0.18em; margin-bottom: var(--s2); }
.k360-events-meta {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--s1);
}
.k360-event-sep { color: var(--c-gold); margin: 0 0.5em; }
.k360-events-card .k360-post-title { font-size: var(--fs-big); margin-bottom: var(--s1); }
.k360-events-place { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }
.k360-events-action { margin-top: auto; padding-top: var(--s4); }

/* badge "Brak miejsc" / "Zakończone" na zdjęciu */
.k360-event-badge {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-alert);
  padding: 0.55em 1.2em;
  border-radius: 999px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--c-green-deep) 45%, transparent);
}

/* widok "Minione": karty wygaszone, bez hover-zoomu; pill "Zakończone" przygaszony */
.k360-events-card.is-past .k360-postcard-media img { filter: grayscale(0.5); opacity: 0.72; }
.k360-events-card.is-past:hover .k360-postcard-media img { transform: none; }
.k360-events-card.is-past .k360-event-badge {
  background: color-mix(in srgb, var(--bg-dark) 55%, var(--c-ink-soft));
  color: var(--c-cream);
  box-shadow: none;
}

/* filtr "Minione" odsunięty na prawo od chipów kategorii (ten sam pasek) */
.k360-archive-filters .k360-chip--state { margin-left: auto; }

/* stan pusty (brak nadchodzących) */
.k360-events-empty {
  max-width: 52ch;
  margin: var(--s6) auto 0;
  text-align: center;
  color: var(--c-ink-soft);
  font-size: var(--fs-big);
}

/* --- child: sticky sidebar (karta szczegóły + CTA), ciemna jak mini-CTA bloga --- */
.k360-eventaside { max-width: 720px; margin: 0 auto var(--s6); }
.k360-eventcard-info {
  background: var(--bg-dark);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow-media-soft);
}
.k360-eventcard-info .k360-eyebrow { color: var(--c-gold-light); margin-bottom: var(--s3); }
.k360-eventinfo-list { margin: 0 0 var(--s5); }
.k360-eventinfo-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 22%, transparent);
}
.k360-eventinfo-row:first-child { border-top: none; padding-top: 0; }
.k360-eventinfo-row dt { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); color: var(--c-gold-light); }
.k360-eventinfo-row dd { margin: 0; text-align: right; font-size: var(--fs-small); color: var(--c-cream); }
.k360-eventcard-info .k360-btn { display: block; text-align: center; margin-top: var(--s2); }
/* stan sold-out: CTA burgund (status), ale wciąż klikalny (#rezerwacja = lista chętnych) + nota */
.k360-eventcard-info.is-soldout .k360-btn { background: var(--c-alert); color: var(--c-cream); }
.k360-eventcard-info.is-soldout .k360-btn:hover { background: var(--c-alert); filter: brightness(1.08); }
.k360-eventcard-note { margin: var(--s3) 0 0; font-size: var(--fs-small); text-align: center; color: color-mix(in srgb, var(--c-on-dark) 82%, transparent); }
/* rytm: na single "inne wydarzenia" na kremie (formularz=piasek nad nim, footer=ciemny pod) */
.k360-event-single .k360-related { background: var(--c-cream); }

/* --- child: opis (proza, jasny band) --- */
.k360-eventbody { padding-block: var(--section-y); }
.k360-eventbody-inner { max-width: 720px; margin-inline: auto; }
.k360-eventbody-intro {
  font-size: var(--fs-big);
  color: var(--c-ink-soft);
  line-height: 1.7;
  margin: 0 0 var(--s5);
}
.k360-eventbody-inner h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--c-green);
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}
.k360-eventbody-inner p { margin: 0 0 var(--s3); }
.k360-event-good {
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--c-gold) 28%, transparent);
}
.k360-event-good-row + .k360-event-good-row { margin-top: var(--s4); }
.k360-event-good dt {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: var(--s2);
}
.k360-event-good dd { margin: 0; color: var(--c-ink); }

/* zdjęcie wiodące w lewej kolumnie (góra); na mobile wyrównane do treści/karty */
.k360-eventfig { max-width: 720px; margin: 0 auto var(--s5); }

@media (min-width: 1080px) {
  .k360-eventmain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
    grid-template-areas:
      "img   aside"
      "body  aside";
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .k360-eventfig { grid-area: img; max-width: none; margin: 0 0 var(--s5); }
  .k360-eventbody-inner { grid-area: body; max-width: none; margin-inline: 0; }
  .k360-eventaside {
    grid-area: aside;
    max-width: none;
    margin: 0;
    position: sticky;
    top: calc(68px + var(--s4));
  }
}

/* ==========================================================================
   /transformacja - elementy sprzedażowe (hero-facts, qualify, steps, roadmap-cta)
   ========================================================================== */

/* HERO-FACTS: subtelny pasek konkretów pod CTA w hero (na ciemnym), middot złoty */
.k360-hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) 0;
  margin: var(--s5) 0 0;
  padding: 0;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-on-dark) 70%, transparent);
}
.k360-hero-facts li { display: flex; align-items: center; }
.k360-hero-facts li + li::before {
  content: '·';
  color: var(--c-gold);
  margin: 0 var(--s4);
}

/* QUALIFY: "Dla kogo" scalona kwalifikacja - 2 kolumny jest/nie (cream), hairline, bez kart */
.k360-qualify { background: var(--c-cream); padding-block: var(--section-y); }
.k360-qualify-grid { display: grid; gap: var(--s6); max-width: 1000px; margin-inline: auto; }
.k360-qualify-col-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-big);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--s4);
}
.k360-qualify--yes .k360-qualify-col-title { color: var(--c-green); }
.k360-qualify--no .k360-qualify-col-title { color: var(--c-ink-soft); }
.k360-qualify-list { list-style: none; margin: 0; padding: 0; }
.k360-qualify-list li {
  position: relative;
  padding: var(--s2) 0 var(--s2) var(--s4);
  font-weight: 300;
  font-size: var(--fs-big);
  line-height: 1.6;
  color: var(--c-ink);
}
.k360-qualify-mark { position: absolute; left: 0; top: 0.6em; width: 12px; height: 12px; }
.k360-qualify--yes .k360-qualify-mark { color: var(--c-gold); opacity: 0.7; }
.k360-qualify--no .k360-qualify-mark { color: var(--c-ink-soft); opacity: 0.45; }
.k360-qualify-closing {
  max-width: 56ch;
  margin: var(--s6) auto 0;
  text-align: center;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-green);
}
@media (min-width: 820px) {
  /* symetryczne 50/50: kreska DOKŁADNIE na środku (::before at 50%), oba boki
     z równym wcięciem - linia nie jest już zsunięta o pół odstępu */
  .k360-qualify-grid { grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
  .k360-qualify-grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: color-mix(in srgb, var(--c-gold) 26%, transparent);
  }
  .k360-qualify--yes { padding-right: clamp(2rem, 4vw, 3.5rem); }
  .k360-qualify--no { padding-left: clamp(2rem, 4vw, 3.5rem); }
}

/* DLA KOGO wyśrodkowane: gdy głowa jest centrowana (k360-head), lista 2-kol też
   ma być wyśrodkowana 50/50 (domyślnie audience-list jest dosunięta do lewej). */
.k360-audience--center .k360-audience-list { margin-inline: auto; }

/* STEPS: "Jak to działa" - 4 kroki onboardingu (cream), numery złote, bez kart */
.k360-steps { background: var(--c-cream); padding-block: var(--section-y); }
.k360-steps-grid { display: grid; gap: var(--s6); max-width: 920px; margin-inline: auto; }
.k360-step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); align-items: start; }
.k360-step-num {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 0.9;
  color: color-mix(in srgb, var(--c-gold) 85%, transparent);
}
.k360-step-title { font-size: var(--fs-h3); margin: 0 0 var(--s2); }
.k360-step-text {
  font-weight: 300;
  line-height: 1.7;
  color: color-mix(in srgb, var(--c-ink) 85%, transparent);
  max-width: 42ch;
  margin: 0;
}
@media (min-width: 760px) {
  .k360-steps-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) clamp(2.5rem, 5vw, 4rem); }
}

/* ROADMAP-CTA: domykające CTA pod ścieżką 5 tygodni (wewnątrz ciemnej sekcji) */
.k360-roadmap-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.k360-roadmap-cta p {
  font-weight: 300;
  font-size: var(--fs-lead);
  color: var(--c-cream);
  margin: 0 0 var(--s4);
}

/* TIER PANEL DECYZJI: kolumna cena+CTA w cenniku jako subtelny panel (nie karta) -
   lekko głębszy beż + cienka złota ramka + oddech. Moment konwersji. */
.k360-tier--panel {
  background: color-mix(in srgb, var(--c-green-deep) 5%, var(--c-sand));
  border: 1px solid color-mix(in srgb, var(--c-gold) 26%, transparent);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.k360-tier--panel .k360-tier-amount { font-size: var(--fs-h1); }

/* HERO --wide: szersza kolumna treści TYLKO na /transformacja (globalny .k360-hero-content
   ma 700px - dostrojony pod krótsze H1 innych stron; tu H1 "5 tygodni powrotu do siebie"
   ma się złożyć w 2 linie, nie 3). text-wrap: balance równa linie. */
.k360-hero--wide .k360-hero-content { max-width: 820px; }
.k360-hero--wide .k360-hero-title { text-wrap: balance; }