/*
  Geteilte Styles für die Shortcodes des Artikel-/Blog-Render-Kerns
  (ArticleShortcodeRendererBase): :::note, :::quote, :::product-card, :::offer,
  :::gallery, :::pros-cons + die „Empfehlungen"-Sektion/Gear-Strip.

  Eingebunden von den Blog-Sites (carecom, pchfischer), deren Markdown-Bodies über
  den BlogMarkdownRenderer laufen. Die Content-Sites (bestes-wetter, 3d-spielplatz)
  bringen für ihre Artikel eigene bw-*-Regeln in der site.css mit — dieses Asset
  ist additiv und lässt jene unangetastet (Konsolidierung später möglich).

  Bewusst über Design-Tokens (--accent/--border/--bg-muted/--radius/--shadow/--fg-muted)
  mit Fallbacks, damit es sich je Site ins Theme einfügt und auch ohne die Tokens
  vernünftig aussieht.
*/

.bw-note,
.bw-quote,
.bw-product-card,
.bw-offer,
.bw-gallery,
.bw-pros-cons {
    margin: 1.5rem 0;
}

/* :::note — dezenter Hinweis-/Info-Block (Aside) */
.bw-note {
    border-inline-start: 3px solid var(--accent, #1f6f8b);
    background: var(--bg-muted, #f4f6f8);
    border-radius: var(--radius, 4px);
    padding: 0.85rem 1.1rem;
}
.bw-note__title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--accent-dark, #134453);
}
.bw-note__body > :first-child { margin-top: 0; }
.bw-note__body > :last-child  { margin-bottom: 0; }

/* :::quote — Pull-Quote */
.bw-quote {
    margin: 1.75rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-inline-start: 3px solid var(--accent, #1f6f8b);
}
.bw-quote__text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.5;
    font-style: italic;
}
.bw-quote__mark { color: var(--accent, #1f6f8b); font-weight: 700; }
.bw-quote__author {
    margin-top: 0.4rem;
    color: var(--fg-muted, #7a8590);
    font-size: 0.9rem;
    font-style: normal;
}

/* :::product-card / :::offer — Empfehlungs-Karten */
.bw-product-card,
.bw-offer {
    border: 1px solid var(--border, #e2e6ea);
    border-radius: var(--radius-lg, 8px);
    padding: 1rem 1.2rem;
    background: #fff;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06));
}
.bw-product-card--expanded { border-color: var(--accent, #1f6f8b); }
.bw-product-card__title,
.bw-offer__title {
    font-weight: 600;
    color: var(--accent-dark, #134453);
}
.bw-product-card__body > :first-child,
.bw-offer__body > :first-child { margin-top: 0.35rem; }
.bw-product-card__body > :last-child,
.bw-offer__body > :last-child { margin-bottom: 0; }
.bw-offer__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.bw-offer__perk {
    font-size: 0.8rem;
    background: var(--accent-soft, #e3eef3);
    color: var(--accent-dark, #134453);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}
.bw-product-card__support-hint {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--fg-muted, #7a8590);
}

/* :::gallery — Inline-Bild-Grid */
.bw-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.bw-gallery__item { margin: 0; }
.bw-gallery__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.bw-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius, 4px);
}
.bw-gallery figcaption {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--fg-muted, #7a8590);
}

/* :::pros-cons — zwei Spalten */
.bw-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.bw-pros-cons ul { margin: 0; padding-inline-start: 1.2rem; }
.bw-pros-cons__pros li::marker { content: "✓ "; color: #2e7d32; }
.bw-pros-cons__cons li::marker { content: "– "; color: #b23b3b; }
@media (max-width: 560px) {
    .bw-pros-cons { grid-template-columns: 1fr; }
}

/* „Empfehlungen aus diesem Bericht"-Sektion + Gear-Strip (falls product-cards) */
.article__products { margin-top: 2rem; }
.article__products-heading { font-size: 1.2rem; }
.article__gear-strip {
    margin: 1.25rem 0;
    font-size: 0.9rem;
    color: var(--fg-muted, #7a8590);
}
.article__gear-strip__intro { font-weight: 600; }
.article__gear-strip__sep { color: var(--border, #e2e6ea); }