/* =====================================================================
   ESKOMAT — BLOG KIT  v2.2
   Scoped CSS pro články na Shoptetu. Vše je pod .esk-blog.
   Barvy z brand palety (eskomat-popisek.css).

   Kam nahrát: Vzhled a obsah → Editor → HTML kód → sekce ZÁHLAVÍ
   (zabalit do <style>…</style>), nebo linkovat jako soubor.

   v2.2: velikosti v PX s !important (šablona má zmenšený rem-základ),
         tagy rubrik i úrovní jako jednotné barevné pilulky.
   ===================================================================== */

/* ---- Brand barvy ---- */
.esk-blog {
  --esk-ink:       #1D1D1D;
  --esk-teal:      #17C39D;
  --esk-teal-dark: #00665C;
  --esk-yellow:    #FFD600;
  --esk-gold:      #E8C020;
  --esk-purple:    #C865CA;
  --esk-krem:      #E6D9B3;
  --esk-beige:     #DCD0C1;
  --esk-mint:      #D9E7E4;
  --esk-pink:      #FBE3ED;
  --esk-berry:     #B23A6B;
  --esk-bg-soft:   #F6F4EF;
  --esk-neutral:   #ECEDE9;
  --esk-cara:      #ECECEC;
  --esk-sedy:      #777777;

  --esk-font: 'GT Pressura', GTPressura, -apple-system, BlinkMacSystemFont, sans-serif;

  max-width: 760px;
  margin: 0 auto;
  font-family: var(--esk-font);
  color: var(--esk-ink);
  line-height: 1.7;
}

/* ---- Typografie — px + !important, ať to šablona nepřebije ---- */
.esk-blog p,
.esk-blog li {
  font-size: clamp(18px, 1.45vw, 20px) !important;
  line-height: 1.75 !important;
}
.esk-blog p { margin: 0 0 1.1em; }
.esk-blog ul, .esk-blog ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.esk-blog li { margin-bottom: 0.5em; }
.esk-blog a { color: var(--esk-teal-dark); text-decoration: underline; }
.esk-blog strong { font-weight: 700; }

.esk-blog h2 {
  font-size: clamp(28px, 3.2vw, 36px) !important;
  line-height: 1.2 !important;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--esk-ink);
  margin: 2.2rem 0 0.8rem;
}
.esk-blog h3 {
  font-size: clamp(20px, 2.1vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--esk-teal-dark);
  margin: 1.8rem 0 0.6rem;
}

/* ---- 0. Úvodní (hero) fotka ----
   Stačí ve vizuálním editoru nahrát obrázek úplně NAHORU článku
   (nad tagy). První obrázek na začátku .esk-blog se sám zvětší na hero.
   Žádná třída, žádné kopírování URL. */
/* Všechny obrázky v článku: obdélník se zaoblenými rohy, responsivní.
   !important přebije zaoblování (ovál) ze šablony, ať je obrázek kdekoli. */
.esk-blog img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 24px !important;
}
/* Úvodní (hero) fotka nahoře = na celou šířku */
.esk-blog > p:first-child img,
.esk-blog > figure:first-child img,
.esk-blog > img:first-child,
.esk-blog-hero img { width: 100% !important; display: block; }
.esk-blog > p:first-child,
.esk-blog > figure:first-child,
.esk-blog-hero { margin: 0 0 28px; }

/* (volitelný) ruční hero blok s popiskem */
.esk-blog-hero img:not([src]),
.esk-blog-hero img[src=""] { display: none; }
.esk-blog-hero figcaption {
  font-size: 15px !important; color: var(--esk-sedy);
  margin-top: 8px; text-align: center; font-style: italic;
}

/* ---- 1. Metadata lišta ---- */
.esk-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 16px !important;
  color: var(--esk-sedy);
  margin: 0 0 24px;
}
.esk-blog-meta span { font-size: 16px !important; }
.esk-blog-meta b { color: var(--esk-ink); }

/* ---- Tagy: rubrika + úroveň = jednotné barevné pilulky ---- */
.esk-rubrika, .esk-uroven {
  display: inline-block;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px !important;
  line-height: 1.4 !important;
  padding: 5px 13px;
  border-radius: 999px;
}

/* Rubriky (výplň = barva, text bílý/černý dle kontrastu) */
.esk-rubrika--navody    { background: var(--esk-teal-dark); color: #fff; }
.esk-rubrika--recenze   { background: var(--esk-teal);      color: #000; }
.esk-rubrika--tipy      { background: var(--esk-gold);      color: var(--esk-ink); }
.esk-rubrika--pribehy   { background: var(--esk-berry);     color: #fff; }
.esk-rubrika--udalosti  { background: var(--esk-purple);    color: #fff; }

/* Úrovně */
.esk-uroven--zacatecnik { background: var(--esk-mint); color: var(--esk-teal-dark); }
.esk-uroven--kavomil    { background: var(--esk-krem); color: var(--esk-ink); }
.esk-uroven--barista    { background: var(--esk-ink);  color: var(--esk-yellow); }

/* ---- Pojistka: když editor omylem vloží obrázek DO pilulky (rubrika/úroveň),
   zruš pilulkový styl (žádný ovál) a ukaž obrázek jako normální hero fotku. ---- */
.esk-rubrika:has(img),
.esk-uroven:has(img) {
  display: block !important;
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.esk-rubrika:has(img) img,
.esk-uroven:has(img) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  margin: 0 0 22px;
}

/* ---- 3. Hook (perex) ---- */
.esk-blog-hook {
  font-size: clamp(21px, 2.2vw, 25px) !important;
  line-height: 1.55 !important;
  color: var(--esk-ink);
  margin: 0 0 28px;
}

/* ---- 4. "Ve zkratce" box ---- */
.esk-blog-shrnuti {
  background: var(--esk-krem);
  border-radius: 20px;
  padding: 24px 28px;
  margin: 0 0 32px;
}
.esk-blog-shrnuti h3 {
  margin: 0 0 12px;
  color: var(--esk-ink) !important;
  font-size: 18px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.esk-blog-shrnuti ul { margin: 0; padding-left: 20px; }
.esk-blog-shrnuti li { margin-bottom: 8px; }

/* ---- 7. Callouty: Tip (mátová) & Pozor (růžová) ---- */
.esk-tip, .esk-pozor {
  border-radius: 16px;
  padding: 18px 22px;
  margin: 22px 0;
  border-left: 6px solid;
}
.esk-tip   { background: var(--esk-mint); border-color: var(--esk-teal-dark); }
.esk-pozor { background: var(--esk-pink); border-color: var(--esk-berry); }
.esk-tip strong   { color: var(--esk-teal-dark); }
.esk-pozor strong { color: var(--esk-berry); }
.esk-tip p, .esk-pozor p { margin: 0; }

/* ---- 8. Produktový blok ---- */
.esk-produkt {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--esk-cara);
  border-radius: 20px;
  padding: 20px 24px;
  margin: 28px 0;
}
.esk-produkt img {
  width: 100px !important; height: 100px !important; object-fit: cover; border-radius: 16px !important; flex: 0 0 auto;
}
/* Prázdný obrázek (bez src) se neukáže jako rozbitý rámeček */
.esk-produkt img:not([src]),
.esk-produkt img[src=""] { display: none; }
.esk-produkt .esk-produkt-text { flex: 1 1 220px; }
.esk-produkt h4 {
  margin: 0 0 6px; font-size: 20px !important; font-weight: 500;
  text-transform: uppercase; color: var(--esk-ink);
}
.esk-produkt .esk-produkt-pozn { font-size: 17px !important; color: var(--esk-sedy); margin: 0 0 8px; }

/* ---- 9. FAQ (nativní <details>) ---- */
.esk-faq details {
  border-bottom: 1px solid var(--esk-cara);
  padding: 4px 0;
}
.esk-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 19px !important;
  color: var(--esk-ink);
  padding: 14px 30px 14px 0;
  position: relative;
  list-style: none;
}
.esk-faq summary::-webkit-details-marker { display: none; }
.esk-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 11px;
  font-size: 26px;
  line-height: 1;
  color: var(--esk-teal);
}
.esk-faq details[open] summary::after { content: "\2212"; }
.esk-faq details > p { padding: 0 0 16px; margin: 0; color: #444; }

/* ---- 10. CTA tlačítko ---- */
.esk-cta { text-align: center; margin: 36px 0; }
.esk-cta a {
  display: inline-block;
  background: var(--esk-teal);
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 18px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 16px 36px;
  border-radius: 75px;
  transition: background 0.2s, color 0.2s;
}
.esk-cta a:hover { background: var(--esk-teal-dark); color: #fff !important; }

/* ---- 11. Autor ---- */
.esk-blog-autor {
  border-left: 6px solid var(--esk-teal);
  background: var(--esk-beige);
  padding: 18px 22px;
  margin: 32px 0;
  font-style: italic;
  color: var(--esk-ink);
  border-radius: 0 16px 16px 0;
}

/* ---- 12. Související ---- */
.esk-blog-souvisejici {
  border-top: 1px solid var(--esk-cara);
  margin-top: 36px;
  padding-top: 18px;
  font-size: 17px !important;
  color: var(--esk-sedy);
}
.esk-blog-souvisejici b { color: var(--esk-ink); text-transform: uppercase; }

/* ---- Tabulka (např. poměry kávy) ---- */
.esk-tabulka { overflow-x: auto; margin: 24px 0; }
.esk-blog table {
  border-collapse: collapse;
  width: 100%;
  font-size: 17px !important;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.esk-blog th, .esk-blog td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--esk-cara);
}
.esk-blog thead th {
  background: var(--esk-teal-dark);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.esk-blog tbody tr:nth-child(even) { background: var(--esk-bg-soft); }
.esk-blog tbody tr:last-child td { border-bottom: none; }

/* ---- Mobil ---- */
@media (max-width: 600px) {
  .esk-produkt img { width: 72px; height: 72px; }
  .esk-blog th, .esk-blog td { padding: 10px 12px; font-size: 15px !important; }
}