/* ========================================================================
   BLOG - identyfikacja Onyks.

   Blog jest samodzielny: nie wczytuje style-onyks.css, bo ma własny,
   węższy słownik klas (.wrap, .brand, .card, .crumbs) i inną typografię
   tekstu ciągłego. Tokeny są tu powtórzone celowo - jeden plik zamiast
   jedenastu bloków <style> rozjeżdżających się przy każdej zmianie.
   ======================================================================== */

:root {
  --onyx:     #0D0D0C;
  --graphite: #1C1C1A;
  --ash:      #4A4A44;
  --bone:     #F0EEE9;

  --paper:   var(--onyx);
  --chalk:   var(--graphite);
  --stone:   #262623;
  --sepia:   var(--bone);

  --ink-2:   #FFFFFF;
  --ink-3:   #C6C4BD;
  --ink-4:   #9C9A93;
  --ink-5:   #7E7C74;
  --stone-2: #6E6C66;
  --line-soft: #1F1F1D;

  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Nazwy z poprzedniego arkusza - artykuły odwołują się do nich
     w pojedynczych miejscach, więc zostają jako aliasy. */
  --bg:    var(--paper);
  --bg2:   var(--chalk);
  --bg3:   #151514;
  --line:  var(--stone);
  --text:  var(--sepia);
  --muted: var(--ink-4);
  --accent: var(--sepia);
  --accent-hover: var(--ink-2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink-3);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

a { color: var(--sepia); text-decoration: none; transition: color .24s ease; }
a:hover { color: var(--ink-4); }

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

::selection { background: var(--sepia); color: var(--paper); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 32px; }

@media (max-width: 640px) {
  .container, .wrap { padding: 0 22px; }
}

/* ========================================================================
   NAWIGACJA
   ======================================================================== */

.nav {
  border-bottom: 1px solid var(--stone);
  position: sticky;
  top: 0;
  background: rgba(13, 13, 12, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

/* Znak MM - ten sam lockup co na pozostałych stronach. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--sepia);
  --mm-size: 30px;
}

.brand:hover { color: var(--sepia); }

.mm {
  display: inline-block;
  width: calc(var(--mm-size, 30px) * 1.49);
  height: var(--mm-size, 30px);
  background: url("../mm-logo-ivory.svg") center / contain no-repeat;
  flex: none;
}

.mm-a, .mm-b, .mm-dot { display: none; }

.brand-name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sepia);
  border-left: 1px solid var(--stone);
  padding-left: 16px;
  line-height: 1.2;
}

.brand-name span {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--ink-5);
  margin-top: 5px;
}

@media (max-width: 600px) {
  .brand { gap: 12px; --mm-size: 26px; }
  .brand-name { font-size: 9px; padding-left: 12px; letter-spacing: 0.28em; }
  .brand-name span { display: none; }
}

/* ========================================================================
   PRZYCISK
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sepia);
  color: var(--paper);
  border: 1px solid var(--sepia);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 24px;
  transition: background-color .25s ease, border-color .25s ease;
  white-space: nowrap;
}

.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }

@media (max-width: 600px) {
  .btn { padding: 12px 16px; letter-spacing: 0.12em; }
}

/* ========================================================================
   ARTYKUŁ
   ======================================================================== */

.crumbs {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin: 48px 0 34px;
}

.crumbs a { color: var(--ink-4); }
.crumbs a:hover { color: var(--sepia); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-5);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--stone);
}

h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--sepia);
  margin: 30px 0 22px;
}

.meta {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 52px;
  border-bottom: 1px solid var(--stone);
  padding-bottom: 26px;
  line-height: 1.9;
}

article h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.16;
  color: var(--sepia);
  margin: 62px 0 20px;
  letter-spacing: -0.02em;
}

article h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.25;
  color: var(--sepia);
  margin: 38px 0 10px;
}

article p { margin: 0 0 22px; color: var(--ink-3); font-size: 16px; }

article strong { color: var(--sepia); font-weight: 500; }
article em { color: var(--sepia); font-style: italic; }

article a { border-bottom: 1px solid var(--stone); }
article a:hover { border-bottom-color: var(--ink-4); }

article ul { margin: 0 0 22px; padding-left: 0; list-style: none; }

article li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 24px;
  color: var(--ink-3);
  font-size: 16px;
}

article li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 10px;
  height: 1px;
  background: var(--stone-2);
}

/* Lead - pierwszy akapit prowadzi krojem, nie stopniem pisma. */
.lead {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 200;
  line-height: 1.42;
  color: var(--sepia);
  margin-bottom: 34px;
  letter-spacing: -0.02em;
}

blockquote {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 200;
  line-height: 1.32;
  color: var(--sepia);
  border-left: 1px solid var(--stone);
  padding: 4px 0 4px 30px;
  margin: 44px 0;
  letter-spacing: -0.02em;
}

.accent { color: var(--ink-4); }

/* ========================================================================
   BLOK CTA - jedyna plama sepii w artykule
   ======================================================================== */

.cta {
  background: var(--sepia);
  border: none;
  border-radius: 0;
  padding: 46px 44px;
  margin: 60px 0;
}

.cta h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.18;
  color: var(--paper);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.cta p { color: #5A5852; margin-bottom: 28px; font-size: 15px; }

.cta .btn {
  background: var(--paper);
  color: var(--sepia);
  border-color: var(--paper);
}

.cta .btn:hover { background: #000000; border-color: #000000; color: var(--sepia); }

@media (max-width: 600px) {
  .cta { padding: 32px 24px; }
}

/* ========================================================================
   FAQ
   ======================================================================== */

.faq { margin: 52px 0; border-top: 1px solid var(--stone); }

.faq-item { border-bottom: 1px solid var(--stone); padding: 28px 0; }

.faq-item h3 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 24px;
  line-height: 1.25;
  color: var(--sepia);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.faq-item p { color: var(--ink-3); margin: 0; font-size: 15px; }

/* ========================================================================
   ELEMENTY POJEDYNCZYCH WPISÓW
   ======================================================================== */

/* Kafle z liczbami (case study, poradnik e-commerce) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 40px 0;
}

.stat {
  background: var(--chalk);
  border: none;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--stone);
  padding: 28px 24px;
  text-align: center;
}

.stat .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 40px;
  line-height: 1;
  color: var(--sepia);
  letter-spacing: -0.02em;
}

.stat .l {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-top: 12px;
  line-height: 1.7;
}

/* Wyliczenie kosztu pozyskania klienta */
.calc {
  background: var(--chalk);
  border: 1px solid var(--stone);
  border-radius: 0;
  padding: 28px 30px;
  margin: 34px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-3);
}

.calc b { color: var(--sepia); font-weight: 500; }

.note {
  font-size: 13px;
  color: var(--ink-4);
  border-top: 1px solid var(--stone);
  margin-top: 44px;
  padding-top: 22px;
  line-height: 1.8;
}

/* ========================================================================
   INDEKS BLOGA
   ======================================================================== */

header.hero {
  padding: 76px 0 52px;
  border-bottom: 1px solid var(--stone);
}

.hero h1 { margin-top: 22px; }

.hero p {
  color: var(--ink-3);
  font-size: 16px;
  max-width: 620px;
}

.sect { padding: 64px 0 0; border-top: 1px solid var(--stone); }
.sect:first-of-type { border-top: 0; padding-top: 52px; }

.sect-head { max-width: 620px; }

.sect-head h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  color: var(--sepia);
  margin: 18px 0 12px;
  letter-spacing: -0.02em;
}

.sect-head p { color: var(--ink-3); font-size: 15px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  padding: 52px 0;
}

.grid.sub { padding: 34px 0 0; }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: none;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--stone);
  padding: 38px 34px;
  transition: background-color .35s ease;
  color: var(--ink-3);
}

.card:hover { background: var(--chalk); color: var(--ink-3); transform: none; }

.card .cat {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.card h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 27px;
  line-height: 1.2;
  color: var(--sepia);
  margin: 0;
  letter-spacing: -0.02em;
}

.card p { color: var(--ink-3); font-size: 14px; margin: 0; flex: 1; }

.card .read {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 16px;
  border-top: 1px solid var(--stone);
}

@media (max-width: 600px) {
  .card { padding: 28px 24px; }
}

/* ========================================================================
   STOPKA
   ======================================================================== */

.footer {
  border-top: 1px solid var(--stone);
  margin-top: 80px;
  padding: 44px 0;
  color: var(--ink-5);
  font-size: 13px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}

.footer a { color: var(--ink-3); margin-left: 22px; }
.footer a:hover { color: var(--sepia); }

@media (max-width: 560px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer a { margin: 0 22px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ========================================================================
   KAFLE ARTYKUŁÓW - czytelność i afordancja (2026-08-19)

   Trzy problemy widoczne przy skanowaniu listy:
   1. cztery teksty branżowe miały tę samą etykietę „Marketing dla usług",
      więc fizjoterapeuta nie poznawał, że artykuł jest dla niego,
   2. kafel niczym nie sygnalizował, że jest klikalny,
   3. hover zmieniał wyłącznie tło - na dotyku nie istnieje.
   ======================================================================== */

/* Etykieta adresata: to jest fraza, po której czyta się listę, więc dostaje
   pełny kontrast i obrys zamiast szeptu w kolorze kamienia. */
.card .cat--who {
  align-self: flex-start;
  padding: 6px 12px;
  box-shadow: 0 0 0 1px var(--stone);
  color: var(--sepia);
  font-weight: 500;
  letter-spacing: 0.22em;
  transition: background-color .3s ease, box-shadow .3s ease;
}

.card:hover .cat--who {
  background: var(--sepia);
  box-shadow: 0 0 0 1px var(--sepia);
  color: var(--paper);
}

/* Stopka kafla: czas czytania po lewej, wezwanie po prawej. */
.card .read {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.card .go {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sepia);
  white-space: nowrap;
}

.card .go i {
  display: inline-block;
  font-style: normal;
  margin-left: 6px;
  transition: transform .3s var(--ease-out, ease);
}

.card:hover .go i { transform: translateX(4px); }

/* Kafel podnosi się obrysem, nie cieniem - marka nie używa cieni. */
.card {
  transition: background-color .35s ease, box-shadow .35s ease;
}

.card:hover { box-shadow: 0 0 0 1px var(--sepia); }
.card:focus-visible { outline: 2px solid var(--sepia); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .card, .card .go i, .card .cat--who { transition: none; }
}


/* Blok CTA stoi na kosci - tekst drugorzedny musi zejsc w onyks. */
.cta {
  --ink-3: #5A5852;
  --ink-4: #6E6C66;
  --ink-5: #6E6C66;
  --stone: #D2CFC8;
  --line-soft: #E4E2DC;
  --muted: #6E6C66;
}