/* ══════════════════════════════════════════════════════════════
   PrimeHouse Masterclass - strona główna
   Układ wg projektu Magdy (Canva, 21.06.2026),
   typografia i kolory z motywu Polor (patrz newu.css).

   Arkusz leży w mu-plugins, nie w motywie - dzięki temu strona
   wygląda tak samo niezależnie od tego, który motyw jest aktywny.
   Fonty ciągniemy z katalogu motywu Polor, bo tam są wgrane.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'General Sans';
  src: url('/wp-content/themes/polor-child/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/wp-content/themes/polor-child/fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/wp-content/themes/polor-child/fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.mc {
  /* Paleta 1:1 z newu.css na produkcji - te same nazwy odcieni */
  --mc-czarny:  #1c1b1f;   /* --black */
  --mc-naglowek:#151515;   /* --polor-heading-color */
  --mc-tekst:   #808080;   /* --polor-body-color */
  --mc-bez:     #eddbc7;   /* --accent */
  --mc-bez-100: #c3a38c;   /* --accent-100, kolor przycisków Polor */
  --mc-bez-25:  #e2cdb8;   /* --accent-25 */
  --mc-bez-jas: #f6ede3;   /* --accent-0 */
  --mc-szary:   #6b6a6e;
  --mc-linia:   rgba(0,0,0,.08);
  --mc-tlo:     #f2f2f2;   /* --bg */
  --mc-r:       12px;      /* --radius */
  --mc-r-duzy:  16px;

  font-family: 'General Sans', var(--polor-body-font-family), sans-serif;
  color: var(--mc-czarny);
  background: #fff;
  overflow-x: hidden;
}

/* Polor podkreśla odnośniki w treści - w sekcjach strony nigdy tego nie chcemy. */
.mc a,
.mc a:hover,
.mc a:focus { text-decoration: none !important; }

.mc * { box-sizing: border-box; }

.mc-wrap {
  max-width: 1696px;
  margin: 0 auto;
  padding: 0 0.9375rem;
}

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

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 999px;
  font-size: 1.03125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .2s;
  font-family: inherit;
  background: #111;
  color: #fff !important;
}

.mc-btn:hover { opacity: .8; text-decoration: none; color: #fff; }

/* Na ciemnym tle ten sam kształt, tylko odwrócone barwy. */
.mc-btn--jasny,
.mc-btn--bezowy { background: var(--mc-bez); color: var(--mc-czarny) !important; }
.mc-btn--jasny:hover,
.mc-btn--bezowy:hover { color: var(--mc-czarny); }

.mc-btn--ciemny { background: #111 !important; color: #fff !important; }
.mc button.mc-btn { -webkit-appearance: none; appearance: none; }

.mc-btn--duzy   { padding: 1.0625rem 2.625rem; font-size: 1.09375rem; }

/* ---------- hero ---------- */

.mc-hero { padding: 3.75rem 0 2.75rem; }

.mc-hero__grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 3rem;
  align-items: start;
}

/* Nagłówek niesie pogrubienie tylko na trzech słowach kluczowych (wiedza,
   narzędzia, społeczność) - stąd lekka waga bazowa i <strong> na 700.
   General Sans jest wczytany jako krój zmienny 100-900, więc 400 to prawdziwa
   waga z pliku, a nie ścienianie robione przez przeglądarkę. */
.mc-hero__h1 {
  margin: 0;
  font-size: clamp(1.0625rem, 1.8vw, 1.625rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.02em;
}

.mc-hero__h1 strong { font-weight: 700; }

.mc-hero__lead {
  margin: 0.375rem 0 1.625rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #46454a;
}

.mc-hero__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

/* ---------- pasek korzyści ---------- */

.mc-filary { padding: 1rem 0 2.5rem; }

.mc-filary__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.875rem;
}

.mc-filar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3125rem;
  min-height: 74px;
  padding: 0.9375rem 0.75rem;
  border: 1px solid var(--mc-linia);
  border-radius: var(--mc-r);
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

a.mc-filar:hover { border-color: var(--mc-bez); box-shadow: 0 4px 16px rgba(0, 0, 0, .05); text-decoration: none; }

.mc-filar__tytul  { font-size: 1.09375rem; font-weight: 700; letter-spacing: .01em; }
.mc-filar__podpis { font-size: 0.96875rem; color: var(--mc-szary); line-height: 1.4; }

/* ---------- sekcja ze zdjęciem ---------- */

.mc-foto { padding: 1.5rem 0 3.25rem; }

.mc-foto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 1rem;
  align-items: stretch;
}

.mc-foto__karta {
  position: relative;
  margin: 0;
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  min-height: 620px;
  background: var(--mc-czarny);
}

.mc-foto__karta img,
.mc-foto__karta video {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  display: block;
}

.mc-foto__karta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .78) 100%);
}

.mc-foto__tresc {
  position: absolute;
  left: 34px;
  right: 34%;
  bottom: 34px;
  z-index: 2;
  color: #fff;
}

.mc-foto__h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.22;
  font-weight: 600;
  font-family: var(--polor-heading-font-family, 'General Sans'), serif;
  color: #fff;
}

.mc-foto__txt {
  margin: 0;
  font-size: 1.03125rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, .92);
}

.mc-foto__btn {
  position: absolute;
  right: 34px;
  bottom: 40px;
  z-index: 3;
}

.mc-foto__bok {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
}

.mc-kafel {
  border: 1px solid var(--mc-linia);
  border-radius: var(--mc-r-duzy);
  background: #fff;
  padding: 1.625rem;
}

.mc-kafel--kolo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-kolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 186px;
  height: 186px;
  border-radius: 50%;
  background: var(--mc-bez);
  text-align: center;
  line-height: 1.35;
}

.mc-kolo strong { font-size: 1.03125rem; font-weight: 600; letter-spacing: .01em; }
.mc-kolo em     { font-style: normal; font-size: 1.03125rem; }

.mc-kafel__tytul {
  margin: 0 0 1.25rem;
  font-size: 1.09375rem;
  font-weight: 700;
  text-align: center;
}

.mc-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-social li { margin: 0; }

.mc-social a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.96875rem;
  color: var(--mc-czarny);
  text-decoration: none;
}

.mc-social a:hover { text-decoration: none; opacity: .7; }

.mc-social__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mc-bez-jas);
}

.mc-social__ikona svg { width: 15px; height: 15px; }

.mc-social__ikona--ciemna { background: var(--mc-czarny); color: #fff; }

/* ---------- sekcja o platformie ---------- */

.mc-plat { padding: 2.125rem 0 3.625rem; }

.mc-plat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--mc-tlo);
  border-radius: var(--mc-r-duzy);
  padding: 2.75rem 3rem;
  max-width: 1696px;
}

.mc-plat__lewo { padding-right: 2.75rem; }

.mc-plat__prawo {
  padding-left: 2.75rem;
  border-left: 1px solid #dcdad8;
  min-width: 0;
}

.mc-nad {
  margin: 0 0 1.625rem;
  line-height: 1.3;
  font-size: 0.84375rem;
  letter-spacing: .03em;
}

.mc-nad strong { display: block; font-weight: 700; }
.mc-nad span   { display: block; color: var(--mc-szary); }

.mc-plat__txt {
  margin: 0 0 1.625rem;
  font-size: clamp(1.125rem, 1.7vw, 1.5625rem);
  line-height: 1.42;
  font-style: italic;
  font-family: var(--polor-heading-font-family, 'General Sans'), serif;
}

.mc-plat__txt strong { font-style: italic; font-weight: 700; }

.mc-sciezka {
  margin: 0 0 1.875rem;
  font-size: 1.03125rem;
  font-weight: 600;
  line-height: 1.55;
}

/* karuzela kart numerowanych */

.mc-karuzela { position: relative; }

.mc-karuzela__tor {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.mc-karuzela__tor::-webkit-scrollbar { display: none; }
.mc-karuzela__tor > * { scroll-snap-align: start; }

.mc-karta-num {
  flex: 0 0 220px;
  display: grid;
  grid-template-rows: auto auto 1fr;   /* numer, tytuł, opis - tytuły w jednej linii */
  gap: 0.625rem;
  padding: 1.375rem 1.5rem 1.625rem;
  background: #fff;
  border-radius: var(--mc-r);
  text-decoration: none;
  color: inherit;
}

a.mc-karta-num:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .07); }

.mc-karta-num__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 26px;
  border-radius: 999px;
  background: var(--mc-tlo);
  font-size: 0.84375rem;
  color: var(--mc-szary);
}

.mc-karta-num__podpis { font-size: 0.96875rem; color: #846a52; }
.mc-karta-num__tytul  { font-size: 1.375rem; font-weight: 700; }

.mc-karuzela__nawigacja {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.375rem;
}

.mc-karuzela__nawigacja--srodek { justify-content: center; margin-top: 1.625rem; }

.mc-strzalka {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mc-linia);
  background: #fff;
  color: var(--mc-czarny);
  font-size: 1.09375rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}

.mc-strzalka:hover { background: var(--mc-tlo); }
.mc-strzalka--kolo { border-color: #d8d6d4; }

.mc-karuzela__pasek {
  margin-top: 1.25rem;
  height: 3px;
  border-radius: 3px;
  background: #dcdad8;
  overflow: hidden;
}

.mc-karuzela__pasek span {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: 3px;
  background: var(--mc-czarny);
  transition: width .2s;
}

/* ---------- pasek biblioteki ---------- */

.mc-bibl { padding: 1.25rem 0 0; }

.mc-pasek {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--mc-linia);
  border-radius: var(--mc-r-duzy);
}

.mc-pasek__tytul { font-size: 1.125rem; color: #46454a; }

.mc-pasek__wiecej {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  font-size: 1.03125rem;
  color: #846a52;
  text-decoration: none;
}

.mc-pasek__wiecej:hover { text-decoration: none; opacity: .75; }

.mc-pasek__kolko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mc-bez);
  color: var(--mc-czarny);
  font-size: 0.84375rem;
}

.mc-badge--plaski {
  font-size: 1.125rem;
  font-weight: 700;
  border: none;
  padding: 0;
  letter-spacing: .01em;
}

/* ---------- karty wiedzy i wydarzeń ---------- */

.mc-karty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.625rem;
  margin-top: 1.625rem;
}

.mc-wyd .mc-karty { margin-top: 0; }
.mc-wyd { padding: 2.625rem 0 3.5rem; }

.mc-karta {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.875rem 1.75rem 1.625rem;
  border: 1px solid var(--mc-linia);
  border-radius: var(--mc-r-duzy);
  background: #fff;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

a.mc-karta:hover { text-decoration: none; box-shadow: 0 8px 26px rgba(0, 0, 0, .07); }

.mc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0.6875rem 1.625rem;
  border: 1px solid var(--mc-czarny);
  border-radius: 999px;
  font-size: 1.03125rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.mc-karta__tytul {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.42;
  font-weight: 700;
}

.mc-karta__foto {
  border-radius: var(--mc-r);
  overflow: hidden;
  background: var(--mc-tlo);
}

.mc-karta__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.mc-karta__opis {
  margin: 0;
  font-size: 1.03125rem;
  line-height: 1.62;
  color: #46454a;
}

.mc-karta__stopka {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--mc-linia);
  font-size: 0.9375rem;
  color: var(--mc-szary);
}

.mc-karta__autor { font-weight: 700; color: var(--mc-czarny); }

.mc-karta__licznik {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
}

.mc-karta__licznik svg { width: 15px; height: 15px; }

/* karta wypełniona zdjęciem (podcasty) */

.mc-karta--foto {
  position: relative;
  padding: 0;
  border: 1px solid var(--mc-linia);
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  min-height: 380px;
}

.mc-karta--foto .mc-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: rgba(28, 27, 31, .82);
  border-color: transparent;
  color: #fff;
}

.mc-karta--foto .mc-karta__foto {
  border-radius: 0;
  height: 100%;
}

.mc-karta--foto .mc-karta__foto::after { display: none; }

.mc-karta--foto .mc-karta__foto img {
  height: 100%;
  min-height: 380px;
  aspect-ratio: auto;
}

/* ---------- wezwanie do działania ---------- */

.mc-cta { padding: 0.875rem 0 4rem; }

.mc-cta__box {
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 4.25rem 2.875rem 3.75rem;
  text-align: center;
  max-width: 1696px;
}

.mc-cta__h2 {
  margin: 0 0 1.125rem;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 700;
  font-style: italic;
  font-family: var(--polor-heading-font-family, 'General Sans'), serif;
}

.mc-cta__txt {
  max-width: 720px;
  margin: 0 auto 1.875rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.5;
  font-style: italic;
}

.mc-cta__cytat {
  margin: 1.875rem 0 0;
  font-size: 1.03125rem;
  font-weight: 700;
}

/* ---------- profil agenta ---------- */

.mc-prof { padding: 0 0 3.75rem; text-align: center; }

.mc-prof__ramka {
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  border: 1px solid var(--mc-linia);
  max-width: 1080px;
  margin: 0 auto;
}

.mc-prof__ramka img { width: 100%; display: block; }

.mc-prof__podpis {
  margin: 2.125rem 0 0;
  font-size: clamp(1.25rem, 2vw, 1.6875rem);
  font-weight: 700;
}

.mc-prof__akcja { margin: 1.625rem 0 0; }

/* ---------- kalendarz ---------- */

.mc-kal { padding: 0.625rem 0 4rem; text-align: center; }

.mc-kal__h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: 700;
}

.mc-kal__pod {
  max-width: 620px;
  margin: 0 auto 2.5rem;
  font-size: 1.03125rem;
  line-height: 1.6;
  color: var(--mc-szary);
}

.mc-kal__grid .mc-karuzela__tor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;
  overflow: visible;
}

.mc-wydarzenie {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  padding: 1.625rem 1.625rem 1.375rem;
  border-radius: var(--mc-r-duzy);
  background: var(--mc-bez-jas);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: transform .2s;
}

a.mc-wydarzenie:hover { text-decoration: none; transform: translateY(-2px); }

.mc-wydarzenie__data {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  margin: 0;
}

.mc-wydarzenie__data strong { font-size: 2.25rem; font-weight: 700; line-height: 1; }
.mc-wydarzenie__dt,
.mc-wydarzenie__mc { font-size: 0.75rem; color: var(--mc-szary); letter-spacing: .04em; }

.mc-wydarzenie__kat {
  margin: 0.3125rem 0 0;
  font-size: 0.84375rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #6b6a6e;
}

.mc-wydarzenie__tytul {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: 60px;
}

.mc-wydarzenie__godz { margin: 0; font-size: 0.96875rem; }
.mc-wydarzenie__prow { margin: 0; font-size: 0.9375rem; color: var(--mc-szary); }

.mc-wydarzenie__link {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--mc-szary);
}

/* Karta wydarzenia ze zdjęciem - trzy najbliższe terminy na stronie głównej.
   Kadr trzyma stałe proporcje, więc karty równają się mimo różnych zdjęć,
   a napis „DOŁĄCZ" siada na dole karty niezależnie od długości tytułu.
   20.08.2026. */
.mc-wydarzenie--foto { justify-content: flex-start; }

.mc-wydarzenie__foto {
  display: block;
  margin: 0 0 0.375rem;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e6ddd3;
}

.mc-wydarzenie__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

a.mc-wydarzenie--foto:hover .mc-wydarzenie__foto img { transform: scale(1.03); }

.mc-wydarzenie--foto .mc-wydarzenie__tytul { min-height: 0; }

.mc-wydarzenie__link--cta {
  margin-top: auto;
  padding-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mc-czarny, #1c1b1f);
}

.mc-kal__pusto {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--mc-szary);
}

.mc-kal__akcja { margin: 0; text-align: center; }

/* ---------- newsletter i społeczność ---------- */

.mc-news { padding: 0 0 4.5rem; }

.mc-news__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.875rem;
  align-items: stretch;
}

/* Instagram i Facebook: dwa osobne kafle w kolumnie 1, jeden nad drugim -
   ciemny (Instagram) w rzędzie 1 obok zdjęć i LinkedIn, jasny (Facebook)
   w rzędzie 2 obok zdjęć (18.08.2026, druga poprawka tego dnia - pierwsza,
   jeden kafel z dwoma wierszami w środku, była albo za wysoka [gdy sięgała
   obu rzędów siatki], albo za niska [gdy tylko jednego] - nie dało się
   tego pogodzić w jednym kaflu bez rozjazdu z siatką zdjęć). Łącznie
   zajmują dokładnie tę samą wysokość co cała galeria; odstęp między nimi
   to zwykły `gap` siatki (poniżej), nie trzeba go dokładać osobno. */
.mc-news__ig {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  background: var(--mc-czarny);
  border-color: var(--mc-czarny);
  color: #fff;
}

.mc-news__fb {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  background: var(--mc-bez-jas);
}

.mc-news__zapis {
  grid-column: 2 / span 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.875rem;
}

.mc-news__li { grid-column: 5; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; text-align: center; }

.mc-news__galeria { display: contents; }

.mc-news__foto {
  margin: 0;
  min-width: 0;
  border-radius: var(--mc-r);
  overflow: hidden;
  background: var(--mc-tlo);
  /* 4:3 zamiast kwadratu (18.08.2026) - "obniż całość sekcji": z tej samej
     szerokości kolumny wychodzi o ok. 25% mniej wysokości niż 1:1, a razem
     z nią niżej stoją oba kafle IG/FB, bo dzielą te same rzędy siatki. */
  aspect-ratio: 4 / 3;
  align-self: stretch;
  justify-self: stretch;
}

.mc-news__foto:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.mc-news__foto:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.mc-news__foto:nth-of-type(3) { grid-column: 4; grid-row: 1; }
.mc-news__foto:nth-of-type(4) { grid-column: 2 / span 2; grid-row: 2; }
.mc-news__foto:nth-of-type(5) { grid-column: 4 / span 2; grid-row: 2; }

.mc-news__label {
  margin: 0 0 1.125rem;
  font-size: 0.96875rem;
  color: var(--mc-szary);
}

.mc-news__txt {
  margin: 0 0 1.625rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.4375rem);
  line-height: 1.45;
  font-style: italic;
  font-family: var(--polor-heading-font-family, 'General Sans'), serif;
}

.mc-news__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.mc-news__form input { flex: 1 1 180px; }

.mc-news__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9375rem 1.375rem;
  border: 1px solid var(--mc-linia);
  border-radius: 999px;
  font-size: 1.03125rem;
  font-family: inherit;
  background: #fff;
}

.mc-news__form input:focus { outline: 2px solid var(--mc-bez); outline-offset: 1px; }
.mc-news__form .mc-btn { flex: 0 0 auto; padding: 0.8125rem 1.375rem; }


.mc-news__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-news__li-txt { margin: 0; font-size: 1.03125rem; }

.mc-news__li-handle {
  display: inline-block;
  padding: 0.5625rem 1.125rem;
  border: 1px solid var(--mc-linia);
  border-radius: 999px;
  font-size: 0.84375rem;
  color: var(--mc-czarny);
  text-decoration: none;
}

.mc-news__li-handle:hover { text-decoration: none; background: var(--mc-tlo); }

/* Pigułka z adresem na czarnym kaflu (Instagram) potrzebuje własnego,
   jasnego obramowania i napisu - domyślne `--mc-linia`/`--mc-czarny`
   giną na czerni. */
.mc-news__ig .mc-news__li-handle {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.mc-news__ig .mc-news__li-handle:hover {
  background: rgba(255, 255, 255, .12);
}

/* Odznaka Instagrama: biały glif na czarnym kółku z białą obwódką -
   decyzja Eugenii 18.08.2026. Domyślna `.mc-social__ikona` (jasne beżowe
   kółko, glif `currentColor`) na czarnym kaflu wychodziła prawie
   niewidoczna: tekst kafla jest biały, więc glif rysował się biały na
   jasnym beżu - za mało kontrastu, żeby rozpoznać ikonę. */
.mc-news__ig .mc-social__ikona {
  background: var(--mc-czarny);
  border: 1.5px solid #fff;
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   Open Cases
   ══════════════════════════════════════════════════════════════ */

.mc-oc { padding: 2.25rem 0 4.25rem; text-align: center; }

.mc-oc__h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 700;
}

.mc-oc__pod {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  font-size: 1.09375rem;
  font-style: italic;
  color: #46454a;
}

.mc-oc__karta {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  background: var(--mc-bez-jas);
  text-align: left;
  min-height: 460px;
}

.mc-oc__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mc-oc__plakat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 2.5rem 1.875rem;
  background: var(--mc-bez-jas);
  text-align: center;
}

.mc-oc__tytul     { margin: 0; font-size: clamp(1.875rem, 3.2vw, 2.875rem); font-weight: 700; letter-spacing: -.01em; }
.mc-oc__podtytul  { margin: 0; font-size: 0.90625rem; font-weight: 600; letter-spacing: .16em; }
.mc-oc__godziny {
  margin: 1.125rem 0 0;
  padding: 0.75rem 1.875rem;
  border-radius: 999px;
  background: #fff;
  font-size: 1.125rem;
  font-weight: 700;
}

.mc-oc__prow { margin: 1.625rem 0 0; line-height: 1.5; }
.mc-oc__prow span { display: block; font-size: 0.90625rem; font-weight: 700; letter-spacing: .14em; }
.mc-oc__prow em   { font-style: normal; font-size: 0.84375rem; color: var(--mc-szary); }

.mc-oc__panel {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 2.75rem 2.5rem;
  background: var(--mc-bez-25);
}

.mc-oc__nad      { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; color: #5a4632; }
.mc-oc__panel-h3 { margin: 0; font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 700; }
.mc-oc__panel-txt{ margin: 0 0 1rem; font-size: 1.03125rem; line-height: 1.6; color: #46454a; }

.mc-oc__terminy { margin: 0; padding: 0; list-style: none; }

.mc-oc__terminy li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6875rem 0;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 0.96875rem;
}

.mc-oc__data { font-weight: 700; color: #5a4632; }
.mc-oc__opis { color: #46454a; }
/* Nie --mc-szary: karta Open Cases stoi na beżu --mc-bez-25, gdzie
   #6b6a6e daje 3,49:1. #56555b daje tam 4,78:1. */
.mc-oc__godz { color: #56555b; }

.mc-oc__btn { align-self: flex-start; margin-top: 1.375rem; }

/* ══════════════════════════════════════════════════════════════
   Pytania i odpowiedzi
   ══════════════════════════════════════════════════════════════ */

.mc-faq { padding: 0 0 4.25rem; }

.mc-faq__box {
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 2.875rem 2.75rem 2.5rem;
  max-width: 1696px;
}

.mc-faq__h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: .01em;
}

.mc-faq__pod { margin: 0 0 1.875rem; font-size: 0.96875rem; color: var(--mc-szary); }

.mc-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.375rem;
}

.mc-faq__item {
  padding: 0.9375rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--mc-r-sm, 10px);
  background: #fff;
}

.mc-faq__item summary {
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.625rem;
}

.mc-faq__item summary::-webkit-details-marker { display: none; }

.mc-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--mc-bez-100);
}

.mc-faq__item[open] summary::after { content: "\2013"; }

.mc-faq__item p {
  margin: 0.625rem 0 0;
  font-size: 1.03125rem;
  line-height: 1.6;
  color: #46454a;
}

/* ══════════════════════════════════════════════════════════════
   Ciemny pas na końcu
   ══════════════════════════════════════════════════════════════ */

.mc-dol { padding: 0 0 4rem; }

.mc-dol .mc-wrap {
  background: #232227;
  border-radius: var(--mc-r-duzy);
  padding: 5.75rem 2.5rem 6.125rem;
  text-align: center;
}

.mc-dol__h2 {
  margin: 0 0 2.625rem;
  font-size: clamp(1.625rem, 2.8vw, 2.375rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.mc-dol__h2 span { display: block; }

.mc-dol__btn {
  background: var(--mc-bez-jas);
  color: var(--mc-czarny) !important;
  font-size: 0.96875rem;
  padding: 0.9375rem 2.125rem;
}

.mc-prof__zdanie {
  max-width: 1000px;
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .mc-oc__karta { grid-template-columns: 1fr; }
  .mc-oc__foto img { height: 260px; }
  .mc-faq__grid { grid-template-columns: 1fr; }
  .mc-faq__box  { padding: 2rem 1.375rem 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   Węższe ekrany
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .mc-filary__grid { grid-template-columns: repeat(3, 1fr); }
  .mc-karty        { grid-template-columns: repeat(2, 1fr); }
  .mc-foto__grid   { grid-template-columns: minmax(0, 1fr) 330px; }
  .mc-news__grid { grid-template-columns: 1fr 1fr 1fr; }
  .mc-news__foto:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .mc-news__foto:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .mc-news__foto:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .mc-news__foto:nth-of-type(4) { grid-column: 1; grid-row: 2; }
  .mc-news__foto:nth-of-type(5) { grid-column: 2; grid-row: 2; }
  /* Siatka 3x3: zdjęcia w rzędach 1-2, IG obok ostatnich dwóch zdjęć
     w rzędzie 2, FB i LinkedIn dzielą rząd 3. */
  .mc-news__ig      { grid-column: 3; grid-row: 2; }
  .mc-news__fb       { grid-column: 1; grid-row: 3; }
  .mc-news__li       { grid-column: 2 / span 2; grid-row: 3; }
}

@media (max-width: 900px) {
  .mc-wrap { padding: 0 1.125rem; }
  .mc-hero { padding: 1.875rem 0 1.5rem; }
  .mc-hero__grid,
  .mc-foto__grid,
  .mc-plat__grid { grid-template-columns: 1fr; gap: 1.625rem; }

  .mc-plat__grid { padding: 2rem 1.625rem; }
  .mc-plat__lewo { padding-right: 0; }
  .mc-plat__prawo { padding-left: 0; border-left: none; border-top: 1px solid #dcdad8; padding-top: 1.75rem; }

  .mc-foto__tresc { right: 34px; bottom: 96px; max-width: none; }
  .mc-foto__btn   { right: 24px; bottom: 26px; }
  .mc-foto__bok   { grid-template-rows: auto auto; }

  .mc-kal__grid .mc-karuzela__tor {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mc-kal__grid .mc-wydarzenie { flex: 0 0 82%; scroll-snap-align: start; }
}

@media (max-width: 620px) {
  .mc-filary__grid  { grid-template-columns: repeat(2, 1fr); }
  .mc-karty         { grid-template-columns: 1fr; }
  .mc-pasek         { flex-wrap: wrap; gap: 0.75rem; padding: 1.125rem 1.25rem; }
  .mc-pasek__wiecej { margin-left: 0; }
  .mc-hero__akcje   { width: 100%; }
  .mc-hero__akcje .mc-btn { flex: 1 1 auto; }

  .mc-foto__karta,
  .mc-foto__karta img,
  .mc-foto__karta video { min-height: 380px; }
  .mc-foto__tresc { left: 20px; right: 20px; bottom: 88px; max-width: none; }

  .mc-news__grid { grid-template-columns: 1fr 1fr; }
  .mc-news__ig { grid-column: 1 / span 2; grid-row: auto; }
  .mc-news__fb { grid-column: 1 / span 2; grid-row: auto; }
  .mc-news__li { grid-column: 1 / span 2; grid-row: auto; }
  .mc-news__foto:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .mc-news__galeria { grid-template-columns: repeat(2, 1fr); }

  .mc-cta__box  { padding: 2.375rem 1.375rem 2.125rem; }
  .mc-prof__podpis { font-size: 1.03125rem; }
}

/* ══════════════════════════════════════════════════════════════
   PODSTRONA: CZŁONKOSTWO
   ══════════════════════════════════════════════════════════════ */

.mc-badge--duzy {
  padding: 0.875rem 2.625rem;
  font-size: 1.125rem;
  border-radius: 14px;
  border-width: 1.5px;
}

/* ── nagłówek ze zdjęciem ── */

.mc-czl-hero { padding: 1.375rem 0 2.125rem; }











/* ── trzy filary ── */

.mc-czl-filary { padding: 0 0 2.5rem; }

.mc-czl-filary__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;
}

.mc-czl-filar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.875rem 1.625rem;
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
}

.mc-czl-filar .mc-badge {
  align-self: stretch;
  background: #fff;
  text-align: center;
}

.mc-czl-filar__nad { margin: 0; font-size: 0.75rem; letter-spacing: .06em; color: var(--mc-szary); }

.mc-czl-filar__wiecej {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mc-czarny);
}

.mc-filar-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9375rem; }

.mc-filar-lista__tytul {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.mc-filar-lista__opis {
  display: block;
  margin-top: 0.1875rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #46454a;
}

/* ── społeczność ── */

.mc-czl-sp { padding: 0 0 2.75rem; }

.mc-czl-sp__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 2.5rem;
  max-width: 1696px;
}

.mc-czl-sp__lewo { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
/* Waga 400 na całym zdaniu - pogrubiony jest wyłącznie fragment ujęty
   w `<strong>` w treści pola (17.08). Rozmiar niżej, w bloku „SPOŁECZNOŚĆ". */
.mc-czl-sp__txt  { margin: 0; font-size: 1.125rem; font-weight: 400; }
.mc-czl-sp__txt strong { font-weight: 700; }

.mc-czl-sp__foto { border-radius: var(--mc-r); overflow: hidden; }
.mc-czl-sp__foto img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }

/* ── efekt ── */

.mc-czl-ef { padding: 0 0 3.125rem; }

.mc-czl-ef__box {
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 3.25rem 2.5rem 2.875rem;
  text-align: center;
  max-width: 1696px;
}

.mc-czl-ef__h2 {
  margin: 0 0 1.125rem;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: .02em;
}


.mc-czl-ef__lead {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.4375rem);
  line-height: 1.45;
  font-style: italic;
}

.mc-czl-ef__txt {
  max-width: 820px;
  margin: 0 auto 1.875rem;
  font-size: 1.03125rem;
  line-height: 1.65;
  color: #46454a;
}

.mc-czl-ef__cytat { margin: 1.75rem 0 0; font-size: 1rem; font-weight: 700; }

/* ── nagrania ── */

.mc-czl-wi { padding: 0 0 2.875rem; }

.mc-czl-wi__txt {
  max-width: 1180px;
  margin: 1.75rem auto 2.25rem;
  font-size: 1.03125rem;
  line-height: 1.7;
  text-align: center;
  color: #46454a;
}

.mc-czl-wi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;
}

.mc-czl-nagranie { display: flex; flex-direction: column; gap: 0.75rem; color: inherit; }

.mc-czl-nagranie__foto { border-radius: 6px; overflow: hidden; background: var(--mc-tlo); }
.mc-czl-nagranie__foto img { width: 100%; display: block; }

.mc-czl-nagranie__tytul { margin: 0; font-size: 1.09375rem; font-weight: 700; line-height: 1.4; }
.mc-czl-nagranie__opis  { margin: 0; font-size: 0.96875rem; line-height: 1.7; color: #46454a; }

/* ── narzędzia i portal ── */

.mc-czl-na { padding: 0 0 2.125rem; }

.mc-czl-na__box {
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 2.25rem 2.5rem 2.625rem;
  max-width: 1696px;
}

.mc-czl-na .mc-badge,
.mc-czl-ph .mc-badge { background: #fff; margin-bottom: 1.625rem; }

.mc-czl-na .mc-filar-lista,
.mc-czl-ph .mc-filar-lista { max-width: 620px; margin: 0 auto; }

.mc-czl-ph { padding: 0 0 3.125rem; }
.mc-czl-ph .mc-badge { background: transparent; }

@media (max-width: 1100px) {
  .mc-czl-filary__grid { grid-template-columns: 1fr; }
  .mc-czl-wi__grid     { grid-template-columns: 1fr; }
  .mc-czl-sp__box      { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   PODSTRONA: PLANY I CENNIK
   ══════════════════════════════════════════════════════════════ */

.mc-cen-naglowek { padding: 2.875rem 0 2.5rem; text-align: center; }

.mc-badge--dwie {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.75rem 2.5rem;
  border: 1.5px solid var(--mc-czarny);
  border-radius: 999px;
  line-height: 1.25;
  margin-bottom: 1.625rem;
}

.mc-badge--dwie span   { font-size: 0.75rem; letter-spacing: .1em; }
.mc-badge--dwie strong { font-size: 1.03125rem; font-weight: 700; }

.mc-cen__h1 {
  margin: 0 0 1.375rem;
  font-size: clamp(1.625rem, 2.8vw, 2.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}

.mc-cen__h1 span { display: block; }

.mc-cen__lead { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; }

.mc-cen__lead-txt {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.03125rem;
  line-height: 1.6;
  color: #46454a;
}

/* ── karty planów ── */

.mc-cen-plany { padding: 0 0 3.5rem; }

.mc-cen-plany__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.875rem;
  align-items: start;
  max-width: 1300px;
}

.mc-cen-plan {
  display: flex;
  flex-direction: column;
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  padding-bottom: 1.75rem;
  height: 100%;
}

/* Środkowy plan wyróżnia się kolorem, nie obwódką: ciemniejszy beż
   z palety (--mc-bez #eddbc7 zamiast --mc-bez-jas #f6ede3). Przycisk
   musi wtedy zejść o stopień niżej (--mc-bez-100), inaczej zlewa się
   z tłem karty - to ten sam beż co tło. */
.mc-cen-plan--wyrozniony { background: var(--mc-bez); }

.mc-cen-plan--wyrozniony .mc-btn--bezowy { background: var(--mc-bez-100); }
.mc-cen-plan--wyrozniony .mc-btn--bezowy:hover { background: var(--mc-bez-25); }

.mc-cen-plan__foto { position: relative; }
.mc-cen-plan__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.mc-cen-plan__nazwa {
  align-self: center;
  margin: -1.375rem 0 1.625rem;
  padding: 0.75rem 2.375rem;
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--mc-czarny);
  border-radius: 999px;
  font-size: 1.09375rem;
  font-weight: 600;
}

.mc-cen-plan__cena {
  margin: 0;
  text-align: center;
  font-size: clamp(2.125rem, 3.4vw, 2.875rem);
  font-weight: 700;
  line-height: 1;
}

.mc-cen-plan__cena-opis { margin: 0.625rem 0 0; text-align: center; font-size: 0.96875rem; color: #46454a; }
.mc-cen-plan__dopisek   { margin: 0.3125rem 0 0; text-align: center; font-size: 0.96875rem; font-weight: 700; }

/* Cena i okres stoją w jednej linii ("210 zł  miesiąc w planie rocznym"),
   a dopisek o oszczędności dopiero pod spodem. Wyrównanie do linii pisma,
   nie do środka - inaczej mały tekst pływa w połowie wysokości cyfr. */
.mc-cen-plan__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.125rem 0.75rem;
}

.mc-cen-plan__wiersz .mc-cen-plan__cena-opis { margin: 0; }

.mc-cen-punkty {
  margin: 1.625rem 0 1.875rem;
  padding: 0 2.125rem 0 3.25rem;
  display: grid;
  gap: 0.4375rem;
  font-size: 1.03125rem;
  line-height: 1.45;
}

.mc-cen-punkty li { list-style: disc; }

.mc-cen-plan__btn { align-self: center; margin-top: auto; }

/* ── Founders ── */

.mc-cen-fo { padding: 0 0 3.5rem; }

.mc-cen-fo__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 3.125rem;
  align-items: start;
  max-width: 1300px;
}

.mc-cen-fo__foto { border-radius: var(--mc-r); overflow: hidden; }
.mc-cen-fo__foto img { width: 100%; display: block; }

.mc-cen-fo__nad  { margin: 0 0 1rem; font-size: 1.03125rem; color: #46454a; }
.mc-cen-fo__h2   { margin: 0 0 0.5rem; font-size: clamp(1.625rem, 2.8vw, 2.375rem); font-weight: 700; letter-spacing: .01em; }
.mc-cen-fo__pod  { margin: 0 0 1.375rem; font-size: 1.03125rem; font-weight: 700; }

.mc-cen-fo__tresc .mc-cen-punkty { padding-left: 1.25rem; }
.mc-cen-fo__cena { text-align: left; margin-top: 1.625rem; }
.mc-cen-fo__tresc .mc-cen-plan__cena-opis,
.mc-cen-fo__tresc .mc-cen-plan__dopisek { text-align: left; }
.mc-cen-fo__tresc .mc-btn { margin-top: 1.25rem; }

@media (max-width: 1000px) {
  .mc-cen-plany__grid { grid-template-columns: 1fr; max-width: 560px; }
  .mc-cen-fo__grid    { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   PODSTRONA: KALENDARZ WYDARZEŃ
   ══════════════════════════════════════════════════════════════ */

.mc-kalstr-naglowek { padding: 2.125rem 0 2.875rem; }

.mc-kalstr-naglowek__box {
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 2.125rem 1.875rem 1.625rem;
  text-align: center;
  margin-bottom: 1.875rem;
}

.mc-kalstr__h1  { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
.mc-kalstr__pod { max-width: 680px; margin: 0 auto 1.625rem; font-size: 1.03125rem; line-height: 1.6; color: var(--mc-szary); }

.mc-kalstr__filtry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.mc-kalstr__filtr {
  padding: 0.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.96875rem;
  cursor: pointer;
  transition: background .2s;
}

.mc-kalstr__filtr:hover     { background: rgba(255, 255, 255, .6); }
.mc-kalstr__filtr.is-active { background: var(--mc-czarny); color: #fff; }

.mc-kalstr__miesiac {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.625rem;
  margin-bottom: 1.625rem;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .04em;
}

.mc-kalstr__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem;
}

.mc-kalstr-karta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.375rem 1.375rem 1.5rem;
  background: var(--mc-bez-25);
  border-radius: var(--mc-r);
  color: inherit;
}

.mc-kalstr-karta__data { display: flex; align-items: baseline; gap: 0.375rem; margin: 0; }
.mc-kalstr-karta__data strong { font-size: 2rem; font-weight: 700; line-height: 1; }
/* Skrót miesiąca stoi na beżowej karcie (--mc-bez-25), gdzie --mc-szary
   daje 3,49:1. Ten sam wypadek co przy godzinach Open Cases. */
.mc-kalstr-karta__data span   { font-size: 0.75rem; letter-spacing: .06em; color: #56555b; }

.mc-kalstr-karta__kat   { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; color: #5a4632; }
.mc-kalstr-karta__tytul { margin: 0; font-size: 1.09375rem; font-weight: 700; line-height: 1.4; }
.mc-kalstr-karta__opis  { margin: 0; font-size: 0.96875rem; line-height: 1.6; color: #46454a; }

.mc-kalstr-karta__btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: var(--mc-czarny);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* ── siatka formatów ── */

.mc-kalstr-formaty { padding: 0 0 3.5rem; }

.mc-kalstr-formaty__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;
}

.mc-kalstr-format { margin: 0; border-radius: var(--mc-r); overflow: hidden; display: block; }
.mc-kalstr-format img { width: 100%; display: block; }

/* ══════════════════════════════════════════════════════════════
   BLOK MENTORINGU (kalendarz + strona Mentoring PRO)
   ══════════════════════════════════════════════════════════════ */

.mc-mentoring { padding: 0 0 3.5rem; }

.mc-mentoring__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 3.375rem;
  align-items: center;
}

.mc-mentoring--odwrocony .mc-mentoring__grid { direction: rtl; }
.mc-mentoring--odwrocony .mc-mentoring__grid > * { direction: ltr; }

.mc-mentoring__foto { border-radius: var(--mc-r); overflow: hidden; }
.mc-mentoring__foto img { width: 100%; display: block; }

.mc-mentoring__nad { margin: 0 0 0.375rem; font-size: 0.75rem; letter-spacing: .06em; color: var(--mc-szary); }
.mc-mentoring__h2  { margin: 0 0 0.375rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: .01em; }
.mc-mentoring__pod { margin: 0 0 1.375rem; font-size: 1.03125rem; font-weight: 700; letter-spacing: .02em; }

.mc-mentoring__txt {
  margin: 0 0 1.5rem;
  max-width: 760px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.mc-mentoring__punkty { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.375rem; font-size: 1.03125rem; }
.mc-mentoring__punkty span { color: #4a9b6e; }

.mc-mentoring__stopka { margin: 0 0 1.875rem; font-size: 1.03125rem; }

.mc-mentoring__akcja { text-align: center; }
.mc-mentoring__nad-btn { margin: 0; font-size: 0.96875rem; color: #46454a; }
.mc-mentoring__rekrut  { margin: 0.1875rem 0 1.125rem; font-size: 1.03125rem; font-weight: 700; }

@media (max-width: 1180px) {
  .mc-kalstr__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .mc-kalstr-formaty__grid { grid-template-columns: repeat(2, 1fr); }
  .mc-mentoring__grid { grid-template-columns: 1fr; gap: 1.625rem; }
  .mc-mentoring--odwrocony .mc-mentoring__grid { direction: ltr; }
}

@media (max-width: 620px) {
  .mc-kalstr__grid,
  .mc-kalstr-formaty__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PODSTRONA: MENTORING PRO
   ══════════════════════════════════════════════════════════════ */

.mc-men-naglowek { padding: 3rem 0 2.75rem; text-align: center; }

.mc-men__nad { margin: 0 0 1rem; font-size: 1.03125rem; }
.mc-men__h1  { margin: 0 0 0.375rem; font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 700; letter-spacing: .01em; }
.mc-men__pod { margin: 0 0 0.625rem; font-size: 0.90625rem; font-weight: 700; letter-spacing: .02em; }
.mc-men__txt { max-width: 660px; margin: 0 auto; font-size: 1.03125rem; line-height: 1.6; color: #46454a; }

.mc-men-osoba { padding: 2.75rem 0; }
.mc-men-osoba--tlo { background: var(--mc-bez-jas); }

/* ══════════════════════════════════════════════════════════════
   PODSTRONA: SPOŁECZNOŚĆ
   ══════════════════════════════════════════════════════════════ */

.mc-spo-hero { padding: 1.5rem 0 2.75rem; }
.mc-spo-hero .mc-foto__karta,
.mc-spo-hero .mc-foto__karta img,
.mc-spo-hero .mc-foto__karta video { min-height: 480px; }

.mc-spo-blok { padding: 0 0 3.25rem; }

.mc-spo-blok__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.375rem;
  align-items: stretch;
}

.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria { order: 2; }

/* Siatka zdjęć jest mozaikowa, nie równa - tak jak na projekcie. Równe kafle
   spłaszczały wszystko do jednego rytmu; tu każdy kafel ma inną proporcję,
   przez co zdjęcia oddychają i kadr nie ucina ludziom głów.

   Wysokość bierze się z `aspect-ratio` całej siatki, nie z `min-height`
   pojedynczego zdjęcia - dzięki temu proporcje trzymają się na każdej
   szerokości ekranu, a kafle zawsze wypełniają się co do piksela. */
.mc-spo-blok__galeria {
  display: grid;
  gap: 0.75rem;
}

.mc-spo-blok__galeria figure { margin: 0; border-radius: var(--mc-r); overflow: hidden; background: var(--mc-tlo); }
.mc-spo-blok__galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Networking: szachownica 2×2. Rząd górny wąski-szeroki, dolny odwrotnie
   (3/7 i 4/7 szerokości), więc pion i poziom przeplatają się na przemian. */
.mc-spo-blok__grid:not(.mc-spo-blok__grid--odwrocony) .mc-spo-blok__galeria {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 1 / 1;
}

.mc-spo-blok__grid:not(.mc-spo-blok__grid--odwrocony) .mc-spo-blok__galeria figure:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.mc-spo-blok__grid:not(.mc-spo-blok__grid--odwrocony) .mc-spo-blok__galeria figure:nth-child(2) { grid-column: 4 / 8; grid-row: 1; }
.mc-spo-blok__grid:not(.mc-spo-blok__grid--odwrocony) .mc-spo-blok__galeria figure:nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
.mc-spo-blok__grid:not(.mc-spo-blok__grid--odwrocony) .mc-spo-blok__galeria figure:nth-child(4) { grid-column: 5 / 8; grid-row: 2; }

/* Open House Pro: trzy kolumny, w każdej dwa zdjęcia o zmiennej wysokości.
   Siatka ma pięć rzędów - kafel krótki zajmuje dwa, wysoki trzy - a kolumna
   środkowa jest odwrócona, żeby linie podziału nie ustawiły się w rządku.
   Zdjęcia w tej sekcji są pionowe (2:3), więc wysokie kafle je mieszczą
   bez przycinania. */
.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  aspect-ratio: 5 / 4;
  width: 100%;
}

.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure:nth-child(2) { grid-column: 1; grid-row: 3 / 6; }
.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure:nth-child(3) { grid-column: 2; grid-row: 1 / 4; }
.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure:nth-child(4) { grid-column: 2; grid-row: 4 / 6; }
.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure:nth-child(5) { grid-column: 3; grid-row: 1 / 3; }
.mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure:nth-child(6) { grid-column: 3; grid-row: 3 / 6; }

/* ── baner Open House Pro ── */

.mc-spo-baner { padding: 0 0 2.875rem; }

.mc-spo-baner__karta {
  position: relative;
  margin: 0;
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
}

/* Zdjęcie ma 1600×1068, czyli dokładnie 3:2 - i w takich proporcjach stoi
   na projekcie. Wcześniejsze 21/9 obcinało kadr z góry i z dołu tak, że
   z basenu nie zostawało nic, a postaciom ucinało nogi. Kadr zgodny
   z proporcją pliku nie wyrzuca już niczego poza obraz. */
.mc-spo-baner__karta img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }

/* Napis wraca na górę zdjęcia, jak na projekcie. Samo niebo jest na to za
   jasne - biały tekst na nim ginie - więc pod napisem kładziemy przyciemnienie
   zbiegające do zera. Krycie 56% u góry to nie wartość na oko: tyle trzeba,
   żeby biel na bieli dała wymagane 4,5:1 (ten sam próg, który wyliczono
   wcześniej dla wersji telefonicznej). Niżej gradient znika, więc basen
   i pole maków zostają nietknięte. */
.mc-spo-baner__karta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 48%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .56) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.mc-spo-baner__karta figcaption {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .45);
}

.mc-spo-baner__nad { margin: 0 0 0.625rem; font-size: 0.90625rem; }
.mc-spo-baner__h2  { margin: 0; font-size: clamp(1.875rem, 3.8vw, 3.375rem); font-weight: 700; letter-spacing: .01em; }
.mc-spo-baner__pod { margin: 0.375rem 0 0; font-size: 0.90625rem; font-weight: 700; letter-spacing: .04em; }

/* ── profil i wydarzenia ── */

.mc-spo-profil { padding: 0 0 3.125rem; text-align: center; }
.mc-spo-profil__h2  { margin: 0.375rem 0 0.25rem; font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: .01em; }
.mc-spo-profil__pod { margin: 0 0 1.875rem; font-size: 0.96875rem; font-weight: 700; letter-spacing: .04em; }

.mc-spo-wyd { padding: 0 0 3.5rem; text-align: center; }
.mc-spo-wyd__txt { max-width: 780px; margin: 0 auto 2.125rem; font-size: 1.03125rem; line-height: 1.6; color: #46454a; }
.mc-spo-wyd .mc-karty { text-align: left; margin-top: 0; }

/* ── poznaj nas i naszą misję ── */

.mc-spo-poznaj { padding: 0 0 3.125rem; text-align: center; }

.mc-spo-poznaj__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.mc-spo-poznaj__karta { margin: 0; }

.mc-spo-poznaj__ramka {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--mc-r);
  overflow: hidden;
  background: #000;
}

.mc-spo-poznaj__ramka iframe, .mc-spo-poznaj__ramka video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: #000; }
.mc-spo-poznaj__podpis { margin: 0.75rem 0 0; font-size: 0.90625rem; font-weight: 700; color: #46454a; }

@media (max-width: 1180px) {
  .mc-spo-blok__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria { order: 0; }
  .mc-spo-poznaj__grid { grid-template-columns: 1fr; }
}

/* Na telefonie mozaika przestaje mieć sens - kafle robią się za małe, żeby
   cokolwiek było na nich widać. Wraca prosta siatka dwukolumnowa z równymi
   kaflami, a przy najwęższych ekranach jedna kolumna. */
@media (max-width: 700px) {
  .mc-spo-blok__grid .mc-spo-blok__galeria,
  .mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 150px;
    aspect-ratio: auto;
  }
  .mc-spo-blok__grid .mc-spo-blok__galeria figure,
  .mc-spo-blok__grid--odwrocony .mc-spo-blok__galeria figure {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FILTR NA ZDJĘCIACH ARTYKUŁÓW
   Zdjęcia w bibliotece wiedzy pochodzą z różnych źródeł i gryzą się
   kolorami. Delikatny filtr w barwach identyfikacji sprowadza je
   do wspólnego tonu, bez odbierania czytelności.
   ══════════════════════════════════════════════════════════════ */

.mc-karta__foto {
  position: relative;
  isolation: isolate;
}

.mc-karta__foto img {
  filter: sepia(.3) saturate(.78) hue-rotate(-8deg) contrast(1.04) brightness(1.02);
  transition: filter .3s;
}

.mc-karta__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mc-bez);
  mix-blend-mode: color;
  opacity: .22;
  pointer-events: none;
}

a.mc-karta:hover .mc-karta__foto img { filter: sepia(.14) saturate(.92) contrast(1.02); }

/* ══════════════════════════════════════════════════════════════
   SLAJDER WIZYTÓWEK AGENTÓW
   ══════════════════════════════════════════════════════════════ */

.mc-agenci { position: relative; }

.mc-agenci__tor { gap: 1.625rem; }

.mc-agent {
  position: relative;
  flex: 0 0 100%;
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  background: var(--mc-czarny);
  aspect-ratio: 16 / 9;      /* wyższy kadr, widoczna osoba */
  min-height: 480px;
  max-height: 640px;
  text-align: left;
}

.mc-agent__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.mc-agent__foto--pusta {
  background: repeating-linear-gradient(45deg, #efe7de, #efe7de 22px, #e6dad0 22px, #e6dad0 44px);
}

.mc-agent__karta {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: min(430px, 40%);
  padding: 2.375rem 2.125rem 2.125rem;
  background: rgba(24, 23, 27, .68);
  backdrop-filter: blur(3px);
  border-radius: var(--mc-r);
  color: #fff;
}

.mc-agent__imie {
  margin: 0 0 1.125rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.mc-agent__opis {
  margin: 0 0 1.125rem;
  font-size: 1.03125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.mc-agent__kontakt { margin: 0 0 1.25rem; display: grid; gap: 0.25rem; font-size: 1.03125rem; }
.mc-agent__kontakt a { color: #fff; }
.mc-agent__kontakt a:hover { opacity: .75; }

.mc-agent__firma { margin: 0 0 1.5rem; display: grid; gap: 0.1875rem; font-size: 0.96875rem; color: rgba(255, 255, 255, .9); }
.mc-agent__firma strong { font-size: 1.03125rem; letter-spacing: .04em; }
.mc-agent__firma a { color: #fff; text-decoration: underline !important; }

.mc-agent__social {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.mc-agent__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(24, 23, 27, .72);
  color: #fff;
  transition: background .2s;
}

.mc-agent__social a:hover { background: var(--mc-bez); color: var(--mc-czarny); }
.mc-agent__social svg { width: 19px; height: 19px; }

.mc-agenci .mc-karuzela__nawigacja { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .mc-agent { aspect-ratio: auto; min-height: 520px; max-height: none; }
  .mc-agent__karta {
    position: static;
    transform: none;
    width: auto;
    margin: -5.625rem 1.125rem 1.125rem;
    background: rgba(24, 23, 27, .86);
  }
  .mc-agent__social { right: 14px; top: 30px; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   ARCHIWA: kategorie i lista artykułów
   ══════════════════════════════════════════════════════════════ */

.mc-arch-naglowek { padding: 3.5rem 0 2.5rem; text-align: center; }

.mc-arch__h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.875rem, 3.2vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.mc-arch__opis {
  max-width: 780px;
  margin: 0 auto 0.75rem;
  font-size: 1.09375rem;
  line-height: 1.6;
  color: #46454a;
}

.mc-arch__licznik { margin: 0 0 1.75rem; font-size: 0.96875rem; color: var(--mc-szary); }

.mc-arch__tematy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

.mc-arch__temat {
  padding: 0.6875rem 1.625rem;
  border: 1px solid var(--mc-linia);
  border-radius: 999px;
  font-size: 0.96875rem;
  color: var(--mc-czarny);
  background: #fff;
  transition: background .2s, border-color .2s;
}

.mc-arch__temat:hover     { border-color: var(--mc-bez-100); }
.mc-arch__temat.is-active { background: #111; color: #fff; border-color: #111; }

.mc-arch-lista { padding: 0 0 4rem; }
.mc-arch-lista .mc-karty { margin-top: 0; }

.mc-arch__pusto { text-align: center; font-size: 1.09375rem; color: var(--mc-szary); padding: 2.5rem 0; }

/* ── stronicowanie ── */

.mc-stron {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 2.875rem;
}

.mc-stron .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 0.875rem;
  border: 1px solid var(--mc-linia);
  border-radius: 999px;
  font-size: 1.03125rem;
  font-weight: 600;
  color: var(--mc-czarny);
  background: #fff;
  transition: background .2s, border-color .2s;
}

.mc-stron a.page-numbers:hover { border-color: var(--mc-bez-100); background: var(--mc-bez-jas); }
.mc-stron .page-numbers.current { background: #111; color: #fff; border-color: #111; }
.mc-stron .page-numbers.dots { border-color: transparent; background: transparent; }

/* Kafle korzyści są klikalne - dajemy im wyraźną reakcję na kursor. */
a.mc-filar {
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

a.mc-filar:hover {
  border-color: var(--mc-bez-100);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}

a.mc-filar:focus-visible { outline: 2px solid var(--mc-bez-100); outline-offset: 3px; }

.mc-social a { transition: opacity .2s; }
.mc-social a:hover .mc-social__ikona { background: var(--mc-bez); }
.mc-social a:focus-visible { outline: 2px solid var(--mc-bez-100); outline-offset: 3px; border-radius: 6px; }

/* ══════════════════════════════════════════════════════════════
   MENTORING PRO I SPOŁECZNOŚĆ - pełna szerokość, wyrównanie do lewej
   ══════════════════════════════════════════════════════════════ */

/* Beżowe tła idą od krawędzi do krawędzi, treść zostaje w kontenerze. */
.mc-men-osoba--tlo { padding: 4rem 0; }

.mc-mentoring__akcja { text-align: left; }
.mc-mentoring__nad-btn,
.mc-mentoring__rekrut { text-align: left; }

/* Zdjęcia mentorów i agentów w kwadracie, kadr na twarz. */
.mc-mentoring__foto { aspect-ratio: 1 / 1; }
.mc-mentoring__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.mc-mentoring__grid { gap: 4rem; max-width: 1696px; }
.mc-men-naglowek { padding: 4rem 0 3.25rem; }
.mc-men-osoba { padding: 3.5rem 0; }

/* Społeczność: hero z węższą kolumną tekstu i większym oddechem. */
.mc-spo-hero .mc-foto__karta,
.mc-spo-hero .mc-foto__karta img,
.mc-spo-hero .mc-foto__karta video { min-height: 620px; }

/* ══════════════════════════════════════════════════════════════
   NAGŁÓWKI Z FILMEM - jeden wygląd na trzech stronach (07.08.2026)

   Prośba: napisy i przycisk na Członkostwie i na stronie głównej mają wyglądać
   tak samo jak na Społeczności. Wzorcem jest Społeczność.

   Co było różne:
   - Członkostwo miało własny zestaw klas `mc-czl-hero__*` i inny układ -
     nagłówek po lewej, akapit razem z przyciskiem w panelu po prawej,
     przycisk przezroczysty z białą obwódką 18 px. Szablon przebudowany
     na te same klasy `mc-foto__*`, martwe reguły usunięte.
   - Strona główna miała nagłówek 30 px z interlinią 1,22 i akapit 16,5 px,
     Społeczność 34 px z interlinią 1,28 i akapit 16 px.

   Wartości są te, które miała Społeczność - przeniesione tutaj z selektorów
   `.mc-spo-hero .mc-foto__*`, żeby obowiązywały wszystkie trzy nagłówki.
   Dzięki temu jest jedna definicja zamiast trzech, a specyficzność jest równa
   (jedna klasa), więc o pierwszeństwie decyduje kolejność w pliku.

   Reguły w zapytaniach medialnych zostały nietknięte - układ na telefonach był
   sprawdzany osobno tego samego dnia i działa.
   ══════════════════════════════════════════════════════════════ */

.mc-foto__tresc {
  left: 64px;
  right: auto;
  max-width: 46%;
  bottom: 64px;
}

.mc-foto__h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.28;
  margin-bottom: 1.125rem;
}

.mc-foto__txt { font-size: 1rem; line-height: 1.75; }

.mc-foto__btn { right: 64px; bottom: 64px; }




.mc-spo-blok       { padding: 0 0 5.25rem; }
.mc-spo-baner      { padding: 0 0 4.75rem; }
.mc-spo-profil     { padding: 0 0 5rem; }
.mc-spo-poznaj     { padding: 0 0 5rem; }
.mc-spo-wyd        { padding: 0 0 5.25rem; }
.mc-spo-blok__grid { gap: 4rem; }

.mc-spo-wyd .mc-karty,
.mc-spo-profil .mc-prof__ramka { max-width: 1696px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .mc-spo-hero .mc-foto__tresc { left: 24px; right: 24px; max-width: none; bottom: 130px; }
  .mc-spo-hero .mc-foto__btn { left: 24px; right: auto; bottom: 34px; }
}

/* ══════════════════════════════════════════════════════════════
   POLISH — wygładzenie wizualne (2026-08-05)
   ══════════════════════════════════════════════════════════════ */

/* 1. Smooth scroll na całej stronie */
html { scroll-behavior: smooth; }

/* 2. Container padding — więcej oddechu */
.mc-wrap { padding: 0 1.5rem; }

@media (max-width: 900px) {
  .mc-wrap { padding: 0 1.375rem; }
}

/* 3. Rytm pionowy — ujednolicenie sekcji */
.mc-hero      { padding: 3.75rem 0 3rem; }
.mc-filary    { padding: 1rem 0 3rem; }
.mc-foto      { padding: 0 0 3.5rem; }
.mc-plat      { padding: 0 0 3.5rem; }
.mc-bibl      { padding: 0 0 1rem; }
.mc-wyd       { padding: 3rem 0 3.5rem; }
.mc-kal       { padding: 1rem 0 4rem; }
.mc-news      { padding: 0 0 4rem; }
.mc-oc        { padding: 3rem 0 4rem; }
.mc-faq       { padding: 0 0 4rem; }
.mc-dol       { padding: 0 0 4rem; }
.mc-cta       { padding: 1rem 0 4rem; }
.mc-prof      { padding: 0 0 4rem; }

/* 4. Przyciski — lepszy hover */
.mc-btn {
  transition: opacity .2s, transform .2s, box-shadow .2s;
}

.mc-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.mc-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 5. Karty — delikatne uniesienie na hover */
.mc-karta {
  transition: box-shadow .3s, transform .3s;
}

a.mc-karta:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
  transform: translateY(-3px);
}

.mc-wydarzenie {
  transition: transform .25s, box-shadow .25s;
}

a.mc-wydarzenie:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}

/* 6. Zdjęcia w kartach — subtelny zoom na hover */
.mc-karta__foto img {
  transition: filter .3s, transform .4s;
}

a.mc-karta:hover .mc-karta__foto img {
  transform: scale(1.03);
}

/* 7. FAQ accordion — płynna animacja */
.mc-faq__item {
  transition: border-color .2s;
}

.mc-faq__item[open] {
  border-color: var(--mc-bez-100);
}

.mc-faq__item p {
  animation: mc-faq-wjazd .25s ease-out;
}

@keyframes mc-faq-wjazd {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mc-faq__item summary {
  transition: color .2s;
}

.mc-faq__item[open] summary {
  color: var(--mc-bez-100);
}

/* 8. Pasek postępu karuzeli — grubszy, wyraźniejszy */
.mc-karuzela__pasek {
  height: 4px;
  border-radius: 4px;
  background: #e8e6e4;
}

.mc-karuzela__pasek span {
  border-radius: 4px;
  background: var(--mc-czarny);
  transition: width .3s ease;
}

/* 9. Strzałki karuzeli — lepszy hover */
.mc-strzalka {
  transition: background .2s, transform .2s, box-shadow .2s;
}

.mc-strzalka:hover {
  background: var(--mc-tlo);
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.mc-strzalka:active {
  transform: scale(.96);
}

/* 10. Newsletter input — płynne focus */
.mc-news__form input {
  transition: border-color .25s, outline-color .25s, box-shadow .25s;
}

.mc-news__form input:focus {
  border-color: var(--mc-bez-100);
  box-shadow: 0 0 0 3px rgba(195, 163, 140, .18);
}

/* 11. Kafle filarów — czytelniejsza interakcja */
a.mc-filar {
  transition: border-color .2s, box-shadow .2s, transform .25s;
}

/* 12. Karty numerowane — hover */
a.mc-karta-num {
  transition: box-shadow .25s, transform .25s;
}

a.mc-karta-num:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}

/* 13. Cień na agent slider social icons — głębia */
.mc-agent__social a {
  transition: background .2s, transform .2s, box-shadow .2s;
}

.mc-agent__social a:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

/* 14. CTA box — subtelny cień wewnętrzny */
.mc-cta__box {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

/* 15. Ciemny pas na końcu — lepszy gradient */
.mc-dol .mc-wrap {
  background: linear-gradient(168deg, #2a2930 0%, #1a191e 100%);
}

/* 16. Badge — delikatna interakcja */
.mc-badge {
  transition: background .2s, color .2s;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIX — poprawki z audytu wizualnego (2026-08-05)
   ══════════════════════════════════════════════════════════════ */

/* --- Agent slider mobile: karta danych ucięta na dole --- */
@media (max-width: 900px) {
  .mc-agent {
    min-height: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }

  .mc-agent__foto {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 420px;
    flex-shrink: 0;
  }

  .mc-agent__karta {
    position: static;
    transform: none;
    width: auto;
    margin: 0;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 0 0 var(--mc-r-duzy) var(--mc-r-duzy);
    background: rgba(24, 23, 27, .92);
  }

  .mc-agent__imie {
    font-size: 1.625rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .mc-agent__opis { font-size: 0.9375rem; margin-bottom: 0.875rem; }
  .mc-agent__kontakt { font-size: 0.9375rem; margin-bottom: 0.875rem; }
  .mc-agent__firma { font-size: 0.875rem; margin-bottom: 1.125rem; }

  .mc-agent__btn { width: 100%; text-align: center; }

  .mc-agent__social {
    position: absolute;
    right: 14px;
    top: 14px;
    transform: none;
    flex-direction: row;
    gap: 0.5rem;
  }

  .mc-agent__social a { width: 36px; height: 36px; }
  .mc-agent__social svg { width: 16px; height: 16px; }
}

/* --- Newsletter/galeria na mobile: lepszy layout --- */
@media (max-width: 620px) {
  .mc-news__grid {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .mc-news__galeria {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }

  .mc-news__foto { aspect-ratio: 4 / 3; }
  .mc-news__foto:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  /* Ukryj 5. zdjęcie na bardzo małych ekranach - nieparzysta siatka */
  .mc-news__foto:nth-of-type(5) { display: none; }

  /* Instagram i Facebook to teraz dwa osobne kafle (18.08.2026) - każdy
     ma własne `.mc-kafel` tło i padding, nie trzeba już zerować paddingu
     rodzica jak przy dawnej karcie z dwoma wierszami w środku. */
  .mc-news__ig { order: 2; padding: 1.75rem 1.375rem; }
  .mc-news__fb { order: 3; padding: 1.75rem 1.375rem; }
  .mc-news__li { order: 4; padding: 1.5rem 1.375rem; }
}

/* --- Kalendarz na iPad: karty nie ucięte --- */
@media (min-width: 621px) and (max-width: 900px) {
  .mc-kal__grid .mc-karuzela__tor {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Sekcja foto na mobile: tekst lepiej czytelny --- */
@media (max-width: 620px) {
  .mc-foto__karta::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .08) 20%, rgba(0, 0, 0, .82) 100%);
  }

  .mc-foto__tresc {
    left: 22px;
    right: 22px;
    bottom: 22px;
    max-width: none;
  }

  .mc-foto__h2 { font-size: 1.25rem; }
  .mc-foto__txt { font-size: 0.9375rem; }

  .mc-foto__btn {
    position: static;
    display: block;
    margin-top: 1rem;
    width: 100%;
    text-align: center;
  }
}

/* --- Sekcja foto bok na mobile: kafel kolo + social pod sobą --- */
@media (max-width: 900px) {
  .mc-foto__bok {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
}

/* --- Open Cases na mobile: lepsze proporcje --- */
@media (max-width: 900px) {
  .mc-oc__karta {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .mc-oc__foto { max-height: 280px; overflow: hidden; }

  .mc-oc__plakat { padding: 1.875rem 1.5rem; }
  .mc-oc__panel  { padding: 1.875rem 1.5rem; }

  .mc-oc__tytul { font-size: 2rem; }
}

/* --- Platforma: karuzela numerowana na mobile nie ucięta --- */
@media (max-width: 620px) {
  .mc-karta-num {
    flex: 0 0 78%;
  }
}

/* --- Header sticky: nie nachodzi na content --- */
@media (max-width: 900px) {
  .mc-hero { padding-top: 1.25rem; }
}

/* --- Ciemny pas CTA na mobile: mniej paddingu --- */
@media (max-width: 620px) {
  .mc-dol .mc-wrap {
    padding: 3.5rem 1.5rem 3.875rem;
  }

  .mc-dol__h2 { font-size: 1.5rem; }
}

/* --- FAQ na mobile: mniejszy padding --- */
@media (max-width: 620px) {
  .mc-faq__box {
    padding: 1.75rem 1.125rem 1.5rem;
  }

  .mc-faq__item { padding: 0.875rem 1rem; }

  .mc-faq__item summary { font-size: 1rem; }
}

/* --- CTA box na mobile: czytelniejsze --- */
@media (max-width: 620px) {
  .mc-cta__box {
    padding: 2.25rem 1.375rem 2rem;
    border-radius: var(--mc-r);
  }

  .mc-cta__h2 { font-size: 1.375rem; }
}

/* --- Profil agenta sekcja: ramka na mobile --- */
@media (max-width: 620px) {
  .mc-prof__ramka { border-radius: var(--mc-r); }
  .mc-prof__podpis { font-size: 1.125rem; }
  .mc-prof__zdanie { font-size: 1rem; }
}

/* --- Badge na mobile: mniejszy --- */
@media (max-width: 620px) {
  .mc-badge { padding: 0.5625rem 1.25rem; font-size: 0.9375rem; }
}

/* ══════════════════════════════════════════════════════════════
   CZŁONKOSTWO - etykiety sekcji jako pastylki (05.08.2026)

   Etykiety WIEDZA / NARZĘDZIA / PRIMEHOUSE™ / SPOŁECZNOŚĆ były
   prostokątami z promieniem 14 px i obramowaniem 1,5 px. Zamieniamy
   je na pastylki bez obramowania - kształt jak pozostałe odznaki
   w serwisie (.mc-badge, promień 999 px). Zamiast kreski niesie je
   wypełnienie: białe na beżowym tle sekcji, beżowe na białym.
   Układ, kolejność i struktura sekcji bez zmian.
   ══════════════════════════════════════════════════════════════ */

.mc-badge--duzy {
  border: none;
  border-radius: 999px;
  padding: 0.8125rem 2.125rem;
  background: var(--mc-bez-jas);
}

/* W kartach filarów etykieta była belką na całą szerokość karty -
   pastylka obejmuje sam napis, tak jak w pozostałych sekcjach. */
.mc-czl-filar .mc-badge {
  align-self: flex-start;
  background: #fff;
  text-align: left;
}

/* Sekcje na beżowym tle - pastylka biała, żeby się odcinała. */
.mc-czl-sp .mc-badge,
.mc-czl-na .mc-badge { background: #fff; }

/* Sekcje na białym tle - pastylka beżowa. */
.mc-czl-wi .mc-badge,
.mc-czl-ph .mc-badge { background: var(--mc-bez-jas); }

/* ══════════════════════════════════════════════════════════════
   POWIETRZE W SEKCJACH Z KOLOREM - strona główna (05.08.2026)
   i Członkostwo (06.08.2026)

   Reguła `.mc-wrap { padding: 0 1.5rem}` z bloku POLISH ustawia
   odstępy wszystkim kontenerom, a kolorowe boksy noszą obie klasy
   naraz (`mc-wrap mc-cta__box`). Leży niżej w pliku, więc zerowała
   im padding pionowy - tekst dotykał górnej i dolnej krawędzi tła.
   Przywracamy własne odstępy boksów i dokładamy powietrza.
   Kolejność w pliku ma znaczenie: ten blok musi zostać na końcu.
   ══════════════════════════════════════════════════════════════ */

.mc-plat__grid { padding: 3.5rem 3.25rem; }
.mc-cta__box   { padding: 4.875rem 3.25rem 4.375rem; }
.mc-faq__box   { padding: 3.625rem 3rem 3.125rem; }

/* kafle wydarzeń i panel Open Cases - luźniej w środku */
.mc-wydarzenie { padding: 1.875rem 1.75rem 1.625rem; }
.mc-oc__panel  { padding: 3rem 2.75rem; }

/* Członkostwo - te same trzy boksy, ten sam mechanizm.
   Wartości z makiety Magdy (wariant 3 z 12.07): w projekcie zdjęcie
   w boksie SPOŁECZNOŚĆ jest odsunięte od krawędzi ze wszystkich stron,
   a pod listą NARZĘDZI zostaje wyraźny margines. */
.mc-czl-sp__box { padding: 2.75rem 3rem; }
.mc-czl-ef__box { padding: 3.5rem 3rem 3rem; }
.mc-czl-na__box { padding: 3.25rem 3rem 3.5rem; }

@media (max-width: 900px) {
  .mc-plat__grid { padding: 2.375rem 1.625rem; }
  .mc-cta__box   { padding: 3rem 1.5rem 2.625rem; }
  .mc-faq__box   { padding: 2.5rem 1.5rem 2.125rem; }
  .mc-oc__panel  { padding: 2.125rem 1.625rem; }

  .mc-czl-sp__box { padding: 2rem 1.625rem; }
  .mc-czl-ef__box { padding: 2.5rem 1.625rem 2.125rem; }
  .mc-czl-na__box { padding: 2.25rem 1.625rem 2.5rem; }
}

@media (max-width: 620px) {
  .mc-plat__grid { padding: 2rem 1.375rem; }
  .mc-cta__box   { padding: 2.5rem 1.375rem 2.125rem; }
  .mc-faq__box   { padding: 2rem 1.25rem 1.75rem; }

  .mc-czl-sp__box { padding: 1.625rem 1.25rem; }
  .mc-czl-ef__box { padding: 2.125rem 1.25rem 1.75rem; }
  .mc-czl-na__box { padding: 1.875rem 1.25rem 2.125rem; }
}

/* ══════════════════════════════════════════════════════════════
   KALENDARZ WYDARZEŃ - suwak, filtry, strzałki (05.08.2026)
   ══════════════════════════════════════════════════════════════ */

/* Strzałki: znak dokładnie na środku kółka. Wcześniej był to tekstowy
   glif ← →, który siedzi na linii pisma i nigdy nie trafiał w środek -
   teraz jest to SVG wyśrodkowany flexem. */
.mc-strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mc-strzalka svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-strzalka[disabled] { opacity: .28; cursor: default; }
.mc-strzalka[disabled]:hover { background: #fff; transform: none; box-shadow: none; }

/* Suwak z kartami wydarzeń - jeden wiersz, przewijany strzałkami i gestem. */
.mc-kalstr__tor {
  display: flex;
  gap: 1.375rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}

.mc-kalstr__tor::-webkit-scrollbar { display: none; }

.mc-kalstr__tor > .mc-kalstr-karta {
  flex: 0 0 calc((100% - 3 * 22px) / 4);
  scroll-snap-align: start;
  min-height: 320px;
}

@media (max-width: 1180px) { .mc-kalstr__tor > .mc-kalstr-karta { flex-basis: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 900px)  { .mc-kalstr__tor > .mc-kalstr-karta { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 620px)  { .mc-kalstr__tor > .mc-kalstr-karta { flex-basis: 84%; } }

/* Tytuł karty: część drukowana i dalsza część tą samą czcionką. */
.mc-kalstr-karta__tytul {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.mc-kalstr-karta__tytul-duzy {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .01em;
}

.mc-kalstr-karta__tytul-dalszy {
  font-weight: 400;
  line-height: 1.45;
}

/* Dwa przyciski: jasny z obramowaniem i ciemny. */
.mc-kalstr-karta__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 1rem;
}

.mc-kalstr-karta__btn {
  margin: 0;
  padding: 0.625rem 1.375rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
  text-decoration: none;
  transition: background .2s, color .2s, opacity .2s;
}

.mc-kalstr-karta__btn--obrys {
  background: transparent;
  border: 1.5px solid rgba(28, 27, 31, .32);
  color: var(--mc-czarny);
}

.mc-kalstr-karta__btn--obrys:hover { background: rgba(255, 255, 255, .7); color: var(--mc-czarny); }

.mc-kalstr-karta__btn--ciemny {
  background: var(--mc-czarny);
  border: 1.5px solid var(--mc-czarny);
  color: #fff;
}

.mc-kalstr-karta__btn--ciemny:hover { opacity: .85; color: #fff; }

.mc-kalstr__pusto {
  margin: 1.625rem 0 0;
  text-align: center;
  font-size: 1.03125rem;
  color: var(--mc-szary);
}

/* ── Mentoring PRO: ikony zamiast ptaszków ── */

.mc-mentoring__punkty { gap: 0.75rem; }

.mc-mentoring__punkty li {
  display: flex;
  align-items: flex-start;
  gap: 0.8125rem;
  line-height: 1.5;
}

.mc-mentoring__ikona {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mc-bez-jas);
  color: #5a4632;
}

.mc-mentoring__ikona svg { width: 18px; height: 18px; display: block; }

.mc-mentoring__punkty .mc-mentoring__punkt-txt {
  color: inherit;
  padding-top: 0.3125rem;
}

.mc-kalstr__ogon { flex: 0 0 0; display: block; }

/* Zapowiedź w wolnym miejscu na końcu toru wydarzeń. */
.mc-kalstr__ogon {
  flex: 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mc-r);
  overflow: hidden;
}

.mc-kalstr__ogon span { display: none; }

.mc-kalstr__ogon.is-widoczny {
  border: 1.5px dashed rgba(28, 27, 31, .18);
  background: rgba(246, 237, 227, .45);
}

.mc-kalstr__ogon.is-widoczny span {
  display: block;
  padding: 0 1.5rem;
  font-size: 0.96875rem;
  color: var(--mc-szary);
  text-align: center;
}

/* Karta ma display:flex, więc sam atrybut [hidden] jej nie chowa -
   filtr kategorii musi mieć własną regułę. */
.mc-kalstr__tor > .mc-kalstr-karta[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════
   KALENDARZ - kafle formatów zbudowane z treści (05.08.2026)
   Wcześniej były to gotowe grafiki z wpisanym tekstem, więc nic
   nie dało się poprawić bez Photoshopa. Teraz zdjęcie jest osobno,
   a napisy pochodzą z pól strony.
   ══════════════════════════════════════════════════════════════ */

.mc-formaty__nawigacja {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.mc-kalstr-formaty__grid.is-suwak {
  display: flex;
  grid-template-columns: none;
  gap: 1.625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}

.mc-kalstr-formaty__grid.is-suwak::-webkit-scrollbar { display: none; }

.mc-kalstr-formaty__grid.is-suwak > .mc-format {
  flex: 0 0 calc((100% - 2 * 26px) / 3);
  scroll-snap-align: start;
}

.mc-format {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  border-radius: var(--mc-r);
  overflow: hidden;
  background: var(--mc-bez-jas);
  color: inherit;
  text-decoration: none;
  min-height: 326px;
}

a.mc-format:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, .08); }

.mc-format__foto { overflow: hidden; }

.mc-format__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-format__tresc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.625rem 1.375rem 1.25rem;
}

.mc-format__tytul {
  margin: 0;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.mc-format__pod {
  margin: 0.5rem 0 0;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #46454a;
}

.mc-format__godziny {
  margin: 1.125rem 0 0;
  padding: 0.5625rem 1.375rem;
  border-radius: 6px;
  background: #fff;
  font-size: 0.84375rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.mc-format__opis {
  margin: 0.875rem 0 0;
  font-size: 0.78125rem;
  line-height: 1.5;
  color: #46454a;
}

.mc-format__stopka {
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgba(28, 27, 31, .14);
  text-align: left;
}

.mc-format__osoba { margin: 0; }

.mc-format__imie {
  display: block;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mc-format__rola {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.71875rem;
  color: var(--mc-szary);
}

.mc-format__logo {
  height: 15px;
  width: auto;
  display: block;
  margin-left: auto;
}

@media (max-width: 1180px) {
  .mc-kalstr-formaty__grid.is-suwak > .mc-format { flex-basis: calc((100% - 26px) / 2); }
}

@media (max-width: 780px) {
  .mc-kalstr-formaty__grid.is-suwak > .mc-format { flex-basis: 88%; }
  .mc-format { grid-template-columns: 1fr; min-height: 0; }
  .mc-format__foto { aspect-ratio: 16 / 10; }
}

/* ══════════════════════════════════════════════════════════════
   KALENDARZ - poprawki po przeglądzie (05.08.2026)
   ══════════════════════════════════════════════════════════════ */

/* Ikony przy punktach mentoringu na czarno. Wcześniej przegrywały
   z regułą `.mc-mentoring__punkty span { color: #4a9b6e }` - stąd zieleń. */
.mc-mentoring__punkty .mc-mentoring__ikona { color: var(--mc-czarny); }

/* Kafle formatów: napisy do lewej, opis wyjustowany. */
.mc-format__tresc {
  align-items: stretch;
  text-align: left;
}

.mc-format__tytul,
.mc-format__pod { text-align: left; }

.mc-format__godziny {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.mc-format__opis { text-align: justify; }

/* Logo PrimeHouse większe. */
.mc-format__logo { height: 24px; }

/* ══════════════════════════════════════════════════════════════
   MENTORING PRO - zaokrąglenia i rytm (05.08.2026)

   Beżowe pasy szły od krawędzi do krawędzi, na ostro. Zamieniamy je
   na zaokrąglone boksy - tak jak sekcje na stronie głównej i na
   Członkostwie - i dokładamy im odstępów w środku.
   ══════════════════════════════════════════════════════════════ */

.mc-men-osoba { padding: 1.375rem 0; }

.mc-men-osoba--tlo {
  background: transparent;
  padding: 1.375rem 0;
}

.mc-men-osoba--tlo > .mc-wrap {
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
  padding: 3.75rem 3.25rem;
  max-width: 1696px;
}

/* Bloki bez tła też potrzebują oddechu, żeby rytm strony był równy. */
.mc-men-osoba:not(.mc-men-osoba--tlo) > .mc-wrap {
  padding-top: 2.125rem;
  padding-bottom: 2.125rem;
}

.mc-men-naglowek { padding: 4rem 0 2.5rem; }

@media (max-width: 900px) {
  .mc-men-osoba--tlo > .mc-wrap { padding: 2.25rem 1.5rem; border-radius: var(--mc-r); }
  .mc-men-osoba:not(.mc-men-osoba--tlo) > .mc-wrap { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .mc-men-osoba { padding: 0.875rem 0; }
}

/* Na beżowym pasie kółko ikony musi być białe, inaczej znika w tle. */
.mc-men-osoba--tlo .mc-mentoring__ikona { background: #fff; }


/* ══════════════════════════════════════════════════════════════
   ODSTĘPY MIĘDZY SEKCJAMI x2 (06.08.2026)

   Każda sekcja dostaje dwa razy większe odstępy pionowe. Wartości są
   wyliczone z reguł bazowych i wypisane wprost, a nie mnożone w locie -
   dzięki temu widać, co się dzieje, i da się poprawić pojedynczą sekcję.

   Poza listą zostają celowo: .mc-wrap (to boczny odstęp kontenera, nie
   przerwa między sekcjami), .mc-wydarzenie i .mc-men-osoba (odstępy
   wewnątrz kafla i bloku mentora, nie między sekcjami).

   Blok musi zostać poniżej wszystkich reguł bazowych.
   ══════════════════════════════════════════════════════════════ */

.mc-arch-lista         { padding: 0 0 8rem; }
.mc-bibl               { padding: 0 0 2rem; }
.mc-cen-fo             { padding: 0 0 7rem; }
.mc-cen-plany          { padding: 0 0 7rem; }
.mc-cta                { padding: 2rem 0 8rem; }
.mc-czl-ef             { padding: 0 0 6.25rem; }
.mc-czl-filary         { padding: 0 0 5rem; }
.mc-czl-na             { padding: 0 0 4.25rem; }
.mc-czl-ph             { padding: 0 0 6.25rem; }
.mc-czl-sp             { padding: 0 0 5.5rem; }
.mc-czl-wi             { padding: 0 0 5.75rem; }
.mc-dol                { padding: 0 0 8rem; }
.mc-faq                { padding: 0 0 8rem; }
.mc-filary             { padding: 2rem 0 6rem; }
.mc-foto               { padding: 0 0 7rem; }
.mc-kal                { padding: 2rem 0 8rem; }
.mc-kalstr-formaty     { padding: 0 0 7rem; }
.mc-mentoring          { padding: 0 0 7rem; }
.mc-news               { padding: 0 0 8rem; }
/* Open Cases miało własny górny odstęp 48 px, który dokładał się do dolnego
   odstępu Kalendarza - przerwa wychodziła 112 px przy 64 px u sąsiadów, a po
   podwojeniu 224 px przy 128 px. Zerujemy górę, żeby wpadła w ten sam rytm. */
.mc-oc                 { padding: 0 0 8rem; }
.mc-plat               { padding: 0 0 7rem; }
.mc-prof               { padding: 0 0 8rem; }
.mc-spo-baner          { padding: 0 0 9.5rem; }
.mc-spo-blok           { padding: 0 0 10.5rem; }
.mc-spo-profil         { padding: 0 0 10rem; }
.mc-spo-poznaj         { padding: 0 0 10rem; }
.mc-spo-wyd            { padding: 0 0 10.5rem; }
.mc-wyd                { padding: 6rem 0 7rem; }

/* Nagłówki stron: podwajamy tylko dół. Górny odstęp to przerwa od menu,
   a nie odstęp między sekcjami - podwojony odepchnąłby stronę od nagłówka. */
.mc-hero               { padding-bottom: 6rem; }
.mc-czl-hero           { padding-bottom: 4.25rem; }
.mc-spo-hero           { padding-bottom: 5.5rem; }
.mc-kalstr-naglowek    { padding-bottom: 5.75rem; }
.mc-men-naglowek       { padding-bottom: 5rem; }


/* ══════════════════════════════════════════════════════════════
   ODSTĘP HERO → TREŚĆ: 20 px (06.08.2026)

   Sekcja tytułowa ma odstawać od treści dokładnie o 20 px, a nie o 128 px
   jak reszta rytmu strony. Zerujemy też górny odstęp sekcji następnej,
   bo przerwa to suma obu.
   ══════════════════════════════════════════════════════════════ */

.mc-hero      { padding-bottom: 1.25rem; }
.mc-filary    { padding-top: 0; }
.mc-czl-hero  { padding-bottom: 1.25rem; }
.mc-spo-hero  { padding-bottom: 1.25rem; }


/* ══════════════════════════════════════════════════════════════
   AUDYT SPÓJNOŚCI - poprawki punktowe (06.08.2026, noc)

   Dwie usterki, które nie są kwestią gustu, tylko błędem:
   zdjęcie niewypełniające karty i kadr ucinający twarz.
   ══════════════════════════════════════════════════════════════ */

/* Karta wypełniona zdjęciem (PODCASTY) - jasny pas u góry i u dołu NIE był
   błędem układu. Zdjęcie wypełnia kadr co do piksela; białe paski (5 px u góry,
   4 px u dołu) są wpalone w sam plik `mc-podcast.jpg`. Naprawa poszła w obraz,
   nie w arkusz. Zostawiam ten ślad, bo pierwszy odruch prowadzi w CSS. */

/* Wizytówki agentów - kadr zdjęcia.
   Kadr jest bardzo panoramiczny (16/9 przy wysokości do 640 px), więc
   z portretowego zdjęcia widać wąski pas. Przy `center 25%` twarz Switlany
   wypadała dokładnie na górnej krawędzi kadru i była ucięta.

   Liczone dla zdjęcia 679x608: po dopasowaniu szerokością do 1618 px obraz
   ma 1449 px wysokości, z czego widać 640. Głowa siedzi między 5 a 22%
   wysokości źródła, czyli 72-319 px. Dopiero kadr liczony od górnej krawędzi
   (`top`) mieści ją w całości; przy 8% czoło było wciąż ucięte. */
.mc-agent__foto { object-position: center top; }


/* ══════════════════════════════════════════════════════════════
   JEDNA SIATKA I JEDEN PROMIEŃ (07.08.2026)

   Audyt wykazał dwie szerokości i sześć promieni. Ten blok sprowadza
   je do jednego zestawu. Musi zostać na końcu pliku - wcześniejsze
   reguły mają tę samą specyficzność, więc decyduje kolejność.

   SIATKA. Kontener `.mc` ma 1666 px (to `.container` motywu Polor:
   1696 px minus 2×15 px). Wewnątrz `.mc-wrap` odejmuje jeszcze
   2×24 px, więc karty, suwaki i paski stoją na 1618 px. Boksy z tłem
   są jednocześnie `.mc-wrap`, więc tło rozlewało się na pełne 1666 px
   i wystawało 24 px poza kolumnę treści. Dostają teraz margines
   równy temu paddingowi - wszystko ląduje na 1618 px.

   PROMIEŃ. 16 px dla wszystkiego, co jest kartą albo boksem;
   12 px dla tego, co leży wewnątrz karty (zdjęcia, pola, pastylki
   z godzinami). Mniejszy promień wewnątrz to zasada koncentryczności:
   przy równych promieniach róg wewnętrzny wygląda na grubszy.
   ══════════════════════════════════════════════════════════════ */

/* Margines boczny kolumny treści. Wartości muszą odpowiadać
   paddingowi `.mc-wrap` (24 px, poniżej 900 px - 22 px). */
.mc { --mc-margines: 24px; }

@media (max-width: 900px) {
  .mc { --mc-margines: 22px; }
}

/* Boksy niosące tło - zwężone do kolumny treści. */
.mc-plat__grid,
.mc-cta__box,
.mc-faq__box,
.mc-czl-sp__box,
.mc-czl-na__box,
.mc-czl-ef__box,
.mc-mentoring__grid,
.mc-dol > .mc-wrap {
  margin-left: var(--mc-margines);
  margin-right: var(--mc-margines);
}

/* Suwak w sekcji "Pierwsza w Polsce" kończył się 52 px przed prawą
   krawędzią tła, przez co karty wyglądały na ucięte w przypadkowym
   miejscu. Ujemny margines wypuszcza tor do samej krawędzi tła,
   a padding tej samej wielkości zostawia zapas przy pełnym przewinięciu. */
.mc-plat__prawo .mc-karuzela__tor {
  margin-right: -3.25rem;
  padding-right: 3.25rem;
}

@media (max-width: 900px) {
  .mc-plat__prawo .mc-karuzela__tor {
    margin-right: -1.625rem;
    padding-right: 1.625rem;
  }
}

/* Karty i boksy - 16 px. */
.mc-filar,
.mc-karta-num,
.mc-kalstr-karta,
.mc-kalstr__ogon,
.mc-format,
.mc-news__foto,
.mc-faq__item {
  border-radius: var(--mc-r-duzy);
}

/* Wizytówka agenta leży na zdjęciu jako osobna karta, ale poniżej 900 px
   przykleja się do dolnej krawędzi kadru i tam ma zaokrąglone tylko dwa rogi -
   dlatego reguła obowiązuje wyłącznie na szerokich ekranach. */
@media (min-width: 901px) {
  .mc-agent__karta { border-radius: var(--mc-r-duzy); }
}

/* Wnętrza kart - 12 px. */
.mc-czl-nagranie__foto,
.mc-format__godziny {
  border-radius: var(--mc-r);
}

/* Przycisk "ZAPISUJĘ SIĘ" miał 44 px przy wysokości 46 px, czyli prawie
   pastylkę - ale nie do końca. Promień nie szedł z naszego arkusza, tylko
   z motywu Polor (`button[type="submit"]`), a ten selektor jest bardziej
   szczegółowy niż pojedyncza klasa - stąd podwójna klasa poniżej. */
.mc-btn.mc-btn--ciemny { border-radius: 999px; }


/* ══════════════════════════════════════════════════════════════
   SPOŁECZNOŚĆ - odstęp pod filmem w nagłówku (07.08.2026)

   Prośba: 30 px między filmem a kolejną sekcją. Reszta stron zostaje
   na 20 px, dlatego reguła celuje wyłącznie w `.mc-spo-hero`.

   Uwaga na siatkę poniżej: `.mc-spo-blok__grid` ma `align-items: center`,
   a kolumna z tekstem jest wyższa od galerii - galeria bywa więc zepchnięta
   kilka pikseli niżej niż sam początek sekcji. Odstęp liczony do krawędzi
   sekcji jest równo 30 px; do pierwszego zdjęcia wychodzi o te kilka więcej
   i zmienia się z długością tekstu obok.
   ══════════════════════════════════════════════════════════════ */

.mc-spo-hero { padding-bottom: 1.875rem; }


/* ══════════════════════════════════════════════════════════════
   PRZEGLĄD NA TELEFONACH (07.08.2026)

   Cały wcześniejszy audyt siatki i odstępów sprawdzany był na 1920 i 1440 px.
   Ten blok zamyka to, co wyszło dopiero przy prawdziwej emulacji urządzenia
   (headless Chrome nie schodzi poniżej ok. 500 px szerokości okna, więc samym
   `--window-size` tego nie było widać).

   Blok musi zostać na końcu pliku - nadpisuje reguły z wcześniejszych
   zapytań medialnych o tej samej szczegółowości.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {

  /* --- Sekcja z filmem: koło i ikony pod sobą ---
     Kafle stały obok siebie w siatce `1fr 1fr`, ale ich najmniejsze szerokości
     (240 px koło + 163 px ikony + 16 px odstępu = 419 px) nie mieszczą się
     w 316 px dostępnych na telefonie. Siatka rozpychała całą sekcję poza ekran,
     a `.mc` z `overflow-x: hidden` ucinał nadmiar - przy 390 px ginęło 66 px
     karty z filmem razem z końcówkami zdań, przy 320 px obciętych elementów
     było 21. Nie dało się tego doprzewijać: to było obcięcie, nie suwak. */
  .mc-foto__bok { grid-template-columns: 1fr; }

  /* --- Pasek korzyści: kolumny, które faktycznie się mieszczą ---
     `1fr` to `minmax(auto, 1fr)`, a `auto` nie schodzi poniżej najdłuższego
     słowa. "MASTERCLASS™" wymuszało kolumnę 179 px zamiast 151 px, więc kafle
     dochodziły do samej krawędzi ekranu (lewy margines 37 px, prawy 4 px),
     a przy 360 px i węższych wychodziły poza nią. */
  .mc-filary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-filar        { padding: 0.9375rem 0.625rem; }

  /* Samo `minmax(0, 1fr)` nie wystarczy - tekst musi się w tej kolumnie zmieścić.
     Dolna granica 13 px wynika wprost z "MASTERCLASS™": przy 376 px ekranu kafel
     ma 144 px, czyli 124 px na tekst, i tyle właśnie zajmuje to słowo w 13 px. */
  .mc-filar__tytul  { font-size: clamp(0.8125rem, 3.3vw, 1.09375rem); }
  .mc-filar__podpis { font-size: clamp(0.75rem, 3vw, 0.96875rem); }

  /* --- Czytelność tekstu na karcie z filmem ---
     Na telefonie akapit zajmuje niemal całą kartę, a przyciemnienie zaczynało
     się od `.08` - w górnej połowie biały tekst leżał praktycznie na gołym
     zdjęciu (jasne bluzki, okna). Zmierzone: 8% powierzchni akapitu poniżej
     progu WCAG 4,5:1, najgorsze piksele 2,65:1. Po zmianie 0% poniżej progu.
     Dotyczy też nagłówków Członkostwa i Społeczności - te same klasy. */
  .mc-foto__karta::after {
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .58) 35%, rgba(0, 0, 0, .86) 100%);
  }

  /* --- Baner OPEN HOUSE PRO na Społeczności ---
     Przy proporcjach 21:9 karta ma na telefonie 135 px wysokości, a sam blok
     napisu 113 px - tekst wypełniał kadr od krawędzi do krawędzi i łamał się
     na dwie linie. Wyższy kadr daje 198 px przy bloku 80 px. */
  .mc-spo-baner__karta img { aspect-ratio: 16 / 10; }
  .mc-spo-baner__h2  { font-size: 1.625rem; }
  .mc-spo-baner__nad { font-size: 0.78125rem; margin-bottom: 0.375rem; }
  .mc-spo-baner__pod { font-size: 0.75rem; }

  /* Napis stoi na jasnym niebie i leżakach - sam cień tekstu go nie ratował
     (85% powierzchni poniżej progu, miejscami biel na bieli). Żeby biały tekst
     nad białym pikselem dał 4,5:1, warstwa musi mieć co najmniej 54% krycia -
     stąd te wartości, a nie dobrane na oko. Po zmianie 0% poniżej progu.

     Gradient biegnie teraz od góry, bo napis przeniósł się pod górną krawędź
     (tak stoi na projekcie). Na telefonie kadr jest niższy, więc przyciemnienie
     sięga głębiej niż na dużym ekranie - inaczej tekst wychodziłby poza nie. */
  .mc-spo-baner__karta::after {
    inset: 0 0 auto;
    height: 62%;
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, .58) 40%, rgba(0, 0, 0, 0) 100%);
  }
}

@media (max-width: 375px) {
  /* Poniżej 376 px dwie kolumny kafli nie mają już sensu: tytuł musiałby zejść
     poniżej 13 px, żeby się zmieścić. Jedna kolumna wraca do pełnej typografii. */
  .mc-filary__grid  { grid-template-columns: 1fr; }
  .mc-filar__tytul  { font-size: 1.09375rem; }
  .mc-filar__podpis { font-size: 0.96875rem; }
  .mc-filar         { min-height: 64px; }
}


/* ══════════════════════════════════════════════════════════════
   ODSTĘPY MIĘDZY SEKCJAMI NA TELEFONIE: dwie trzecie (07.08.2026)

   Sekcje nie miały żadnych nadpisań w zapytaniach medialnych, więc odstępy
   96-160 px obowiązywały tak samo na 1440 px i na 390 px. Przy 1440 px odstęp
   128 px to 9% szerokości ekranu, przy 390 px już 33%.

   Wartości to dwie trzecie tych z bloku „ODSTĘPY MIĘDZY SEKCJAMI x2",
   zaokrąglone do parzystych i wypisane wprost - żeby dało się poprawić
   pojedynczą sekcję bez przeliczania całości.

   Nagłówki stron (`.mc-hero`, `.mc-czl-hero`, `.mc-spo-hero`) zostają
   nietknięte: ich 20 px (30 px na Społeczności) to osobna, świadoma decyzja
   z 06-07.08, a nie element rytmu między sekcjami.

   Uwaga: to zmiana kosmetyczna. Wszystkie przerwy razem to ok. 9% wysokości
   strony głównej - skrócenie ich o jedną trzecią zabiera ok. 470 px z 15 167 px,
   czyli niecały jeden ekran telefonu. Długość strony bierze się z treści.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  .mc-cen-plany       { padding: 0 0 4.75rem; }
  .mc-cta             { padding: 1.375rem 0 5.375rem; }
  .mc-czl-ef          { padding: 0 0 4.25rem; }
  .mc-czl-filary      { padding: 0 0 3.375rem; }
  .mc-czl-na          { padding: 0 0 2.875rem; }
  .mc-czl-ph          { padding: 0 0 4.25rem; }
    .mc-czl-sp          { padding: 0 0 3.75rem; }
  .mc-czl-wi          { padding: 0 0 3.875rem; }
  .mc-dol             { padding: 0 0 5.375rem; }
  .mc-faq             { padding: 0 0 5.375rem; }
  .mc-filary          { padding: 0 0 4rem; }
  .mc-foto            { padding: 0 0 4.75rem; }
  .mc-kal             { padding: 1.375rem 0 5.375rem; }
  .mc-kalstr-formaty  { padding: 0 0 4.75rem; }
  .mc-mentoring       { padding: 0 0 4.75rem; }
  .mc-news            { padding: 0 0 5.375rem; }
  .mc-oc              { padding: 0 0 5.375rem; }
  .mc-plat            { padding: 0 0 4.75rem; }
  .mc-prof            { padding: 0 0 5.375rem; }
  .mc-spo-baner       { padding: 0 0 6.375rem; }
  .mc-spo-blok        { padding: 0 0 7rem; }
  .mc-spo-profil      { padding: 0 0 6.75rem; }
  .mc-spo-poznaj      { padding: 0 0 6.75rem; }
  .mc-spo-wyd         { padding: 0 0 7rem; }
  .mc-wyd             { padding: 4rem 0 4.75rem; }

  .mc-kalstr-naglowek { padding-bottom: 3.875rem; }
  .mc-men-naglowek    { padding-bottom: 3.375rem; }
}


/* ══════════════════════════════════════════════════════════════
   CZŁONKOSTWO - przebudowa układu (07.08.2026)

   Strona była zbiorem treści wrzuconych jedna pod drugą: ścieżka agenta jako
   akapit ze strzałkami, filary jako gołe listy, a na dole dwie sekcje
   powtarzające te listy słowo w słowo. Ten blok nadaje temu układ.

   Blok stoi na końcu pliku, a wewnątrz zachowuje kolejność: najpierw reguły
   bazowe, potem zapytania medialne. Odwrotna kolejność sprawiłaby, że reguły
   dla dużych ekranów nadpisują telefony - zapytanie medialne nie podnosi
   szczegółowości.
   ══════════════════════════════════════════════════════════════ */

/* ---------- Ikony ---------- */

.mc-czl-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mc-bez);
  color: var(--mc-czarny);
}
.mc-czl-ikona svg { width: 22px; height: 22px; }

.mc-czl-ikona--mala { width: 32px; height: 32px; background: #fff; }
.mc-czl-ikona--mala svg { width: 17px; height: 17px; }

/* Na beżowym tle filaru kółko musi być białe, żeby się nie zlało. */
.mc-czl-ikona--filar { background: #fff; }

.mc-czl-ikona--krok { width: 38px; height: 38px; background: var(--mc-bez-jas); }
.mc-czl-ikona--krok svg { width: 19px; height: 19px; }


/* ---------- Twoja droga: suwak ---------- */

.mc-czl-droga { padding: 0 0 6rem; }

.mc-czl-droga__box {
  margin-inline: var(--mc-margines, 1.5rem);
  padding: 3.5rem 3.25rem 3.25rem;
  background: var(--mc-bez-jas);
  border-radius: var(--mc-r-duzy);
}

.mc-czl-droga__naglowek { max-width: 720px; margin-bottom: 2.125rem; }
.mc-czl-droga__h2 {
  margin: 0.875rem 0 0;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.22;
  font-weight: 600;
  font-family: var(--polor-heading-font-family, 'General Sans'), serif;
}
.mc-czl-droga__lead {
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #46454a;
}

/* Karta kroku: numer i ikona w jednym rzędzie, pod nimi tytuł i opis.
   Opis dostaje `1fr`, więc karty w rzędzie mają równą wysokość. */
.mc-karta-num--droga {
  flex: 0 0 300px;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  padding: 1.5rem 1.625rem 1.75rem;
  border: 1px solid var(--mc-linia);
}
.mc-karta-num__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mc-karta-num--droga .mc-karta-num__nr { font-variant-numeric: tabular-nums; }
.mc-karta-num--droga .mc-karta-num__tytul { font-size: 1.0625rem; line-height: 1.3; }
/* Kolor podpisu poprawiony w regule bazowej (07.08.2026): #a08f7f dawał
   na białym tle 3,12:1 przy progu 4,5:1. Teraz #846a52 - 5,04:1, ten sam
   ciepły charakter. Dotyczyło też paska "zobacz więcej" i linku kontaktowego. */
.mc-karta-num--droga .mc-karta-num__podpis { line-height: 1.6; }


/* ---------- Filary: nagłówek z ikoną, lista z ikonami, strzałka ---------- */

.mc-czl-filar__gora {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.mc-filar-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.mc-filar-lista__tresc { display: block; }
.mc-filar-lista__tytul { font-size: 1.03125rem; line-height: 1.3; }

/* Odnośnik "zobacz więcej" jako wyraźna akcja, nie sam napis.
   Strzałka odjeżdża przy najechaniu - stąd wiadomo, że to link. */
.mc-czl-filar__wiecej {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.6875rem 1.25rem;
  border-radius: 999px;
  background: var(--mc-czarny);
  color: #fff;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.mc-czl-filar__wiecej:hover,
.mc-czl-filar__wiecej:focus-visible { background: #35333a; color: #fff; }

.mc-czl-strzalka {
  width: 17px;
  height: 17px;
  transition: transform .2s;
}
.mc-czl-filar__wiecej:hover .mc-czl-strzalka { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .mc-czl-strzalka,
  .mc-czl-filar__wiecej { transition: none; }
  .mc-czl-filar__wiecej:hover .mc-czl-strzalka { transform: none; }
}


/* ---------- Nagłówek sekcji ze zdaniem wprowadzającym ---------- */

.mc-czl-sekcja__naglowek { max-width: 760px; margin-bottom: 2.125rem; }
.mc-czl-sekcja__lead {
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #46454a;
}


/* ---------- Karty rozwinięcia (Narzędzia, PrimeHouse) ---------- */

.mc-czl-karty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.375rem;
}
.mc-czl-karta {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.875rem 1.75rem 2rem;
  background: #fff;
  border: 1px solid var(--mc-linia);
  border-radius: var(--mc-r-duzy);
}
.mc-czl-karta__tytul {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}
.mc-czl-karta__opis {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #46454a;
}

/* Sekcja PrimeHouse leży na białym tle strony, więc jej karty potrzebują
   innego tła niż białe - inaczej widać samą ramkę. */
.mc-czl-ph .mc-czl-karta { background: #fff; border-color: var(--mc-linia); }


/* ---------- Nagrania: plakietka czasu i znak odtwarzania ---------- */

.mc-czl-nagranie__foto { position: relative; }

.mc-czl-nagranie__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--mc-czarny);
  transition: transform .2s;
}
.mc-czl-nagranie__play svg { width: 26px; height: 26px; }
.mc-czl-nagranie:hover .mc-czl-nagranie__play { transform: translate(-50%, -50%) scale(1.08); }

/* Plakietka idzie na górę, bo miniatury mają wpalony w obraz pasek odtwarzacza
   z własnym czasem w prawym dolnym rogu - na dole obie liczby nachodziłyby
   na siebie. */
.mc-czl-nagranie__czas {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  background: rgba(28, 27, 31, .82);
  color: #fff;
  font-size: 0.78125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mc-czl-nagranie__osoba {
  margin: 0.875rem 0 0;
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* --mc-bez-100 (#c3a38c) na bieli to 2,35:1. #8a6a52 daje 4,95:1
     i zachowuje ciepły, brązowy charakter nadtytułu. */
  color: #8a6a52;
}
.mc-czl-nagranie__tytul { margin-top: 0.375rem; }


/* ---------- Węższe ekrany ---------- */

@media (max-width: 1180px) {
  .mc-czl-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mc-czl-droga { padding: 0 0 4.5rem; }
  .mc-czl-droga__box { padding: 2.75rem 1.875rem 2.5rem; }
  .mc-czl-droga__naglowek { margin-bottom: 1.75rem; }
  .mc-czl-sekcja__naglowek { margin-bottom: 1.75rem; }
}

@media (max-width: 620px) {
  .mc-czl-droga { padding: 0 0 4rem; }
  .mc-czl-droga__box { padding: 2.125rem 1.375rem 2rem; }
  .mc-czl-droga__lead,
  .mc-czl-sekcja__lead { font-size: 1rem; }

  .mc-karta-num--droga { flex-basis: 82%; }

  .mc-czl-karty { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mc-czl-karta { padding: 1.5rem 1.375rem 1.625rem; }
  /* Bez zawijania przycisk sam trzymał kolumnę szerszą niż ekran. */
  .mc-czl-karta__cta { white-space: normal; }

  .mc-czl-filar__wiecej { align-self: stretch; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   CZŁONKOSTWO - poprawki po przeglądzie (07.08.2026, wieczór)
   ══════════════════════════════════════════════════════════════ */

/* Pastylka filaru stoi sama, bez ikony obok, i ma 30 px do treści pod spodem.
   Filar układa dzieci flexem z odstępem 16 px, więc dokładamy brakujące 14. */
.mc-czl-filar > .mc-badge--duzy { margin-bottom: 0.875rem; }

/* Zdanie o społeczności. Zmniejszone 17.08 z clamp(28px, 3.9vw, 54px):
   przy 54 px pierwsze zdanie („Nie konkurujemy ze sobą.") nie mieściło się
   w jednym wierszu kolumny, a ma się w nim mieścić. Zapas jest wyliczony,
   nie wzięty na oko: przy wadze 400 to zdanie ma 11,15 × stopień pisma,
   a kolumna trzyma ok. 0,388 szerokości okna - stąd 3,2vw i sufit 42 px. */
.mc-czl-sp__txt {
  font-size: clamp(1.5rem, 3.2vw, 2.625rem);
  line-height: 1.16;
  letter-spacing: -.01em;
}

/* Nagłówki sekcji WIEDZA, NARZĘDZIA i PRIMEHOUSE™ - pastylka i zdanie
   pod nią wyśrodkowane. Wcześniej tekst pod WIEDZĄ był wyśrodkowany,
   a pod dwoma pozostałymi wyrównany do lewej. */
.mc-czl-wi .mc-czl-sekcja__naglowek,
.mc-czl-na .mc-czl-sekcja__naglowek,
.mc-czl-ph .mc-czl-sekcja__naglowek {
  margin-inline: auto;
  text-align: center;
}
.mc-czl-wi .mc-czl-sekcja__lead,
.mc-czl-na .mc-czl-sekcja__lead,
.mc-czl-ph .mc-czl-sekcja__lead { text-align: center; }

/* Przycisk w karcie rozwinięcia - lekki, obrysowany, żeby nie konkurował
   z ciemnym "ZOBACZ WIĘCEJ" w filarach. Trzyma się dołu karty, więc przyciski
   w rzędzie stoją w jednej linii niezależnie od długości opisu. */
.mc-czl-karta__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.625rem 1.125rem;
  border: 1.5px solid var(--mc-czarny);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mc-czarny);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.mc-czl-karta__cta:hover,
.mc-czl-karta__cta:focus-visible {
  background: var(--mc-czarny);
  color: #fff;
}
/* Napis przycisku ma zostać w jednym wierszu - "Dostępne w członkostwie"
   łamało się na dwie linie i psuło równy rząd kart. */
.mc-czl-karta__cta { white-space: nowrap; }
.mc-czl-karta__cta .mc-czl-strzalka { width: 15px; height: 15px; flex: 0 0 auto; }
.mc-czl-karta__cta:hover .mc-czl-strzalka { transform: translateX(3px); }

/* Bez nadpisywania `margin-top` na przycisku - to ono dociska go do dołu karty,
   dzięki czemu przyciski w rzędzie stoją w jednej linii także wtedy, gdy któraś
   pozycja nie ma opisu. Odstęp nad przyciskiem daje odstęp siatki karty. */

@media (prefers-reduced-motion: reduce) {
  .mc-czl-karta__cta { transition: none; }
  .mc-czl-karta__cta:hover .mc-czl-strzalka { transform: none; }
}

@media (max-width: 620px) {
  .mc-czl-sp__txt { line-height: 1.2; }
  .mc-czl-karta__cta { align-self: stretch; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   OKRĄGŁE STRZAŁKI SUWAKÓW - czarne i wyśrodkowane (07.08.2026)

   Zgłoszenie: strzałki w suwaku wizytówek nie stoją w środku kółka,
   a samo kółko ma być czarne.

   Wyrównanie: w suwaku wizytówek i wydarzeń strzałki były jeszcze
   **glifami tekstowymi** ← →, które siedzą na linii pisma i przez to nigdy
   nie trafiają w środek koła - `align-items: center` centruje wtedy wiersz
   tekstu, a nie sam znak. W kalendarzu wymieniono je na SVG już 05.08;
   teraz to samo w `ph-masterclass-lp.php`, więc wszystkie kółka mają
   jednakowy, symetryczny znak.
   ══════════════════════════════════════════════════════════════ */

.mc-strzalka--kolo {
  border-color: var(--mc-czarny);
  color: var(--mc-czarny);
}

/* Po najechaniu wypełnienie, żeby było widać, że to przycisk. */
.mc-strzalka--kolo:hover,
.mc-strzalka--kolo:focus-visible {
  background: var(--mc-czarny);
  color: #fff;
}

/* Wygaszona strzałka (koniec zakresu) zostaje czytelna, ale wyraźnie słabsza. */
.mc-strzalka--kolo[disabled],
.mc-strzalka--kolo[aria-disabled="true"] {
  border-color: rgba(28, 27, 31, .28);
  color: rgba(28, 27, 31, .28);
  background: #fff;
}

/* ── PLAKIETKA PLANU NA KARCIE WYDARZENIA (07.08.2026) ──────────────
   Mówi, od którego planu wydarzenie jest dostępne. Plany są schodkowe,
   więc START znaczy "w START i wyżej". Stoi obok kategorii, dlatego
   kategoria dostaje układ liniowy z odstępem. */
.mc-kalstr-karta__kat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.mc-plan {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	white-space: nowrap;
}
.mc-plan--start {
	/* Karta wydarzenia ma bezowe tlo, wiec bezowa pastylka na niej ginie
	   (kontrast 1,04:1). Biel to ta sama konwencja, co etykiety
	   na /czlonkostwo/: wypelnienie niesie etykiete, nie obramowanie. */
	background: #fff;
	color: var(--mc-czarny, #1c1b1f);
}
.mc-plan--pro {
	background: var(--mc-czarny, #1c1b1f);
	color: #fff;
}

/* ── KLUB: przestrzenie i wątki (07.08.2026) ────────────────────────
   Trzyma konwencję reszty serwisu: kontener .mc-wrap, promień 16 px,
   pastylki planu z kalendarza.

   Tło kart to `--mc-bez-jas` (#f6ede3), a nie `--mc-bez-25` (#e2cdb8).
   Pierwsza wersja brała `--mc-bez-25`, ale skróty renderowały się poza
   opakowaniem `.mc`, więc zmienna nie istniała i wchodziła wartość zapasowa -
   przez to karty wyglądały jasno mimo błędnej deklaracji. Po naprawie
   opakowania (07.08.2026) wyszła prawda: #e2cdb8 daje podpisom kart 3,48:1
   przy progu 4,5:1. Jasny beż to i kolor pozostałych paneli serwisu,
   i 4,62:1 na tych samych podpisach. */
.mc-klub { padding: 3.5rem 0 6rem; }
.mc-klub__h1 { font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1.2; margin: 0 0 0.75rem; }
.mc-klub__h2 { font-size: 1.25rem; margin: 0 0 0.875rem; }
.mc-klub__wstep { font-size: 1rem; line-height: 1.7; color: #46454a; margin: 0 0 2.125rem; max-width: 60ch; }
.mc-klub__pusto { color: #6b6a70; font-size: 0.9375rem; padding: 1.625rem 0; }
.mc-klub__powrot { margin: 0 0 1.125rem; font-size: 0.875rem; }
.mc-klub__powrot a { color: #46454a; text-decoration: none; }
.mc-klub__powrot a:hover { text-decoration: underline; }

.mc-klub__siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.125rem; }
.mc-klub__karta {
	display: flex; flex-direction: column; gap: 0.5rem;
	padding: 1.5rem; border-radius: 16px; background: var(--mc-bez-jas, #f6ede3);
	text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease;
}
.mc-klub__karta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.mc-klub__karta--zamknieta { opacity: .72; }
.mc-klub__ikona { font-size: 1.625rem; line-height: 1; }
/* Kolor jawnie, a nie z dziedziczenia: karta to <a> z `color: inherit`,
   więc tytuł brał szarość motywu (#808080). Na beżu karty daje to 3,67:1
   przy progu 4,5:1 - zmierzone 07.08.2026. */
.mc-klub__tytul { font-size: 1.125rem; font-weight: 700; color: var(--mc-czarny, #1c1b1f); }
.mc-klub__opis { font-size: 0.875rem; line-height: 1.6; color: #56555b; flex: 1; }
.mc-klub__stopka { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.375rem; }
.mc-klub__licznik { font-size: 0.78125rem; color: #6b6a70; }
.mc-klub__zamek { font-size: 0.78125rem; font-weight: 600; color: #46454a; }

/* Kolumna do czytania. Klasa była używana w widoku wątku od Fazy 1, ale nigdy
   nie została zdefiniowana - wątki szły przez to na pełne 1392 px, mimo że kod
   prosił o węższy układ. Wykryte 07.08.2026 przy budowie biblioteki. */
.mc-wrap--waski { max-width: 880px; }

.mc-klub__watki { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 3rem; }
.mc-klub__watek {
	display: flex; flex-direction: column; gap: 0.25rem;
	padding: 1.125rem 1.25rem; border-radius: 12px; text-decoration: none; color: inherit;
	transition: background .18s ease;
}
.mc-klub__watek:hover { background: var(--mc-bez-jas, #f6ede3); }
.mc-klub__watek-tytul { font-size: 1.03125rem; font-weight: 600; color: var(--mc-czarny, #1c1b1f); }
.mc-klub__watek-meta { font-size: 0.8125rem; color: #6b6a70; }
.mc-klub__tresc { font-size: 1rem; line-height: 1.75; margin: 1.375rem 0 2.5rem; }

.mc-klub__form { background: var(--mc-bez-jas, #f6ede3); border-radius: 16px; padding: 1.75rem; }
.mc-klub__form label { display: block; font-size: 0.8125rem; font-weight: 600; margin: 0.875rem 0 0.375rem; }
/* Także `url` i `email`: profil ma pola „Strona www" i „LinkedIn", a reguła
   na samym `text` zostawiała je jako surowe pola przeglądarki - wąskie,
   z cienką ramką i wysokością nieprzystającą do reszty formularza. */
.mc-klub__form input[type=text],
.mc-klub__form input[type=url],
.mc-klub__form input[type=email],
.mc-klub__form textarea {
	width: 100%; box-sizing: border-box; padding: 0.6875rem 0.875rem;
	border: 1px solid #e0d5c8; border-radius: 10px; font: inherit; font-size: 0.9375rem; background: #fff;
	/* Bez tego wpisana wartość bierze szarość motywu (#808080) - 3,67:1 na bieli. */
	color: var(--mc-czarny, #1c1b1f);
}
.mc-klub__form button { margin-top: 1.125rem; }
.mc-klub__odpowiedzi { margin-top: 1rem; }

@media (max-width: 620px) {
	.mc-klub { padding: 2.25rem 0 4rem; }
	.mc-klub__siatka { grid-template-columns: 1fr; }
	.mc-klub__form { padding: 1.25rem; }
}

/* ── PROFILE CZŁONKÓW (07.08.2026) ─────────────────────────────── */
.mc-profil__karta {
	display: flex; flex-direction: column; gap: 0.4375rem;
	padding: 1.5rem; border-radius: 16px; background: var(--mc-bez-jas, #f6ede3);
}
.mc-profil__awatar { border-radius: 999px; width: 56px; height: 56px; margin-bottom: 0.25rem; }
.mc-profil__linia { font-size: 0.84375rem; color: #56555b; }
.mc-profil__spec {
	align-self: flex-start; font-size: 0.71875rem; font-weight: 700; letter-spacing: .03em;
	padding: 0.1875rem 0.625rem; border-radius: 999px; background: #fff; color: var(--mc-czarny, #1c1b1f);
}
.mc-profil__linki { display: flex; gap: 0.75rem; margin-top: 0.25rem; font-size: 0.8125rem; }
.mc-profil__linki a { color: #46454a; }
.mc-profil__help { display: block; font-size: 0.75rem; color: #6b6a70; margin-top: 0.25rem; }
.mc-profil__ok {
	background: #e7f3e9; color: #1d5c2b; padding: 0.6875rem 1rem;
	border-radius: 10px; font-size: 0.875rem; margin: 0 0 0.5rem;
}
.mc-profil__form { max-width: 620px; }

/* ── BIBLIOTEKA: kursy, lekcje, nagrania, wzory druków (07.08.2026) ──
   FAZA 2 klubu. Dokłada się do klas klubu zamiast je powielać: karty
   kursów i nagrań to `.mc-klub__karta` z drobnymi różnicami, a nowe klasy
   `mc-bib__*` niosą tylko to, czego klub nie ma - okładkę, pasek postępu,
   spis lekcji i listę plików.

   Promień 16 px na zewnątrz, 12 px wewnątrz - zasada koncentryczności
   ustalona w audycie siatki z 07.08. */

.mc-bib__h2 {
	font-size: clamp(1.25rem, 1.7vw, 1.625rem);
	line-height: 1.25;
	margin: 3.5rem 0 1.25rem;
}
.mc-bib__h2:first-of-type { margin-top: 0.5rem; }
.mc-bib__h3 {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #6b6a70;
	margin: 1.875rem 0 0.625rem;
}
.mc-bib__wiecej { margin: 1.125rem 0 0; font-size: 0.90625rem; }
.mc-bib__wiecej a { color: var(--mc-czarny, #1c1b1f); font-weight: 600; }

/* Okładka kursu. Kadr stały, żeby karty w siatce miały równą wysokość
   niezależnie od proporcji wgranego zdjęcia. */
.mc-bib__okladka {
	display: block;
	margin: -1.5rem -1.5rem 0.25rem;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.mc-bib__okladka img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Pasek postępu ────────────────────────────────────────────────
   Sam pasek nie niesie informacji dla czytnika ekranu, dlatego liczby
   stoją obok słowem - nie jako podpowiedź po najechaniu. */
.mc-bib__postep { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.375rem 0 0.125rem; }
.mc-bib__pasek {
	height: 6px;
	border-radius: 999px;
	background: #e6ded4;
	overflow: hidden;
}
.mc-bib__pasek span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--mc-czarny, #1c1b1f);
	transition: width .3s ease;
}
.mc-bib__postep-opis { font-size: 0.78125rem; color: #6b6a70; }

/* ── Spis lekcji ──────────────────────────────────────────────────
   Numer ma stałą szerokość, żeby tytuły stały w jednej linii pionowej
   także przy dwucyfrowej numeracji. */
.mc-bib__lekcje { list-style: none; margin: 1.875rem 0 0; padding: 0; }
.mc-bib__lekcja + .mc-bib__lekcja { border-top: 1px solid #ece4da; }
.mc-bib__lekcja a {
	display: grid;
	grid-template-columns: 38px 1fr auto auto;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 0.875rem;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: background .18s ease;
}
.mc-bib__lekcja a:hover { background: var(--mc-bez-jas, #f6ede3); }
/* Nie `#a08f7f` z kart suwaka: ten kolor daje na białym 3,12:1.
   Numer lekcji niesie kolejność, więc ma być czytelny, nie ozdobny. */
.mc-bib__lekcja-nr { font-size: 0.8125rem; font-weight: 700; color: #6b6a70; }
.mc-bib__lekcja-tytul { font-size: 1.03125rem; font-weight: 600; }
.mc-bib__lekcja-czas { font-size: 0.8125rem; color: #6b6a70; }
.mc-bib__lekcja-stan { font-size: 0.9375rem; width: 18px; text-align: center; color: #1d5c2b; }
.mc-bib__lekcja--zrobiona .mc-bib__lekcja-tytul { color: #56555b; }
.mc-bib__lekcja-meta { font-size: 0.84375rem; color: #6b6a70; margin: -0.375rem 0 1.375rem; }

/* Tekst wyłącznie dla czytnika ekranu. Własna klasa, bo motyw Polor nie
   definiuje `.screen-reader-text` - napis „ukończona" wyszedł wtedy na wierzch
   i rozbił wiersz lekcji na dodatkową kolumnę siatki. */
.mc-bib__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Odtwarzacz ───────────────────────────────────────────────────
   Kadr 16:9 wymuszony na opakowaniu, bo osadzenia z YouTube'a i Vimeo
   przychodzą z własnymi wymiarami w atrybutach. */
.mc-bib__wideo {
	position: relative;
	margin: 1.5rem 0 1.875rem;
	border-radius: 16px;
	overflow: hidden;
	background: #0d0d0f;
	aspect-ratio: 16 / 9;
}
.mc-bib__wideo video,
.mc-bib__wideo iframe,
.mc-bib__wideo embed,
.mc-bib__wideo object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.mc-bib__wideo-link { margin: 1.25rem 0 1.75rem; font-size: 0.9375rem; }

.mc-bib__oznacz { margin: 1.875rem 0 0; }
.mc-bib__nawigacja {
	display: flex;
	justify-content: space-between;
	gap: 1.125rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #ece4da;
	font-size: 0.90625rem;
}
.mc-bib__nawigacja a { color: #46454a; text-decoration: none; font-weight: 600; }
.mc-bib__nawigacja a:hover { text-decoration: underline; }
.mc-bib__nawigacja-nast { text-align: right; }

/* ── Wzory druków ─────────────────────────────────────────────────
   Lista, nie siatka: pliki różnią się nazwą, nie wyglądem, więc rząd
   czyta się szybciej niż kafle. */
.mc-bib__pliki { list-style: none; margin: 0; padding: 0; }
.mc-bib__plik {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "nazwa akcja" "opis akcja";
	align-items: center;
	gap: 0.25rem 1.25rem;
	padding: 1.125rem 1.25rem;
	border-radius: 12px;
	background: var(--mc-bez-jas, #f6ede3);
}
.mc-bib__plik + .mc-bib__plik { margin-top: 0.5rem; }
.mc-bib__plik--zamkniety { opacity: .78; }
.mc-bib__plik-nazwa { grid-area: nazwa; font-size: 1rem; font-weight: 600; color: var(--mc-czarny, #1c1b1f); }
.mc-bib__plik-opis { grid-area: opis; font-size: 0.84375rem; line-height: 1.55; color: #56555b; }
.mc-bib__plik-akcja { grid-area: akcja; display: flex; align-items: center; gap: 0.75rem; }
.mc-bib__plik-brak { font-size: 0.78125rem; color: #6b6a70; }
.mc-bib__plik-zamek { font-size: 0.78125rem; font-weight: 600; color: #46454a; }
.mc-bib__pobierz { white-space: nowrap; }
.mc-bib__rozmiar { font-weight: 400; opacity: .7; }

/* ── Filtry nagrań ────────────────────────────────────────────────
   Ta sama forma, co pastylki kategorii na stronie głównej. */
.mc-bib__filtry { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.875rem; }
.mc-bib__filtr {
	padding: 0.5rem 1.125rem;
	border-radius: 999px;
	background: var(--mc-bez-jas, #f6ede3);
	color: var(--mc-czarny, #1c1b1f);
	font-size: 0.84375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.mc-bib__filtr:hover { background: var(--mc-bez, #eddbc7); }
.mc-bib__filtr--wybrany { background: var(--mc-czarny, #1c1b1f); color: #fff; }

@media (max-width: 620px) {
	.mc-bib__h2 { margin: 2.5rem 0 1rem; }
	.mc-bib__lekcja a { grid-template-columns: 30px 1fr auto; gap: 0.625rem; padding: 0.875rem 0.625rem; }
	.mc-bib__lekcja-czas { display: none; }
	.mc-bib__plik {
		grid-template-columns: 1fr;
		grid-template-areas: "nazwa" "opis" "akcja";
		align-items: start;
		gap: 0.5rem;
	}
	.mc-bib__plik-akcja { flex-wrap: wrap; }
	.mc-bib__nawigacja { flex-direction: column; }
	.mc-bib__nawigacja-nast { text-align: left; }
}

/* ── WYNIKI WYSZUKIWANIA: klub i biblioteka (08.08.2026) ────────────
   Sekcja doklejana pod siatką artykułów w `polor-child/search.php`.
   Lista, nie kafle: wyniki różnią się tytułem, nie wyglądem. */
.mc-szukaj { padding: 0.5rem 0 6rem; }
.mc-szukaj__h2 { font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.25; margin: 0 0 0.375rem; }
.mc-szukaj__ile { font-size: 0.875rem; color: #6b6a70; margin: 0 0 1.625rem; }
.mc-szukaj__lista { list-style: none; margin: 0 0 1.625rem; padding: 0; }
.mc-szukaj__pozycja {
	padding: 1.125rem 1.25rem;
	border-radius: 12px;
	background: var(--mc-bez-jas, #f6ede3);
}
.mc-szukaj__pozycja + .mc-szukaj__pozycja { margin-top: 0.5rem; }
.mc-szukaj__pozycja--zamknieta { opacity: .82; }
.mc-szukaj__link {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	text-decoration: none;
	color: inherit;
}
.mc-szukaj__tytul { font-size: 1.03125rem; font-weight: 600; color: var(--mc-czarny, #1c1b1f); }
.mc-szukaj__link:hover .mc-szukaj__tytul { text-decoration: underline; }
/* Rodzaj wyniku („kurs", „wątek") - podpis, nie etykieta, więc bez pastylki. */
.mc-szukaj__rodzaj { font-size: 0.78125rem; color: #6b6a70; }
.mc-szukaj__opis { font-size: 0.875rem; line-height: 1.6; color: #56555b; margin: 0.375rem 0 0; }
.mc-szukaj__stopka { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.625rem; }
.mc-szukaj__zamek { font-size: 0.78125rem; font-weight: 600; color: #46454a; }

@media (max-width: 620px) {
	.mc-szukaj { padding: 0.25rem 0 4rem; }
	.mc-szukaj__pozycja { padding: 1rem; }
}

/* ── GRYWALIZACJA: punkty i odznaki (08.08.2026) ────────────────────
   Ma być zachętą, nie tablicą wyników - stąd brak rankingu, brak pasków
   postępu do następnego poziomu i stonowana typografia. Odznaki niezdobyte
   są widoczne, ale wygaszone: mają mówić, co da się jeszcze zrobić. */
.mc-gry {
	background: var(--mc-bez-jas, #f6ede3);
	border-radius: 16px;
	padding: 1.625rem 1.75rem;
	margin: 0 0 1.625rem;
}
.mc-gry__glowa { display: flex; align-items: baseline; gap: 0.625rem; }
.mc-gry__punkty { font-size: 2.125rem; font-weight: 700; line-height: 1; color: var(--mc-czarny, #1c1b1f); }
.mc-gry__punkty-opis { font-size: 0.875rem; color: #56555b; }
.mc-gry__rozbicie { font-size: 0.84375rem; color: #56555b; margin: 0.625rem 0 1.25rem; }

.mc-gry__odznaki {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.625rem;
}
.mc-gry__odznaka {
	display: grid;
	grid-template-columns: 28px 1fr;
	grid-template-areas: "ikona nazwa" "ikona opis";
	align-items: center;
	gap: 0 0.625rem;
	padding: 0.75rem 0.875rem;
	border-radius: 12px;
	background: #fff;
}
/* Wygaszenie robimy kolorem, nie `opacity` - przy 0,45 podpis schodziłby
   poniżej progu czytelności, a odznaka do zdobycia ma być do przeczytania. */
.mc-gry__odznaka--brak { background: rgba(255,255,255,.55); }
.mc-gry__odznaka--brak .mc-gry__ikona { filter: grayscale(1); opacity: .55; }
.mc-gry__odznaka--brak .mc-gry__nazwa { color: #56555b; }
.mc-gry__ikona { grid-area: ikona; font-size: 1.25rem; line-height: 1; text-align: center; }
.mc-gry__nazwa { grid-area: nazwa; font-size: 0.875rem; font-weight: 700; color: var(--mc-czarny, #1c1b1f); }
.mc-gry__opis { grid-area: opis; font-size: 0.75rem; line-height: 1.45; color: #56555b; }

.mc-gry__pasek { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; flex-wrap: wrap; }
.mc-gry__pasek-punkty {
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	background: #fff;
	color: var(--mc-czarny, #1c1b1f);
}
.mc-gry__pasek-ikona { font-size: 0.9375rem; line-height: 1; }

@media (max-width: 620px) {
	.mc-gry { padding: 1.25rem; }
	.mc-gry__odznaki { grid-template-columns: 1fr; }
}

/* ── ZGODA NA POWIADOMIENIA (08.08.2026) ────────────────────────────
   Pole wyboru w formularzu profilu. `.mc-klub__form label` jest blokowe
   i pogrubione (etykiety nad polami), więc ten wiersz musi się z tego
   wyłamać - inaczej napis stanąłby nad kwadracikiem. */
.mc-pow__pole {
	display: flex !important;
	align-items: flex-start;
	gap: 0.625rem;
	font-weight: 400 !important;
	font-size: 0.90625rem !important;
	line-height: 1.5;
	margin: 1.375rem 0 0.25rem !important;
	cursor: pointer;
}
.mc-pow__pole input[type=checkbox] {
	width: 18px;
	height: 18px;
	margin: 0.0625rem 0 0;
	accent-color: var(--mc-czarny, #1c1b1f);
	flex: none;
}


/* ══════════════════════════════════════════════════════════════
   ODSTĘP OD PRZYCISKÓW HERO DO FILMU (16.08.2026)

   Przestrzeń między rzędem przycisków a kartą z filmem to w praktyce
   dolny odstęp sekcji kafli - między przyciskami a kaflami są tylko
   świadome 20 px z 06.08, a kafle same w sobie mają 104 px wysokości.

   96 px pod kaflami to wynik podwojenia odstępów z 06.08 (było 48).
   Wracamy do 48 px, czyli do rytmu sprzed podwojenia; na telefonie
   64 → 32 px, żeby zachować proporcję dwóch trzecich z 07.08.

   Blok musi zostać na końcu pliku - reguła mobilna w bloku „ODSTĘPY
   MIĘDZY SEKCJAMI NA TELEFONIE" ma tę samą szczegółowość i leży wyżej.
   ══════════════════════════════════════════════════════════════ */

.mc-filary { padding-bottom: 3rem; }

@media (max-width: 620px) {
  .mc-filary { padding-bottom: 2rem; }
}


/* ══════════════════════════════════════════════════════════════
   FILM NA CAŁĄ SZEROKOŚĆ I KRÓTSZY ODSTĘP OD MENU (16.08.2026)

   Kolumna z beżowym kołem i kaflem profili zdjęta z sekcji z filmem.
   Klasa `--sam` dokładana przez szablon, gdy pole „Kolumna z boku"
   jest wyłączone - zaznaczenie go w panelu przywraca układ dwudzielny
   bez dotykania arkusza.

   Blok musi zostać na końcu pliku: reguły mobilne dla `.mc-foto__grid`
   mają tę samą szczegółowość i leżą wyżej, więc wcześniej wstawiony
   `1fr` przegrałby z nimi na wąskich ekranach.
   ══════════════════════════════════════════════════════════════ */

.mc-foto__grid--sam { grid-template-columns: minmax(0, 1fr); }

/* Odstęp od menu do nagłówka: 60 → 36 px. Dolny odstęp hero (20 px,
   decyzja z 06.08) zostaje nietknięty. */
.mc-hero { padding-top: 2.25rem; }

@media (max-width: 900px) {
  .mc-hero { padding-top: 1.375rem; }
}


/* ══════════════════════════════════════════════════════════════
   NAGŁÓWEK STRONY: DWIE RÓWNE KOLUMNY W LINII MENU (16.08.2026)

   Pasek nagłówka jest pełnej szerokości z odstępem 40 px, a treść strony
   siedzi w kontenerze motywu (1666 px, wyśrodkowanym). Przy 1440 px oba
   wypadały równo przypadkiem (logo 40, nagłówek 39), ale przy 1920 px
   różnica rosła do 111 px - logo na 40, nagłówek na 151.

   Siatka nagłówka wychodzi więc z kontenera ujemnym marginesem liczonym
   z różnicy między szerokością okna a kontenerem. `100%` to szerokość
   rodzica, czyli kontenera - dzięki temu wzór działa na każdej szerokości
   bez wpisywania wartości z ręki.

   UWAGA: `100vw` nie odejmuje paska przewijania. Na systemach, gdzie pasek
   zajmuje miejsce (Windows), siatka wyjdzie o połowę jego szerokości za daleko
   i tyle zostanie obcięte przez `overflow-x: hidden` na `.mc` - w praktyce
   ok. 7 px z prawej. Zapas z każdej strony rozwiązałby to, ale rozjeżdżał
   lewą krawędź z logo, czyli psuł dokładnie to, o co chodziło. Do zamiany
   na zapas dopiero wtedy, gdyby ucięcie okazało się widoczne.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  /* Sekcje `mc-*` mają wypełniać kolumnę 1140 px co do piksela.

     Zniknęło stąd wyprowadzanie `.mc` poza kontener motywu (ujemny margines
     z `100vw`) - od 16.08 nagłówek i treść stoją w jednym kontenerze 1140 px,
     więc równanie do menu robi się samo.

     `.mc-wrap` ma własne `max-width: 1696px`, `margin: 0 auto` i padding
     24 px. Wszystko trzy trzeba zdjąć, żeby karty spinały pełne 1140,
     a nie 1092.

     PUŁAPKA: `.mc-wrap` noszą **także boksy z tłem** (`class="mc-wrap
     mc-cta__box"`), a ich własne paddingi (52, 48 px…) siedzą w arkuszu
     wyżej niż ten blok - zerowanie `padding-inline` na samej klasie
     `.mc-wrap` odbierałoby im boczny odstęp i tekst dotykałby krawędzi tła.
     Dokładnie ten błąd naprawiany 05.08 i powtórzony przeze mnie kilka
     godzin temu. Stąd lista wykluczeń zamiast jednej reguły.

     KAŻDY NOWY BOKS Z TŁEM MUSI TRAFIĆ DO OBU LIST PONIŻEJ. Pominięcie
     jest ciche: boks zachowuje tło i górny padding, a traci boczny -
     treść dotyka krawędzi. Tak wypadł `mc-czl-droga__box` (suwak „Twoja
     droga" na Członkostwie), dopisany 17.08. */
  .mc-wrap:not(.mc-plat__grid):not(.mc-cta__box):not(.mc-faq__box):not(.mc-czl-droga__box):not(.mc-czl-sp__box):not(.mc-czl-na__box):not(.mc-czl-ef__box):not(.mc-czl-wi__box):not(.mc-czl-ph__box):not(.mc-mentoring__grid):not(.mc-sub__box):not(.mc-sub-plany__box):not(.mc-kalk-co__box):not(.mc-kalk-cta__box) {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Boksy z tłem: pełna szerokość kolumny, własny padding zostaje. */
  .mc-plat__grid,
  .mc-cta__box,
  .mc-faq__box,
  .mc-czl-droga__box,
  .mc-czl-sp__box,
  .mc-czl-na__box,
  .mc-czl-ef__box,
  .mc-czl-wi__box,
  .mc-czl-ph__box,
  .mc-mentoring__grid,
  .mc-sub__box,
  .mc-sub-plany__box,
  .mc-kalk-co__box,
  .mc-kalk-cta__box {
    max-width: none;
    margin-inline: 0;
  }

  .mc-hero__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }

  /* Tekst kończy się 40 px przed granicą kolumny - to jest ta przerwa
     między kolumnami, dlatego `column-gap` zszedł do zera. */
  .mc-hero__h1 { padding-right: 2.5rem; }

  /* Kolumna lewa ma dorównać wysokością prawej, stąd zgoda na większy
     stopień pisma i luźniejszą interlinię. */
  .mc-hero__h1 {
    font-size: clamp(1.5rem, 2.11vw, 2.25rem);
    line-height: 1.35;
  }
}

/* Karta z filmem: dolna krawędź tekstu równo z dolną krawędzią przycisku.
   Oba bloki stoją na `bottom: 64px`, ale nagłówek niósł jeszcze 18 px
   marginesu dolnego - odstęp przewidziany pod akapit, którego od 16.08
   już nie ma. Zerujemy margines ostatniego elementu, nie sam nagłówek,
   żeby po ewentualnym powrocie akapitu odstęp wrócił sam. */
.mc-foto__tresc > :last-child { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════════
   DWA WIERSZE WYDARZEŃ JEDEN POD DRUGIM (16.08.2026)

   Drugi wiersz to osobna sekcja, więc domyślnie dzielił je rytm sekcji
   (96 + 112 px). W projekcie stoją tuż pod sobą, jak dwa rzędy jednej
   siatki - odstęp ma być taki sam jak między kartami w rzędzie, czyli 26 px.
   ══════════════════════════════════════════════════════════════ */

.mc-wyd:has(+ .mc-wyd--drugi) { padding-bottom: 1.625rem; }
.mc-wyd--drugi { padding-top: 0; }

@media (max-width: 620px) {
  .mc-wyd:has(+ .mc-wyd--drugi) { padding-bottom: 1.375rem; }
}


/* ══════════════════════════════════════════════════════════════
   KAFLE KATEGORII: PODPIS ZAWSZE W JEDNYM WIERSZU (16.08.2026)

   Sześć kafli dzieli kolumnę treści, więc ich szerokość spada razem
   z oknem, a stały podpis 15,5 px łamał się na dwa wiersze poniżej
   1488 px („Szkolenia i biblioteka wiedzy", „Poznaj agentów z całej
   Polski", „Narzędzie do ustalenia ceny"). Kafle robiły się nierówne.

   Stopień pisma idzie więc za szerokością kafla, a nie stoi w miejscu.

   Wzór musi liczyć **miejsce na tekst**, a nie samą szerokość kafla:
   padding kafla jest stały, więc przy zwężaniu ubywa go proporcjonalnie
   więcej. Skalowanie wprost do szerokości kafla (pierwsze podejście)
   wciąż łamało „Poznaj agentów z całej Polski" - brakowało jednego piksela.
   Kafel = (okno - 118) / 6, miejsce na tekst = kafel - 36, a 15,5 px
   mieści się w 192 px - stąd 1,3455vw - 4,494px.

   Zakres tylko tam, gdzie kafli jest sześć w rzędzie. Niżej siatka
   schodzi do trzech i czterech kolumn, kafle robią się szerokie
   i obowiązują reguły z przeglądu mobilnego.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1201px) {
  .mc-filar__podpis {
    font-size: clamp(0.75rem, calc(1.3455vw - 0.280875rem), 0.96875rem);
    line-height: 1.4;
  }
  .mc-filar__tytul {
    font-size: clamp(0.84375rem, calc(1.519vw - 0.316875rem), 1.09375rem);
  }
}


/* ══════════════════════════════════════════════════════════════
   PLANSZA WYDARZENIA (16.08.2026)

   Beżowa okładka budowana w HTML z pól wydarzenia - zastępuje grafiki
   eksportowane z Canvy. Kolory zdjęte pipetą z oryginału Magdy:
   tło #E9DCC9, pastylka z terminem #F5EEE3, tekst #040404.

   CZYTELNOŚĆ PRZED WIERNOŚCIĄ. Pierwsza wersja odwzorowywała proporcje
   oryginału co do procenta i w karcie na stronie głównej (ok. 280 px)
   schodziła do 4,8-8 px. Grafika z Canvy miała dokładnie tak samo, ale
   była bitmapą - tu jest prawdziwy tekst, który czyta czytnik ekranu
   i próbuje przeczytać człowiek.

   Stąd trzy odstępstwa od oryginału przy wąskiej planszy:
   zdjęcie idzie NAD panel (panel dostaje pełną szerokość zamiast 56%),
   stopnie pisma mają podłogi w pikselach, a wiersze najmniej niosące
   treści (podpis prowadzącego, logo, opis) znikają. Zostaje to, po co
   ktoś patrzy na okładkę: co, kto i kiedy.
   ══════════════════════════════════════════════════════════════ */

.mc-plansza {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 44.3% 1fr;
  background: #e9dcc9;
  overflow: hidden;
  container-type: inline-size;
  container-name: plansza;
}

.mc-plansza__foto { position: relative; overflow: hidden; }

.mc-plansza__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.mc-plansza__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5% 6%;
  color: #040404;
}

.mc-plansza__panel--sam { grid-column: 1 / -1; }

/* Podłogi w pikselach są tu ważniejsze niż górne wartości: pilnują, żeby
   plansza w małej karcie nie zeszła poniżej progu czytelności serwisu. */
.mc-plansza__tytul {
  margin: 0;
  font-size: clamp(0.9375rem, 6.2cqw, 2.875rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.mc-plansza__gosc {
  margin: 2.2cqw 0 0;
  font-size: clamp(0.65625rem, 2.4cqw, 1.0625rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mc-plansza__etykieta { display: block; font-weight: 600; }

.mc-plansza__termin {
  margin: 2.6cqw 0 0;
  padding: 1.2cqw 2.4cqw;
  background: #f5eee3;
  border-radius: 6px;
  font-size: clamp(0.6875rem, 2.9cqw, 1.375rem);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.mc-plansza__opis {
  margin: 2.4cqw 0 0;
  font-size: clamp(0.625rem, 2cqw, 0.9375rem);
  line-height: 1.4;
  font-weight: 600;
}

.mc-plansza__stopka {
  margin-top: 3cqw;
  padding-top: 2.4cqw;
  width: 100%;
  border-top: 1px solid rgba(4, 4, 4, .18);
}

.mc-plansza__host {
  margin: 0;
  font-size: clamp(0.65625rem, 2.4cqw, 1.0625rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mc-plansza__rola {
  margin: .4cqw 0 0;
  font-size: clamp(0.625rem, 1.9cqw, 0.8125rem);
  font-weight: 400;
}

.mc-plansza__logo {
  margin: 2.4cqw 0 0;
  font-size: clamp(0.6875rem, 2.8cqw, 1.25rem);
  letter-spacing: -.01em;
}

.mc-plansza__logo strong { font-weight: 700; }
.mc-plansza__logo span   { font-weight: 400; }

/* Wąska plansza - czyli każda w karcie na stronie głównej. Zdejmujemy
   wiersze, które przy tej wielkości i tak byłyby nieczytelne: podpis
   prowadzącego, logo i opis. Zostaje to, po co ktoś patrzy na okładkę:
   co, kto i kiedy.

   UWAGA: pierwsza wersja próbowała w tym samym miejscu przełożyć zdjęcie
   nad panel (`grid-template-columns: 1fr` na `.mc-plansza`) i to **nigdy
   się nie wykonywało** - zapytanie kontenerowe stylizuje potomków, nie sam
   kontener. Wyszło dopiero na zrzucie: reguły z `display: none` działały,
   a zmiana siatki nie. Układ bok w bok okazał się i tak czytelniejszy,
   więc został; przełączanie siatki musiałoby siedzieć poziom wyżej. */
@container plansza (max-width: 460px) {
  .mc-plansza__panel { padding: 4% 7%; }
  .mc-plansza__rola,
  .mc-plansza__logo,
  .mc-plansza__opis { display: none; }
  .mc-plansza__stopka { margin-top: 2.6cqw; padding-top: 2.2cqw; }
}

/* Kadr karty trzyma proporcje 3:2 zdjęciem w środku. Plansza jest
   pozycjonowana bezwzględnie, więc sama nie nadaje wysokości - kadr
   dostaje ją tu, w tych samych proporcjach, żeby karty z planszą
   i ze zdjęciem stały w jednej linii. */
.mc-karta__foto--plansza {
  position: relative;
  aspect-ratio: 3 / 2;
}



/* ══════════════════════════════════════════════════════════════
   ODSTĘPY MIĘDZY SEKCJAMI: O DWIE TRZECIE MNIEJ (16.08.2026)

   Rytm ustawiony 06.08 (podwojenie) dawał 128-208 px między sekcjami.
   Przy szerokości 1440 px i krótszych sekcjach robiły się z tego puste
   ekrany - najmocniej przed rzędami kart (208 px) i za nimi (144 px).

   Wartości to jedna trzecia poprzednich, wypisane wprost, żeby dało się
   poprawić pojedynczą sekcję bez przeliczania całości. Jeden zestaw dla
   wszystkich szerokości - blok leży niżej niż przegląd mobilny z 07.08,
   więc zastępuje też tamte wartości.

   Nietknięte zostają odstępy ustawione osobnymi decyzjami: 20 px pod
   nagłówkiem strony (06.08), 26 px między dwoma rzędami kart (16.08)
   i zerowa góra sekcji kafli.
   ══════════════════════════════════════════════════════════════ */

.mc-cen-fo             { padding: 0 0 2.3125rem; }
.mc-cen-plany          { padding: 0 0 2.3125rem; }
.mc-cta                { padding: 0.6875rem 0 2.6875rem; }
.mc-czl-ef             { padding: 0 0 2.0625rem; }
.mc-czl-filary         { padding: 0 0 1.6875rem; }
.mc-czl-na             { padding: 0 0 1.4375rem; }
.mc-czl-ph             { padding: 0 0 2.0625rem; }
.mc-czl-sp             { padding: 0 0 1.8125rem; }
.mc-czl-wi             { padding: 0 0 1.9375rem; }
.mc-dol                { padding: 0 0 2.6875rem; }
.mc-faq                { padding: 0 0 2.6875rem; }
.mc-filary             { padding: 0 0 1rem; }
.mc-foto               { padding: 0 0 2.3125rem; }
.mc-kal                { padding: 0.6875rem 0 2.6875rem; }
.mc-kalstr-formaty     { padding: 0 0 2.3125rem; }
.mc-mentoring          { padding: 0 0 2.3125rem; }
.mc-news               { padding: 0 0 2.6875rem; }
.mc-oc                 { padding: 0 0 2.6875rem; }
.mc-plat               { padding: 0 0 2.3125rem; }
.mc-prof               { padding: 0 0 2.6875rem; }
.mc-spo-baner          { padding: 0 0 3.1875rem; }
.mc-spo-blok           { padding: 0 0 3.5rem; }
.mc-spo-profil         { padding: 0 0 3.3125rem; }
.mc-spo-poznaj         { padding: 0 0 3.3125rem; }
.mc-spo-wyd            { padding: 0 0 3.5rem; }
.mc-wyd                { padding: 2rem 0 2.3125rem; }

.mc-kalstr-naglowek    { padding-bottom: 1.9375rem; }
.mc-men-naglowek       { padding-bottom: 1.6875rem; }

/* Decyzje osobne - przywracane po zestawie wyżej, bo ten je nadpisuje. */
.mc-hero               { padding-bottom: 1.25rem; }
.mc-czl-hero           { padding-bottom: 1.25rem; }
.mc-spo-hero           { padding-bottom: 1.875rem; }
.mc-wyd:has(+ .mc-wyd--drugi) { padding-bottom: 1.625rem; }
.mc-wyd--drugi         { padding-top: 0; }


/* ══════════════════════════════════════════════════════════════
   ZDJĘCIA W KARTACH: ORYGINALNE KOLORY (17.08.2026)

   Blok „sprowadzenie zdjęć do wspólnego tonu" nakładał na każde zdjęcie
   w karcie sepię z przekręceniem barwy plus beżową warstwę koloru
   (`mix-blend-mode: color`, krycie .22). Zdjęcia od Magdy mają własną
   kolorystykę i mają ją zachować - warstwa tonująca zdejmowana zarówno
   ze stanu zwykłego, jak i z najechania.

   Reguły zostawione na miejscu, tylko wyłączone tutaj: wracają
   skreśleniem tego bloku, a nie odtwarzaniem wartości z pamięci.
   ══════════════════════════════════════════════════════════════ */

.mc-karta__foto img,
a.mc-karta:hover .mc-karta__foto img { filter: none; }

.mc-karta__foto::after { content: none; }


/* ══════════════════════════════════════════════════════════════
   KARTY: ZDJĘCIA W JEDNEJ LINII (17.08.2026)

   Nagłówki kart mają od jednego do czterech wierszy, więc zdjęcia
   startowały na różnych wysokościach - w rzędzie drugim rozjazd sięgał
   220 px. Karty przechodzą na siatkę dziedziczoną (`subgrid`), więc
   znaczek, nagłówek, zdjęcie i opis trafiają w te same wiersze we
   wszystkich kartach rzędu.

   Rozwiązanie strukturalne, nie na sztywnej wysokości nagłówka: działa
   niezależnie od tego, jak długi tekst wpisze się w panelu.

   Karta „szeroka" (podcasty) jest poza tym - zdjęcie wypełnia ją całą,
   więc nie ma czego równać; dostaje tylko rozpiętość na te same wiersze.
   ══════════════════════════════════════════════════════════════ */

@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .mc-wyd .mc-karta:not(.mc-karta--foto) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      align-content: start;
    }

    .mc-wyd .mc-karta--foto { grid-row: span 4; }
  }
}


/* ══════════════════════════════════════════════════════════════
   PODCASTY (17.08.2026)
   Filmy odtwarzane na miejscu, dwa w rzędzie na desktopie.
   ══════════════════════════════════════════════════════════════ */

.mc-pod-naglowek { padding: 2.25rem 0 1.25rem; }
.mc-pod          { padding: 0 0 2.6875rem; }

.mc-pod__h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.11vw, 2.25rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}

.mc-pod__lead {
  margin: 0.875rem 0 0;
  max-width: 720px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #46454a;
}

.mc-pod__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.125rem 1.625rem;
}

.mc-pod__karta {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Ramka trzyma proporcje 16:9 sama, bez skryptu - `aspect-ratio` na
   opakowaniu, a iframe wypełnia je bezwzględnie. */
.mc-pod__ramka {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--mc-r-duzy);
  overflow: hidden;
  background: #000;
}

.mc-pod__ramka iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mc-pod__tytul {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 700;
}

.mc-pod__opis {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #46454a;
}

@media (max-width: 900px) {
  .mc-pod__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Zaproszenie w sekcji Founders - w miejscu zdjętej listy punktów. */
.mc-cen-fo__manifest {
  margin: 1.375rem 0 1.625rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #46454a;
}


/* ══════════════════════════════════════════════════════════════
   SUWAK „TWOJA DROGA": KARTY WYPEŁNIAJĄ TOR CO DO PIKSELA (17.08.2026)

   Zgłoszenie: piąta karta ma kończyć się równo z krawędzią beżowego
   boksu, a nie być ucięta w przypadkowym miejscu.

   Karty miały stałe 300 px, więc przy oknie 1680 px w torze (1336 px)
   mieściły się cztery i 56-piksełowy skrawek piątej. Szerokość liczy
   się teraz z toru, nie z liczby wpisanej z ręki: przy pięciu kartach
   i czterech odstępach po 20 px ostatnia widoczna karta kończy się
   dokładnie tam, gdzie kończy się pasek postępu i nagłówek sekcji.

   Liczba kart zmienia się z szerokością okna, bo tor kurczy się razem
   z kontenerem (1440 px to sufit z `--ph-strona`). Progi dobrane tak,
   żeby karta nie zeszła poniżej ok. 215 px - niżej tytuły zaczynają
   się łamać na trzy wiersze. Poniżej 901 px zostaje 82% szerokości
   z przeglądu mobilnego (07.08) - tam karta ma być jedna, z zajawką
   następnej. */

@media (min-width: 1300px) {
  .mc-karta-num--droga { flex: 0 0 calc((100% - 80px) / 4.5); }
}

@media (min-width: 1100px) and (max-width: 1299.98px) {
  .mc-karta-num--droga { flex: 0 0 calc((100% - 60px) / 3.5); }
}

@media (min-width: 901px) and (max-width: 1099.98px) {
  .mc-karta-num--droga { flex: 0 0 calc((100% - 40px) / 2.5); }
}


/* ══════════════════════════════════════════════════════════════
   SPOŁECZNOŚĆ: RÓWNE ODSTĘPY MIĘDZY SEKCJAMI, 80 PX (18.08.2026)

   Zgłoszenie: na tej podstronie odstępy między sekcjami były za małe
   (51-56 px) i nie było widać, gdzie kończy się jedna sekcja, a zaczyna
   kolejna. Wszystkie pięć sekcji dostaje ten sam, wypisany wprost
   odstęp - 80 px na szerokim ekranie, płynnie mniejszy na wąskim
   (`clamp` zamiast progu w zapytaniu medialnym).

   Nietknięty zostaje `.mc-spo-hero` (30 px pod filmem) - to osobna
   decyzja z 06-07.08, nie element tego rytmu.

   Blok musi zostać na końcu pliku - selektory mają tę samą
   szczegółowość co poprzednie zestawy odstępów, więc wygrywa ten,
   który leży niżej.
   ══════════════════════════════════════════════════════════════ */

.mc-spo-blok    { padding: 0 0 clamp(3rem, 5.5vw, 5rem); }
.mc-spo-baner   { padding: 0 0 clamp(3rem, 5.5vw, 5rem); }
.mc-spo-poznaj  { padding: 0 0 clamp(3rem, 5.5vw, 5rem); }
.mc-spo-profil  { padding: 0 0 clamp(3rem, 5.5vw, 5rem); }
.mc-spo-wyd     { padding: 0 0 clamp(3rem, 5.5vw, 5rem); }


/* ══════════════════════════════════════════════════════════════
   OPEN HOUSE PRO: SZÓSTE I PIĄTE ZDJĘCIE WYCHODZIŁY POZA KOLUMNĘ (18.08.2026)

   Siatka `.mc-spo-blok__grid` ma `align-items: stretch`, więc galeria
   dostawała wysokość lewej (dłuższej) kolumny tekstu - tu 604 px. Sama
   galeria ma `aspect-ratio: 5 / 4` i domyślnie `justify-self: stretch`,
   więc z tej wysokości przeglądarka doliczała szerokość: 604 × 5/4 =
   755 px, o 187 px więcej niż jej własna kolumna (568 px). Trzecia
   kolumna mozaiki (zdjęcia 5 i 6) wypadała poza siatkę i poza ekran -
   niewidoczna, choć obecna w kodzie strony (sprawdzone: 6 elementów
   w DOM, tylko część mieściła się w oknie).

   Naprawa: `width: 100%` na galerii (dopisane przy regule wyżej,
   `grid-template-columns: repeat(3, 1fr)`) usztywnia szerokość na
   kolumnę siatki, więc `aspect-ratio` liczy z niej wysokość, a nie
   odwrotnie. Networking (kwadratowa galeria 1:1) nie miał tego błędu -
   przy tamtej proporcji szerokość i wysokość kolumny tekstu akurat się
   zgadzały - więc zostawiony bez zmian.
   ══════════════════════════════════════════════════════════════ */


/* ==================================================================
   STRONA GLOWNA: ODSTEPY PONIZEJ ZGIECIA 60-80 PX (18.08.2026)

   Nad zgieciem (hero, filary, karta z filmem) odstepy zostaja male -
   to nietykana, wzorcowa czesc rytmu. Nizej sekcje mialy tylko 37-43 px,
   za malo by odroznic koniec jednej sekcji od poczatku kolejnej.

   clamp() zamiast progu w zapytaniu medialnym: 80 px od okna ok. 1450 px,
   plynnie w dol do 60 px na wezszym ekranie. Gap wyd->wyd2 (26 px) zostaje
   nietkniety - to odstep miedzy dwoma rzedami TEJ SAMEJ grupy kart, nie
   miedzy dwiema sekcjami. */

.mc-foto      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-plat      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-wyd--drugi { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-cta       { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-prof      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-kal       { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-oc        { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-faq       { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-news      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-dol       { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }


/* ==================================================================
   CZLONKOSTWO: ODSTEPY PONIZEJ ZGIECIA 60-80 PX (18.08.2026)

   Ten sam wzorzec co na stronie glownej tego samego dnia. Nagłowek
   (mc-czl-hero, 20 px) zostaje maly - to wzorcowa czesc rytmu z gory
   strony. Suwak i sekcje nizej mialy 23-33 px (za malo) albo w jednym
   miejscu (suwak->filary) 96 px (za duzo) - teraz jeden, responsywny
   odstep wszedzie pomiedzy sekcjami tej podstrony. */

.mc-czl-droga   { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-czl-filary  { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-czl-sp      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-czl-ef      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-czl-wi      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-czl-na      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-czl-ph      { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }


/* ==================================================================
   CZLONKOSTWO: WIEDZA I PRIMEHOUSE DOSTAJA BEZOWY BOKS (18.08.2026)

   Zgloszenie: Wiedza, Narzedzia i PrimeHouse mialy miec bezowe tlo, ale
   tylko Narzedzia je faktycznie mialo (wlasny .mc-czl-na__box). Wiedza
   stala na bialym bez zadnego boksu, a PrimeHouse mial biale tlo sekcji
   z bezowymi kartami w srodku - odwrotnie niz mial wygladac caly zestaw.

   Teraz wszystkie trzy majce ten sam ksztalt boksu (promien, padding,
   max-width) co Narzedzia, ale w dwoch odcieniach: Wiedza i PrimeHouse na
   --mc-bez (bogatszy beż), Narzedzia zostaje na swoim --mc-bez-jas
   (jasniejszy) - to jest ta inna trzecia sekcja. Karty w srodku
   Wiedzy i PrimeHouse sa biale (bazowy .mc-czl-karta), tak jak juz byly
   karty Narzedzi - stąd kontrast biale kafle na bezowym tle wszedzie
   jednakowo.

   Dopisane też do dwóch list w bloku cała treść na szerokość menu
   (wykluczenia i boksy-z-tlem) - inaczej boks traci boczny padding,
   dokladnie tak jak przy mc-czl-droga__box 17.08. */

.mc-czl-wi__box,
.mc-czl-ph__box {
  background: var(--mc-bez);
  border-radius: var(--mc-r-duzy);
  padding: 2.25rem 2.5rem 2.625rem;
  max-width: 1696px;
}

@media (max-width: 900px) {
  .mc-czl-wi__box,
  .mc-czl-ph__box {
    padding: 1.875rem 1.25rem 2.125rem;
  }
}