/* ==========================================================================
   Wissensbank content blocks

   The shapes an article keeps needing — a summary, a note, a picture beside a
   paragraph, a product recommendation, questions, a comparison — as blocks an
   editor picks from the inserter. They are registered as block patterns in
   wp-theme/farmula-redesign/inc/patterns.php; this file is what makes them
   look like the rest of the design.

   Not a Figma frame. The design draws the article template, not the components
   inside a post body, so these follow the design's tokens and its one-square-
   corner card motif rather than a drawing.

   Loaded in three places, which is why every var() carries its value as a
   fallback and no rule leans on a token being defined:

     - the frontend of a redesigned page, after home.css
     - the frontend of a page the redesign has not taken over, alone
     - the block editor's canvas, through add_editor_style()

   Spacing between blocks is deliberately absent: on an article .article__text
   is a flex column with a 24px gap, and in the editor the block list spaces
   its children itself. A margin here would be added on top of both.
   ========================================================================== */

.wb-key,
.wb-note,
.wb-split,
.wb-product,
.wb-faq,
.wb-table {
  font-family: var(--font-body, "DM Sans", sans-serif);
  color: var(--dark-grey, #3b3a47);
}

/* Descendant selectors, not child ones: this WordPress renders a core/group as
   an outer div wrapping a .wp-block-group__inner-container, so a "> h3" under
   .wb-key matches nothing at all. The block markup a classic theme produces is
   one level deeper than the markup the editor saves. */

/* the design's heading face, at the size the cart boxes use for a card title */
.wb-key h3,
.wb-note h3,
.wb-split h3,
.wb-product h3 {
  margin: 0 0 16px;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: var(--blue, #29265d);
}

.wb-key p,
.wb-note p,
.wb-split p,
.wb-product p,
.wb-faq p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

/* --- Das Wichtigste in Kürze ---------------------------------------------
   The summary an article opens with. A lilac slab, since a reader scanning
   for it should find it without reading the paragraph above.
   ------------------------------------------------------------------------ */

.wb-key {
  padding: 32px;
  background: var(--light-blue, #efecf9);
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) var(--radius-card, 24px) 0;
}
.wb-key ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
  font-size: 18px;
  line-height: 26px;
}
.wb-key li + li { margin-top: 8px; }
/* the only green in the block: enough to tie it to the rest of the page */
.wb-key li::marker { color: var(--green, #00a687); }

/* --- Hinweis --------------------------------------------------------------
   A white card with an accent edge. Add wb-note--warn in the block's Advanced
   settings for the red edge, which is the one to use when getting it wrong
   costs an animal rather than a euro.
   ------------------------------------------------------------------------ */

.wb-note {
  padding: 24px 32px;
  background: #fff;
  border: 1px solid var(--light-blue, #efecf9);
  border-left: 8px solid var(--green, #00a687);
  border-radius: 0 var(--radius-card, 24px) var(--radius-card, 24px) 0;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(34, 36, 36, 0.04), 0 2px 2px rgba(34, 36, 36, 0.04));
}
.wb-note--warn { border-left-color: var(--red, #fb1b13); }
.wb-note h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 30px;
}

/* --- Bild + Text ----------------------------------------------------------
   Two core columns rather than a flex group: a group's saved markup has
   changed shape twice across WordPress releases, a column's has not.
   ------------------------------------------------------------------------ */

/* The row is declared here rather than left to core's block-library CSS: the
   shop's performance plugin strips stylesheets it thinks a page does not need,
   and a two-column block that quietly becomes one column is exactly the kind
   of regression nobody reports. */
.wb-split,
.wb-product {
  display: flex;
  align-items: center;
  gap: 40px;
}
/* basis 0 so the columns split the row evenly; a column that carries its own
   width — the product image at 240px — sets flex-basis inline and wins */
.wb-split > .wp-block-column,
.wb-product > .wp-block-column {
  flex: 1 1 0%;
  min-width: 0;
}
/* a column the editor gave a width to keeps it: without this the basis is a
   starting point and flex-grow eats the rest of the row anyway */
.wb-split > .wp-block-column[style*="flex-basis"],
.wb-product > .wp-block-column[style*="flex-basis"] {
  flex-grow: 0;
}
.wb-split figure,
.wb-product figure { margin: 0; }
.wb-split img,
.wb-product img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) var(--radius-card, 24px) 0;
}

/* --- Produkt-Empfehlung ---------------------------------------------------
   The one block that sells something. Same slab as the summary, so an article
   reads as two kinds of box rather than five.
   ------------------------------------------------------------------------ */

.wb-product {
  padding: 32px;
  background: var(--light-blue, #efecf9);
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) var(--radius-card, 24px) 0;
  gap: 32px;
}
.wb-product .wp-block-buttons { margin-top: 24px; }
.wb-product .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-btn, 4px);
  background: var(--green, #00a687);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-decoration: none;
}

/* --- Häufige Fragen -------------------------------------------------------
   One core/details block per question. The home page's FAQ animates its
   answers open with script.js; an article's does not, because the markup an
   editor produces has to keep working without a script that knows its shape.
   ------------------------------------------------------------------------ */

.wb-faq {
  border-bottom: 1px solid var(--divider, #e1def3);
}
.wb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--blue, #29265d);
}
.wb-faq summary::-webkit-details-marker { display: none; }
/* drawn rather than an asset: this stylesheet also runs inside the editor,
   where a relative asset path resolves against wp-admin */
.wb-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 30px;
  color: var(--green, #00a687);
}
.wb-faq[open] summary::after { content: "–"; }
.wb-faq p { padding-bottom: 20px; }

/* --- Vergleichstabelle ----------------------------------------------------
   Scrolls inside its own figure: three columns of prose do not fit 402px, and
   a table that widens the page breaks every other block on it.
   ------------------------------------------------------------------------ */

.wb-table {
  margin: 0;
  overflow-x: auto;
}
.wb-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  line-height: 26px;
}
.wb-table th,
.wb-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--divider, #e1def3);
}
.wb-table thead th {
  background: var(--light-blue, #efecf9);
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  color: var(--blue, #29265d);
}
/* No rule bolds the first column. It reads well on a comparison the design
   drew, and wrong on the tables the knowledge base actually has, where the
   first cell is as often a footnote as a row label. */

/* --- Vorgeschlagene Produkte ----------------------------------------------
   Where an article's [products] shortcode lands, once the theme has pointed
   WooCommerce's loop at the design's card (inc/article-products.php).

   The card is a fixed 360px block with absolutely positioned parts, so the
   grid states a column width rather than a column count: two fit the 960px
   article column, one fits 402px, and neither case needs its own rule.
   ------------------------------------------------------------------------ */

.wb-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, 360px);
  gap: 40px;
}
/* No description on these cards.

   The card gives a product's name its full height and lets the description be
   the part that gives way, which works while the name fits one line. It does
   not here: these are boli, and "Knoblauchbolus Udder Flash 4 Stück" wraps.
   21px of category, 80px of a two-line name and 52px of description come to
   more than the 158px between the image and the price row, so the description
   ends up cut across the middle of its second line.

   Dropping it beats clamping it to one line, which lands on 159px and clips by
   a hair anyway. The shop grid keeps its descriptions: there the card is the
   only thing describing the product, while here the article around it already
   did that. */
.wb-products .product-card__desc { display: none; }
/* the shortcode arrives wrapped in WooCommerce's own container, which brings
   a list's indent with it and has nothing else to say here */
.fm-products,
.wb-products + .woocommerce,
.article__text .woocommerce { margin: 0; padding: 0; }
.article__text .woocommerce::after { content: none; }

/* --- 402px ----------------------------------------------------------------
   Core stacks columns at 781px on its own. The design's break is 900, and
   between the two the mobile layout is a stretched 402 — so stack there too,
   or a split block keeps two columns while everything around it has one.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .wb-split,
  .wb-product {
    flex-wrap: wrap;
    gap: 24px;
  }
  .wb-split > .wp-block-column,
  .wb-product > .wp-block-column {
    flex-basis: 100% !important;
  }
  .wb-key,
  .wb-product { padding: 24px; }
  .wb-note { padding: 20px 24px; }
}