/* ================================================================
   Type systém článku — encyklopedie kávy.
   Staví na tokenech z header.css (--c-ink/-muted/-line/-bg/-field).
   Nadpisy i tělo = Archivo (sans) — zvoleno uživatelem. Vše monochrom.
   ================================================================ */
:root {
  /* Modulární škála (~1.25). Tělo = zvolená čtecí sazba (Inter 18/1,7). */
  --fs-body:  18px;
  --lh-body:  1.7;
  --measure:  40rem;        /* délka řádku prózy → ~66 znaků */

  --fs-h1:    clamp(2.1rem, 4.5vw, 3.3rem);
  --fs-h2:    clamp(1.5rem, 2.4vw, 1.9rem);
  --fs-h3:    1.28rem;
  --fs-small: 0.8125rem;    /* 13px — popisky, meta */
  --fs-label: 0.72rem;      /* ~11.5px — verzálkové štítky */

  --space:    clamp(1.5rem, 4vw, 2.5rem);
}

/* ── Rám článku ──────────────────────────────────────────────
   Čtecí sloupec = svět Inter (blog). Měkčí inkoust než rozhraní,
   theme-aware (nesmí rozbít tmavý režim). Shop zůstává Archivo. */
.article {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(14px, 3vw, 24px) 96px;
  font-family: 'Inter', system-ui, sans-serif;
  --read-ink: #333333;          /* měkká čtecí šeď (světlý režim) */
  --read-ink-strong: #232323;   /* nadpisy o stupeň tmavší */
}

/* Drobečky */
.article__crumbs {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 clamp(20px, 3vw, 32px);
}
.article__crumbs a { color: inherit; text-decoration: none; }
.article__crumbs a:hover { color: var(--c-ink); }
.article__crumbs span { margin: 0 .5em; opacity: .5; }

/* H1 — velký, skromná váha, stažené prostrkání, hezké zalomení */
.article__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-h1); font-weight: 650;
  line-height: 1.08; letter-spacing: -.02em; color: var(--read-ink-strong);
  margin: 0 0 clamp(16px, 2.5vw, 24px);
  text-wrap: balance;                     /* nadpis se zalomí vyváženě */
}

/* Perex — o stupeň větší, tlumený */
.article__lede {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.45;
  color: var(--c-muted); font-weight: 400;
  max-width: var(--measure); margin: 0 0 clamp(28px, 4vw, 40px);
  text-wrap: pretty;
}

/* ── Spec-list (metadata jako minimalissimo) ───────────────────
   Párové řádky s vlasovou linkou. Hodnoty = tabulkové číslice. */
.spec {
  max-width: var(--measure);
  margin: 0 0 clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--c-line);
}
.spec__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--c-line);
}
.spec__key {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.spec__val {
  font-size: var(--fs-small); color: var(--c-ink);
  font-variant-numeric: tabular-nums;     /* čísla zarovnají do sloupce */
}
@media (max-width: 460px) {
  .spec__row { grid-template-columns: 1fr; gap: 2px; }
}

/* Hero obrázek — širší než próza, měkce zaoblený se stínem („polštář“) */
.article__hero {
  margin: 0 0 clamp(28px, 4vw, 44px);
  aspect-ratio: 16 / 10; background: var(--c-field);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(30,25,18,.12);
  display: grid; place-items: center; color: var(--c-muted); font-size: var(--fs-small);
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Próza ─────────────────────────────────────────────────── */
.prose {
  max-width: var(--measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--read-ink);
}
.prose > * { max-width: 100%; }
/* Vsazené fotky — plná šířka prózy, zaoblené + jemný stín */
.prose img {
  width: 100%; height: auto; display: block;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-radius: 14px; box-shadow: 0 5px 18px rgba(30,25,18,.10);
}
.prose figure img { margin: 0; }
/* vizuální editor (TinyMCE) obaluje samostatný obrázek odstavcem → bez okraje navíc */
.prose p:has(> img:only-child) { margin: 0; }
.prose p {
  margin: 0 0 1.25em;
  text-wrap: pretty;                      /* žádné osamocené slovo na konci */
  -webkit-hyphens: none; hyphens: none;   /* editorial = ragged right, bez dělení */
}
.prose h2 {
  font-family: 'Inter', system-ui, sans-serif; color: var(--read-ink-strong);
  font-size: var(--fs-h2); font-weight: 650; line-height: 1.2; letter-spacing: -.01em;
  margin: clamp(2rem, 4vw, 2.8rem) 0 .6em; text-wrap: balance;
}
.prose h3 {
  font-family: 'Inter', system-ui, sans-serif; color: var(--read-ink-strong);
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.3;
  margin: 2rem 0 .5em; text-wrap: balance;
}
.prose a {
  color: var(--c-ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--c-muted);
}
.prose a:hover { text-decoration-color: var(--c-ink); }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.2em; }
.prose li { margin: 0 0 .4em; }

/* Citace — tichá, jen odsazená vlasovou linkou */
.prose blockquote {
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  padding-left: 1.2em; border-left: 2px solid var(--c-ink);
  font-style: italic; color: var(--c-ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Tabulka — vlasové linky, tabulkové číslice, žádné zebry */
.prose table {
  width: 100%; border-collapse: collapse; margin: clamp(1.5rem, 3vw, 2rem) 0;
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}
.prose th, .prose td {
  text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--c-line);
}
.prose th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted);
}

/* Vsazený obrázek + popisek */
.prose figure { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.prose figure .ph {
  aspect-ratio: 4 / 3; background: var(--c-field); border-radius: 14px;
  display: grid; place-items: center; color: var(--c-muted); font-size: var(--fs-small);
}
.prose figcaption {
  margin-top: .6em; font-size: var(--fs-small); color: var(--c-muted); text-wrap: pretty;
}

/* Zdroje */
.article__sources {
  max-width: var(--measure);
  margin: clamp(3rem, 6vw, 4rem) 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.article__sources h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 .8em;
}
.article__sources ol { margin: 0; padding-left: 1.2em; font-size: var(--fs-small); color: var(--c-muted); }
.article__sources li { margin: 0 0 .4em; }
.article__sources a { color: inherit; }

/* ================================================================
   „Success" prvky článku — obsah→prodej, autor, sdílení, newsletter,
   související. Monochrom; ZELENÁ jen na buy tlačítku.
   ================================================================ */

/* ── Inline buy CTA (káva z článku) ─────────────────────────── */
.buycta {
  display: flex; align-items: center; gap: 16px;
  margin: clamp(28px, 4vw, 40px) 0;
  padding: 14px 16px;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-bg);
}
.buycta__media { flex: 0 0 auto; width: 64px; height: 64px; background: var(--c-field); border-radius: 6px; }
.buycta__body { flex: 1 1 auto; min-width: 0; }
.buycta__kicker { margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.buycta__name { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.25; }
.buycta__price { margin: 3px 0 0; font-size: 14px; color: var(--c-muted); }
.buycta__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 24px; border-radius: 8px;
  background: var(--c-buy); color: #fff;         /* JEDINÁ zelená na webu */
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: filter .15s var(--ease);
}
.buycta__btn:hover { filter: brightness(1.08); }
@media (max-width: 460px) { .buycta { flex-wrap: wrap; } .buycta__btn { width: 100%; } }

/* ── Sdílení ────────────────────────────────────────────────── */
.share {
  max-width: var(--measure);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: clamp(36px, 6vw, 56px) 0 0;
  padding-top: 22px; border-top: 1px solid var(--c-line);
}
.share__label { margin-right: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--c-line); border-radius: 8px;
  background: none; color: var(--c-ink); cursor: pointer;
  font: inherit; font-size: 13px; text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.share__btn:hover { border-color: var(--c-ink); }
.share__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* ── Autorský blok ──────────────────────────────────────────── */
.author {
  max-width: var(--measure);
  display: flex; gap: 16px; align-items: flex-start;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-top: 24px; border-top: 1px solid var(--c-line);
}
.author__avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 999px;
  background: var(--c-field); color: var(--c-muted);
  display: grid; place-items: center; font-size: 15px; font-weight: 600; letter-spacing: .04em;
}
.author__name { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.author__bio { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--c-muted); }

/* ── Newsletter (páka č. 1 na růst) ─────────────────────────── */
.newsletter { margin: clamp(56px, 9vw, 100px) auto 0; max-width: 46rem; padding: 0 clamp(16px, 4vw, 24px); }
.newsletter__inner { padding: clamp(28px, 5vw, 44px); background: var(--c-search-bg); border-radius: 14px; text-align: center; }
.newsletter__title { margin: 0 0 8px; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.newsletter__sub { margin: 0 auto 22px; max-width: 44ch; color: var(--c-muted); font-size: 15px; line-height: 1.55; }
.newsletter__form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.newsletter__form input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px;
  font: inherit; font-size: 15px; color: var(--c-ink);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 8px; outline: none;
  transition: border-color .15s var(--ease);
}
.newsletter__form input:focus { border-color: var(--c-ink); }
.newsletter__form button {
  flex: 0 0 auto; height: 46px; padding: 0 22px;
  background: var(--c-ink); color: var(--c-on-ink); border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; transition: filter .15s var(--ease);
}
.newsletter__form button:hover { filter: brightness(1.12); }
.newsletter__done { margin: 0; font-size: 16px; color: var(--c-ink); }
@media (max-width: 460px) { .newsletter__form { flex-direction: column; } }

/* ── Související („Číst dál") ───────────────────────────────── */
.related { margin: clamp(56px, 9vw, 100px) auto 0; max-width: 1180px; padding: 0 clamp(16px, 4vw, 40px); }
.related__title { margin: 0 0 clamp(20px, 3vw, 32px); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; }

/* ── Byline + počítadlo ─────────────────────────────────────── */
.article__byline {
  max-width: var(--measure);
  margin: 0 0 clamp(28px, 4vw, 40px);
  font-size: var(--fs-small); color: var(--c-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.article__byline-sep { opacity: .5; }
.visit-counter {
  margin: clamp(28px, 4vw, 40px) 0 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  background: var(--c-field); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--c-ink);
}
.visit-counter svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--c-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Komentáře ──────────────────────────────────────────────── */
.comments { max-width: 46rem; margin: clamp(56px, 9vw, 100px) auto 0; padding: 0 clamp(16px, 4vw, 24px); }
.comments__inner { padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--c-line); }
.comments-title { margin: 0 0 clamp(20px, 3vw, 28px); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; }
.comments-sub { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
#comment-list { margin: 0 0 clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
#comment-list:empty::after { content: "Zatím bez komentářů. Buďte první."; color: var(--c-muted); font-size: 15px; }
#comment-list > * { padding: 14px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; line-height: 1.55; }
#comment-list > *:last-child { border-bottom: none; }
#comment-form { display: flex; flex-direction: column; gap: 10px; max-width: 34rem; }
.c-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--c-ink);
  padding: 12px 14px; background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: 8px; outline: none;
  transition: border-color .15s var(--ease);
}
.c-input:focus { border-color: var(--c-ink); }
textarea.c-input { resize: vertical; min-height: 100px; }
.c-btn {
  align-self: flex-start; padding: 11px 24px;
  background: var(--c-ink); color: var(--c-on-ink); border: none; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter .15s var(--ease);
}
.c-btn:hover { filter: brightness(1.12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Komentáře: měkké karty (útulnější, jako původní blog) ─────
   Každý komentář ve vlastní jemné kartě + vnořená karta pro odpověď. */
#comment-list .comment {
  padding: clamp(16px, 3vw, 22px);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(30, 25, 18, .04);
}
#comment-list > .comment:last-child { border-bottom: 1px solid var(--c-line); }  /* přebít původní „none" */
#comment-list .comment p { margin: 0; font-size: 15px; line-height: 1.6; }
#comment-list .comment strong { font-weight: 600; }

/* odpovědi — vnořené měkčí karty, odsazené */
.replies { margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
#comment-list .replies .comment {
  margin-left: clamp(12px, 4vw, 28px);
  padding: 14px 16px;
  background: var(--c-bg);            /* bílá jako komentář; rozliší odsazení + rámeček */
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: none;
}

/* „Odpovědět" = jemná pilulka (jako v původní verzi) */
.reply-button {
  margin-top: 12px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--c-muted); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.reply-button:hover { color: var(--c-ink); border-color: var(--c-ink); }

/* mazací „×" = jen admin (návštěvníkům skryté; odhalí body.is-admin) */
.delete-button { display: none; }
body.is-admin .delete-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 10px 0 0 8px; padding: 0;
  font-size: 15px; line-height: 1; color: var(--c-muted);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 6px; cursor: pointer;
}
body.is-admin .delete-button:hover { color: var(--c-ink); border-color: var(--c-ink); }

/* reply formulář uvnitř komentáře */
.replies form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.replies form button { align-self: flex-start; padding: 8px 18px; background: var(--c-ink); color: var(--c-on-ink); border: none; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }


/* ── Banner v článku (knihovna bannerů v adminu blogu) ─────────────
   Jeden vzor pro produkt / podcast / vlastní: obrázek vlevo, text,
   tlačítko se šipkou vpravo dole. Zelené tlačítko = nákup (produkt). */
.prose .bnr { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 20px; align-items: stretch;
  margin: 2.2rem 0; padding: 16px; border: 1px solid #e7e1d6; border-radius: 16px; background: #faf8f4;
  color: inherit; text-decoration: none; font-family: var(--font-site, 'Archivo', system-ui, sans-serif); }
.prose .bnr:hover { text-decoration: none; border-color: #c7bda9; }
.bnr__img { width: 132px; height: 132px; border-radius: 12px; overflow: hidden; background: #ece5d8; align-self: center; }
.prose .bnr__img img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
.bnr__img--ic { background: #1c1b19; display: grid; place-items: center; }
.bnr__img--ic svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.bnr__body { display: flex; flex-direction: column; min-height: 132px; min-width: 0; }
.bnr__k, .bnr__t, .bnr__p { display: block; }
.bnr__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6d6a63; margin: 0 0 4px; }
.bnr__t { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 6px; color: #1c1b19; }
.bnr__p { font-size: 15px; line-height: 1.45; color: #4a4741; margin: 0 0 12px; }
.bnr__cta { align-self: flex-end; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding: 0 16px 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; background: #1c1b19; color: #fff; white-space: nowrap; }
.bnr--produkt .bnr__cta { background: var(--c-buy, #2d6a4f); }
.bnr__cta::after { content: "→"; display: inline-block; transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.bnr:hover .bnr__cta::after { transform: translateX(3px); }
.prose .bnr__ad { font-size: 11px; color: #9a958b; margin: -1.6rem 0 2.2rem; text-align: right; font-family: var(--font-site, 'Archivo', system-ui, sans-serif); }
@media (max-width: 560px) {
  .prose .bnr { grid-template-columns: 88px minmax(0,1fr); gap: 14px; padding: 12px; }
  .bnr__img { width: 88px; height: 88px; }
  .bnr__body { min-height: 88px; }
  .bnr__t { font-size: 17px; }
  .bnr__p { display: none; }
  .bnr__cta { height: 36px; font-size: 13px; padding: 0 14px 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .bnr__cta::after { transition: none; } }
img.author__avatar { display: block; object-fit: cover; background: var(--c-field); }   /* fotka autora místo iniciál */