/* Blog primitives: shared measure, rhythm, headings, and body text. Every blog atom lists 'blog' after 'base'. */

/* Each block sizes and centers itself in whatever container holds it, and owns the space below it. */
[data-de26].de26-blog {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  margin-block: 0 var(--de26-gap-6x);
  font-family: var(--de26-font-body);
  color: var(--de26-fg);
}
[data-de26].de26-blog *,
[data-de26].de26-blog *::before,
[data-de26].de26-blog *::after {
  box-sizing: border-box;
}
[data-de26].de26-blog--narrow { max-width: 720px; }
[data-de26].de26-blog--wide { max-width: 1200px; }
/* Phones: a 16px side margin so text never touches the screen edge (blog containers carry no padding). */
@media (max-width: 767px) {
  [data-de26].de26-blog { width: auto; margin-inline: var(--de26-gap-2x); }
}

[data-de26] .de26-blog__heading {
  margin: 0 0 var(--de26-gap-2x);
  font-family: var(--de26-font-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--de26-space);
  overflow-wrap: anywhere;
}
[data-de26] .de26-blog__heading--h2 { font-size: var(--de26-heading-4); }
[data-de26] .de26-blog__heading--h3 { font-size: var(--de26-heading-5); }

/* Rich body: only paragraphs, line breaks, bold, italic, links, and lists reach here (de26_rich). */
[data-de26] .de26-blog__rich {
  font-size: var(--de26-body-1);
  line-height: 1.65;
  color: var(--de26-fg);
  overflow-wrap: anywhere;
}
[data-de26] .de26-blog__rich :is(p, ul, ol) {
  margin: 0 0 var(--de26-gap-3x);
  font-family: var(--de26-font-body);
  font-size: var(--de26-body-1);
  font-weight: 400;
  line-height: 1.65;
  color: var(--de26-fg);
}
[data-de26] .de26-blog__rich :is(ul, ol) { padding-inline-start: var(--de26-gap-3x); }
[data-de26] .de26-blog__rich :is(ul, ol) :is(ul, ol) { margin: var(--de26-gap-1x) 0 0; }
[data-de26] .de26-blog__rich li {
  margin: 0 0 var(--de26-gap-1x);
  font-size: var(--de26-body-1);
  line-height: 1.65;
}
[data-de26] .de26-blog__rich li:last-child { margin-bottom: 0; }
[data-de26] .de26-blog__rich > :last-child { margin-bottom: 0; }
[data-de26] .de26-blog__rich strong { font-weight: 700; }
[data-de26] .de26-blog__rich em { font-style: italic; }
[data-de26] .de26-blog__rich a,
[data-de26] .de26-blog__rich a:hover,
[data-de26] .de26-blog__rich a:focus-visible {
  color: var(--de26-hyperlink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
[data-de26] .de26-blog__rich a:hover { text-decoration-thickness: 2px; }

/* Editor only: shown where required media is missing, at the media's size. */
[data-de26] .de26-blog__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  padding: var(--de26-gap-2x);
  border: 2px dashed var(--de26-border);
  border-radius: var(--de26-radius-badge);
  font-size: var(--de26-caption);
  color: var(--de26-dim);
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  [data-de26] .de26-blog__heading--h2 { font-size: var(--de26-mobile-heading-2); }
  [data-de26] .de26-blog__heading--h3 { font-size: var(--de26-mobile-heading-3); }
}