/**
 * content-section.css — repeatable H2 + text + image pattern.
 * BEM: content-section__element--modifier
 * Images after an H2 must render in full, never cropped (object-fit: contain).
 */

.content-section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border-subtle);
}

.content-section:first-of-type {
  border-top: none;
}

.content-section__image {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-dark);
  margin-bottom: var(--space-paragraph);
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-section__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.content-section__body h3 {
  margin-top: var(--space-paragraph);
}

/* In-body contextual text links (internal interlinking). Scoped narrowly to
   body copy so header/footer/nav/breadcrumb/button/FAQ links (styled
   elsewhere) are untouched. Uses the site's own accent tokens so the links
   read as part of the product, not a generic blue. */
.content-section__body a,
.section > .container > p a {
  color: var(--color-heading-accent);
  text-decoration: underline;
  text-decoration-color: rgba(155, 232, 106, 0.45);
  text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.content-section__body a:hover,
.section > .container > p a:hover {
  color: var(--color-accent-light);
  text-decoration-color: currentColor;
}

/* Specificity note: reset.css's `ul[class] { list-style: none }` has the
   same specificity as a bare class selector (0,0,1,1 vs 0,0,1,0) and would
   otherwise win by source order. Matching it with a type+class selector
   here ties the specificity, so content-section.css (loaded after
   reset.css on every page) wins the cascade and bullets render. */
ul.content-section__list {
  margin: var(--space-paragraph) 0;
  padding-left: 20px;
  list-style: disc;
  color: var(--color-text-primary);
}

.content-section__list li {
  margin-bottom: 8px;
}

/* Standalone CTA buttons that follow body text directly (a direct child of
   the container, not wrapped in __body) need visual separation from the
   paragraph/table above — the body's own last-child paragraph has its
   bottom margin zeroed, so without this the button sits flush on the text. */
.content-section .container > a.btn {
  margin-top: var(--space-paragraph);
}

/* Mobile: image appears right after the H2, before the text (per spec). */
.content-section--with-image .content-section__image {
  order: 1;
}

.content-section--with-image .content-section__body {
  order: 2;
}

.content-section--with-image {
  display: flex;
  flex-direction: column;
}

/* Desktop (> 1440px per spec 4.5): image comes after the H2 as well,
   rendered as a contained block above the body copy, full width, not cropped. */
@media (min-width: 1024px) {
  .content-section__image {
    max-width: 100%;
  }
}