/*
 * Standard Post text alignment.
 *
 * Normal editorial copy keeps a comfortable reading measure. Boxed editorial
 * components use almost their full available width with one shared compact
 * inner gutter so Quick Actions, Safety notices, Structured Sections, At a
 * Glance and Conclusion all feel consistently filled rather than artificially
 * narrow inside their shells.
 */

:root {
  --isp-post-content-inset: 32px;
  --isp-post-box-inset: 24px;
  --isp-post-width-body: 820px;
  --isp-post-width-heading: 820px;
}

/* Keep the article canvas itself on the common component rail. */
.single-post-layout .entry-content {
  width: min(100%, var(--isp-post-width-wide, 960px));
  max-width: var(--isp-post-width-wide, 960px);
  margin-left: auto;
  margin-right: auto;
}

/*
 * Normal Gutenberg editorial content keeps the reading rail. This applies only
 * to free-flowing article text outside the larger editorial boxes.
 */
.single-post-layout .entry-content > p,
.single-post-layout .entry-content > ul,
.single-post-layout .entry-content > ol,
.single-post-layout .entry-content > h2,
.single-post-layout .entry-content > h3,
.single-post-layout .entry-content > h4,
.single-post-layout .entry-content > h5,
.single-post-layout .entry-content > h6,
.single-post-layout .entry-content > pre,
.single-post-layout .entry-content > table,
.single-post-layout .entry-content > .wp-block-list,
.single-post-layout .entry-content > .wp-block-table,
.single-post-layout .entry-content > .wp-block-code,
.single-post-layout .entry-content > .wp-block-details,
.single-post-layout .entry-content > .wp-block-buttons,
.single-post-layout .entry-content > .wp-block-embed {
  box-sizing: border-box;
  width: min(calc(100% - var(--isp-post-content-inset)), var(--isp-post-width-body));
  max-width: var(--isp-post-width-body);
  margin-left: var(--isp-post-content-inset);
  margin-right: auto;
}

.single-post-layout .entry-content > h2,
.single-post-layout .entry-content > h3,
.single-post-layout .entry-content > h4,
.single-post-layout .entry-content > h5,
.single-post-layout .entry-content > h6 {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/*
 * The intro stays restrained editorial copy, with the same rounded left-edge
 * treatment as the iSPH callout family.
 */
.single-post-layout .entry-content > .isp-post-intro,
.single-post-layout .entry-content > .wp-block-quote:first-child,
.single-post-layout .entry-content > blockquote:first-child {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--isp-post-width-heading));
  max-width: var(--isp-post-width-heading);
  margin-left: 0;
  margin-right: auto;
  padding-left: calc(var(--isp-post-content-inset) - 4px);
  border: 0;
  border-left: 4px solid color-mix(in srgb, var(--isp-secondary, #ed73a4) 72%, transparent);
  border-radius: var(--isp-article-radius-callout, 16px) 0 0 var(--isp-article-radius-callout, 16px);
  background: transparent;
}

.single-post-layout .entry-content > .isp-post-intro::before,
.single-post-layout .entry-content > .wp-block-quote:first-child::before,
.single-post-layout .entry-content > blockquote:first-child::before {
  content: none;
}

/*
 * Quick Actions, Safety notices and generic callouts use almost the full box
 * width. The small common inset is the only horizontal breathing room.
 */
.single-post-layout .entry-content .isp-quick-action,
.single-post-layout .entry-content .isp-safety,
.single-post-layout .entry-content .isp-callout {
  box-sizing: border-box;
}

.single-post-layout .entry-content .isp-quick-action,
.single-post-layout .entry-content .isp-safety {
  padding-left: calc(var(--isp-post-box-inset) - 4px);
  padding-right: var(--isp-post-box-inset);
  border-left-width: 4px;
}

.single-post-layout .entry-content .isp-callout {
  padding-left: calc(var(--isp-post-box-inset) - 1px);
  padding-right: var(--isp-post-box-inset);
}

.single-post-layout .entry-content .isp-quick-action > *,
.single-post-layout .entry-content .isp-safety > *,
.single-post-layout .entry-content .isp-callout > * {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Structured Sections use the same compact inset. Their headings, intro,
 * facts and content groups can use the full available component width.
 */
.single-post-layout .entry-content .isp-structured-section {
  box-sizing: border-box;
  padding-left: calc(var(--isp-post-box-inset) - 1px);
  padding-right: calc(var(--isp-post-box-inset) - 1px);
}

.single-post-layout .entry-content .isp-structured-section__header,
.single-post-layout .entry-content .isp-structured-section__eyebrow,
.single-post-layout .entry-content .isp-structured-section__heading,
.single-post-layout .entry-content .isp-structured-section__intro,
.single-post-layout .entry-content .isp-structured-section__facts,
.single-post-layout .entry-content .isp-structured-section__content,
.single-post-layout .entry-content .isp-structured-section__media,
.single-post-layout .entry-content .isp-structured-section__content > *,
.single-post-layout .entry-content .isp-section-group {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Checklist marks use the same circular marker language as numbered steps. */
.single-post-layout .isp-section-group__list--checklist li > span:first-child,
.single-post-layout .isp-activity__materials-list li::before {
  box-sizing: border-box;
}

.single-post-layout .isp-section-group__list--checklist li > span:first-child {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: var(--isp-article-border, 1px solid #eae9ea);
  border-radius: var(--isp-article-radius-pill, 999px);
  color: var(--isp-article-color-link, #2378aa);
  font-size: var(--isp-article-font-sm, .9rem);
  font-weight: 850;
  line-height: 1;
}

.single-post-layout .isp-activity__materials-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--isp-article-space-3, 1rem);
  align-items: start;
  padding-left: 0;
}

.single-post-layout .isp-activity__materials-list li::before {
  position: static;
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: var(--isp-article-border, 1px solid #eae9ea);
  border-radius: var(--isp-article-radius-pill, 999px);
  color: var(--isp-article-color-link, #2378aa);
  font-size: var(--isp-article-font-sm, .9rem);
  font-weight: 850;
  line-height: 1;
}

/* At a Glance uses the same compact internal gutter and full text width. */
.single-post-layout .isp-post-component--at-a-glance .isp-glance {
  box-sizing: border-box;
  padding-left: calc(var(--isp-post-box-inset) - 1px);
  padding-right: calc(var(--isp-post-box-inset) - 1px);
}

.single-post-layout .isp-glance__best-for,
.single-post-layout .isp-glance__summary {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Conclusion uses the same outer shell and the same compact inset. Its heading
 * and paragraphs are allowed to fill the card instead of stopping at 820px.
 */
.single-post-layout .isp-post-component--conclusion {
  box-sizing: border-box;
  width: min(100%, var(--isp-post-width-wide, 960px));
  max-width: var(--isp-post-width-wide, 960px);
  margin-left: auto;
  margin-right: auto;
}

.single-post-layout .isp-post-component--conclusion .isp-article-conclusion {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(var(--isp-post-box-inset) - 1px);
  padding-right: calc(var(--isp-post-box-inset) - 1px);
}

.single-post-layout .isp-post-component--conclusion .isp-article-conclusion h2,
.single-post-layout .isp-post-component--conclusion .isp-article-conclusion__text,
.single-post-layout .isp-post-component--conclusion .isp-article-conclusion__text > * {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Normal ordered and unordered lists keep their container on the reading axis. */
.single-post-layout .entry-content > ol,
.single-post-layout .entry-content > ul,
.single-post-layout .entry-content > .wp-block-list {
  box-sizing: border-box;
}

@media (max-width: 700px) {
  :root {
    --isp-post-content-inset: 20px;
    --isp-post-box-inset: 18px;
  }

  .single-post-layout .entry-content > p,
  .single-post-layout .entry-content > ul,
  .single-post-layout .entry-content > ol,
  .single-post-layout .entry-content > h2,
  .single-post-layout .entry-content > h3,
  .single-post-layout .entry-content > h4,
  .single-post-layout .entry-content > h5,
  .single-post-layout .entry-content > h6,
  .single-post-layout .entry-content > pre,
  .single-post-layout .entry-content > table,
  .single-post-layout .entry-content > .wp-block-list,
  .single-post-layout .entry-content > .wp-block-table,
  .single-post-layout .entry-content > .wp-block-code,
  .single-post-layout .entry-content > .wp-block-details,
  .single-post-layout .entry-content > .wp-block-buttons,
  .single-post-layout .entry-content > .wp-block-embed {
    width: calc(100% - var(--isp-post-content-inset));
    max-width: calc(100% - var(--isp-post-content-inset));
  }

  .single-post-layout .entry-content > .isp-post-intro,
  .single-post-layout .entry-content > .wp-block-quote:first-child,
  .single-post-layout .entry-content > blockquote:first-child,
  .single-post-layout .entry-content .isp-quick-action,
  .single-post-layout .entry-content .isp-safety,
  .single-post-layout .entry-content .isp-callout,
  .single-post-layout .entry-content .isp-structured-section,
  .single-post-layout .isp-post-component--at-a-glance .isp-glance,
  .single-post-layout .isp-post-component--conclusion,
  .single-post-layout .isp-post-component--conclusion .isp-article-conclusion {
    max-width: 100%;
  }
}