/* Resource-page alignment only. Shared navigation, product cards and other
   pages keep their existing styles. Load after buyer-evidence/content-reading. */
.resource-layout {
  --resource-reading-width: 52rem;
  --resource-visual-width: 56.25rem;
}

.resource-layout > .resource-section {
  padding-block: 4rem;
}

/* Use the site's 1280px shell once, not a narrow shell nested inside it. */
.resource-layout .buyer-evidence {
  padding-inline: 0;
}
.resource-layout .buyer-evidence > .be-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-padding, 1.5rem);
  min-width: 0;
}
.resource-layout .resource-reading {
  width: 100%;
  max-width: var(--resource-reading-width);
  min-width: 0;
  margin-inline: 0;
  padding-inline: 0;
}
.resource-layout .resource-intro {
  width: 100%;
  max-width: var(--resource-reading-width);
  margin-bottom: 3rem;
}
.resource-layout .be-inner > :is(h1, h2, .be-intro, .be-qa) {
  max-width: var(--resource-reading-width);
}
.resource-layout .be-inner > :is(.content-table-scroll, .be-table-wrap) {
  max-width: var(--resource-visual-width);
}

/* Keep diagrams and their captions together, left aligned and uncropped. */
.resource-layout .resource-figure-shell {
  padding-block: 3rem;
}
.resource-layout .be-figure {
  width: 100%;
  max-width: var(--resource-visual-width);
  margin-inline: 0;
}
.resource-layout .resource-figure-shell > .be-figure {
  margin-block: 0;
}
.resource-layout .be-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.resource-layout .be-figure figcaption {
  overflow-wrap: break-word;
}

/* Paragraph measures remain readable without narrowing the page boundary. */
.resource-layout .resource-prose {
  font-size: 1.0625rem;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.resource-layout .resource-prose p {
  margin-block: 0 1.15em;
  line-height: 1.8;
}
.resource-layout .resource-prose :is(ul, ol) {
  margin-block: 1rem 1.5rem;
  padding-inline-start: 1.5rem;
  list-style-position: outside;
}
.resource-layout .resource-prose ul { list-style-type: disc; }
.resource-layout .resource-prose ol { list-style-type: decimal; }
.resource-layout .resource-prose li {
  margin-block: .55rem;
  padding-inline-start: .2rem;
}
.resource-layout .resource-prose h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.15;
  text-wrap: pretty;
}
.resource-layout .resource-prose h2,
.resource-layout .resource-reading > h2 {
  font-size: clamp(1.5rem, 2.25vw, 1.95rem);
  line-height: 1.3;
  font-weight: 700;
  text-wrap: pretty;
}
.resource-layout .resource-prose > h2 {
  margin-block: 2.5rem 1rem;
}
.resource-layout .resource-prose h3 {
  margin-block: 1.75rem .7rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.resource-layout .resource-prose :is(div, section) > h2:first-child {
  margin-block: 0 .8rem;
}
.resource-layout .resource-prose > :last-child,
.resource-layout .resource-prose :is(div, section) > p:last-child {
  margin-bottom: 0;
}
.resource-layout .resource-cta > h2 {
  margin-block: 0 1rem;
}
.resource-layout .resource-cta > p {
  line-height: 1.8;
}
.resource-layout .resource-reading,
.resource-layout .be-inner {
  overflow-wrap: break-word;
}
.resource-layout .buyer-evidence h2 {
  line-height: 1.3;
  text-wrap: pretty;
}
.resource-layout .buyer-evidence .be-qa h3 {
  font-size: 1.2rem;
  line-height: 1.45;
}
.resource-layout .buyer-evidence .be-updated {
  margin-bottom: 0;
}
.resource-layout :is(.resource-section, .resource-prose h2, .resource-prose h3) {
  scroll-margin-top: 9rem;
}

/* The review note belongs to the preceding material guide, so avoid a double
   full-section gap after its last-updated line. Preserve small print sizing. */
.resource-layout--materials #stone-finish-and-batch-comparison {
  padding-bottom: 2rem;
}
.resource-layout--materials #material-evidence-sources {
  padding-top: 2.5rem;
}

/* Long material labels must wrap inside the card instead of disappearing
   under the enclosing section's overflow clipping on narrow screens. */
.resource-layout--materials .glass-card .flex:has(> .badge) {
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.resource-layout--materials .glass-card .flex:has(> .badge) > h3 {
  flex: 1 1 9rem;
  min-width: 0;
}
.resource-layout--materials .glass-card .flex > .badge {
  flex: 0 1 auto;
  max-width: 100%;
  margin-inline: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.resource-layout--materials .grid > .glass-card {
  min-width: 0;
}
.resource-layout--materials .glass-card > h3.flex {
  align-items: flex-start;
  overflow-wrap: anywhere;
}
.resource-layout--materials .glass-card > h3.flex > svg {
  flex: 0 0 1.25rem;
  margin-top: .15rem;
}

@media (max-width: 767px) {
  .resource-layout > .resource-section { padding-block: 3rem; }
  .resource-layout .resource-intro { margin-bottom: 2.5rem; }
  .resource-layout .resource-figure-shell { padding-block: 2rem; }
  .resource-layout .resource-prose { font-size: 1rem; }
  .resource-layout .resource-prose > h2 { margin-top: 2rem; }
  .resource-layout--materials #stone-finish-and-batch-comparison { padding-bottom: 1.5rem; }
  .resource-layout--materials #material-evidence-sources { padding-top: 2rem; }
  .resource-layout--materials .grid.md\:grid-cols-2:has(> .glass-card) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .resource-layout > .resource-section,
  .resource-layout .resource-figure-shell { padding-block: 1.2rem; }
  .resource-layout .buyer-evidence > .be-inner { padding-inline: 0; }
  .resource-layout .be-figure img { max-height: 200mm; }
}