/* =====================================================================
   Bambusář – články převzaté z WordPressu (Divi) → Shoptet
   Vše je scopované pod .bmb-wp, šablonu eshopu to neovlivní.
   Hodnoty odpovídají vykreslení na www.bambusar.cz (desktop, 09/2026).
   10/2026: + tmavá sekce, tabulka, kotvy. Obrázky a odkazy jen relativně.
   Použití: obsah článku vložit jako HTML (začíná <div class="bmb-wp">),
   tento blok přidat na konec custom.css a zvednout ?v=.
   ===================================================================== */

.bmb-wp {
  --bmb-green: #25c691;
  --bmb-text: #666;
  --bmb-heading: #333;
  --bmb-alt-bg: #eee;
  --bmb-quote: #2ea3f2;      /* barva citace z Divi; pro sjednocení s eshopem stačí dát var(--bmb-green) */
  --bmb-row-max: 1080px;
  --bmb-gap: 30px;

  color: var(--bmb-text);
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;          /* WP má 500, ale eshop řez Open Sans 500 nenačítá */
  line-height: 1.5;
}

/* ---------- Rozvržení ---------- */
.bmb-wp .bmb-sec { padding: 54px 20px; }
.bmb-wp .bmb-sec--alt {
  background: var(--bmb-alt-bg);
  box-shadow: 0 0 0 100vmax var(--bmb-alt-bg);
  clip-path: inset(0 -100vmax);
}

.bmb-wp .bmb-row {
  max-width: var(--bmb-row-max);
  margin: 0 auto;
  padding: 27px 0;
}

.bmb-wp .bmb-cols { display: flex; gap: 5.5%; }
.bmb-wp .bmb-col { flex: 1 1 0; min-width: 0; }

/* mezera mezi bloky; popisek hned pod obrázkem bez mezery */
.bmb-wp .bmb-row:not(.bmb-cols) > * + *,
.bmb-wp .bmb-col > * + * { margin-top: var(--bmb-gap); }
.bmb-wp .bmb-img + .bmb-text { margin-top: 0; }

/* ---------- Nadpis stránky (H1 vypisuje Shoptet mimo .bmb-wp) ---------- */
.pageArticleDetail:has(.bmb-wp) > header h1 { text-align: center; }
.pageArticleDetail:has(.bmb-wp) > header h1::after {
  content: "";
  display: block;
  width: 40%;
  max-width: 432px;
  height: 1px;
  margin: 19px auto 8px;
  background: #25c691;
}

/* ---------- Typografie (reset proti stylům Shoptetu) ---------- */
.bmb-wp h2,
.bmb-wp h3,
.bmb-wp h4 {
  margin: 0;
  padding: 0 0 10px;
  color: var(--bmb-heading);
  font-family: Roboto, sans-serif;
  font-weight: 500;
  line-height: 1;
}
.bmb-wp h2 { font-size: 26px; }
.bmb-wp h3 { font-size: 22px; }
.bmb-wp h4 { font-size: 18px; }

.bmb-wp p { margin: 0; padding-bottom: 1em; }
.bmb-wp p:last-child { padding-bottom: 0; }
.bmb-wp .bmb-small { font-size: 90%; line-height: 1.5; }

.bmb-wp ul,
.bmb-wp ol {
  margin: 0;
  padding: 0 0 18px 18px;
  line-height: 26px;
}
.bmb-wp ul { list-style: disc outside; }
.bmb-wp ol { list-style: decimal inside; padding-left: 0; }
.bmb-wp ul:last-child,
.bmb-wp ol:last-child { padding-bottom: 0; }
.bmb-wp li { margin: 0; padding: 0; }

.bmb-wp strong { font-weight: 700; }
.bmb-wp a { color: var(--bmb-green); text-decoration: none; }
.bmb-wp a:hover { text-decoration: underline; }

.bmb-wp blockquote {
  margin: 0 0 30px;
  padding: 0 0 0 20px;
  border-left: 5px solid var(--bmb-quote);
}
.bmb-wp blockquote:last-child { margin-bottom: 0; }

.bmb-wp .bmb-center { text-align: center; }
.bmb-wp .bmb-right { text-align: right; }

/* ---------- Obrázky a galerie ---------- */
.bmb-wp .bmb-img { margin: 5px 0 0; line-height: 0; }
.bmb-wp .bmb-img img { display: block; width: 100%; height: auto; }

/* Shoptet galerie (.plus-gallery-*) jen uvnitř převzatého článku.
   Markup jako z editoru Shoptetu: <a href="velká" title="popisek" data-gallery="lightbox[gallery-<slug>]">
   – data-gallery zapne nativní lightbox Shoptetu (initColorbox v main-3g.js).
   řádek 94 % šířky okna, 4 sloupce, mezera 3 %, bez šedého rámečku.
   !important jen u width/height – Shoptet je nastavuje skriptem do style="" */
.bmb-wp .plus-gallery-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3%;
  row-gap: calc(min(94vw, 2080px) * .03);   /* stejná mezera i mezi řádky jako na webu; % u row-gap by se počítalo z výšky */
  align-items: start;
  width: min(94vw, 2080px);  /* strop: položka max. ~473 px = šířka _small náhledu, bez zvětšování */
  margin: 40px 0 0 calc(50% - min(47vw, 1040px));
}
.bmb-wp .plus-gallery-item {
  width: auto !important;
  height: auto !important;
  max-width: none;
  margin: 0;
  border: 0;
  line-height: 0;
}
.bmb-wp .plus-gallery-item a { display: block; }
.bmb-wp .plus-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 284;   /* poměr náhledů z webu; fotky na výšku se oříznou */
  object-fit: cover;
  position: static;          /* Shoptet centruje img přes top:50% + translateY(-50%) – */
  transform: none;           /* bez pevné výšky položky by galerie vyjela nahoru přes text */
}

/* ---------- Tlačítko ---------- */
.bmb-wp .bmb-btn-wrap { text-align: center; padding: 0; }
.bmb-wp .bmb-btn {
  display: inline-block;
  padding: 6px 20px;
  border: 2px solid var(--bmb-green);
  border-radius: 3px;
  background: var(--bmb-green);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
}
.bmb-wp .bmb-btn:hover { text-decoration: none; filter: brightness(1.08); }

/* ---------- Tmavá sekce (Divi: gradient #22262e → černá) ----------
   Přes celou šířku pomocí border-image outset: stejně jako box-shadow
   u --alt nezpůsobí vodorovný scroll, ale na rozdíl od něj umí gradient. */
.bmb-wp .bmb-sec--dark {
  border-image: linear-gradient(180deg, #22262e 0%, rgba(0,0,0,.85) 100%) fill 0 / / 0 100vmax;
  color: #fff;
}
.bmb-wp .bmb-sec--dark h2,
.bmb-wp .bmb-sec--dark h3,
.bmb-wp .bmb-sec--dark h4 { color: #fff; }

/* ---------- Srovnávací tabulka (podle WP pluginu Table Maker) ---------- */
.bmb-wp .bmb-table-wrap { margin-top: 25px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bmb-wp .bmb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.4; }
.bmb-wp .bmb-table th,
.bmb-wp .bmb-table td { padding: 15px; border: 0; text-align: left; vertical-align: middle; }
.bmb-wp .bmb-table thead th { background: #707070; color: #fff; font-weight: 700; }
.bmb-wp .bmb-table thead td { background: transparent; }
.bmb-wp .bmb-table tbody th,
.bmb-wp .bmb-table tbody td {
  min-width: 120px;
  background: #fff;
  color: #111;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.bmb-wp .bmb-table tbody th { min-width: 140px; border-left: 1px solid #e8e8e8; background: #f8f8f8; font-weight: 700; }
.bmb-wp .bmb-table tbody tr:hover > * { background: #f8f8f8; }

/* ---------- Kotvy z obsahu: ať je nezakryje lepicí hlavička ---------- */
.bmb-wp [id] { scroll-margin-top: 100px; }

/* ---------- Tablet a mobil (Divi láme sloupce pod 981 px) ---------- */
@media (max-width: 980px) {
  .bmb-wp .bmb-sec { padding: 50px 0; }
  .bmb-wp .bmb-sec--alt { padding-left: 15px; padding-right: 15px; }
  .bmb-wp .bmb-row { padding: 30px 0; }
  .bmb-wp .bmb-cols { flex-direction: column; gap: var(--bmb-gap); }
  .bmb-wp .plus-gallery-wrap { width: auto; margin-left: 0; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}