/* The same mobile rhythm for advice directories and both article templates. */
@import url('/assets/css/service-detail-spacing-20261024.css');

/* The legacy article also shows dark-label actions on a dark mobile bar. */
@media (max-width: 900px) {
  body:not(.pages-editorial-20261016) .mobile-sticky-cta > a:not(:first-child) {
    background: #f6f4ed;
    color: #0b0e0c;
  }
}

@media (max-width: 760px) {
  body .content-page:is(.advice-page, .article-page) > .section {
    padding-block: 40px;
  }

  body .content-page:is(.advice-page, .article-page) > .page-hero,
  body .content-page.article-page > .article-intro {
    padding-bottom: 40px;
  }

  body .content-page.article-page .page-main.article-content {
    display: block;
  }

  body .content-page.article-page .article-content > :is(p, ul, ol),
  body .content-page.article-page .article-content > section > :is(p, ul, ol) {
    margin-block: 0 16px;
  }

  body .content-page.article-page .article-content > h2 {
    margin-block: 32px 12px;
  }

  body .content-page.article-page .article-content > h3,
  body .content-page.article-page .article-content > section > h3 {
    margin-block: 24px 12px;
  }

  body .content-page.article-page .article-content > section {
    margin-top: 40px;
  }

  body .content-page.article-page .article-content > section > h2:first-child,
  body .content-page.article-page .article-content > :first-child {
    margin-top: 0;
  }

  body .content-page.article-page .article-content > :last-child,
  body .content-page.article-page .article-content > section > :last-child {
    margin-bottom: 0;
  }

  body .content-page.article-page .article-intro-grid {
    gap: 24px;
  }

  body .content-page.article-page .article-intro h1 {
    margin-bottom: 16px;
  }

  body .content-page.article-page .article-intro .hero-actions {
    gap: 12px;
  }

  body .content-page.article-page :is(.article-answer, .article-checklist, .article-callout) {
    padding: 24px;
  }

  body .content-page.article-page .article-content :is(.article-checklist, .article-callout) {
    margin-block: 40px;
  }

  body .content-page.article-page .article-content :is(.article-checklist, .article-callout) > h2:first-child {
    margin-top: 0;
  }

  body .content-page.article-page .article-content .article-toc {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }

  body .content-page.article-page .article-observations {
    margin-block: 24px;
    gap: 16px;
  }

  body .content-page.article-page .article-observations > div {
    padding: 24px;
  }

  body .content-page.article-page .article-sources {
    margin-top: 40px;
    padding-top: 24px;
  }

  body .content-page.article-page .page-aside {
    margin-top: 40px;
    padding: 24px;
  }

  body .content-page.advice-page :is(.section-heading, .section-header) {
    display: block;
    margin-bottom: 24px;
  }

  body .content-page.advice-page :is(.section-heading, .section-header) h2 {
    margin-block: 0 12px;
  }

  body .content-page.advice-page :is(.section-heading, .section-header) > :last-child {
    margin-bottom: 0;
  }

  body .content-page.advice-page .article-grid {
    gap: 24px;
  }

  body .content-page.advice-page .article-card > div {
    padding: 24px;
  }

  body .content-page.advice-page .article-card h3 {
    margin-block: 12px;
  }

  body .content-page.advice-page .article-card p {
    margin-block: 0 16px;
  }

  body .content-page.advice-page .article-card .eyebrow {
    margin-bottom: 0;
  }

  body .content-page.advice-page .journey-finder {
    margin-block: 24px;
    padding: 24px;
  }

  body .content-page.article-page .article-content > :last-child {
    margin-bottom: 0;
  }
}