/* ==================================================================
   PCA — Protein a Co. šablona ČLÁNKU pro Shoptet blog — STYLES v1.1
   ==================================================================
   Globální soubor: nahrává se na Shoptet SFTP (/user/documents/clanek/)
   a linkuje se JEDNOU v hlavičce/zápatí eshopu (nebo v článku):
     <link rel="stylesheet" href="https://www.proteinaco.cz/user/documents/clanek/pca-clanek.css?v=N">
   Při každé změně souboru zvedni ?v=N (CDN cache 1 rok).

   Prefix "pca-" (proteinaco-článek), vše scoped pod .pca-clanek.
   Produktový box a toast používají třídy "pcr-" z recept šablony
   (sdílený JS 1:1), tady jsou scoped pod .pca-clanek.

   POZOR (draze zaplacené, viz shoptet-recept):
   - ŽÁDNÉ rem! Šablona eshopu má root font-size 10px.
   - Eshop vnucuje každému <p> v článku 17px/#0D0D0D i přes !important
     → prvky s vlastní velikostí písma jsou DIV/figcaption/li, ne <p>.
   - Eshop cpe do UL v článku vlastní ::before checkmark — v běžném
     textu ho NECHÁVÁME (house styl), vypínáme jen v boxech s vlastní
     SVG ikonou.
   - Globální styl odkazů (modrá + podtržení) přebíjí tlačítka →
     tlačítka-odkazy mají !important.
   - .pcr-toast žije v document.body → barvy natvrdo, bez scope.
   ================================================================== */

.pca-clanek {
  --pca-primary: #09A57C;
  --pca-primary-hover: #078E6B;
  --pca-accent: #6D4FD8;
  --pca-lavender: #EFEDFB;
  --pca-text: #0D0D0D;
  --pca-muted: #666666;
  --pca-quiet: #8a8a8a;
  --pca-bg-soft: #F7F7F7;
  --pca-bg-softer: #ECECEC;
  --pca-border: #E0E0E0;
  --pca-border-card: #E3E0F0;
  --pca-radius-pill: 25px;
  --pca-radius-card: 12px;
  font-family: "GT Flexa", Poppins, sans-serif;
  color: var(--pca-text);
  line-height: 1.55;
  font-size: 17px;
}

.pca-clanek *, .pca-clanek *::before, .pca-clanek *::after { box-sizing: border-box; }

.pca-clanek img { max-width: 100%; height: auto; }
.pca-clanek h2 { font-size: 28px; font-weight: 600; margin: 36px 0 14px; clear: both; }
.pca-clanek h3 { font-size: 21px; font-weight: 700; margin: 26px 0 10px; }
.pca-clanek h2:first-child, .pca-clanek h3:first-child { margin-top: 0; }
.pca-clanek p { margin: 0 0 1em; }
.pca-clanek ul, .pca-clanek ol { margin: 0 0 1.2em; }
.pca-clanek a { color: var(--pca-text); }
.pca-clanek a:hover { color: var(--pca-primary); }

/* ---------- 1. Perex ---------- */
.pca-clanek .pca-perex {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* ---------- 2. Hero ---------- */
.pca-clanek .pca-hero { margin: 0 0 24px; }
.pca-clanek .pca-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--pca-radius-card);
  background: var(--pca-lavender);
}

/* ---------- 3. Boxy: Shrnutí / Tip / Pozor ---------- */
.pca-clanek .pca-box {
  background: var(--pca-lavender);
  border-radius: var(--pca-radius-card);
  padding: 18px 20px;
  margin: 22px 0;
}
.pca-clanek .pca-box--tip { background: var(--pca-bg-soft); }
.pca-clanek .pca-box--warn { background: #fff; border: 1.5px solid var(--pca-text); }

.pca-clanek .pca-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
}
.pca-clanek .pca-box-title svg { width: 20px; height: 20px; flex: 0 0 auto; }
.pca-clanek .pca-box > :last-child { margin-bottom: 0; }

.pca-clanek .pca-box-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pca-clanek .pca-box-list li::before { content: none !important; }
.pca-clanek .pca-box-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}
.pca-clanek .pca-check-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
}

/* ---------- 4. Obsah článku (TOC) ----------
   <details class="pca-toc"> — na desktopu JS otevře, na mobilu sbalené.
   Položky generuje JS z H2 uvnitř .pca-clanek. */
.pca-clanek .pca-toc {
  border: 1px solid var(--pca-border-card);
  border-radius: var(--pca-radius-card);
  padding: 4px 20px;
  margin: 22px 0 28px;
}
.pca-clanek .pca-toc summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pca-clanek .pca-toc summary::-webkit-details-marker { display: none; }
.pca-clanek .pca-toc summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pca-text);
  border-bottom: 2px solid var(--pca-text);
  transform: rotate(45deg);
  transition: transform 0.2s;
  margin-right: 4px;
}
.pca-clanek .pca-toc[open] summary::after { transform: rotate(-135deg); }
.pca-clanek .pca-toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 14px;
  counter-reset: pca-toc;
}
.pca-clanek .pca-toc-list li::before { content: none !important; }
.pca-clanek .pca-toc-list li {
  counter-increment: pca-toc;
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 16px;
}
.pca-clanek .pca-toc-list li > span::before {
  content: counter(pca-toc) ".";
  color: var(--pca-accent);
  font-weight: 700;
  min-width: 22px;
  display: inline-block;
}
.pca-clanek .pca-toc-list a { color: #0D0D0D !important; text-decoration: none !important; }
.pca-clanek .pca-toc-list a:hover { color: #09A57C !important; text-decoration: underline !important; }
.pca-clanek .pca-toc--empty { display: none; }

/* ---------- 5. Obrázky v textu ---------- */
.pca-clanek .pca-fig { margin: 24px 0; }
.pca-clanek .pca-fig img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;        /* portrét (meme 1080×1350) už neroztáhne stránku */
  margin: 0 auto;
  border-radius: var(--pca-radius-card);
}
.pca-clanek .pca-fig--wide img { width: 100%; max-height: none; }
.pca-clanek figcaption {
  font-size: 13px;
  color: var(--pca-quiet);
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}

.pca-clanek .pca-fig--right,
.pca-clanek .pca-fig--left { margin: 0 0 16px; }
/* Obtékaný obrázek (VÝCHOZÍ pro fotky v textu — ZÁSADNĚ --right, --left jen
   když si to uživatel výslovně vyžádá): pevný poměr 4:5 + cover, aby portrét
   1080×1920 nevytvořil dlouhý prázdný sloupec vedle krátkých odstavců.
   Centrovaný .pca-fig bez modifikátoru nech jen pro infografiky/širokoúhlé. */
.pca-clanek .pca-fig--right img,
.pca-clanek .pca-fig--left img { width: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; }

/* Seznamy vedle obtékané fotky: vlastní formátovací kontext, jinak box <li>
   sahá pod float a checkmark eshopu (li::before, absolutně vlevo) zaleze do
   fotky. Bloky s pozadím/tabulky/CTA float radši vyčistí. */
.pca-clanek ul, .pca-clanek ol { display: flow-root; }
.pca-clanek .pca-box, .pca-clanek .pca-table-wrap, .pca-clanek .pca-cta,
.pca-clanek .pca-fig-pair, .pca-clanek .pcr-products, .pca-clanek .pca-faq { clear: both; }

.pca-clanek .pca-fig-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 24px 0;
}
.pca-clanek .pca-fig-pair figure { margin: 0; }
.pca-clanek .pca-fig-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: none;
  border-radius: var(--pca-radius-card);
}

/* ---------- 6. Tabulka ---------- */
.pca-clanek .pca-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 22px 0;
}
.pca-clanek .pca-table-wrap table {
  display: table !important; /* eshop dává <table> v článku display:block → buňky se nenatáhnou */
  width: 100% !important;    /* přebije inline width="500px" ze starých článků */
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
}
.pca-clanek .pca-table-wrap th,
.pca-clanek .pca-table-wrap thead td {
  background: var(--pca-lavender);
  text-align: left;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid var(--pca-text);
}
.pca-clanek .pca-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pca-bg-softer);
  vertical-align: top;
}
.pca-clanek .pca-table-wrap td p, .pca-clanek .pca-table-wrap th p { margin: 0; }
.pca-clanek .pca-table-wrap tbody tr:nth-child(even) td { background: var(--pca-bg-soft); }

/* ---------- 7. CTA pruh ---------- */
.pca-clanek .pca-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  background: var(--pca-lavender);
  border-radius: var(--pca-radius-card);
  padding: 20px 22px;
  margin: 26px 0;
}
.pca-clanek .pca-cta-text { font-weight: 600; font-size: 17px; flex: 1 1 280px; }
.pca-clanek .pca-cta-sub { display: block; font-weight: 400; font-size: 15px; color: var(--pca-muted); margin-top: 2px; }
.pca-clanek a.pca-btn {
  display: inline-block;
  background: var(--pca-primary);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: var(--pca-radius-pill);
  padding: 11px 25px;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}
.pca-clanek a.pca-btn:hover { background: var(--pca-primary-hover); color: #fff !important; }
.pca-clanek a.pca-btn--dark { background: var(--pca-text); }
.pca-clanek a.pca-btn--dark:hover { background: #333; }

/* ---------- 8. Produktový box (třídy pcr-* sdílené s receptem) ---------- */
.pca-clanek .pcr-products { margin: 30px 0; }
.pca-clanek .pcr-products h2 { font-size: 21px; margin: 0 0 6px; }
.pca-clanek .pcr-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pca-border);
}
.pca-clanek .pcr-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--pca-bg-softer);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pca-clanek .pcr-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pca-clanek .pcr-product-info { flex: 1 1 auto; min-width: 0; }
.pca-clanek .pcr-product-name { font-weight: 700; font-size: 18px; }
.pca-clanek .pcr-product-name a { color: #0D0D0D !important; text-decoration: none !important; }
.pca-clanek .pcr-product-name a:hover { text-decoration: underline !important; }
.pca-clanek .pcr-product-desc { font-size: 15px; color: var(--pca-muted); }
.pca-clanek .pcr-product-price { flex: 0 0 auto; font-weight: 600; white-space: nowrap; font-size: 18px; }
.pca-clanek .pcr-product-btn {
  flex: 0 0 auto;
  border: none;
  background: var(--pca-primary);
  color: #fff;
  border-radius: var(--pca-radius-pill);
  padding: 11px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pca-clanek .pcr-product-btn:hover { background: var(--pca-primary-hover); }
.pca-clanek .pcr-product-btn:disabled { opacity: 0.6; cursor: default; }
.pca-clanek .pcr-product-btn--added { background: var(--pca-text); color: #fff; }
.pca-clanek .pcr-product-btn--failed { background: #fff; color: #B3261E; border: 1px solid #B3261E; }
.pca-clanek .pcr-products-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--pca-text);
}
.pca-clanek .pcr-total { font-weight: 800; font-size: 17px; }
.pca-clanek .pcr-addall-btn {
  border: none;
  background: var(--pca-primary);
  color: #fff;
  border-radius: var(--pca-radius-pill);
  padding: 16px 28px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.pca-clanek .pcr-addall-btn:hover { background: var(--pca-primary-hover); }
.pca-clanek .pcr-addall-btn:disabled { opacity: 0.7; cursor: default; }

/* Toast — MIMO scope, žije v document.body, barvy natvrdo */
.pcr-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: #0D0D0D;
  color: #fff;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 2px 10px rgba(13, 13, 13, 0.25);
}
.pcr-toast--visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 9. FAQ ---------- */
.pca-clanek .pca-faq { margin: 30px 0; }
.pca-clanek .pca-faq h2 { font-size: 21px; margin-bottom: 6px; }
.pca-clanek .pca-faq details { border-bottom: 1px solid var(--pca-border); }
.pca-clanek .pca-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 32px 14px 0;
  font-weight: 700;
  font-size: 17px;
  position: relative;
}
.pca-clanek .pca-faq summary::-webkit-details-marker { display: none; }
.pca-clanek .pca-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 12px;
  font-size: 22px;
  font-weight: 400;
  color: var(--pca-accent);
  line-height: 1;
}
.pca-clanek .pca-faq details[open] summary::after { content: "–"; }
.pca-clanek .pca-faq-a { padding: 0 0 16px; font-size: 16px; color: #333; }
.pca-clanek .pca-faq-a p:last-child { margin-bottom: 0; }

/* ---------- 10. Zdroje ---------- */
.pca-clanek .pca-sources { margin: 30px 0 0; }
.pca-clanek .pca-sources-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.pca-clanek .pca-sources ol {
  font-size: 13px;
  color: var(--pca-quiet);
  line-height: 1.6;
  padding-left: 20px;
  margin: 0;
}
.pca-clanek .pca-sources a { color: var(--pca-quiet); }

/* ---------- 11. SEO štítky (viditelné! nikdy display:none) ---------- */
.pca-clanek .pca-seo-tags {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--pca-quiet);
  line-height: 1.7;
}

/* ================= Breakpoint 640px ================= */
@media (min-width: 640px) {
  .pca-clanek .pca-hero img { aspect-ratio: 21 / 9; }
  .pca-clanek .pca-fig--right {
    float: right;
    width: 36%;
    margin: 4px 0 14px 24px;
  }
  .pca-clanek .pca-fig--left {
    float: left;
    width: 36%;
    margin: 4px 24px 14px 0;
  }
  .pca-clanek .pca-fig-pair { grid-template-columns: 1fr 1fr; }
  .pca-clanek .pcr-addall-btn { width: auto; }
  .pca-clanek .pca-toc-list { column-count: 2; column-gap: 24px; }
  .pca-clanek .pca-toc-list li { break-inside: avoid; }
}

/* ================= Breakpoint 960px ================= */
@media (min-width: 960px) {
  .pca-clanek .pca-perex { font-size: 20px; }
  .pca-clanek .pca-box { padding: 22px 26px; }
}