/* =========================================================
   Shared bfstore article foundation
   Load after main.css and before page-specific bfstore CSS.
   ========================================================= */

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) {
  --bfstore-article-section-gap: clamp(3.75rem, 7vw, 6.5rem);
  --bfstore-article-block-gap: clamp(1.15rem, 2vw, 1.55rem);
  --bfstore-article-subsection-gap: clamp(2.25rem, 4vw, 3.25rem);
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) > .article-toc-target {
  margin-top: var(--bfstore-article-section-gap);
  margin-bottom: 1.35rem;
  scroll-margin-top: 7rem;
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) > .article-toc-target:first-child {
  margin-top: 0.5rem;
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) > :is(
  p,
  ul,
  ol,
  aside,
  figure,
  .requirements-table-wrapper
) {
  margin-top: var(--bfstore-article-block-gap);
  margin-bottom: var(--bfstore-article-block-gap);
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) > p + p {
  margin-top: 1rem;
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) h3 {
  margin-top: var(--bfstore-article-subsection-gap);
  margin-bottom: 0.85rem;
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) li + li {
  margin-top: 0.7rem;
}

/* Shared component rhythm inside bfstore article pages. */
:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) .project-glance {
  margin-top: 1.8rem;
  margin-bottom: 2.5rem;
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) :is(
  .project-glance__header,
  .project-glance__footer
) {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) .project-glance__item {
  padding: clamp(1.05rem, 2.5vw, 1.45rem);
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) .standalone-image {
  margin-top: 2rem;
  margin-bottom: 2.75rem;
}

:where(
  .bfstore-article-page,
  .bfstore-overview,
  .bfstore-application,
  .bfstore-domain,
  .bfstore-business-context,
  .bfstore-business-story
) .article-explore-links {
  margin-bottom: 1rem;
}

@media (max-width: 48rem) {
  :where(
    .bfstore-article-page,
  .bfstore-overview,
    .bfstore-application,
    .bfstore-domain,
    .bfstore-business-context
  ) {
    --bfstore-article-section-gap: 3.5rem;
    --bfstore-article-subsection-gap: 2rem;
  }

  :where(
    .bfstore-article-page,
  .bfstore-overview,
    .bfstore-application,
    .bfstore-domain,
    .bfstore-business-context
  ) > .article-toc-target {
    scroll-margin-top: 6rem;
  }
}