/*
 * Final Post component geometry.
 *
 * The outer article frame is intentionally wider than the content boxes. This
 * layer gives major visual sections a little more horizontal reach while
 * keeping the 820px text measure unchanged for readability.
 */

:root {
  --isp-post-width-wide: 1040px;
  --isp-post-width-discovery: 1040px;
}

/* Keep the common article canvas and all major bordered sections on the wider
 * rail. Text widths remain controlled by post-text-alignment.css. */
.single-post-layout .entry-content,
.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__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-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 .isp-post-component--at-a-glance,
.single-post-layout .isp-post-component--conclusion,
.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: min(100%, var(--isp-post-width-wide));
  max-width: var(--isp-post-width-wide);
}

/* The hero and featured media follow the same wider visual boundary on large
 * screens, while the responsive rules below preserve comfortable gutters. */
@media (min-width: 1025px) {
  .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);
  }
}

@media (max-width: 1024px) {
  :root {
    --isp-post-width-wide: 900px;
    --isp-post-width-discovery: 900px;
  }
}

@media (max-width: 700px) {
  :root {
    --isp-post-width-wide: 100%;
    --isp-post-width-discovery: 100%;
  }
}