/*
 * Standard Post width rails.
 *
 * The complete Post uses one 960px component rail inside the outer article
 * frame. Editorial copy uses an 820px reading measure and major headings may
 * use up to 900px so long headings do not wrap too aggressively. All visual
 * section shells and boxed components use the same 960px width so their edges
 * line up consistently throughout the article.
 */

:root {
  --isp-post-width-reading: 820px;
  --isp-post-width-heading: 900px;
  --isp-post-width-wide: 960px;
  --isp-post-width-discovery: 960px;
}

/* Shared article canvas. */
.single-post-layout .entry-content {
  width: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-inline: auto;
}

/* Top-level article elements use the same wide rail. */
.single-post-layout .isp-post-breadcrumbs,
.single-post-layout .single-entry-header,
.single-post-layout .entry-featured-image,
.single-post-layout .isp-post-component--at-a-glance,
.single-post-layout .isp-post-component--conclusion {
  width: min(calc(100% - 40px), var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-inline: auto;
}

/* Body copy and supporting reading elements use the shared 820px text rail. */
.single-post-layout .entry-content > p,
.single-post-layout .entry-content > ul,
.single-post-layout .entry-content > ol,
.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 > blockquote,
.single-post-layout .entry-content > pre,
.single-post-layout .entry-content > table,
.single-post-layout .entry-content > .wp-block-quote,
.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-pullquote,
.single-post-layout .entry-content > .wp-block-details,
.single-post-layout .entry-content > .wp-block-buttons,
.single-post-layout .entry-content > .wp-block-separator,
.single-post-layout .entry-content > .wp-block-embed,
.single-post-layout .entry-content > .wp-block-gallery,
.single-post-layout .entry-content > .wp-block-media-text:not(.alignwide):not(.alignfull),
.single-post-layout .entry-content > .wp-block-columns:not(.alignwide):not(.alignfull),
.single-post-layout .entry-content > .wp-block-image:not(.alignwide):not(.alignfull),
.single-post-layout .entry-content > .isp-post-intro {
  width: min(100%, var(--isp-post-width-reading));
  max-width: var(--isp-post-width-reading);
  margin-left: 0;
  margin-right: auto;
}

/* Major H2 headings may breathe wider than paragraphs while sharing the same
 * left edge. This reduces awkward three-line wraps without making body copy
 * too wide to read comfortably. */
.single-post-layout .entry-content > h2 {
  width: min(100%, var(--isp-post-width-heading));
  max-width: var(--isp-post-width-heading);
  margin-left: 0;
  margin-right: auto;
  overflow-wrap: break-word;
}

/* Explicit wide Gutenberg blocks align with the component rail. */
.single-post-layout .entry-content > .alignwide {
  width: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-left: 0;
  margin-right: auto;
}

/* Every visual callout shell uses exactly the same width. */
.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-faq,
.single-post-layout .entry-content .wp-block-rank-math-toc-block,
.single-post-layout .entry-content .wp-block-rank-math-toc,
.single-post-layout .entry-content .rank-math-block,
.single-post-layout .entry-content > .wp-block-group.is-style-isp-soft-pink,
.single-post-layout .entry-content > .wp-block-group.is-style-isp-soft-blue,
.single-post-layout .entry-content > .wp-block-group.is-style-isp-warm-note {
  width: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-left: 0;
  margin-right: auto;
}

/* Text inside large callout shells uses the same reading measure. */
.single-post-layout .entry-content .isp-quick-action > *,
.single-post-layout .entry-content .isp-safety > *,
.single-post-layout .entry-content .isp-callout > * {
  max-width: var(--isp-post-width-reading);
}

/* Structured Sections always occupy the common 960px shell. */
.single-post-layout .entry-content .isp-structured-section,
.single-post-layout .entry-content .isp-structured-section__media,
.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--layout-columns .isp-structured-section__content,
.single-post-layout .entry-content .isp-structured-section--layout-stacked .isp-structured-section__content {
  width: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-left: 0;
  margin-right: auto;
}

/* Structured Section supporting text uses the reading rail. */
.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__intro {
  width: min(100%, var(--isp-post-width-reading));
  max-width: var(--isp-post-width-reading);
  margin-left: 0;
  margin-right: auto;
}

/* Structured Section main headings follow the same wider H2 heading rail. */
.single-post-layout .entry-content .isp-structured-section__heading {
  width: min(100%, var(--isp-post-width-heading));
  max-width: var(--isp-post-width-heading);
  margin-left: 0;
  margin-right: auto;
  overflow-wrap: break-word;
}

/* Sparse fact rows keep the same outer box width as every other section. */
.single-post-layout .isp-structured-section__facts:has(.isp-structured-section__fact:only-child) {
  grid-template-columns: 1fr;
}

.single-post-layout .isp-structured-section__facts:has(.isp-structured-section__fact:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Legacy Activity sections follow the same full-width component shell. */
.single-post-layout .entry-content .isp-activity,
.single-post-layout .entry-content .isp-activity__media,
.single-post-layout .entry-content .isp-activity__meta,
.single-post-layout .entry-content .isp-activity__instructions,
.single-post-layout .entry-content .isp-activity--stacked .isp-activity__instructions {
  width: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-left: 0;
  margin-right: auto;
}

.single-post-layout .entry-content .isp-activity__header {
  width: min(100%, var(--isp-post-width-reading));
  max-width: var(--isp-post-width-reading);
  margin-left: 0;
  margin-right: auto;
}

/* At a Glance already owns the wide shell. */
.single-post-layout .isp-post-component--at-a-glance .isp-glance {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.single-post-layout .isp-glance__best-for,
.single-post-layout .isp-glance__summary {
  width: min(100%, var(--isp-post-width-reading));
  max-width: var(--isp-post-width-reading);
  margin-left: 0;
  margin-right: auto;
}

/* Conclusion card uses the 960px shell and the same 820px reading measure. */
.single-post-layout .isp-post-component--conclusion .isp-article-conclusion {
  width: 100%;
  max-width: var(--isp-post-width-wide);
  margin-left: 0;
  margin-right: auto;
}

.single-post-layout .isp-post-component--conclusion .isp-article-conclusion > * {
  max-width: var(--isp-post-width-reading);
}

/* Post-ending boxes align to the same 960px edges. */
.single-post-layout .isp-post-end .isp-resource-cta,
.single-post-layout .isp-post-end .isp-author-trust,
.single-post-layout .isp-post-end .isp-related-posts,
.single-post-layout .isp-post-end .single-post-navigation,
.single-post-layout .isp-post-end .comments-area,
.single-post-layout .post-tags,
.single-post-layout .isp-post-author {
  width: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .single-post-layout .isp-post-breadcrumbs,
  .single-post-layout .single-entry-header,
  .single-post-layout .entry-featured-image,
  .single-post-layout .isp-post-component--at-a-glance,
  .single-post-layout .isp-post-component--conclusion {
    width: min(calc(100% - 36px), 900px);
    max-width: 900px;
  }
}

@media (max-width: 700px) {
  .single-post-layout .isp-post-breadcrumbs,
  .single-post-layout .single-entry-header,
  .single-post-layout .entry-featured-image,
  .single-post-layout .isp-post-component--at-a-glance,
  .single-post-layout .isp-post-component--conclusion {
    width: 100%;
    max-width: 100%;
  }

  .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 > blockquote,
  .single-post-layout .entry-content > pre,
  .single-post-layout .entry-content > table,
  .single-post-layout .entry-content > .wp-block-quote,
  .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-pullquote,
  .single-post-layout .entry-content > .wp-block-details,
  .single-post-layout .entry-content > .wp-block-buttons,
  .single-post-layout .entry-content > .wp-block-separator,
  .single-post-layout .entry-content > .wp-block-embed,
  .single-post-layout .entry-content > .wp-block-gallery,
  .single-post-layout .entry-content > .wp-block-media-text:not(.alignwide):not(.alignfull),
  .single-post-layout .entry-content > .wp-block-columns:not(.alignwide):not(.alignfull),
  .single-post-layout .entry-content > .wp-block-image:not(.alignwide):not(.alignfull),
  .single-post-layout .entry-content > .isp-post-intro,
  .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-faq,
  .single-post-layout .entry-content .wp-block-rank-math-toc-block,
  .single-post-layout .entry-content .wp-block-rank-math-toc,
  .single-post-layout .entry-content .rank-math-block,
  .single-post-layout .entry-content .isp-structured-section,
  .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__media,
  .single-post-layout .entry-content .isp-structured-section__content,
  .single-post-layout .entry-content .isp-activity,
  .single-post-layout .entry-content .isp-activity__header,
  .single-post-layout .entry-content .isp-activity__meta,
  .single-post-layout .entry-content .isp-activity__media,
  .single-post-layout .entry-content .isp-activity__instructions,
  .single-post-layout .entry-content > .wp-block-group.is-style-isp-soft-pink,
  .single-post-layout .entry-content > .wp-block-group.is-style-isp-soft-blue,
  .single-post-layout .entry-content > .wp-block-group.is-style-isp-warm-note,
  .single-post-layout .isp-post-component--conclusion .isp-article-conclusion,
  .single-post-layout .isp-post-end .isp-resource-cta,
  .single-post-layout .isp-post-end .isp-author-trust,
  .single-post-layout .isp-post-end .isp-related-posts,
  .single-post-layout .isp-post-end .single-post-navigation,
  .single-post-layout .isp-post-end .comments-area,
  .single-post-layout .post-tags,
  .single-post-layout .isp-post-author {
    width: 100%;
    max-width: 100%;
  }

  .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 .isp-post-component--conclusion .isp-article-conclusion > * {
    max-width: 100%;
  }
}