/* One site-aligned editorial edge, without turning paragraphs into full-width
   banners. Loaded after each legacy/localized article theme. */
.reading-article {
  --reading-column: 52rem;
  --reading-gap: 2.5rem;
  width: 100%;
  max-width: none !important;
  margin-inline: 0;
}

.reading-article > .reading-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.reading-article .reading-container > :not(.article-reading-grid):not(.reading-cover),
.reading-article.ir-article > :not(.ir-reading) {
  width: 100%;
  max-width: var(--reading-column);
  margin-inline: 0;
}

.reading-article .reading-header h1,
.reading-article .ir-article-head h1 {
  max-width: none;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Override the older inline stylesheet's 672px centered cover, not its asset. */
.reading-article .reading-cover {
  width: 100% !important;
  max-width: var(--reading-column) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 7;
}
.reading-article .reading-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Some older pages retain an empty cover shell, sometimes after a real figure. */
.reading-article .reading-cover:not(:has(img)) { display: none; }

main .reading-article .reading-body,
main .reading-article .ir-body,
main .reading-article .article-reading-grid--no-toc .reading-body {
  width: 100%;
  max-width: var(--reading-column);
  min-width: 0;
  margin-inline: 0;
}

.reading-article .article-reading-grid,
.reading-article .ir-reading {
  max-width: none;
  margin-inline: 0;
}

.reading-article .reading-body figure {
  max-width: 100%;
  margin-inline: 0;
}
.reading-article .reading-body > img,
.reading-article .reading-body p > img,
.reading-article .reading-body figure img {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The Italian template has no inner container. Match the site shell once. */
main .reading-article.ir-article {
  max-width: 1280px !important;
  padding-inline: var(--container-padding);
  margin-inline: auto;
}
.reading-article.ir-article .ir-photo img { width: 100%; height: auto; }

/* An existing extra guide already sits inside a site-width container. */
main .reading-supplement {
  width: 100%;
  max-width: 52rem;
  margin-inline: 0;
}

/* Case-study card padding is intentional; only the outer shell was offset. */
.case-page .case-container.container-main {
  width: 100%;
  max-width: 1280px;
  padding-inline: var(--container-padding);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .reading-article .reading-header h1 {
    font-size: clamp(2.75rem, 4vw, 3.5rem);
    line-height: 1.15;
  }
}

@media (min-width: 1024px) {
  .reading-article .article-reading-grid,
  .reading-article .ir-reading {
    display: grid;
    grid-template-columns: minmax(0, var(--reading-column)) minmax(14rem, 1fr);
    gap: var(--reading-gap);
    align-items: start;
  }
  .reading-article .article-reading-grid--no-toc { display: block; }
  .reading-article .article-reading-grid > .reading-body,
  .reading-article .ir-reading > .ir-body { grid-column: 1; grid-row: 1; }
  .reading-article .article-toc,
  .reading-article .ir-toc {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 18rem;
    justify-self: end;
  }
  .reading-article .ir-toc ol { columns: 1; }
}

@media (max-width: 1023px) {
  .reading-article .article-reading-grid,
  .reading-article .ir-reading { display: block; }
  .reading-article .article-toc,
  .reading-article .ir-toc {
    position: static;
    width: 100%;
    max-width: var(--reading-column);
    margin: 0 0 2rem;
    max-height: none;
  }
}

@media (max-width: 767px) {
  .reading-article .reading-cover { aspect-ratio: 4 / 3; }
  .reading-article .reading-header h1 { max-width: none; line-height: 1.18; }
}

@media print {
  .reading-article .article-reading-grid,
  .reading-article .ir-reading { display: block; }
  .reading-article { --reading-column: 100% !important; }
  .reading-article .article-toc,
  .reading-article .ir-toc { display: none; }
}