/*
 * Final standard Post frame.
 *
 * Width rails are owned by post-width-rails.css. This layer only creates one
 * visible but restrained frame around the complete blog article so the full
 * reading experience feels intentionally contained without turning individual
 * sections into cards.
 */

.single-post-layout {
  background: color-mix(in srgb, var(--isp-primary, #73c0ee) 4%, #fff);
}

/* One border around the complete Post: breadcrumb, hero, article body and
 * post-ending components all remain inside the same visual frame. */
.single-post-layout .single-article {
  width: min(calc(100% - 32px), 1240px);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 2px solid #c7deea;
  border-radius: 28px;
  background: var(--isp-article-color-surface, #fff);
  box-shadow: none;
}

@media (max-width: 700px) {
  .single-post-layout .single-article {
    width: min(calc(100% - 16px), 100%);
    padding: 1.25rem 1rem 1.75rem;
    border-width: 1px;
    border-radius: 20px;
  }

  /* The outer article frame already provides the mobile gutter. Avoid applying
   * a second nested gutter to the top-level article components. */
  .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 {
    width: 100%;
    max-width: 100%;
  }
}