/* ==========================================================================
   Nutrodaily — arkusz stylów szkieletu, wersja 2
   Baza Ease Health (krem + warstwy zieleni, lekki serif),
   skala i kontrast z WHOOP (duży display, ujemny tracking, ciemne pasy),
   pływający pasek nawigacji w kształcie pigułki z August Health.
   Cienie tylko pod paskiem nawigacji, reszta płasko, głębia przez kolor.
   ========================================================================== */

/* ==========================================================================
   Kroje. Arkusz od początku wołał o Readex Pro i Fraunces, ale nikt ich
   nigdy nie wczytywał, więc cała strona jechała na systemowym zamienniku.
   Trzymamy pliki u siebie: jedno żądanie mniej do obcego serwera i brak
   zależności od dostępności Google Fonts. Readex to jeden plik zmienny
   400-700, Fraunces jest przycięty do liter samego logo.
   ========================================================================== */

@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fonts/readexpro-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fonts/readexpro-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Zamiennik na czas wczytywania Readexa, dociągnięty do jego metryk.
     Bez tego przy podmianie kroju cała strona przeskakiwała o kilka pikseli. */
  font-family: "Readex zapas";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 105.6%;
  ascent-override: 94.7%;
  descent-override: 23.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/fraunces-logo.woff2) format("woff2");
  unicode-range: U+2e, U+61, U+64, U+69, U+6c, U+6e-6f, U+72, U+74-75, U+79;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 500;
  font-display: swap; src: url(fonts/fraunces-logo-i.woff2) format("woff2");
  unicode-range: U+2e, U+61, U+64, U+69, U+6c, U+6e-6f, U+72, U+74-75, U+79;
}

:root {
  /* powierzchnie */
  --paper:      #FBFAF5;
  --wash:       #E7F0EA;
  --mid:        #C4DCD1;
  --slate:      #BDCFD6;
  --sand:       #F2EDE2;

  /* kafelki tematyczne, kodowane kolorem */
  --t-food:     #DCEBDF;
  --t-train:    #F1D9C9;
  --t-life:     #D8E3EE;
  --t-tools:    #EFE5C8;
  --t-food-ink: #16402E;
  --t-train-ink:#6E3B1C;
  --t-life-ink: #1E3B57;
  --t-tools-ink:#5A4813;

  /* atrament */
  --ink:        #0E2419;
  --forest:     #16402E;
  --body:       #253429;
  --muted:      #64766C;
  --hairline:   #E3E0D6;

  --accent:     #1B4FD8;

  --wrap: 1240px;
  --r-card: 20px;
  --r-pill: 999px;

  --shadow-nav: 0 6px 16px rgba(75,68,57,.06), 0 22px 44px rgba(75,68,57,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--forest); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

h1, h2, h3, .serif {
  font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: var(--forest);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 400;
}
h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  font-weight: 500;
}
h3 {
  font-size: clamp(1.18rem, 1.9vw, 1.46rem);
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 600;
}

p { margin: 0 0 18px; max-width: 66ch; }

/* Kafelki działów i quizów noszą h2, bo stoją bezpośrednio pod h1 strony
   i h3 zostawiałoby dziurę w hierarchii. Wyglądać mają dalej jak h3. */
.topic :is(h2, h3), .b :is(h2, h3) {
  font-size: clamp(1.18rem, 1.9vw, 1.46rem);
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 600;
}

/* Nagłówek strony głównej opisuje serwis, nie tekst otwierający. */
.home-h1 {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}

.label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.label.on-dark { color: #94B0A2; }
.label.accent { color: var(--accent); }

.lead {
  font-size: clamp(1.12rem, 1.9vw, 1.32rem);
  line-height: 1.5;
  color: var(--body);
  max-width: 56ch;
}

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

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--r-pill);
  padding: 15px 28px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--forest); color: var(--paper); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #16409F; color: #fff; }
.btn-light { background: var(--paper); color: var(--forest); }
.btn-light:hover { background: var(--wash); }
.btn-ghost { background: transparent; color: var(--forest); border-color: rgba(22,64,46,.22); }
.btn-ghost:hover { border-color: var(--forest); }
.btn-sm { padding: 11px 21px; font-size: 14px; }

/* ------------------------------------- pływający pasek nawigacji (glass) -- */

.topbar { position: sticky; top: 14px; z-index: 60; margin-top: 18px; }
.topbar-inner {
  display: flex; align-items: center; gap: 26px;
  background: rgba(251,250,245,.72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(22,64,46,.10);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-nav);
  padding: 10px 12px 10px 24px;
}

.brandmark { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.brandmark .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); flex: none; }
.brandmark .word {
  font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500; font-size: 25px; letter-spacing: -0.03em; color: var(--forest);
}
.brandmark .word b { font-weight: 500; }

.mainnav { display: flex; gap: 2px; flex: 1; }
.mainnav a {
  padding: 9px 15px; font-size: 15.5px; font-weight: 500;
  color: var(--body); text-decoration: none; border-radius: var(--r-pill);
}
.mainnav a:hover { background: rgba(22,64,46,.07); color: var(--forest); }
.mainnav a[aria-current="page"] { background: var(--wash); color: var(--forest); font-weight: 700; }

.topbar-actions { display: flex; align-items: center; gap: 9px; flex: none; }

@media (max-width: 940px) {
  .mainnav { display: none; }
  .topbar-inner { justify-content: space-between; padding-left: 20px; }
}

/* podnawigacja działu */
.subnav { margin: 22px 0 0; overflow-x: auto; }
.subnav-inner { display: flex; gap: 8px; min-width: max-content; }
.subnav a {
  font-size: 14.5px; color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 8px 16px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--paper);
}
.subnav a:hover { color: var(--forest); border-color: var(--forest); }

/* ------------------------------------------------- zastępniki na zdjęcia -- */

.ph {
  position: relative; border-radius: var(--r-card); background: var(--sand); overflow: hidden;
  background-image: repeating-linear-gradient(135deg, rgba(22,64,46,.055) 0 2px, transparent 2px 12px);
}
.ph::after {
  content: attr(data-ph);
  position: absolute; left: 14px; bottom: 13px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); background: var(--paper); padding: 5px 10px; border-radius: var(--r-pill);
}
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-3x2 { aspect-ratio: 3 / 2; }
.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-16x10 { aspect-ratio: 16 / 10; }
.ph-hero { aspect-ratio: 5 / 4; background-color: var(--mid); }
.ph-wide { aspect-ratio: 21 / 9; }
.ph-thumb { width: 104px; flex: none; aspect-ratio: 1 / 1; border-radius: 14px; }
.ph-thumb::after { display: none; }

/* --------------------------------------------------- artykuł otwierający -- */

.lead-story { padding: 46px 0 60px; }
.lead-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .lead-grid { grid-template-columns: 1.55fr 1fr; gap: 56px; } }

.lead-main { display: block; text-decoration: none; color: inherit; }
.lead-main .ph { margin-bottom: 26px; }
.lead-main h2 { margin-bottom: 18px; }
.lead-main:hover h2 { color: var(--accent); }

.lead-side { display: flex; flex-direction: column; gap: 4px; }
.side-item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 0; border-top: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
}
.side-item:last-child { border-bottom: 1px solid var(--hairline); }
.side-item h3 { font-size: 1.18rem; margin: 0; }
.side-item:hover h3 { color: var(--accent); }
.side-item .card-kicker { margin-bottom: 5px; }

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

.hero { background: var(--wash); border-radius: var(--r-card); margin-top: 26px; }
.hero-inner { display: grid; gap: 40px; align-items: center; padding: 56px 40px 60px; }
@media (min-width: 940px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; padding: 76px 56px 80px; }
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------- sekcje -- */

.section { padding: 78px 0; }
.section-tight { padding: 52px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 38px; flex-wrap: wrap;
}
.section-head p { margin: 12px 0 0; color: var(--muted); }

.band { background: var(--ink); color: #D9E6DE; border-radius: var(--r-card); }
.band h2, .band h3 { color: var(--paper); }
.band p { color: #A6BCB1; }
.band a { color: var(--paper); }
.band-inner { padding: 68px 40px; }
@media (min-width: 940px) { .band-inner { padding: 84px 56px; } }

.tinted { background: var(--sand); border-radius: var(--r-card); }
.tinted-inner { padding: 64px 40px; }

.rule { border: none; border-top: 1px solid var(--hairline); margin: 0; }

/* --------------------------------------------------------------- siatki -- */

.grid { display: grid; gap: 26px; }
.g2, .g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1020px) { .g4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- karty -- */

.card { display: block; text-decoration: none; color: inherit; }
.card .ph { margin-bottom: 18px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 16px; color: var(--muted); margin: 0; }
.card:hover h3 { color: var(--accent); }

.card-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}

/* kafelek tematu, kodowany kolorem */
.topic {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--t-food); border-radius: var(--r-card);
  padding: 26px 26px 30px; min-height: 100%;
  transition: transform .18s ease;
}
.topic:hover { transform: translateY(-3px); }
.topic .ph { aspect-ratio: 16/10; margin-bottom: 20px; background-color: rgba(255,255,255,.62); }
.topic :is(h2, h3) { font-size: 1.5rem; margin-bottom: 8px; }
.topic span { font-size: 14.5px; line-height: 1.45; opacity: .78; }
.topic--food  { background: var(--t-food);  color: var(--t-food-ink); }
.topic--train { background: var(--t-train); color: var(--t-train-ink); }
.topic--life  { background: var(--t-life);  color: var(--t-life-ink); }
.topic--tools { background: var(--t-tools); color: var(--t-tools-ink); }
.topic--food :is(h2, h3)  { color: var(--t-food-ink); }
.topic--train :is(h2, h3) { color: var(--t-train-ink); }
.topic--life :is(h2, h3)  { color: var(--t-life-ink); }
.topic--tools :is(h2, h3) { color: var(--t-tools-ink); }

/* moduł narzędzia */
.tool {
  background: var(--slate); border-radius: var(--r-card);
  padding: 34px; display: flex; flex-direction: column; gap: 6px;
}
.tool h3 { color: var(--ink); margin-bottom: 6px; }
.tool p { font-size: 16px; color: #3A5460; margin: 0 0 20px; }

/* pasek zaufania */
.trust {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  padding: 20px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  font-size: 14px; color: var(--muted);
}
.trust b { color: var(--forest); font-weight: 700; }

/* --------------------------------------------------------- newsletter -- */

.news { background: var(--mid); border-radius: var(--r-card); padding: 48px 44px; display: grid; gap: 32px; }
@media (min-width: 900px) { .news { grid-template-columns: 1.05fr .95fr; align-items: center; padding: 60px 56px; } }
.news h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 14px; }
.news p { color: #2A4438; margin-bottom: 0; }
.news form { display: flex; gap: 10px; flex-wrap: wrap; }
.news input[type="email"] {
  flex: 1 1 230px; min-width: 0;
  border: 1.5px solid var(--forest); border-radius: var(--r-pill);
  background: var(--paper); color: var(--body);
  padding: 15px 22px; font: inherit; font-size: 16px;
}
.news input::placeholder { color: var(--muted); }
.news small { display: block; margin-top: 14px; font-size: 13px; color: #38513F; max-width: 46ch; }

/* -------------------------------------------------------------- artykuł -- */

.article { padding: 46px 0 90px; }
.article-head { max-width: 24ch; }
.article-head.wide { max-width: 20ch; }
.article-head h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); margin-bottom: 20px; }
.article-head .lead { max-width: 60ch; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px; max-width: none; }
.crumbs a { color: var(--muted); }

.prose { max-width: 66ch; }
.prose h2 { font-size: clamp(1.8rem, 3.2vw, 2.35rem); margin: 52px 0 14px; }
.prose h3 { margin: 34px 0 10px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 9px; }

.keytakes { background: var(--wash); border-radius: var(--r-card); padding: 32px 34px; margin: 0 0 38px; }
.keytakes ul { margin: 0; padding-left: 20px; }
.keytakes li { margin-bottom: 10px; }
.keytakes li::marker { color: var(--accent); }

.callout-note {
  border-left: 3px solid var(--accent); background: var(--sand);
  padding: 22px 26px; border-radius: 0 var(--r-card) var(--r-card) 0; margin: 0 0 30px;
}
.callout-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- tabela -- */

.tablewrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-card); margin: 0 0 34px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15.5px; background: var(--paper); }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); background: var(--wash);
}
tbody tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.win td { background: var(--wash); }

/* ------------------------------------------------------ bloki rankingu -- */

.entry { display: grid; gap: 26px; padding: 34px 0; border-top: 1px solid var(--hairline); }
@media (min-width: 840px) { .entry { grid-template-columns: 250px 1fr; gap: 40px; } }
.entry-rank { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.entry-rank .n {
  font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif; font-size: 3rem; font-weight: 400;
  color: var(--accent); line-height: .85; letter-spacing: -0.04em;
}
.entry h3 { margin: 0; font-size: 1.9rem; }
.score {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--forest); color: var(--paper); padding: 5px 13px; border-radius: var(--r-pill);
}
.proscons { display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 640px) { .proscons { grid-template-columns: 1fr 1fr; } }
.proscons ul { margin: 8px 0 0; padding-left: 20px; font-size: 16px; }
.proscons .p li::marker { color: var(--forest); }
.proscons .c li::marker { color: #9A6B3F; }

/* --------------------------------------------------------------- stopka -- */

.foot { background: var(--ink); color: #A6BCB1; border-radius: var(--r-card) var(--r-card) 0 0; margin-top: 40px; }
.foot a { color: #D9E6DE; text-decoration: none; font-size: 15px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-top { display: grid; gap: 36px; padding: 70px 0 46px; }
@media (min-width: 840px) { .foot-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot h4, .foot .foot-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #7C948A; margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot .brandmark .word { color: var(--paper); }
.foot p { font-size: 15px; color: #8CA69A; }
.foot-bottom {
  border-top: 1px solid #1D3A2B; padding: 24px 0 46px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13px; color: #7C948A;
}

.disclosure {
  background: #143020; border-radius: var(--r-card);
  padding: 22px 26px; font-size: 14.5px; color: #B4CABE; margin-bottom: 38px;
}
.disclosure b { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Wersja 3 — układ strony głównej wg Healthline, pasek faktów, karty
   tematów ze zdjęciem, siatka narzędzi, menu mobilne.
   ========================================================================== */

/* ------------------------------------------------- pasek faktów u góry -- */

.ticker {
  overflow: hidden; border-bottom: 1px solid var(--hairline);
  background: var(--wash); padding: 9px 0;
}
.ticker-track {
  display: flex; gap: 0; width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  font-size: 13px; letter-spacing: 0.02em; color: var(--forest);
  padding: 0 26px; white-space: nowrap; position: relative;
}
.ticker span::after {
  content: ""; position: absolute; right: -3px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateY(-50%);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* --------------------------------------------- artykuł otwierający, v3 -- */

.lead-main .ph { aspect-ratio: 16 / 9; margin-bottom: 22px; }
.lead-main h2 { font-size: clamp(2.4rem, 4.1vw, 3.5rem); line-height: 1.02; }
.lead-main .lead { font-size: 1.12rem; }
.lead-side { gap: 0; }
.side-item { padding: 17px 0; }
.side-item h3 { font-size: 1.08rem; line-height: 1.28; }
.side-item .ph-thumb { width: 88px; border-radius: 12px; }

/* ------------------------------------------------ karta tematu ze zdjęciem */

.topiccard { display: block; text-decoration: none; color: inherit; }
.topiccard .ph { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.topiccard h3 { font-size: 1.32rem; margin-bottom: 4px; }
.topiccard span { font-size: 14.5px; color: var(--muted); }
.topiccard:hover h3 { color: var(--accent); }

/* -------------------------------------------------- siatka narzędzi (bento) */

.bento { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); }
  .bento .b-lg { grid-column: span 2; grid-row: span 2; }
}
.b {
  border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: transform .18s ease;
}
.b:hover { transform: translateY(-3px); }
.b :is(h2, h3) { margin-bottom: 6px; }
.b p { font-size: 15.5px; margin: 0; opacity: .8; }
.b .ph { margin-top: auto; }
.b-lg { background: var(--t-food); color: var(--t-food-ink); padding: 34px; }
.b-lg :is(h2, h3) { font-size: 2rem; color: var(--t-food-ink); }
.b-lg .ph { aspect-ratio: 16 / 9; margin-top: 26px; background-color: rgba(255,255,255,.6); }
.b-1 { background: var(--t-life); color: var(--t-life-ink); }
.b-1 :is(h2, h3) { color: var(--t-life-ink); }
.b-2 { background: var(--t-tools); color: var(--t-tools-ink); }
.b-2 :is(h2, h3) { color: var(--t-tools-ink); }
.b-3 { background: var(--t-train); color: var(--t-train-ink); }
.b-3 :is(h2, h3) { color: var(--t-train-ink); }

/* --------------------------------------------------- lista polecanych -- */

.readlist { display: grid; gap: 0; }
@media (min-width: 820px) { .readlist { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.read-item {
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
  padding: 20px 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
}
.read-item h3 { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.read-item span { font-size: 13px; color: var(--muted); white-space: nowrap; padding-top: 4px; }
.read-item:hover h3 { color: var(--accent); }

/* ------------------------------------------------------- menu mobilne -- */

.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(22,64,46,.22); background: transparent; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--forest); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--forest);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }


@media (max-width: 940px) {
  .burger { display: flex; }
  body.menu-open { overflow: hidden; }
}

/* --------------------------------------------------- drobne poprawki -- */

@media (max-width: 760px) {
  .lead-story { padding: 26px 0 40px; }
  .section { padding: 54px 0; }
  .band-inner, .tinted-inner { padding: 44px 24px; }
  .news { padding: 34px 26px; }
  .hero-inner { padding: 40px 26px 44px; }
  h1 { font-size: clamp(2.3rem, 9vw, 3.1rem); }
}

/* pasek na wąskich ekranach: przycisk newslettera ustępuje miejsca burgerowi */
@media (max-width: 620px) {
  .topbar-inner { gap: 12px; padding: 8px 8px 8px 18px; }
  .topbar-actions .btn { display: none; }
  .brandmark .word { font-size: 22px; }
  .ticker span { font-size: 12px; padding: 0 18px; }
}

/* ==========================================================================
   Wersja 4 — rozwijana nawigacja, pionowe karty tematów, kalkulatory.
   ========================================================================== */

/* pasek faktów wycofany */
.ticker { display: none; }

/* ---------------------------------------------------- rozwijana nawigacja */

.mainnav { position: relative; }
.navitem { position: relative; }
.navitem > a, .navitem > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; font: inherit; font-size: 15.5px; font-weight: 500;
  color: var(--body); text-decoration: none; border: none; background: transparent;
  border-radius: var(--r-pill); cursor: pointer;
}
.navitem > a:hover, .navitem > button:hover,
.navitem[data-open="true"] > button { background: rgba(22,64,46,.07); color: var(--forest); }
.navitem .chev { width: 9px; height: 9px; transition: transform .18s ease; }
.navitem[data-open="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 14px); left: 0;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-nav);
  padding: 22px; min-width: 300px; display: none; z-index: 70;
}
.navitem[data-open="true"] .dropdown { display: block; }
.dropdown h5 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.dd-grid { display: grid; gap: 4px 28px; grid-template-columns: 1fr 1fr; }
.dd-grid.one { grid-template-columns: 1fr; }
.dropdown a.dd-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 12px;
  font-size: 15.5px; color: var(--body); text-decoration: none; white-space: nowrap;
}
.dropdown a.dd-link:hover { background: var(--wash); color: var(--forest); }
.dd-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dd-dot.food { background: var(--t-food-ink); }
.dd-dot.train { background: var(--t-train-ink); }
.dd-dot.life { background: var(--t-life-ink); }
.dd-dot.tools { background: var(--t-tools-ink); }
.dd-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted); max-width: 34ch; }

/* --------------------------------------------- karta tematu, pionowa 4:5 */

.topiccard .ph { aspect-ratio: 4 / 5; margin-bottom: 12px; }
.topiccard h3 { font-size: 1.24rem; margin: 0; }
.topiccard span { display: none; }

/* --------------------------------------------------------- kalkulatory -- */

.calc {
  background: var(--wash); border-radius: var(--r-card);
  padding: 34px; margin: 0 0 40px;
}
@media (min-width: 780px) { .calc { padding: 44px; } }
.calc h2 { margin-bottom: 8px; }
.calc > p { color: var(--body); }

.fields { display: grid; gap: 18px; margin: 26px 0 0; }
@media (min-width: 620px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--forest); }
.field input, .field select {
  border: 1.5px solid rgba(22,64,46,.22); border-radius: 14px;
  background: var(--paper); color: var(--body);
  padding: 13px 16px; font: inherit; font-size: 16px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field .hint { font-size: 12.5px; color: var(--muted); }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  border: 1.5px solid rgba(22,64,46,.22); background: var(--paper); color: var(--body);
  border-radius: var(--r-pill); padding: 11px 18px; font: inherit; font-size: 14.5px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--forest); color: var(--paper); border-color: var(--forest); }

.calc-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.calc-error { color: #8A3312; font-size: 14.5px; margin: 14px 0 0; }

/* krok z mailem */
.gate { display: none; margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(22,64,46,.16); }
.gate[data-show="true"] { display: block; }
.gate h3 { margin-bottom: 8px; }
.gate p { font-size: 15.5px; color: var(--body); }
.gate form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.gate input[type="email"] {
  flex: 1 1 240px; min-width: 0; border: 1.5px solid var(--forest); border-radius: var(--r-pill);
  background: var(--paper); padding: 15px 22px; font: inherit; font-size: 16px;
}
.gate small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); max-width: 48ch; }

/* wynik */
.result { display: none; margin-top: 30px; }
.result[data-show="true"] { display: block; }
.bignum {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 26px 28px; background: var(--paper); border-radius: var(--r-card); margin-bottom: 22px;
}
.bignum .v {
  font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif; font-weight: 400; letter-spacing: -0.04em;
  font-size: clamp(2.9rem, 7vw, 4.1rem); line-height: .95; font-weight: 400; color: var(--forest);
}
.bignum .u { font-size: 15px; color: var(--muted); }
.bignum .tagline { font-size: 16px; color: var(--body); flex-basis: 100%; margin: 6px 0 0; }

.scale { display: grid; gap: 6px; margin: 0 0 24px; }
.scale-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: 12px; background: var(--paper); font-size: 15px;
}
.scale-row[data-on="true"] { background: var(--forest); color: var(--paper); }
.scale-row[data-on="true"] b { color: var(--paper); }
.scale-row span { color: inherit; opacity: .8; font-size: 14px; }

.macros { display: grid; gap: 12px; margin: 0 0 24px; }
@media (min-width: 620px) { .macros { grid-template-columns: repeat(3, 1fr); } }
.macro { background: var(--paper); border-radius: 14px; padding: 18px 20px; }
.macro b { display: block; font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 1.8rem; color: var(--forest); line-height: 1; }
.macro span { font-size: 13.5px; color: var(--muted); }

.promo {
  background: var(--ink); color: #D9E6DE; border-radius: var(--r-card);
  padding: 30px 32px; margin-top: 26px;
}
.promo h3 { color: var(--paper); margin-bottom: 10px; }
.promo p { color: #A6BCB1; font-size: 16px; }
.promo .tagpill {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #8CA69A; border: 1px solid #2A4A38;
  padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 14px;
}

/* rozwijane „Tematy” jako panel trójkolumnowy, wzorem Wellness u Healthline */
.dropdown.mega { min-width: 760px; padding: 26px 28px; }
.dd-grid.three { grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 6px 34px; }
.dd-col { display: flex; flex-direction: column; }
.dd-col > a.dd-head {
  font-family: "Readex Pro", "Readex zapas", "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 1.1rem;
  letter-spacing: -0.02em; color: var(--forest); text-decoration: none;
  padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.dd-col > a.dd-head:hover { color: var(--accent); }
@media (max-width: 1120px) { .dropdown.mega { min-width: 640px; } }


/* etykiety w panelu mogą się łamać, zamiast wchodzić na sąsiednią kolumnę */
.dropdown.mega a.dd-link { white-space: normal; line-height: 1.3; }
.dd-grid.three { grid-template-columns: repeat(3, minmax(190px, 1fr)); }

/* ==========================================================================
   Wersja 5 — zdjęcia w kafelkach narzędzi, daty przy tekstach.
   ========================================================================== */

/* każdy kafelek narzędzia dostaje własne zdjęcie */
.b { padding-bottom: 0; overflow: hidden; }
.b > .ph { margin-top: 18px; margin-left: -28px; margin-right: -28px; border-radius: 0; }
.b-lg > .ph { margin-left: -34px; margin-right: -34px; }
.b .ph::after { left: 18px; }
.b-lg .ph { aspect-ratio: 21 / 9; }
.b-1 .ph, .b-2 .ph, .b-3 .ph { aspect-ratio: 16 / 9; background-color: rgba(255,255,255,.55); }
.b :is(h2, h3) { font-size: 1.35rem; }
.b-lg :is(h2, h3) { font-size: 1.9rem; }
.b p { margin-bottom: 4px; }

/* daty i czas czytania */
.card-meta, .meta-line {
  font-size: 13px; color: var(--muted); margin: 8px 0 0;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.meta-line { margin: 0 0 22px; }
.side-item .card-meta { margin-top: 5px; }
.read-item .card-meta { margin: 4px 0 0; }

/* zdjęcie w nagłówku kalkulatora */
.calc-hero { margin: 0 0 26px; }
.calc-hero .ph { aspect-ratio: 21 / 9; }
@media (max-width: 620px) { .calc-hero .ph { aspect-ratio: 16 / 9; } }

/* ==========================================================================
   Wersja 6 — spis treści, pasek postępu, ocena tekstu, źródła, powiązane.
   Wzięte od Omni Calculator (spis treści, źródła, pytanie o przydatność)
   i Ahrefs (odnośniki skokowe, ramki w tekście, powiązane na końcu).
   ========================================================================== */

.toc-box {
  background: var(--wash); border-radius: var(--r-card);
  padding: 24px 28px; margin: 8px 0 36px;
}
.toc-box .label { margin-bottom: 12px; }
.toc-box ol { margin: 0; padding-left: 20px; }
.toc-box li { margin-bottom: 7px; }
.toc-box a { color: var(--forest); text-decoration: none; }
.toc-box a:hover { color: var(--accent); text-decoration: underline; }

.readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 90; pointer-events: none;
}
.readbar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }

.helpful {
  margin: 44px 0 0; padding: 24px 28px;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--paper);
}
.helpful p { margin: 0 0 14px; }
.helpful p:only-child { margin: 0; }
.helpful-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.helpful-btns button {
  border: 1.5px solid rgba(22,64,46,.22); background: transparent; color: var(--forest);
  border-radius: var(--r-pill); padding: 11px 22px; font: inherit; font-size: 15px; cursor: pointer;
}
.helpful-btns button:hover { border-color: var(--forest); background: var(--wash); }

/* źródła pod tekstem */
.sources { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--hairline); }
.sources ol { padding-left: 20px; margin: 0; font-size: 15px; color: var(--muted); }
.sources li { margin-bottom: 8px; }
.sources a { color: var(--muted); }
.sources a:hover { color: var(--accent); }

/* ramka „czytaj też” w środku tekstu */
.further {
  border-left: 3px solid var(--forest); background: var(--wash);
  padding: 18px 22px; border-radius: 0 var(--r-card) var(--r-card) 0; margin: 0 0 26px;
}
.further p { margin: 0; font-size: 15.5px; }
.further b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* powiązane narzędzia */
.related-tools { display: grid; gap: 14px; margin: 26px 0 0; }
@media (min-width: 700px) { .related-tools { grid-template-columns: repeat(3, 1fr); } }
.related-tools a {
  display: block; padding: 20px 22px; border-radius: var(--r-card);
  background: var(--sand); text-decoration: none; color: var(--forest);
  font-weight: 600; font-size: 15.5px;
}
.related-tools a:hover { background: var(--wash); }
.related-tools a span { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* przyciski pod wynikiem kalkulatora */
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 0; }

/* nagłówek artykułu: szerokość ustawiona pod bezszeryfową Readex Pro */
.article-head { max-width: none; }
.article-head h1 { max-width: 17ch; }
.article-head.wide h1 { max-width: 20ch; }
.article-head .lead { max-width: 58ch; }
.article-head .crumbs { max-width: none; }
@media (max-width: 760px) { .article-head h1 { max-width: none; } }

/* duży kafel narzędzi jako baner na całą szerokość, tekst obok zdjęcia */
.bento .b-lg {
  grid-column: 1 / -1; grid-row: auto;
  padding: 0; display: grid; grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 820px) { .bento .b-lg { grid-template-columns: 1fr 1.15fr; } }
.b-lg .txt { padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.b-lg > .ph {
  margin: 0; border-radius: 0; aspect-ratio: 16 / 9;
  background-color: rgba(255,255,255,.55);
}
@media (min-width: 820px) { .b-lg > .ph { aspect-ratio: auto; min-height: 300px; } }
.b-lg :is(h2, h3) { font-size: 1.9rem; margin-bottom: 8px; }
.b-cta { font-weight: 600; font-size: 15px; margin-top: 14px; }

/* ==========================================================================
   Wersja 7 — kalkulator jako wieloetapowy quiz, wzorem MacroFactora.
   ========================================================================== */

.wiz { min-height: 340px; display: flex; flex-direction: column; }
.wiz-progress {
  height: 4px; border-radius: 999px; background: rgba(22,64,46,.14); overflow: hidden; margin-bottom: 20px;
}
.wiz-progress span { display: block; height: 100%; background: var(--accent); transition: width .28s ease; }
.wiz-count {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.wiz-q { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 10px; }
.wiz-note { font-size: 15.5px; color: var(--muted); margin: 0 0 22px; max-width: 58ch; }

.wiz-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.wiz-opt {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  border: 1.5px solid rgba(22,64,46,.2); background: var(--paper); color: var(--body);
  border-radius: 16px; padding: 17px 20px; font: inherit; font-size: 16px; line-height: 1.4; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wiz-opt:hover { border-color: var(--forest); background: var(--wash); }
.wiz-opt .dot {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(22,64,46,.35);
  flex: none; margin-top: 2px;
}
.wiz-opt[aria-pressed="true"] { border-color: var(--forest); background: var(--wash); }
.wiz-opt[aria-pressed="true"] .dot { border-color: var(--forest); background: var(--forest); box-shadow: inset 0 0 0 3px var(--wash); }

.wiz-fields { display: grid; gap: 16px; margin-bottom: 8px; }
@media (min-width: 620px) { .wiz-fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.wiz-field { display: flex; flex-direction: column; gap: 7px; }
.wiz-field > span { font-size: 13.5px; font-weight: 700; color: var(--forest); }
.wiz-input { display: flex; align-items: stretch; border: 1.5px solid rgba(22,64,46,.2); border-radius: 16px; background: var(--paper); overflow: hidden; }
.wiz-input:focus-within { border-color: var(--accent); }
.wiz-input input { flex: 1; min-width: 0; border: none; background: transparent; padding: 16px 18px; font: inherit; font-size: 20px; color: var(--body); }
.wiz-input input:focus { outline: none; }
.wiz-input em {
  display: flex; align-items: center; padding: 0 18px; font-style: normal; font-size: 14px;
  color: var(--muted); background: var(--wash); border-left: 1.5px solid rgba(22,64,46,.12);
}

.wiz-email { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.wiz-email input[type="email"] {
  border: 1.5px solid rgba(22,64,46,.2); border-radius: 999px; background: var(--paper);
  padding: 16px 22px; font: inherit; font-size: 17px; color: var(--body);
}
.wiz-email input[type="email"]:focus { outline: none; border-color: var(--accent); }
.wiz-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.45; max-width: 58ch; }
.wiz-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--forest); }

.wiz-error { color: #8A3312; font-size: 14.5px; margin: 14px 0 0; min-height: 1.2em; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.wiz-skip { margin: 14px 0 0; text-align: center; }
.wiz-skip button { border: none; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }

.calc .result { display: block; margin-top: 0; }
.calc-intro { font-size: 1.05rem; color: var(--muted); max-width: 60ch; margin: 0 0 22px; }


/* nagłówek nad kolumną popularnych, wzorem Trending u Healthline */
.side-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.side-head h2 {
  font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700;
  letter-spacing: -0.025em; margin: 0; line-height: 1.2;
}
.trend-ico { width: 26px; height: 26px; flex: none; color: var(--accent); }
@media (max-width: 999px) { .side-head { margin-top: 12px; } }

/* ==========================================================================
   Wersja 8 — wyszukiwarka, przebudowane menu mobilne, przegląd odstępów.
   ========================================================================== */

/* długie polskie słowa nie mają prawa wyjść poza kolumnę */
h1, h2, h3, .sr-title, .mm-head { overflow-wrap: break-word; }

/* ------------------------------------------------------- lupka w pasku -- */

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pill); border: 1.5px solid rgba(22,64,46,.16);
  background: transparent; color: var(--forest); cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn:hover { background: rgba(22,64,46,.07); border-color: rgba(22,64,46,.32); }

/* --------------------------------------------- panel wyszukiwarki (lupka) */

.searchpanel {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(14,36,25,.34);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  overflow-y: auto; padding: 0 20px;
}
.searchpanel[data-open="true"] { display: block; }

.sp-box {
  max-width: 660px; margin: 11vh auto 40px;
  background: var(--paper); border-radius: 26px;
  box-shadow: 0 30px 70px rgba(14,36,25,.3);
  padding: 14px 14px 16px;
}
@media (max-width: 620px) { .sp-box { margin: 14px auto 28px; border-radius: 20px; } }

.sp-form {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 17px;
  border: 1.5px solid rgba(22,64,46,.16); border-radius: var(--r-pill); background: var(--paper);
}
.sp-form:focus-within { border-color: var(--accent); }
.sp-form > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.sp-form input {
  flex: 1; min-width: 0; border: none; background: transparent;
  font: inherit; font-size: 17px; color: var(--body); padding: 13px 0;
}
.sp-form input:focus { outline: none; }
.sp-form input::-webkit-search-cancel-button { display: none; }

.sp-close {
  width: 40px; height: 40px; flex: none; border: none; cursor: pointer;
  border-radius: var(--r-pill); background: var(--wash); color: var(--forest);
  display: flex; align-items: center; justify-content: center;
}
.sp-close svg { width: 18px; height: 18px; }
.sp-close:hover { background: var(--mid); }

.sp-count {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 18px 10px 6px;
}
.sp-count:empty { display: none; }
.sp-results:empty { display: none; }
.sp-empty { font-size: 15.5px; color: var(--muted); margin: 14px 10px 4px; }
.sp-hint { padding: 20px 10px 6px; }
.sp-hint .label { margin-bottom: 12px; }
.searchpanel[data-typing="true"] .sp-hint { display: none; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tag {
  border: 1px solid var(--hairline); background: var(--paper); color: var(--body);
  border-radius: var(--r-pill); padding: 9px 16px; font: inherit; font-size: 14.5px; cursor: pointer;
}
.sp-tag:hover { border-color: var(--forest); color: var(--forest); }

/* --------------------------------------------------------- wyniki szukania */

.sr-item {
  display: grid; gap: 3px; padding: 13px 16px; border-radius: 16px;
  text-decoration: none; color: inherit;
}
.sr-item:hover { background: var(--wash); }
.sr-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.sr-title { font-weight: 600; font-size: 1.06rem; line-height: 1.3; color: var(--forest); }
.sr-desc {
  font-size: 14.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-date { font-size: 12.5px; color: var(--muted); }

/* strona wyników */
.searchpage .article-head { margin-bottom: 26px; }
.searchpage h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.searchbox {
  display: flex; align-items: center; gap: 10px; max-width: 620px;
  padding: 5px 5px 5px 18px; margin: 0 0 12px;
  border: 1.5px solid rgba(22,64,46,.2); border-radius: var(--r-pill); background: var(--paper);
}
.searchbox:focus-within { border-color: var(--accent); }
.searchbox > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.searchbox input {
  flex: 1; min-width: 0; border: none; background: transparent;
  font: inherit; font-size: 17px; color: var(--body); padding: 13px 0;
}
.searchbox input:focus { outline: none; }
.searchbox input::-webkit-search-cancel-button { display: none; }

.sr-list { max-width: 660px; margin-top: 26px; }
.sr-list .sr-item { padding: 20px 0; border-radius: 0; border-bottom: 1px solid var(--hairline); }
.sr-list .sr-item:hover { background: transparent; }
.sr-list .sr-item:hover .sr-title { color: var(--accent); }
.sr-count { font-size: 14px; color: var(--muted); margin: 0 0 4px; }

/* --------------------------------------------------- menu mobilne, na nowo */

.mobilemenu {
  position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column;
  background: var(--paper); overflow-y: auto;
  padding: 18px 22px calc(30px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.mobilemenu[data-open="true"] { display: flex; }

.mm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mm-close {
  width: 42px; height: 42px; flex: none; cursor: pointer;
  border-radius: var(--r-pill); border: 1.5px solid rgba(22,64,46,.16);
  background: transparent; color: var(--forest);
  display: flex; align-items: center; justify-content: center;
}
.mm-close svg { width: 20px; height: 20px; }

.mm-search {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 1.5px solid rgba(22,64,46,.16); border-radius: var(--r-pill);
  background: var(--paper); color: var(--muted);
  padding: 13px 18px; font: inherit; font-size: 16px; cursor: pointer; margin-bottom: 20px;
}
.mm-search svg { width: 18px; height: 18px; color: var(--forest); flex: none; }

.mm-nav { display: flex; flex-direction: column; }
.mm-group { border-top: 1px solid var(--hairline); border-bottom: none; padding: 15px 0; }
.mm-group:first-child { border-top: none; padding-top: 0; }
.mm-head {
  display: block; padding: 5px 0; text-decoration: none;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -0.022em; color: var(--forest);
}
.mm-head:hover { color: var(--accent); }
.mm-sub { display: flex; flex-direction: column; gap: 0; margin-top: 4px; padding: 0; }
.mm-sub a {
  display: flex; align-items: center; gap: 11px; padding: 9px 0;
  border: none; border-radius: 0;
  font-size: 15.5px; color: var(--muted); text-decoration: none;
}
.mm-sub a:hover { color: var(--forest); border: none; }
.mm-flat { display: flex; flex-direction: column; }
.mm-flat .mm-head { padding: 8px 0; }
.mm-actions { display: block; margin-top: 24px; }
.mm-actions .btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------- przegląd odstępów -- */

/* kafelki narzędzi liczą wcięcie zdjęcia z jednej zmiennej */
.b { --bp: 28px; padding: var(--bp); padding-bottom: 0; }
.b > .ph { margin-left: calc(var(--bp) * -1); margin-right: calc(var(--bp) * -1); }
.bento .b-lg { --bp: 0px; }   /* baner ma własne wcięcie w .txt */
.b .ph::after { left: 14px; }

@media (max-width: 620px) {
  .b { --bp: 22px; }
  .b-lg .txt { padding: 24px 22px 26px; }
  .b :is(h2, h3) { font-size: 1.22rem; }
  .b-lg :is(h2, h3) { font-size: 1.5rem; }
  .b p { font-size: 15px; }
}

/* karty tekstów: na wąskim ekranie jedna kolumna, kafelki tematów po dwa */
@media (max-width: 560px) {
  .grid { gap: 22px; }
  .g4 { grid-template-columns: 1fr; }
  .g4.g-tiles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .g-tiles .topiccard h3 { font-size: 1.04rem; line-height: 1.25; }
  .card h3 { font-size: 1.22rem; }
}

/* pasek nawigacji: lupka i burger muszą się zmieścić obok logo */
@media (max-width: 620px) {
  .topbar { top: 10px; margin-top: 12px; }
  .topbar-inner { gap: 10px; padding: 7px 7px 7px 16px; }
  .topbar-actions { gap: 6px; }
  .iconbtn, .burger { width: 42px; height: 42px; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  .brandmark .word { font-size: 20px; }
  .side-item .ph-thumb { width: 74px; }
  .side-item { gap: 14px; }
}

/* treść na wąskim ekranie: mniej powietrza w ramkach, tyle samo między nimi */
@media (max-width: 620px) {
  .article { padding: 24px 0 62px; }
  .calc { padding: 22px 20px; }
  .toc-box { padding: 20px 22px; }
  .keytakes { padding: 24px 22px; }
  .helpful { padding: 20px 22px; }
  .callout-note, .further { padding: 18px 20px; }
  .bignum { padding: 22px 20px; }
  .promo { padding: 24px 22px; }
  .disclosure { padding: 20px 22px; }
  .news { padding: 30px 22px; }
  .foot-top { padding: 44px 0 30px; gap: 28px; }
  .foot-bottom { padding: 20px 0 34px; }
  .section-head { margin-bottom: 26px; gap: 14px; }
  .entry-rank .n { font-size: 2.3rem; }
  .entry h3 { font-size: 1.45rem; }
  .entry { padding: 26px 0; }
  .prose h2 { margin-top: 40px; }
}

/* nagłówek sekcji: przycisk pod tytułem, nie ściśnięty obok niego */
@media (max-width: 620px) {
  .section-head { align-items: flex-start; flex-direction: column; }
}

/* kolumna popularnych trzyma się nagłówka także po zwinięciu układu */
@media (max-width: 999px) {
  .lead-grid { gap: 30px; }
  .side-head { margin-top: 4px; }
}

.sp-all {
  display: block; margin: 8px 6px 0; padding: 13px 16px; border-radius: 14px;
  background: var(--wash); color: var(--forest); text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.sp-all:hover { background: var(--mid); color: var(--forest); }

/* pola kreatora nie mogą rozpychać kolumny szerokością własnego inputa */
.wiz-fields { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .wiz-fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.wiz-field, .wiz-input { min-width: 0; }
.wiz-input input { width: 100%; }

/* --------------------------- tabele porównawcze jako karty na telefonie -- */

@media (max-width: 780px) {
  .tablewrap { border: none; border-radius: 0; overflow: visible; margin-bottom: 30px; }
  .tablewrap table { display: block; min-width: 0; background: transparent; font-size: 15px; }
  .tablewrap thead { display: none; }
  .tablewrap tbody { display: block; }

  .tablewrap tr {
    display: block; background: var(--paper);
    border: 1px solid var(--hairline); border-radius: var(--r-card);
    margin-bottom: 12px;
  }
  .tablewrap tr.win { border-color: var(--forest); background: var(--wash); }
  .tablewrap tr.win td { background: transparent; }

  .tablewrap td {
    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
    padding: 11px 18px; border-bottom: 1px solid var(--hairline);
    text-align: right; white-space: normal;
  }
  .tablewrap td::before {
    content: attr(data-label); text-align: left;
    font-size: 13px; color: var(--muted); letter-spacing: 0;
  }
  .tablewrap td:last-child { border-bottom: none; }

  .tablewrap td[data-first] {
    display: block; text-align: left; padding: 15px 18px 11px;
    font-size: 1.06rem; font-weight: 700; color: var(--forest);
  }
  .tablewrap td[data-first]::before { content: none; }
  .tablewrap td[data-first] b { font-weight: 700; }
}

/* tytuł tekstu na telefonie: mniej kolosalny, bliżej proporcji portalowych */
@media (max-width: 620px) {
  .article-head h1 { font-size: clamp(1.95rem, 7.6vw, 2.6rem); line-height: 1.12; }
  .article-head .lead { font-size: 1.06rem; }
  .lead-main h2 { font-size: clamp(1.95rem, 8vw, 2.7rem); line-height: 1.1; }
  .lead-main .lead { font-size: 1.05rem; }
  h2 { font-size: clamp(1.65rem, 6.4vw, 2.1rem); }
  .prose h2 { font-size: clamp(1.5rem, 5.8vw, 1.9rem); }
}

/* kreator: na telefonie żadnej sztucznej wysokości, przycisk tuż pod polami */
@media (max-width: 620px) {
  .wiz { min-height: 0; }
  .wiz-nav { margin-top: 22px; }
  .wiz-q { font-size: clamp(1.35rem, 5.6vw, 1.8rem); }
  .wiz-opt { padding: 15px 17px; font-size: 15.5px; }
  .wiz-input input { font-size: 18px; padding: 15px 16px; }
}

/* wynik kalkulatora: śródtytuły potrzebują powietrza, bo h3 globalnie ma zero */
.result h3 { margin: 28px 0 8px; }
.result p { margin-bottom: 16px; }

/* --------------------------------- margines boczny jako jedna zmienna ---- */

:root { --gut: 24px; }
@media (max-width: 400px) { :root { --gut: 18px; } }
.wrap { padding: 0 var(--gut); }

/* podnawigacja działu przewija się do samej krawędzi, jak w aplikacjach */
@media (max-width: 760px) {
  .subnav {
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .subnav::-webkit-scrollbar { display: none; }
}

/* nagłówek działu na telefonie: bez ściany tekstu i bez zdjęcia na pół ekranu */
@media (max-width: 620px) {
  .hero { margin-top: 18px; }
  .hero-inner { padding: 32px 22px 34px; gap: 26px; }
  .hero h1 { font-size: clamp(1.95rem, 8vw, 2.7rem); line-height: 1.1; margin-bottom: 16px; }
  .hero .lead { font-size: 1.06rem; margin-bottom: 22px; }
  .ph-hero { aspect-ratio: 3 / 2; }
}

/* Kolizja kaskady: reguła .card p przykrywała wielkość i kolor nadtytułu
   oraz daty, przez co w kartach oba renderowały się jak zwykły akapit. */
.card p.card-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.card p.card-meta { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* ==========================================================================
   Wersja 9 — prawdziwe zdjęcia w miejscu zastępników.
   ========================================================================== */

.ph.has-img { background-image: none; background-color: var(--sand); }
.ph.has-img::after { display: none; }
.ph picture { display: block; width: 100%; height: 100%; }
.ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}

/* portrety w poziomych kadrach trzymają twarz w kadrze, nie w rogu */
.card .ph.has-img img,
.side-item .ph.has-img img { object-position: 50% 40%; }
.topiccard .ph.has-img img { object-position: 50% 14%; }

/* ==========================================================================
   Wersja 10 — sygnet i ikony w nawigacji.
   Logo: szeryfowa Fraunces, „nutro" prosto, „daily" kursywą, kropka w kolorze
   akcentu. Kontrast rzymskiej i kursywy to stary chwyt z winiet magazynów,
   a szeryf idzie w parze z filmowym charakterem zdjęć.
   ========================================================================== */

.brandmark { gap: 0; }
.brandmark .dot { display: none; }
.brandmark .word {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--forest);
}
.brandmark .word i { font-style: italic; font-weight: 500; }
.brandmark .word b.stop { color: var(--accent); font-weight: 600; margin-left: 0.5px; }
.foot .brandmark .word { color: var(--paper); }
.foot .brandmark .word b.stop { color: #7FA6FF; }
@media (max-width: 620px) { .brandmark .word { font-size: 25px; } }
@media (max-width: 400px) { .brandmark .word { font-size: 23px; } }

/* --------------------------------------------------------------- ikony -- */

.nav-ico { width: 19px; height: 19px; flex: none; }
.dd-head-ico, .mm-head-ico { width: 21px; height: 21px; }

.dropdown a.dd-link { gap: 11px; }
.dd-col > a.dd-head, .mm-head { display: flex; align-items: center; gap: 10px; }

/* ikony biorą kolor działu, tak samo jak kafelki tematów na stronie głównej */
.dd-col.food  .nav-ico, .mm-group.food  .nav-ico { color: var(--t-food-ink); }
.dd-col.train .nav-ico, .mm-group.train .nav-ico { color: var(--t-train-ink); }
.dd-col.life  .nav-ico, .mm-group.life  .nav-ico { color: var(--t-life-ink); }
.dd-col.tools .nav-ico, .mm-group.tools .nav-ico { color: var(--t-tools-ink); }
.dd-grid.one.tools .nav-ico { color: var(--t-tools-ink); }
.mm-flat .nav-ico { color: var(--forest); }

.dd-link .nav-ico, .mm-sub .nav-ico { opacity: .82; }
.dd-link:hover .nav-ico, .mm-sub a:hover .nav-ico { opacity: 1; }

/* --------------------- kafelki narzędzi: ikona zamiast zdjęcia ---------- */

.b-ico {
  display: flex; align-items: center; justify-content: center;
  margin-top: auto; padding: 26px 0 30px;
}
.b-ico-svg { width: 62px; height: 62px; opacity: .42; }
.b-lg .b-ico { padding: 10px 0 34px; }
.b-lg .b-ico-svg { width: 76px; height: 76px; }
.b-1 .b-ico-svg { color: var(--t-life-ink); }
.b-2 .b-ico-svg { color: var(--t-tools-ink); }
.b-3 .b-ico-svg { color: var(--t-train-ink); }
.b-lg .b-ico-svg { color: var(--t-food-ink); }
.b:hover .b-ico-svg { opacity: .55; }
@media (max-width: 620px) {
  .b-ico { padding: 18px 0 22px; }
  .b-ico-svg, .b-lg .b-ico-svg { width: 52px; height: 52px; }
}

/* baner narzędzia: bez zdjęcia wraca do jednej kolumny z ikoną obok tekstu */
@media (min-width: 820px) {
  .bento .b-lg:not(:has(.ph)) { grid-template-columns: 1.6fr 1fr; }
}

/* tytuł tekstu na desktopie: trzy wiersze zamiast pięciu, mniejszy stopień */
@media (min-width: 900px) {
  .article-head h1 { font-size: clamp(2.5rem, 4.2vw, 3.6rem); max-width: 19ch; }
  .article-head.wide h1 { max-width: 22ch; }
}

/* ==========================================================================
   Wersja 11 — kolumna do czytania, okładki tekstów, kafelki jak przyciski.
   Układ wzięty stamtąd, gdzie działa: wąska kolumna tekstu jak u Healthline
   i Ahrefs, okładka od razu pod tytułem, narzędzia z wyraźnym „kliknij mnie".
   ========================================================================== */

/* ------------------------------------------- kolumna tekstu na środku ---- */

.article > .wrap > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.article.wide > .wrap > * { max-width: none; }
.article .prose { max-width: 760px; }

/* elementy, które potrzebują więcej miejsca niż akapit */
.article > .wrap > .tablewrap,
.article > .wrap > .bento,
.article .prose > .tablewrap,
.article .prose > .related-tools { max-width: 980px; }

/* ------------------------------------------------------------ okładka --- */

.cover { margin: 26px auto 38px; }
.cover .ph {
  aspect-ratio: 16 / 9;
  max-height: 420px;
  border-radius: var(--r-card);
}
.cover figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
@media (max-width: 620px) {
  .cover { margin: 20px auto 28px; }
  .cover .ph { aspect-ratio: 3 / 2; }
}

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

.article .prose { font-size: 19px; line-height: 1.72; }
.article .prose p { margin-bottom: 22px; }
.article .prose h2 { margin: 54px 0 14px; }
.article .prose h3 { margin: 36px 0 10px; }
.article .prose li { margin-bottom: 10px; }
.article-head .lead { font-size: 1.22rem; line-height: 1.5; }
@media (max-width: 620px) {
  .article .prose { font-size: 17.5px; line-height: 1.68; }
}

/* pasek udostępniania pod nagłówkiem tekstu */
.share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 0; margin: 4px 0 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.share > span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.share a, .share button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(22,64,46,.18); background: transparent;
  color: var(--forest); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.share a { width: 38px; padding: 0; }
.share svg { width: 17px; height: 17px; }
.share a:hover, .share button:hover { border-color: var(--forest); background: var(--wash); }

/* ------------------------------------------------- większe miniatury ----- */

.side-item { gap: 20px; }
.side-item .ph-thumb {
  width: 136px; aspect-ratio: 4 / 3; border-radius: 12px;
}
.side-item h3 { font-size: 1.12rem; }
@media (max-width: 620px) {
  .side-item .ph-thumb { width: 116px; }
  .side-item { gap: 16px; }
}
@media (max-width: 400px) {
  .side-item .ph-thumb { width: 104px; }
}

/* -------------------------------------- kafelki narzędzi jak przyciski --- */

.b { position: relative; }
.b > .ph { border-radius: 0; }

/* strzałka w rogu mówi wprost, że kafelek jest odnośnikiem */
.b::after {
  content: ""; position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(251,250,245,.94);
  box-shadow: 0 2px 12px rgba(14,36,25,.16);
  transition: transform .2s ease, background .2s ease;
}
.b::before {
  content: ""; position: absolute; right: 28px; bottom: 28px; z-index: 3;
  width: 16px; height: 16px; background-color: var(--forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .2s ease;
}
.b:hover::after { transform: scale(1.08); }
.b:hover::before { transform: translate(2px, -2px); }

/* ikona zamiast zdjęcia: duża, na własnej podkładce, a nie zgubiony znaczek */
.b-ico {
  display: flex; align-items: center; justify-content: center;
  margin-top: auto; padding: 22px 0 34px;
}
.b-ico-svg {
  width: 108px; height: 108px; padding: 24px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  opacity: 1; stroke-width: 1.3;
}
.b-lg .b-ico { padding: 8px 0 30px; }
.b-lg .b-ico-svg { width: 124px; height: 124px; padding: 28px; }
.b:hover .b-ico-svg { background: rgba(255,255,255,.78); }
@media (max-width: 620px) {
  .b-ico { padding: 14px 0 28px; }
  .b-ico-svg, .b-lg .b-ico-svg { width: 92px; height: 92px; padding: 21px; }
}

/* ---------------------------------------------- newsletter w stopce ------ */

.foot-news {
  display: grid; gap: 26px; align-items: center;
  padding: 54px 0 46px; border-bottom: 1px solid #1D3A2B;
}
@media (min-width: 900px) { .foot-news { grid-template-columns: 1.15fr .85fr; gap: 48px; } }
.foot-news h2 {
  color: var(--paper); font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.12; margin-bottom: 12px; max-width: 18ch;
}
.foot-news p { color: #A6BCB1; font-size: 16px; margin: 0; max-width: 54ch; }
.foot-news form { display: flex; gap: 10px; flex-wrap: wrap; }
.foot-news input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  border: 1.5px solid #2A4A38; border-radius: var(--r-pill);
  background: #143020; color: var(--paper);
  padding: 15px 22px; font: inherit; font-size: 16px;
}
.foot-news input::placeholder { color: #6E8A7C; }
.foot-news input:focus { outline: none; border-color: #7FA6FF; }
.foot-news small { display: block; margin-top: 12px; font-size: 13px; color: #7C948A; }
@media (max-width: 620px) { .foot-news { padding: 38px 0 32px; } }

/* Okładka narzędzia jest spokojniejsza od okładki tekstu, bo na tej stronie
   liczy się kalkulator pod nią. Kadr zostaje pełny, zmienia się szerokość,
   inaczej obcięcie ucinałoby głowy, bo zdjęcia są kadrowane ciasno. */
.article.narz .cover { margin: 22px auto 32px; }
@media (min-width: 860px) {
  .article.narz .cover { max-width: 620px; }
}

/* także na stronach z siatkami sam tekst czyta się w wąskiej kolumnie */
.article.wide .prose { max-width: 760px; margin-left: auto; margin-right: auto; }

/* pasek udostępniania mieści się w jednym rzędzie także na telefonie */
@media (max-width: 520px) {
  .share { gap: 8px; padding: 13px 0; }
  .share > span { display: none; }
  .share a { width: 36px; height: 36px; }
  .share button { height: 36px; padding: 0 14px; font-size: 13.5px; }
}

/* ==========================================================================
   Wersja 12 — ścieżka, wiersz metryki, wyrównanie sekcji otwierającej.
   ========================================================================== */

/* ------------------------------------------------------------- ścieżka --- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 13px; letter-spacing: 0; color: var(--muted);
  margin: 0 0 18px; max-width: none;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.crumbs > span:last-child { color: var(--body); }
.crumb-sep { color: #C3CDC6; font-size: 12px; }

/* ------------------------------------------------- wiersz pod tytułem ---- */

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  margin: 18px 0 0; padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px; color: var(--muted);
}
.byline b { color: var(--forest); font-weight: 600; }
.byline a { color: var(--muted); text-underline-offset: 3px; }
.byline a:hover { color: var(--accent); }
.byline .dot {
  width: 3px; height: 3px; border-radius: 50%; background: #C3CDC6; flex: none;
}
.byline .tag {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8A9A90; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 4px 10px;
}
@media (max-width: 620px) {
  .byline { font-size: 13.5px; gap: 0 8px; }
  .byline .tag { margin-left: 0; margin-top: 8px; flex-basis: auto; }
}

/* stary pasek zaufania wycofany na rzecz wiersza wyżej */
.trust { display: none; }

/* --------------------------------- sekcja otwierająca równa u dołu ------- */

@media (min-width: 1000px) {
  .lead-grid { align-items: stretch; }
  .lead-main { display: flex; flex-direction: column; }
  .lead-side { justify-content: space-between; }
  .lead-side .side-item:last-child { padding-bottom: 0; border-bottom: none; }
  .side-head { margin-top: -4px; }
}
.lead-story { padding-bottom: 46px; }
.lead-grid { border-bottom: 1px solid var(--hairline); padding-bottom: 34px; }

/* ==========================================================================
   Wersja 13 — kafelki narzędzi na nowo: zdjęcie u góry w ramce, ikona
   przy nazwie, strzałka w rogu. Cztery równe kafelki zamiast banera i trzech
   mniejszych, bo to jedyny układ, w którym nic się nie rozjeżdża.
   ========================================================================== */

.bento { grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .bento { grid-template-columns: repeat(4, 1fr); } }

/* wszystkie stare wyjątki dla dużego kafla przestają obowiązywać */
.bento .b-lg,
.bento .b-lg:not(:has(.ph)) { grid-column: auto; grid-row: auto; display: flex; }

.b {
  --bp: 0px;
  position: relative;
  display: flex; flex-direction: column;
  padding: 8px 8px 0;
  border-radius: var(--r-card);
  overflow: hidden;
}
.b:hover { transform: translateY(-3px); }

/* zdjęcie: pełne 16:9, własne zaokrąglenie, nic nie jest przycięte */
.b > .ph,
.b .b-ico {
  margin: 0; border-radius: 13px; overflow: hidden;
  aspect-ratio: 16 / 9; width: 100%;
}
.b > .ph::after { display: none; }
.b > .ph img { border-radius: 13px; }

/* kafelek bez zdjęcia dostaje w tym samym miejscu podkładkę z ikoną */
.b .b-ico {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.5); padding: 0;
}
.b-ico-plate { display: flex; }
.b-ico-svg { width: 52px; height: 52px; stroke-width: 1.3; opacity: .85; }

/* podpis pod zdjęciem */
.b-txt { padding: 14px 6px 44px; }
.b-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.b-mark { display: flex; flex: none; }
.b-mark-svg { width: 18px; height: 18px; }
.b :is(h2, h3) { font-size: 1.15rem; margin: 0; line-height: 1.25; }
.b p { font-size: 14.5px; line-height: 1.45; margin: 0; opacity: .78; }

/* strzałka wraca do rogu kafelka, już nie na zdjęciu */
.b::after {
  right: 12px; bottom: 12px; width: 34px; height: 34px;
  background: rgba(255,255,255,.62); box-shadow: none;
}
.b::before { right: 21px; bottom: 21px; width: 15px; height: 15px; }
.b:hover::after { background: rgba(255,255,255,.9); transform: none; }

/* ikona i strzałka biorą kolor kafelka */
.b-1 .b-mark-svg, .b-1 .b-ico-svg { color: var(--t-life-ink); }
.b-2 .b-mark-svg, .b-2 .b-ico-svg { color: var(--t-tools-ink); }
.b-3 .b-mark-svg, .b-3 .b-ico-svg { color: var(--t-train-ink); }
.b-lg .b-mark-svg, .b-lg .b-ico-svg { color: var(--t-food-ink); }
.b-1::before { background-color: var(--t-life-ink); }
.b-2::before { background-color: var(--t-tools-ink); }
.b-3::before { background-color: var(--t-train-ink); }
.b-lg::before { background-color: var(--t-food-ink); }

.b-lg { background: var(--t-food); color: var(--t-food-ink); padding: 8px 8px 0; }
.b-lg :is(h2, h3) { font-size: 1.15rem; color: var(--t-food-ink); }

@media (max-width: 620px) {
  .b-txt { padding: 13px 6px 42px; }
  .b :is(h2, h3), .b-lg :is(h2, h3) { font-size: 1.1rem; }
  .b p { font-size: 14px; }
}

/* stare wyjątki dużego kafla: wszystkie znoszone, bo teraz jest zwykłą kartą */
.bento .b-lg > .ph,
.b-lg .ph,
.b-lg > .ph { aspect-ratio: 16 / 9; min-height: 0; margin: 0; }
.b-lg .txt { display: contents; }
@media (min-width: 820px) {
  .bento .b-lg { grid-template-columns: none; }
  .bento .b-lg > .ph { aspect-ratio: 16 / 9; min-height: 0; }
}
.bento .b-lg { padding: 8px 8px 0; }

/* ==========================================================================
   Wersja 14 — jeden kafelek narzędzia na górze, trzy pod nim.
   Kafelki noszą już tylko nazwę, bo nazwa mówi wszystko.
   ========================================================================== */

@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento .b-lg { grid-column: 1 / -1; }
  /* baner: zdjęcie zostaje na górze, ale nie zajmuje pół ekranu */
  .bento .b-lg > .ph { aspect-ratio: 16 / 9; max-height: 330px; }
  .bento .b-lg :is(h2, h3) { font-size: 1.5rem; }
  .bento .b-lg .b-mark-svg { width: 23px; height: 23px; }
  .bento .b-lg .b-txt { padding: 16px 8px 46px; }
}
@media (min-width: 1020px) { .bento { grid-template-columns: repeat(3, 1fr); } }

/* bez opisu podpis jest jednym wierszem, więc karta może być niższa */
.b-txt { padding: 14px 6px 40px; }
.b-head { margin-bottom: 0; }
.b :is(h2, h3) { font-size: 1.1rem; }

/* dwie kreski pod sekcją otwierającą na wąskim ekranie: zostaje jedna */
.lead-side .side-item:last-child { border-bottom: none; padding-bottom: 0; }

/* --------------------------------------------------- newsletter na górze -- */

.news h2 { max-width: 17ch; }

/* baner: kadr biegnie po dolnej części zdjęcia, tam gdzie dzieje się temat */
@media (min-width: 700px) {
  .bento .b-lg > .ph { max-height: 400px; }
  .bento .b-lg > .ph img { object-position: 50% 58%; }
}
/* kafelki z opisem, jak na stronie quizów, potrzebują odstępu pod nazwą */
.b-txt p { margin-top: 5px; }

/* ==========================================================================
   Wersja 15 — narzędzia jako siatka 2×2 (wariant 4b).
   Zdjęcie 16:9 wchodzi pod samą krawędź kafelka, pod nim jeden pasek:
   ikona działu, nazwa i strzałka w tym samym wierszu. Nazwa jest jedyną
   treścią, bo sama tłumaczy, co kafelek robi.
   ========================================================================== */

.bento { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px), (min-width: 1020px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* duży kafel nie rządzi się już inaczej niż pozostałe */
.bento .b-lg { grid-column: auto; grid-row: auto; display: flex; }

.b {
  --bp: 0px;
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
}

/* zdjęcie na pełną szerokość kafelka, całe 16:9, bez własnego zaokrąglenia */
.b > .ph,
.b .b-ico {
  margin: 0; border-radius: 0; overflow: hidden;
  aspect-ratio: 16 / 9; width: 100%; max-height: none;
}
.b > .ph img { border-radius: 0; object-position: 50% 50%; }
.bento .b-lg > .ph,
.bento .b-lg > .ph img { aspect-ratio: 16 / 9; max-height: none; object-position: 50% 50%; }

/* kafelek bez zdjęcia dostaje w tym samym miejscu jasną podkładkę z ikoną */
.b .b-ico { background: rgba(255,255,255,.5); padding: 0; }
.b .b-ico-svg { width: 46px; height: 46px; stroke-width: 1.3; opacity: .8; }

/* pasek pod zdjęciem */
.b-txt { padding: 15px 14px 16px; }
.b-head { display: flex; align-items: center; gap: 11px; margin: 0; }
.b-mark { display: flex; flex: none; }
.b-mark-svg { width: 20px; height: 20px; }
.b .b-head :is(h2, h3),
.bento .b-lg :is(h2, h3) {
  flex: 1; min-width: 0; margin: 0;
  font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em;
}
.b-txt p { font-size: 14px; line-height: 1.45; margin-top: 6px; opacity: .78; }

/* strzałka jest ostatnim elementem paska, więc pod nazwą nie zostaje pustka */
.b::after, .b::before { content: none; }
.b-head::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background-color: rgba(255,255,255,.6);
  background-repeat: no-repeat; background-position: center; background-size: 13px;
  transition: background-color .2s ease, transform .2s ease;
}
.b:hover .b-head::after { background-color: rgba(255,255,255,.95); transform: translate(1px, -1px); }

.b-lg .b-head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316402E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.b-1  .b-head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3B57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.b-2  .b-head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4813' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.b-3  .b-head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E3B1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }

@media (max-width: 460px) {
  .b-txt { padding: 14px 13px 15px; }
  .b .b-head :is(h2, h3), .bento .b-lg :is(h2, h3) { font-size: 16px; }
  .b-head { gap: 10px; }
}

/* nadpisanie starszych wcięć kafelków: teraz zdjęcie dotyka krawędzi */
.bento .b,
.bento .b-lg { padding: 0; }
.bento .b > .ph,
.bento .b-lg > .ph { margin: 0; border-radius: 0; }

/* im szerszy kafelek, tym większa nazwa: na desktopie 588 px szerokości
   nie może nieść 17-punktowego napisu, bo ginie w zdjęciu */
@media (min-width: 900px) {
  .b-txt { padding: 17px 18px 19px; }
  .b-head { gap: 13px; }
  .b .b-head :is(h2, h3), .bento .b-lg :is(h2, h3) { font-size: 20px; letter-spacing: -.02em; }
  .b-mark-svg { width: 23px; height: 23px; }
  .b-head::after { width: 34px; height: 34px; background-size: 15px; }
}
.bento .b-lg .b-txt { padding: 15px 14px 16px; }
@media (min-width: 900px) { .bento .b-lg .b-txt { padding: 17px 18px 19px; } }
.bento .b-lg .b-mark-svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .bento .b-lg .b-mark-svg { width: 23px; height: 23px; } }
/* kafelek bez zdjęcia: ikona musi wypełnić podkładkę, nie ginąć w niej */
.b .b-ico-svg { width: 58px; height: 58px; opacity: .55; }
@media (max-width: 620px) { .b .b-ico-svg { width: 46px; height: 46px; } }

/* ==========================================================================
   Wersja 16 — strona artykułu wg researchu (reports/jak-pisac-artykuly-nutrodaily.md)
   Trzy poprawki mierzalne: miara wiersza z 74 do ok. 68 znaków, H3 znowu
   większy od tekstu, oraz komplet elementów zaufania: przypisy w treści,
   lista źródeł i nota informacyjna.
   ========================================================================== */

/* --- miara wiersza: Baymard, powyżej 80 znaków tekst jest pomijany -------- */
/* --- miara wiersza: Baymard, powyżej 80 znaków tekst jest pomijany --------
   Zwężamy same bloki tekstu, a nie całą kolumnę, żeby tabele i ramki
   narzędzi dalej miały 760 px i nic nie wystawało poza rodzica. */
.article .prose > p,
.article .prose > h2,
.article .prose > h3,
.article .prose > h4,
.article .prose > ul,
.article .prose > ol,
.article .prose > blockquote,
.article .prose > figure,
.article .prose > .callout-note,
.article .prose > .keytakes,
.article .prose > .proscons,
.article .prose > .further { max-width: 634px; margin-left: auto; margin-right: auto; }

/* --- hierarchia nagłówków: H3 był mniejszy od tekstu głównego ------------- */
.article .prose h3 {
  font-size: 1.45rem; font-weight: 600; line-height: 1.3;
  margin: 34px 0 9px; color: var(--ink);
}
.article .prose h2 + h3 { margin-top: 22px; }
@media (max-width: 620px) { .article .prose h3 { font-size: 1.3rem; margin-top: 28px; } }

/* --- przypis w treści ----------------------------------------------------- */
sup.ref { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.ref a {
  color: var(--accent); text-decoration: none; font-weight: 600;
  padding: 0 1px; border-radius: 3px;
}
sup.ref a:hover { background: var(--wash); text-decoration: underline; }
sup.ref + sup.ref::before { content: ","; color: var(--muted); margin: 0 1px 0 0; }

/* --- lista źródeł --------------------------------------------------------- */
.zrodla {
  margin: 46px auto 0; padding: 26px 28px;
  background: var(--sand); border-radius: var(--r-card);
}
.zrodla h2 {
  font-size: 1.05rem !important; margin: 0 0 4px !important;
  letter-spacing: -.01em;
}
.zrodla > p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.zrodla ol { margin: 0; padding-left: 20px; counter-reset: none; }
.zrodla li {
  font-size: 14px; line-height: 1.55; margin-bottom: 11px;
  color: var(--body); scroll-margin-top: 90px;
}
.zrodla li:last-child { margin-bottom: 0; }
.zrodla li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.zrodla li a { color: var(--accent); text-decoration: none; }
.zrodla li a:hover { text-decoration: underline; }
.zrodla li:target { background: rgba(27,79,216,.09); border-radius: 6px; box-shadow: 0 0 0 6px rgba(27,79,216,.09); }
@media (max-width: 620px) { .zrodla { padding: 22px 20px; } }


/* --- blok „W skrócie" ----------------------------------------------------- */
.keytakes .label { color: var(--forest); }
.keytakes li { line-height: 1.55; }

/* ==========================================================================
   Wersja 17 — pasek pod tytułem. Zamiast jednego długiego wiersza z kropkami:
   inicjały autora, nazwisko w pierwszej linii, data i czas czytania w drugiej.
   Bez słowa „Aktualizacja", bo sama data mówi to samo krócej.
   ========================================================================== */

.byline {
  display: flex; align-items: center; gap: 13px; flex-wrap: nowrap;
  margin: 20px 0 0; padding: 15px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 14px; color: var(--muted);
}
.by-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wash); color: var(--forest);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.by-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.byline .by-name {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.byline .by-name span { font-weight: 400; color: var(--muted); }
.byline .by-meta {
  margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.35;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
}
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: #C3CDC6; flex: none; }
.byline a { color: var(--muted); text-underline-offset: 3px; }
.byline a:hover { color: var(--accent); }
.byline .tag {
  margin-left: auto; flex: none; align-self: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: #7D8D83; background: var(--sand); border: none; border-radius: var(--r-pill);
  padding: 5px 11px;
}
@media (max-width: 620px) {
  .byline { gap: 11px; flex-wrap: wrap; }
  .by-av { width: 36px; height: 36px; font-size: 12px; }
  .byline .by-name { font-size: 14.5px; }
  .byline .by-meta { font-size: 13px; gap: 0 7px; }
  .byline .tag { margin-left: 0; width: 100%; text-align: center; padding: 6px 11px; }
}

/* ==========================================================================
   Wersja 18 — „Dalej w tym temacie" na dole artykułu.
   Trzy karty ze zdjęciem zamiast listy linków, bo lista na końcu tekstu
   wygląda jak przypis, a karta wygląda jak zaproszenie.
   ========================================================================== */

.dalej { margin: 52px 0 0; padding-top: 34px; border-top: 1px solid var(--hairline); }
.dalej > h2 {
  font-size: 1.35rem !important; margin: 0 0 20px !important;
  letter-spacing: -.015em; color: var(--ink);
}
.dalej .grid { gap: 22px; }
@media (max-width: 620px) { .dalej { margin-top: 40px; padding-top: 26px; } }

/* ==========================================================================
   Wersja 19 — elementy w środku artykułu: zdjęcie z podpisem i blok o Slim AI.
   ========================================================================== */

.figura { margin: 30px auto 34px; max-width: 634px; }
.figura .ph { border-radius: var(--r-card); overflow: hidden; margin: 0; aspect-ratio: 16 / 9; }
.figura figcaption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
@media (min-width: 860px) {
  .article .prose > .figura { width: 760px; max-width: none; margin-left: -63px; }
}

/* blok o narzędziu: czyta się jak rekomendacja redakcji, nie jak baner */
.apka {
  display: flex; gap: 26px; align-items: flex-start;
  margin: 36px auto; padding: 26px 28px; max-width: 634px;
  background: var(--wash); border-radius: var(--r-card);
}
.apka-fot { flex: none; width: 250px; }
.apka-fot .ph { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; }
.apka-podpis { margin: 9px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.apka-txt { min-width: 0; }
.article .prose .apka h3 {
  margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; color: var(--forest);
}
.article .prose .apka p { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }
.article .prose .apka p:last-of-type { margin-bottom: 0; }
.apka-cta a {
  display: inline-block; font-weight: 600; font-size: 15px;
  color: var(--forest); text-decoration: none;
  border-bottom: 2px solid var(--mid); padding-bottom: 1px;
}
.apka-cta a::after { content: " →"; }
.apka-cta a:hover { border-bottom-color: var(--forest); }
@media (max-width: 700px) {
  .apka { flex-direction: column; gap: 20px; padding: 22px 20px; }
  .apka-fot { width: 100%; }
  .apka-podpis { text-align: center; }
}

/* sekcja newslettera na końcu artykułu trzyma szerokość kolumny medialnej */
.news-wrap { margin: 46px 0 0; }

/* ==========================================================================
   Wersja 20 — tytuły są dłuższe, bo deklarują zawartość tekstu.
   Kolumna 17 znaków łamała je na pięć wierszy, więc tytuł dostaje
   pełną szerokość kolumny medialnej i mniejszy stopień.
   ========================================================================== */

.article-head h1 {
  max-width: none;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1.13; letter-spacing: -.02em;
  text-wrap: balance; margin-bottom: 16px;
}
.article-head.wide h1 { max-width: none; }
@media (max-width: 620px) {
  .article-head h1 { font-size: clamp(1.75rem, 7.2vw, 2.2rem); line-height: 1.16; }
}
.article-head .lead {
  max-width: 634px; font-size: 18.5px; line-height: 1.55; color: var(--muted);
  margin: 0 0 4px;
}
@media (max-width: 620px) { .article-head .lead { font-size: 17px; } }

/* podpis pod zrzutem aplikacji przegrywał z regułą .apka p i szedł na 15,5 px */
.article .prose .apka .apka-podpis {
  font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 9px 0 0;
}
@media (max-width: 700px) {
  .apka-fot { width: 100%; max-width: 280px; margin-inline: auto; }
  .article .prose .apka .apka-podpis { text-align: center; }
  .article .prose .apka h3 { font-size: 1.08rem; }
}

/* ==========================================================================
   Wersja 21 — układ artykułu przepisany na jedną kolumnę.
   Zmierzone u konkurencji przy 1280 px: Healthline trzyma cały artykuł
   na 750 px w jednej kolumnie, Radamed na 800 px, obaj mają zero <hr>
   i zero kresek między sekcjami. U nas biegły dwie szerokości naraz
   (634 dla tekstu, 760 dla mediów), więc nagłówki, akapity, tabele
   i ramki startowały z trzech różnych krawędzi.
   ========================================================================== */

/* --- jedna krawędź dla całego artykułu ----------------------------------- */
.article .prose { max-width: 760px; margin-inline: auto; }
.article .prose > p,
.article .prose > h2,
.article .prose > h3,
.article .prose > h4,
.article .prose > ul,
.article .prose > ol,
.article .prose > blockquote,
.article .prose > figure,
.article .prose > .callout-note,
.article .prose > .keytakes,
.article .prose > .proscons,
.article .prose > .further,
.article .prose > .toc-box,
.article .prose > .apka,
.article .prose > .tablewrap,
.article .prose > .helpful,
.article .prose > .related-tools {
  max-width: none; margin-left: 0; margin-right: 0; width: auto;
}
.article .prose h3 { margin-left: 0; margin-right: 0; }
.article .prose > .figura { width: auto; max-width: none; margin: 32px 0 36px; }

/* --- skala nagłówków: u Healthline 38 / 26 / 18, u nas 34 / 25 / 19 ------ */
.article .prose h2 {
  font-size: clamp(1.65rem, 2.7vw, 2.1rem); font-weight: 600;
  line-height: 1.18; letter-spacing: -.02em; color: var(--ink);
  margin: 48px 0 14px;
}
.article .prose h3 {
  font-size: clamp(1.35rem, 2vw, 1.56rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -.015em; color: var(--ink);
  margin: 34px 0 10px;
}
.article .prose h2 + h3 { margin-top: 20px; }
.article .prose p { margin-bottom: 24px; }
.article .prose li { margin-bottom: 9px; }
.article .prose ul,
.article .prose ol { margin: 0 0 26px; padding-left: 24px; }

/* --- koniec podwójnych kresek --------------------------------------------
   Pasek autora i pasek udostępniania tworzyły dwie linie w odległości
   czterech pikseli. Teraz to jeden blok: kreska nad nazwiskiem i kreska
   pod ikonami, nic w środku. */
.byline { border-bottom: none; margin-bottom: 0; padding-bottom: 13px; }
.article-head .share { border-top: none; margin-top: 0; padding-top: 0; padding-bottom: 14px; }

/* tabela nie potrzebuje własnej ramki obok kresek innych bloków */
.article .prose > .tablewrap { border: none; border-radius: 0; margin: 4px 0 32px; }
.article .prose > .tablewrap table { border-radius: var(--r-card); overflow: hidden; }

/* --- spis treści: ma wyglądać jak nawigacja, nie jak kolejna ramka ------- */
.toc-box {
  background: transparent; border: none; border-left: 3px solid var(--mid);
  border-radius: 0; padding: 4px 0 4px 22px; margin: 30px 0 38px;
}
.toc-box .label { margin-bottom: 10px; color: var(--forest); }
.toc-box ol { margin: 0; padding-left: 18px; }
.toc-box li { margin-bottom: 8px; font-size: 16px; line-height: 1.45; }
.toc-box a { color: var(--body); text-decoration: none; }
.toc-box a:hover { color: var(--accent); text-decoration: underline; }

/* --- sekcje zamykające trzymają tę samą krawędź -------------------------- */
.zrodla, .dalej, .news-wrap { max-width: 760px; margin-inline: auto; }
.helpful { margin-top: 48px; }

@media (max-width: 620px) {
  .article .prose h2 { margin-top: 38px; }
  .article .prose h3 { margin-top: 28px; }
  .article .prose p { margin-bottom: 20px; }
  .toc-box { padding: 2px 0 2px 16px; margin: 24px 0 30px; }
}

/* okładka na stronie narzędzia trzyma tę samą krawędź co reszta strony */
@media (min-width: 860px) { .article.narz .cover { max-width: 760px; } }

/* siatka quizów trzyma tę samą krawędź co reszta strony */
.article > .wrap > .bento { max-width: 760px; }

/* ==========================================================================
   Wersja 22 — sekcja zapisu na przepisy. Zielony panel, postać wychodzi
   głową ponad jego górną krawędź, pod nagłówkiem trzy konkrety z ikonami.
   ========================================================================== */

.nl {
  position: relative; overflow: visible;
  background: var(--t-food); border-radius: 22px;
  padding: 42px 34px; margin: 108px auto 0; max-width: none;
}
.nl-txt { position: relative; z-index: 2; }

.nl-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.72); color: var(--forest);
  border-radius: var(--r-pill); padding: 6px 14px 6px 11px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 16px;
}
.nl-ico { display: inline-flex; flex: none; }
.nl-ico svg { width: 16px; height: 16px; }
.nl-pill .nl-ico svg { width: 15px; height: 15px; }

.nl h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.35rem); line-height: 1.12;
  letter-spacing: -.025em; color: var(--forest); margin: 0 0 12px;
}
.nl h2 b { display: block; font-weight: 600; color: var(--ink); }
.nl .nl-sub {
  font-size: 16.5px; line-height: 1.5; color: #2F4A3B; margin: 0 0 20px; max-width: 40ch;
}

.nl-cechy {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin: 0 0 24px; padding: 0;
}
.nl-cechy li {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--forest); margin: 0;
}
.nl-cechy .nl-ico svg { width: 19px; height: 19px; stroke-width: 1.6; }

.nl-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 500px; }
.nl-mail {
  display: flex; align-items: center; gap: 9px; flex: 1 1 190px;
  background: #FBFAF5; border-radius: var(--r-pill); padding: 0 16px;
  border: 1px solid rgba(22,64,46,.1); min-width: 0;
}
.nl-mail svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.nl-mail input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 15.5px; color: var(--ink); padding: 15px 0;
}
.nl-mail input:focus { outline: none; }
.nl-mail:focus-within { border-color: var(--forest); }
.nl .btn-primary { flex: none; padding: 15px 24px; font-size: 15.5px; white-space: nowrap; }
.nl small {
  display: block; margin-top: 14px; font-size: 13px; color: #46614F; max-width: 46ch;
}

/* postać: dół równo z dołem panelu, głowa ponad górną krawędzią */
.nl-osoba { display: none; }
/* Panel jest szerszy od kolumny tekstu, bo to pasek promocyjny, a nie
   treść artykułu. Dzięki temu tekst i postać stoją obok siebie, panel
   robi się niski i szeroki, a głowa wychodzi ponad jego górną krawędź. */
/* w artykule panel zostaje węższy od strony głównej, bo tam kolumna
   tekstu ma 760 px i pasek na całą szerokość wyglądałby jak wyrwany */
@media (min-width: 1000px) {
  .nl { padding: 44px 48px; }
  .article > .wrap > .nl, .article .prose > .nl { max-width: 940px; }
}

@media (min-width: 900px) {
  .nl { padding: 44px 40px; }
  .nl-txt { max-width: 52%; }
  .nl-osoba {
    display: block; position: absolute; right: 30px; bottom: 0;
    width: 292px; z-index: 1; pointer-events: none;
  }
  .nl-osoba .ph {
    margin: 0; background: none; border-radius: 0; overflow: visible;
    aspect-ratio: 1278 / 2023;
  }
  .nl-osoba .ph::after { display: none; }
  .nl-osoba picture { display: block; }
  .nl-osoba img {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 20px 34px rgba(14,36,25,.16));
  }
}
@media (min-width: 1000px) { .nl-osoba { width: 356px; right: 30px; } }

@media (max-width: 620px) {
  .nl { padding: 32px 22px; margin-top: 48px; border-radius: 18px; }
  .nl h2 { max-width: none; }
  .nl-cechy { gap: 9px 18px; }
  .nl-cechy li { font-size: 14.5px; }
  .nl .btn-primary { width: 100%; }
}

/* stara sekcja przepisów zostaje tylko tam, gdzie jej jeszcze nie wymieniono */
.news-wrap:has(.nl) { margin-top: 0; }

/* ==========================================================================
   Wersja 23 — wykresy w treści. Tam, gdzie sednem sekcji jest liczba,
   zdjęcie z banku niczego nie tłumaczy. Rysujemy w kodzie, więc grafika
   jest ostra na każdym ekranie i poprawia się razem z danymi.
   ========================================================================== */

.wykres {
  margin: 30px 0 34px; padding: 24px 26px 20px;
  background: var(--sand); border-radius: var(--r-card);
}
.wyk-tyt {
  font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.35; margin: 0 0 18px;
}
.wyk-zrodlo {
  font-size: 13px; line-height: 1.45; color: var(--muted); margin: 16px 0 0;
}

/* --- słupki poziome ------------------------------------------------------ */
.wyk-body { display: flex; flex-direction: column; gap: 11px; }
.wyk-rzad {
  display: grid; grid-template-columns: minmax(0, 12.5rem) 1fr auto;
  align-items: center; gap: 14px;
}
.wyk-et { font-size: 14.5px; line-height: 1.3; color: var(--body); }
.wyk-tor { height: 12px; border-radius: 6px; background: rgba(22,64,46,.09); overflow: hidden; }
.wyk-bar { display: block; height: 100%; border-radius: 6px; background: var(--mid); }
.wyk-rzad.w .wyk-bar { background: var(--forest); }
.wyk-rzad.w .wyk-et { font-weight: 600; color: var(--ink); }
.wyk-w {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: right;
}
@media (max-width: 620px) {
  .wykres { padding: 20px 18px 16px; }
  .wyk-rzad { grid-template-columns: 1fr auto; grid-template-areas: "et w" "tor tor"; gap: 6px 10px; }
  .wyk-et { grid-area: et; }
  .wyk-w { grid-area: w; }
  .wyk-tor { grid-area: tor; }
}

/* --- krzywa -------------------------------------------------------------- */
.wyk-svg { display: block; width: 100%; height: auto; }
.wyk-siatka { stroke: rgba(22,64,46,.13); stroke-width: 1; }
.wyk-pole { fill: rgba(22,64,46,.09); }
.wyk-linia { fill: none; stroke: var(--forest); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.wyk-prog { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 5 4; }
.wyk-prog-t { fill: var(--accent); font-size: 12px; font-weight: 600; }
.wyk-osx, .wyk-osy { fill: var(--muted); font-size: 11.5px; }
.wyk-osx { text-anchor: middle; }
.wyk-osx-p { text-anchor: middle; font-size: 12px; }

/* ==========================================================================
   Wersja 24 — pasek pod tytułem: zdjęcie autora zamiast inicjałów,
   ikony przy dacie i przy czasie czytania.
   ========================================================================== */

.by-av {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; background: var(--wash); display: block; padding: 0;
  box-shadow: 0 0 0 1px rgba(22,64,46,.08);
}
.by-av picture { display: block; width: 100%; height: 100%; }
.by-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.byline .by-meta { gap: 0 14px; }
.by-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.by-i svg { width: 15px; height: 15px; color: #90A197; flex: none; }
.byline .by-meta .dot { display: none; }

@media (max-width: 620px) {
  .by-av { width: 42px; height: 42px; }
  .by-i svg { width: 14px; height: 14px; }
  .byline .by-meta { gap: 0 12px; }
}

/* ==========================================================================
   Wersja 25 — strony formalne: polityka, regulamin, kontakt.
   Gęstsza numeracja i mniejszy stopień niż w artykule, bo to dokument.
   ========================================================================== */

.doc-data {
  margin: 6px 0 0; font-size: 13.5px; color: var(--muted);
  padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.article .prose.doc { font-size: 17px; line-height: 1.62; }
.article .prose.doc h2 { font-size: 1.28rem; margin: 40px 0 12px; }
.article .prose.doc h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.article .prose.doc p { margin-bottom: 18px; }
.article .prose.doc ol { counter-reset: punkt; list-style: none; padding-left: 0; }
.article .prose.doc ol > li {
  counter-increment: punkt; position: relative; padding-left: 34px; margin-bottom: 12px;
}
.article .prose.doc ol > li::before {
  content: counter(punkt) "."; position: absolute; left: 0; top: 0;
  font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px;
}
.article .prose.doc ul { padding-left: 22px; }
.article .prose.doc ul > li { margin-bottom: 11px; }
.article .prose.doc table { font-size: 15px; }
.article .prose.doc td { vertical-align: top; }
@media (max-width: 620px) {
  .article .prose.doc { font-size: 16px; }
  .article .prose.doc ol > li { padding-left: 28px; }
}

/* wstęp pod nagłówkiem klastra na stronie działu */
.klaster-wstep {
  max-width: 58ch; margin: -6px 0 22px; color: var(--muted);
  font-size: 16.5px; line-height: 1.55;
}
@media (max-width: 620px) { .klaster-wstep { font-size: 15.5px; margin-bottom: 18px; } }

/* kafelek quizu, którego jeszcze nie ma: bez strzałki, z widocznym znacznikiem */
.b-wkrotce { cursor: default; }
.b-wkrotce:hover { transform: none; }
.b-wkrotce .b-head::after { display: none; }
.b-wkrotce .b-head::before {
  content: "Wkrótce"; margin-left: auto; flex: none;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.66);
  border-radius: var(--r-pill); padding: 5px 11px;
}

/* ==========================================================================
   Wersja 26 — panel z przepisami i sekcja otwierająca.

   1. Postać stała przy prawej krawędzi panelu, więc pusty pas między nią
      a kolumną tekstu był szerszy niż margines po jej prawej stronie.
      Teraz figura centruje się w całej przestrzeni na prawo od tekstu.
   2. Sekcja otwierająca mierzyła 946 px przy oknie 900 px, czyli nie
      mieściła się na żadnym laptopie. Skracamy tytuł, kadr i listę obok,
      tak jak robią to serwisy redakcyjne z jednym artykułem na czele.
   ========================================================================== */

/* --- panel z przepisami --------------------------------------------------- */

/* podpis dostaje tę samą miarę co nagłówek, bo węższa kolumna
   robiła z dwóch zdań poszarpany trójwiersz */
.nl .nl-sub { max-width: none; margin-bottom: 22px; }
.nl-cechy { margin-bottom: 26px; }
.nl-form { margin-bottom: 0; }

@media (min-width: 900px) {
  .nl { padding: 46px 44px; }
  .nl-txt { max-width: 54%; }
  /* postać dostaje cały pas na prawo od tekstu i staje w jego środku */
  .nl-osoba {
    left: 54%; right: 0; width: auto; bottom: 0;
    display: flex; justify-content: center; align-items: flex-end;
  }
  .nl-osoba .ph { width: 292px; max-width: 100%; }
}
@media (min-width: 1000px) {
  .nl { padding: 48px 48px; }
  .nl-osoba { left: 54%; right: 0; width: auto; }
  .nl-osoba .ph { width: 356px; }
}

/* --- sekcja otwierająca --------------------------------------------------- */

@media (min-width: 1000px) {
  .lead-story { padding: 30px 0 34px; }
  .lead-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    gap: 52px; padding-bottom: 28px;
  }

  .lead-main .ph { aspect-ratio: 16 / 9; max-height: 322px; margin-bottom: 20px; }
  .lead-main .card-kicker { margin-bottom: 8px; }
  .lead-main h2 {
    font-size: clamp(1.95rem, 2.55vw, 2.45rem); line-height: 1.1;
    margin-bottom: 12px;
  }
  .lead-main .card-meta { margin: 0 0 12px; }
  .lead-main .lead { font-size: 1.03rem; line-height: 1.55; margin: 0; }

  .side-head { margin-bottom: 2px; }
  .side-item { padding: 14px 0; gap: 16px; }
  .side-item .ph-thumb { width: 108px; border-radius: 12px; }
  .side-item h3 { font-size: 1.04rem; line-height: 1.3; }
  .side-item .card-meta { margin-top: 4px; }
}

/* W artykule panel jest o 250 px węższy niż na stronie głównej, więc ta sama
   skala nagłówka rozbijała go na cztery wiersze, a postać dotykała
   zaokrąglonego rogu. Tutaj wszystko schodzi o stopień. */
@media (min-width: 1000px) {
  .article .nl h2 { font-size: clamp(1.6rem, 2.2vw, 1.95rem); }
  .article .nl-txt { max-width: 56%; }
  .article .nl-osoba { left: 56%; }
  .article .nl-osoba .ph { width: 318px; }
}

/* ==========================================================================
   Wersja 27 — kolor w tabelach i wykresach, wyrównany pasek autora,
   kadr zdjęcia otwierającego i oddech pod paskiem nawigacji.
   ========================================================================== */

:root {
  /* serie danych: cztery odcienie z kafli na stronie głównej plus szałwia */
  --v1: #2F7D5C;
  --v2: #3D6FA6;
  --v3: #C08A2C;
  --v4: #B5643C;
  --v5: #6B8E7B;
}

/* --- pasek autora i udostępniania ---------------------------------------- */
/* było 15/13 w bloku autora i 0/14 w pasku ikon, więc jedna kreska stała
   16 px od treści, druga 13, a ikony dotykały wiersza z datą */

.article-head .byline { margin: 26px 0 0; padding: 18px 0 13px; }
.article-head .share { padding: 13px 0 18px; }
.byline .by-txt { gap: 3px; }
@media (max-width: 620px) {
  .article-head .byline { margin-top: 22px; padding: 16px 0 12px; }
  .article-head .share { padding: 12px 0 16px; }
}

/* --- kadr zdjęcia z miską i telefonem ------------------------------------ */
/* zdjęcie jest 4:3, a kadry na stronie są szersze, więc przy domyślnym
   środku ucinało liście z góry miski. Pasek z miską i telefonem kończy się
   na 64 % wysokości oryginału, stąd przesunięcie punktu kadrowania w górę. */
.ph.has-img img[src*="aplikacje-kalorie"] { object-position: 50% 22%; }

/* --- odstęp od paska nawigacji ------------------------------------------- */
/* na stronie głównej było 30 px, w artykule 46 px; pigułka nawigacji ma
   własny cień, więc pod nią potrzeba tyle samo miejsca co w tekście */
@media (min-width: 1000px) {
  .lead-story { padding: 44px 0 30px; }
  .lead-grid { padding-bottom: 24px; }
}

/* --- tabele --------------------------------------------------------------- */

thead th {
  background: var(--t-food); color: var(--t-food-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
}
tbody td:first-child {
  font-weight: 600; color: var(--forest);
  background: rgba(220,235,223,.42);
}
td.num { color: var(--forest); font-weight: 600; }
tbody tr td { border-bottom: 1px solid rgba(22,64,46,.09); }
tbody tr:last-child td { border-bottom: none; }
tr.win td { background: #DCEBDF; }
tr.win td:first-child {
  background: #CBE2D3; box-shadow: inset 3px 0 0 var(--v1);
}
tr.win td, tr.win td.num { color: var(--forest); }

/* --- wykresy: słupki ------------------------------------------------------ */

.wyk-tyt {
  font-size: 15.5px; letter-spacing: -.005em;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(22,64,46,.10);
}
.wyk-body { gap: 4px; }
.wyk-rzad {
  align-items: center; padding: 7px 12px; margin: 0 -12px;
  border-radius: 12px;
}
.wyk-tor { height: 14px; border-radius: 7px; background: rgba(20,44,32,.10); }
.wyk-bar { background: var(--c, var(--v1)); border-radius: 7px; }
.wyk-w { color: var(--c, var(--forest)); font-weight: 600; font-variant-numeric: tabular-nums; }
.wyk-rzad.w { background: #FFFDF7; box-shadow: 0 1px 3px rgba(60,52,38,.07); }
.wyk-rzad.w .wyk-bar { background: var(--c, var(--v1)); }
.wyk-rzad.w .wyk-et { font-weight: 600; color: var(--ink); }
.wyk-rzad.w .wyk-tor { background: rgba(20,44,32,.13); }

/* --- wykresy: krzywa ------------------------------------------------------ */

.wyk-siatka { stroke: rgba(22,64,46,.10); }
.wyk-baza { stroke: rgba(22,64,46,.30); stroke-width: 1.4; }
.wyk-linia { stroke: var(--v1); stroke-width: 3; }
.wyk-kropka { fill: var(--v1); stroke: #FBFAF5; stroke-width: 2; }
.wyk-prog { stroke: var(--v2); stroke-width: 1.8; stroke-dasharray: 5 4; }
.wyk-prog-t { fill: var(--v2); font-weight: 700; }
.wyk-osx, .wyk-osy { fill: #5C6E64; }
.wyk-osy { font-weight: 600; }

/* tabela z pięcioma i więcej kolumnami: ciaśniejsze komórki i nazwa
   w jednym wierszu, bo inaczej "5. MyFitnessPal" łamało się na dwa */
table.ciasna { font-size: 14.8px; }
table.ciasna th, table.ciasna td { padding: 13px 12px; }
table.ciasna tbody td:first-child { white-space: nowrap; }

/* Na telefonie tabela zamienia się w karty, więc tint pierwszej kolumny,
   pasek przy zwycięzcy i nowrag z wersji szerokiej trzeba wycofać. */
@media (max-width: 780px) {
  .tablewrap tbody td:first-child { background: transparent; }
  .tablewrap tr.win td:first-child { background: transparent; box-shadow: none; }
  .tablewrap table.ciasna tbody td:first-child { white-space: normal; }
  .tablewrap table.ciasna th, .tablewrap table.ciasna td { padding: 11px 18px; }
  .tablewrap table.ciasna td[data-first] { padding: 15px 18px 11px; }
  .tablewrap tbody tr:last-child td { border-bottom: 1px solid var(--hairline); }
  .tablewrap td:last-child, .tablewrap tbody tr:last-child td:last-child { border-bottom: none; }
}

/* ==========================================================================
   Wersja 28 — redakcja, kafelki quizów, drobiazgi po audycie.
   ========================================================================== */

/* --- nazwisko autora prowadzi do jego opisu ------------------------------ */

.by-av { text-decoration: none; }
.byline .by-name a { color: inherit; text-decoration: none; }
.byline .by-name a:hover { color: var(--accent); text-decoration: underline; }
a.by-av:hover { box-shadow: 0 0 0 2px var(--mid); }

/* --- kto pisze, na stronie „O nas" --------------------------------------- */

.redakcja { display: grid; gap: 26px; margin: 22px 0 40px; }
@media (min-width: 720px) { .redakcja { gap: 30px; } }

.osoba { display: grid; grid-template-columns: 74px 1fr; gap: 20px; align-items: start; }
@media (min-width: 720px) { .osoba { grid-template-columns: 92px 1fr; gap: 26px; } }

.osoba .ph {
  margin: 0; width: 100%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(22,64,46,.08);
}
.osoba .ph::after { display: none; }
.osoba .ph img { width: 100%; height: 100%; object-fit: cover; }

.article .prose .osoba h3 { margin: 2px 0 0; font-size: 1.2rem; }
.osoba .rola {
  margin: 4px 0 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.article .prose .osoba p:last-child { margin: 0; font-size: 16.5px; line-height: 1.6; }

/* --- kafelki quizów ------------------------------------------------------ */
/* zdjęcie zamiast ikony na pustym polu; kafelek trzyma stałą wysokość,
   żeby przy różnej długości opisu rząd nie robił się schodkowy */

.bento .b-wkrotce { align-self: stretch; }
.bento .b-wkrotce .b-txt { display: flex; flex-direction: column; }
.bento .b-wkrotce .b-txt p { flex: 1; }

/* --- kalkulatory --------------------------------------------------------- */
/* Trzy usterki z audytu: pola liczbowe pokazywały systemowe strzałki,
   przycisk „Dalej" wisiał w połowie karty (rezerwa 340 px na najdłuższy
   krok zostawała pustką pod nim), a pasek postępu na pierwszym kroku
   miał zerowe wypełnienie i wyglądał jak przypadkowa kreska. */

.wiz-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.wiz-input input::-webkit-outer-spin-button,
.wiz-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wiz-input:focus-within {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(22,64,46,.12);
}

.wiz-nav { margin-top: auto; padding-top: 22px; }
.wiz-progress { flex: none; }

/* --- stopka: nagłówki kolumn są teraz h2, więc bez przeskoku w hierarchii - */
.foot .foot-h { font-size: 11.5px; }

/* Na 13-calowym laptopie (1024x768) sekcja otwierająca po wczytaniu Readexa
   urosła o kilkanaście pikseli i znów nie mieściła się w oknie. W tym
   wąskim paśmie kadr i marginesy schodzą o stopień. */
@media (min-width: 1000px) and (max-width: 1120px) {
  .lead-story { padding: 34px 0 24px; }
  .lead-grid { padding-bottom: 20px; }
  .lead-main .ph { max-height: 274px; margin-bottom: 18px; }
  .side-item { padding: 12px 0; }
}

/* ==========================================================================
   Wersja 29 — quizy diagnostyczne.

   Panel stoi na kolorze działu, żeby odcinał się od tekstu, ale nie krzyczał.
   Jedno pytanie na ekran, bo w badaniach ukończeń liczy się nie tylko liczba
   pytań, ale i to, czy widać koniec. Odpowiedzi są przyciskami wielkości
   palca, bo 60 procent ruchu w quizach idzie z telefonu.
   ========================================================================== */

.qz {
  background: var(--t-food); border-radius: 22px;
  padding: 30px 24px; margin: 8px auto 44px; max-width: 760px;
}
@media (min-width: 760px) { .qz { padding: 40px 44px; } }
.article > .wrap > .qz { max-width: 760px; }

.qz-box { min-height: 420px; display: flex; flex-direction: column; }

/* --- pasek postępu ------------------------------------------------------- */
.qz-pasek {
  flex: none; height: 4px; border-radius: 2px;
  background: rgba(22,64,46,.14); overflow: hidden; margin-bottom: 20px;
}
.qz-pasek span {
  display: block; height: 100%; background: var(--forest);
  border-radius: 2px; transition: width .3s ease;
}

.qz-licznik {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #4A6656;
}
.qz-pytanie {
  font-size: clamp(1.35rem, 2.6vw, 1.72rem); line-height: 1.22;
  letter-spacing: -.02em; color: var(--forest); margin: 0 0 8px;
}
.qz-nota { font-size: 14.5px; line-height: 1.5; color: #4A6656; margin: 0 0 18px; max-width: 52ch; }
.qz-pytanie + .qz-opts { margin-top: 20px; }

/* --- odpowiedzi ---------------------------------------------------------- */
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
.qz-opt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  text-align: left; font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--ink); background: #FBFAF5; cursor: pointer;
  border: 1.5px solid rgba(22,64,46,.12); border-radius: 14px;
  padding: 15px 18px; transition: border-color .15s ease, background .15s ease;
}
.qz-opt:hover { border-color: var(--forest); }
.qz-opt[aria-pressed="true"] { border-color: var(--forest); background: #F1F7F2; }
.qz-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(22,64,46,.28); background: transparent;
}
.qz-opt[aria-pressed="true"] .qz-dot {
  border-color: var(--forest); background: var(--forest);
  box-shadow: inset 0 0 0 3px #FBFAF5;
}

.qz-nav { margin-top: auto; padding-top: 20px; display: flex; justify-content: flex-start; }
.qz-noscript { margin: 0; color: #2F4A3B; }

/* --- wynik --------------------------------------------------------------- */
.qz-wynik { display: flex; flex-direction: column; }
.qz-etykieta {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #4A6656;
}
.qz-wtytul {
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -.025em;
  color: var(--forest); margin: 0 0 14px;
}
.qz-wlead { font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0 0 18px; }
.qz-wynik p { font-size: 16px; line-height: 1.62; color: #2F4A3B; margin: 0 0 14px; }

.qz-liczba {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: #FBFAF5; border-radius: 14px; padding: 16px 18px; margin: 0 0 18px;
}
.qz-liczba b {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1;
  color: var(--forest); letter-spacing: -.03em;
}
.qz-wynik .qz-liczba { font-size: 15px; }

.qz-krok {
  background: #FBFAF5; border-radius: 14px; padding: 20px 22px; margin: 6px 0 22px;
}
.qz-krok-tyt {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #4A6656;
}
.qz-krok ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.qz-krok li { font-size: 15.5px; line-height: 1.55; color: var(--ink); }

.qz-dalej-tyt {
  margin: 0 0 12px !important; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #4A6656;
}
.qz-linki { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.qz-link {
  display: block; background: #FBFAF5; border-radius: 12px; padding: 14px 16px;
  text-decoration: none; color: var(--forest); font-weight: 600; font-size: 15.5px;
  line-height: 1.35; border: 1px solid transparent;
}
.qz-link span {
  display: block; font-weight: 400; font-size: 14px; color: #55705F; margin-top: 3px;
}
.qz-link:hover { border-color: var(--forest); color: var(--forest); }

.qz-akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.qz-akcje .btn { background: #FBFAF5; }

@media (max-width: 620px) {
  .qz { padding: 24px 18px; border-radius: 18px; }
  .qz-box { min-height: 380px; }
  .qz-opt { font-size: 15.5px; padding: 14px 15px; }
  .qz-krok, .qz-liczba { padding: 16px 16px; }
}

/* --- zajawka quizu w dziale --------------------------------------------- */
/* Quiz bez linku z klastra tematycznego zostaje stroną, na którą nikt nie
   trafia z artykułu. Pasek jest szeroki, bo ma zatrzymać przewijanie. */

.quiz-pas {
  display: grid; gap: 0; text-decoration: none; color: inherit;
  background: var(--t-food); border-radius: 20px; overflow: hidden;
}
@media (min-width: 800px) { .quiz-pas { grid-template-columns: 42% 1fr; align-items: stretch; } }

.quiz-pas .ph { margin: 0; border-radius: 0; aspect-ratio: 16 / 9; height: 100%; }
.quiz-pas .ph img { height: 100%; object-fit: cover; }
.quiz-pas-txt { padding: 26px 24px 28px; display: flex; flex-direction: column; }
@media (min-width: 800px) { .quiz-pas-txt { padding: 34px 36px; justify-content: center; } }

.quiz-pas-kicker {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #4A6656;
}
.quiz-pas h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.15;
  letter-spacing: -.025em; color: var(--forest); margin: 0 0 12px;
}
.quiz-pas p { font-size: 16px; line-height: 1.55; color: #2F4A3B; margin: 0 0 18px; max-width: 46ch; }
.quiz-pas-cta { font-size: 15.5px; font-weight: 600; color: var(--forest); }
.quiz-pas:hover .quiz-pas-cta { text-decoration: underline; }
.quiz-pas:hover h2 { color: var(--accent); }

/* --- karta aplikacji pod quizem ------------------------------------------ */
/* Odsłania się dopiero po wyniku. Przed nim nie ma czego zaczepić, a baner
   nad quizem podważałby zaufanie do samej diagnozy. */

.po-quizie {
  max-width: 760px; margin: -20px auto 44px;
  background: var(--sand); border-radius: 20px;
  padding: 26px 24px 28px;
}
@media (min-width: 760px) { .po-quizie { padding: 32px 36px 34px; } }
.po-quizie[hidden] { display: none; }

.pq-tag {
  display: inline-block; margin: 0 0 16px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: #7D8D83; background: rgba(255,255,255,.72);
  border-radius: var(--r-pill); padding: 5px 11px;
}

.pq-in { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 700px) { .pq-in { flex-direction: row; gap: 30px; align-items: flex-start; } }

.pq-fot { flex: none; width: 190px; align-self: center; }
@media (min-width: 700px) { .pq-fot { width: 220px; align-self: flex-start; } }
.pq-fot .ph { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; }

.pq-txt { min-width: 0; }
.po-quizie h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2;
  letter-spacing: -.02em; color: var(--forest); margin: 0 0 12px;
}
.po-quizie p { font-size: 16px; line-height: 1.62; color: var(--body); margin: 0 0 12px; }
.po-quizie .pq-lead { color: var(--ink); font-weight: 500; }
.po-quizie .pq-lead:empty { display: none; }
.po-quizie b { color: var(--forest); font-weight: 600; }

.pq-cta { margin: 18px 0 0 !important; }
.pq-cta a {
  font-weight: 600; color: var(--forest); text-decoration: none;
  border-bottom: 1.5px solid var(--mid); padding-bottom: 2px;
}
.pq-cta a::after { content: " →"; }
.pq-cta a:hover { border-bottom-color: var(--forest); }

/* ------------------------------------------------------------- zgody -- */
/* Baner pojawia się tylko na stronach z włączonym pomiarem, czyli gdy
   w build_nav.py ustawiono identyfikator GA4. */
.zgody {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.zgody-box {
  pointer-events: auto;
  width: min(560px, 100%);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(14, 36, 25, .18);
  padding: 22px 24px 20px;
}
.zgody-txt { font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; max-width: none; color: var(--body); }
.zgody-txt a { color: var(--forest); text-decoration: underline; }
/* display z reguł niżej wygrywa z atrybutem hidden, więc trzeba go przywrócić */
.zgody [hidden] { display: none !important; }
.zgody-opcje { display: grid; gap: 12px; margin: 0 0 18px; }
.zgody-opcja { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--body); cursor: pointer; }
.zgody-opcja input { margin-top: 3px; accent-color: var(--forest); flex: none; }
.zgody-opcja b { display: block; color: var(--forest); font-weight: 600; }
.zgody-akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.zgody-akcje .btn { flex: 1 1 auto; justify-content: center; }
.foot-zgody { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.foot-zgody:hover { color: var(--paper); }

@media (max-width: 560px) {
  .zgody { left: 10px; right: 10px; bottom: 10px; }
  .zgody-box { padding: 18px 18px 16px; }
  .zgody-akcje .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------ przełącznik rynku -- */
/* Pigułka z flagą i kodem rynku, jak w pasku landingu Slim AI. Kod stoi
   obok flagi, bo Windows nie rysuje flag i zostawia same litery. */
.lang-pigulka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--forest);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.lang-pigulka:hover { border-color: var(--forest); }
.langitem[data-open="true"] .lang-pigulka { border-color: var(--forest); background: var(--wash); }
.lang-flaga { font-size: 15px; line-height: 1; }
.lang-kod { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }

.lang-lista { min-width: 232px; padding: 8px; }
.lang-opcja {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--body);
  font-size: 14.5px;
}
.lang-opcja:hover { background: var(--wash); color: var(--forest); }
.lang-nazwa { flex: 1 1 auto; }
.lang-opcja .lang-kod { color: var(--muted); }

.mm-lang a { display: flex; align-items: center; gap: 10px; }
.mm-lang .lang-kod { margin-left: auto; color: var(--muted); }
.mm-head-plain { color: var(--muted); }

/* Kierunek pisma z rynku. Marginesy i dopełnienia w układzie mają wartości
   logiczne, więc hebrajski i arabski odbijają się bez osobnego arkusza. */
[dir="rtl"] .lang-kod { letter-spacing: 0; }