/* ═══════════════════════════════════════════════════════════════════════
   Mamutex blog — globální styly pro AI-generované články (content hub)
   Vložit do Shoptet administrace: Vzhled a obsah → Editor CSS.

   Všechny selektory jsou scopované pod .mmx-article (obal doplňuje
   shoptet-gateway při každé publikaci/aktualizaci obsahu) a .mmx-guides
   (blok „Praktické tipy a průvodci" ve spodních popiscích kategorií).
   Nic mimo blog/kategorie tedy neovlivní.

   Třídy generované systémem:
     .mmx-article        – obal celého článku (scope)
     .mmx-article-image  – úvodní obrázek článku
     .mmx-lead           – úvodní nadpis (demontovaná H1 z obsahu; H1
                           stránky renderuje šablona z titulku)
     .quick-answer       – GEO blok „Rychlá odpověď"
     .last-updated       – řádek „Aktualizováno: …"
     .expert-tip.pavel / .expert-tip.jana – tipy person
     .faq (dl/dt/dd)     – sekce „Často se ptáte"
     .mmx-table-wrap / .mmx-table – tabulky (scroll na mobilu)
     .mmx-related        – blok „Přečtěte si také"
     .mmx-guides         – blok průvodců ve spodním popisu kategorie
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --mmx-accent: #4e148c;        /* brand fialová (tlačítka/odkazy webu) */
  --mmx-accent-soft: #f3edfa;   /* světlé fialové pozadí boxů */
  --mmx-ink: #24242e;           /* barva nadpisů šablony */
  --mmx-muted: #666;
  --mmx-border: #e4e0ec;
}

/* ── Základní typografie článku ───────────────────────────────────────── */
.mmx-article {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  max-width: 760px;
  margin: 0 auto;
}
.mmx-article p { margin: 0 0 1.1em; }

/* Šablona má content H2 39px při 14px textu — tady srovnáno na čitelnou škálu */
.mmx-article h2 {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--mmx-ink);
  margin: 1.8em 0 0.6em;
}
.mmx-article h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--mmx-ink);
  margin: 1.5em 0 0.5em;
}

/* Úvodní nadpis (bývalá H1 v obsahu) — mírně větší než H2, hned pod
   titulkem stránky, proto bez velkého horního odsazení */
.mmx-article .mmx-lead {
  font-size: 28px;
  margin-top: 0.4em;
}

.mmx-article ul, .mmx-article ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.mmx-article li { margin-bottom: 0.4em; }

.mmx-article a { color: var(--mmx-accent); text-decoration: underline; }
.mmx-article a:hover { text-decoration: none; }

.mmx-article img { max-width: 100%; height: auto; border-radius: 10px; }
.mmx-article .mmx-article-image { margin: 0 0 1.4em; }

/* ── „Aktualizováno" ─────────────────────────────────────────────────── */
.mmx-article .last-updated {
  font-size: 13px;
  font-style: italic;
  color: var(--mmx-muted);
  margin-bottom: 1.2em;
}

/* ── GEO blok „Rychlá odpověď" ───────────────────────────────────────── */
.mmx-article .quick-answer {
  background: var(--mmx-accent-soft);
  border-left: 4px solid var(--mmx-accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 0 0 1.6em;
}
.mmx-article .quick-answer p { margin: 0; font-size: 17px; }
.mmx-article .quick-answer p + p { margin-top: 0.6em; }

/* ── Tipy person (Pavel / Jana) ──────────────────────────────────────── */
.mmx-article .expert-tip {
  border: 1px solid var(--mmx-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 1.4em 0;
  background: #faf9fc;
}
.mmx-article .expert-tip strong { display: block; margin-bottom: 0.4em; color: var(--mmx-ink); }
.mmx-article .expert-tip p { margin: 0; }
.mmx-article .expert-tip.pavel { border-left: 4px solid #1d6fb8; }
.mmx-article .expert-tip.jana  { border-left: 4px solid #c2589b; }

/* ── Citace expertů ──────────────────────────────────────────────────── */
.mmx-article blockquote {
  border-left: 4px solid var(--mmx-accent);
  background: #faf9fc;
  margin: 1.4em 0;
  padding: 12px 18px;
  font-style: italic;
  color: #444;
  border-radius: 0 10px 10px 0;
}
.mmx-article blockquote p { margin: 0; }

/* ── Tabulky (scroll na mobilu, čitelné buňky) ───────────────────────── */
.mmx-article .mmx-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4em 0;
}
.mmx-article .mmx-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px; /* pod touto šířkou se scrolluje, buňky se nemačkají */
  font-size: 15px;
}
.mmx-article .mmx-table th,
.mmx-article .mmx-table td {
  border: 1px solid var(--mmx-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.mmx-article .mmx-table th {
  background: var(--mmx-accent);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.mmx-article .mmx-table tr:nth-child(even) td { background: #f7f5fb; }

/* ── FAQ „Často se ptáte" ────────────────────────────────────────────── */
.mmx-article .faq dl { margin: 0; }
.mmx-article .faq dt {
  font-weight: 700;
  color: var(--mmx-ink);
  margin: 1em 0 0.3em;
  font-size: 17px;
}
.mmx-article .faq dd { margin: 0 0 0.8em; padding-left: 0; }

/* ── Blok „Přečtěte si také" ─────────────────────────────────────────── */
.mmx-article .mmx-related {
  border: 1px solid var(--mmx-border);
  border-radius: 10px;
  background: var(--mmx-accent-soft);
  padding: 18px 22px;
  margin: 2em 0 0.5em;
}
.mmx-article .mmx-related h2 { margin: 0 0 0.5em; font-size: 21px; }
.mmx-article .mmx-related ul { margin: 0; padding-left: 1.2em; }
.mmx-article .mmx-related li { margin-bottom: 0.35em; }

/* ── Blok průvodců ve spodním popisu KATEGORIE (mimo .mmx-article) ───── */
.mmx-guides {
  border: 1px solid var(--mmx-border);
  border-radius: 10px;
  background: var(--mmx-accent-soft);
  padding: 18px 22px;
  margin: 1.6em 0;
}
.mmx-guides h2 { font-size: 21px; margin: 0 0 0.5em; color: var(--mmx-ink); }
.mmx-guides p { margin: 0 0 0.6em; }
.mmx-guides ul { margin: 0; padding-left: 1.2em; }
.mmx-guides li { margin-bottom: 0.35em; }
.mmx-guides a { color: var(--mmx-accent); }

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mmx-article { font-size: 15px; }
  .mmx-article h2 { font-size: 22px; }
  .mmx-article .mmx-lead { font-size: 24px; }
  .mmx-article h3 { font-size: 18px; }
  .mmx-article .quick-answer { padding: 12px 14px; }
  .mmx-article .mmx-related, .mmx-guides { padding: 14px 16px; }
}