/* Article rhythm, loaded by applyChrome only on Blog, Info and News details.
   Keep page bands, narrative flow and component interiors separate. */
:root {
  --content-block-gap: 1.25rem;
  --content-heading-gap: 1rem;
  --content-section-gap: 3rem;
  --content-subsection-gap: 2rem;
  --content-band-gap: clamp(3rem, 5vw, 5rem);
  --content-item-gap: .5rem;
}

/* A hero image and the first sentence need a deliberate boundary. */
.article-visual + .container {
  padding-top: var(--content-band-gap);
}

:is(.article__body, .knowledge-article, .press-story) {
  display: flow-root;
}

/* Section tags in prose are not the full-width landing-page bands. Margins
   own the boundary; flow-root contains the first/last child's margins. */
:is(.article__body, .knowledge-article) > section {
  display: flow-root;
  padding-block: 0;
  margin-block: var(--content-section-gap);
}

/* These panels keep their existing interior padding and control spacing. */
.knowledge-guide .knowledge-article > :is(.guide-example, .workbook) {
  margin-block: var(--content-section-gap);
}

/* Older authored FAQ wrappers carry this margin inline. Only the wrapper
   participates in the article rhythm; collapsed answer interiors stay intact. */
.article__body > section:has(> .faq) {
  margin-top: var(--content-section-gap) !important;
}

:is(.article__body, .knowledge-article, .press-story) > :is(p, ul, ol),
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > :is(p, ul, ol) {
  margin-block: 0 var(--content-block-gap);
}

:is(.article__body, .knowledge-article, .press-story) > h2,
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > h2 {
  margin-block: var(--content-section-gap) var(--content-heading-gap);
}

:is(.article__body, .knowledge-article, .press-story) > h3,
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > h3 {
  margin-block: var(--content-subsection-gap) var(--content-heading-gap);
}

/* List indentation and item rhythm also apply to News, whose reset otherwise
   leaves lists with no indentation or gap before the following paragraph. */
:is(.article__body, .knowledge-article, .press-story) > :is(ul, ol),
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > :is(ul, ol):not(.guide-related-list) {
  margin-inline: 0;
  padding-inline-start: 1.4rem;
}

:is(.article__body, .knowledge-article, .press-story) > :is(ul, ol) > li,
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > :is(ul, ol):not(.guide-related-list) > li {
  margin-block: 0;
}

:is(.article__body, .knowledge-article, .press-story) > :is(ul, ol) > li + li,
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > :is(ul, ol):not(.guide-related-list) > li + li {
  margin-top: var(--content-item-gap);
}

:is(.article__body, .knowledge-article, .press-story) > blockquote,
:is(.article__body, .knowledge-article) > section > blockquote,
:is(.article__body, .knowledge-article) :is(.table-scroll, .reader-table-scroll),
.article__body > div:has(> table) {
  margin-block: var(--content-block-gap);
}

/* The gallery owns its outer gap; its figures and captions each own one
   internal gap, regardless of whether the gallery is inside the prose root. */
:is(.article__body, .knowledge-article) > .editorial-visuals,
main > article > .editorial-visuals {
  margin-block: var(--content-section-gap);
}

.editorial-visuals > figure {
  margin: 0;
}

.editorial-visuals figcaption {
  margin-top: .75rem;
  padding-block: 0;
}

.press-story > .press-product-image {
  margin-block: 0 var(--content-section-gap);
}

/* Trim only narrative boundaries. Do not reach into FAQs, TOCs, cards or
   worksheets: those components have their own spacing and hidden states. */
:is(.article__body, .knowledge-article, .press-story) > :first-child,
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > :first-child {
  margin-top: 0;
}

:is(.article__body, .knowledge-article, .press-story) > :last-child,
:is(.article__body, .knowledge-article) > section:not(:is(.workbook, .guide-example)) > :last-child {
  margin-bottom: 0;
}

/* Separate article-end bands from the padding inside CTA cards. */
.read-next,
main > section:has(> .container > .cta) {
  padding-block: var(--content-band-gap);
}

main > section > .container > .cta {
  padding-block: var(--content-band-gap);
}

main > article > .editorial-visuals:last-child {
  margin-bottom: 0;
}

main > article:last-child,
main > article:has(+ .read-next) {
  padding-bottom: var(--content-band-gap);
}

@media (max-width: 700px) {
  :root {
    --content-section-gap: 2rem;
    --content-subsection-gap: 1.5rem;
  }
}

@media print {
  :root {
    --content-section-gap: 1.5rem;
    --content-band-gap: 1.5rem;
  }
}