/* Dynamic Zone additions plus narrowly scoped staging compatibility fixes.
   Core layout, cards, hero, sidebar and buttons remain owned by news.css and
   news-detai.css. */

.va-block {
  margin-block: 1.75rem;
}

.va-block-rule {
  height: 0;
  margin-block: 2rem;
  border: 0;
  border-block-start: 1px solid var(--detail-line, #d9d9d4);
}

.mos-cms-main .mos-cms-hero[data-hero-layout="compact"] {
  max-width: 900px;
  max-height: none;
  margin-inline: auto;
}
.mos-cms-main .mos-cms-hero[data-hero-layout="compact"] img {
  height: auto;
  max-height: 440px;
  object-fit: contain;
}
.mos-cms-main .mos-cms-body .mos-cms-hero[data-hero-layout="inline"] {
  max-height: none;
  margin: 0 0 2rem;
}
.mos-cms-main .mos-cms-body .mos-cms-hero[data-hero-layout="inline"] img {
  height: auto;
  max-height: none;
  object-fit: contain;
}

.va-block-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--focal, center);
}

.va-block-media-text {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.va-block-media-text--image-left {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.mos-cms-main .mos-cms-body .va-block-media-text > .va-block-image,
.va-block-media-text > .va-block-section {
  min-width: 0;
  max-width: none;
  margin: 0;
}

.mos-cms-main .mos-cms-body .va-block-media-text > .va-block-image { float: none; }
.va-block-media-text--image-left > .va-block-image { grid-column: 1; grid-row: 1; }
.va-block-media-text--image-left > .va-block-section { grid-column: 2; grid-row: 1; }
.va-block-media-text--image-right > .va-block-image { grid-column: 2; grid-row: 1; }
.va-block-media-text--image-right > .va-block-section { grid-column: 1; grid-row: 1; }

/* A wrap is a separate editorial choice from the paired, two-column grid.
   Its flow root keeps text from the next heading, table or CTA out of the float. */
.va-block-wrap { display: flow-root; }
.mos-cms-main .mos-cms-body .va-block-wrap > .va-block-image {
  width: min(42%, 380px);
  max-width: none;
  margin: 0 1.5rem 1rem 0;
}
.mos-cms-main .mos-cms-body .va-block-wrap--left > .va-block-image { float: left; }
.mos-cms-main .mos-cms-body .va-block-wrap--right > .va-block-image {
  float: right;
  margin: 0 0 1rem 1.5rem;
}
.va-block-wrap > .va-block-section { margin-block: 0 1rem; }
.va-block-wrap > .va-block-section:last-child { margin-bottom: 0; }

.va-block-image--float_left,
.va-block-image--float_right {
  max-width: 46%;
}

.va-block-image--float_left {
  float: left;
  margin-right: 1.5rem;
}

.va-block-image--float_right {
  float: right;
  margin-left: 1.5rem;
}

.va-block-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  align-items: start;
}

.va-block-gallery__grid .va-block-image {
  margin: 0;
}

.va-block-gallery__grid img {
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.va-block-table > figcaption {
  margin-bottom: 0.65rem;
  font-weight: 700;
}

.va-block-table__note,
.va-source-keys {
  color: var(--detail-muted, #6c6c68);
  font-size: 0.875rem;
}

.va-source-keys {
  display: block;
  margin-top: 0.5rem;
}

.va-block-callout {
  padding: 1.25rem 1.4rem;
  border-left: 0.25rem solid var(--detail-accent, #f0a500);
  background: var(--detail-bg-soft, #f5f5f2);
}

.va-block-callout > :first-child {
  margin-top: 0;
}

.va-block-callout--warning,
.va-block-callout--safety {
  border-left-color: #a24432;
}

.va-block-callout--procurement {
  border-left-color: var(--detail-accent-strong, #9c6800);
}

.va-block-subsection {
  padding-left: 1rem;
  border-left: 2px solid var(--detail-line, #d9d9d4);
}

.va-block-case-study > .va-block-subsection + .va-block-subsection,
.va-block-purchase-guidance > .va-block-subsection + .va-block-subsection {
  margin-top: 1.25rem;
}

.va-block-faq details > :last-child {
  margin-bottom: 0;
}

.va-block-cta-inline .mos-cms-button {
  margin-top: 0.75rem;
}

@media (max-width: 47.5rem) {
  .va-block-media-text {
    display: block;
  }

  .mos-cms-main .mos-cms-body .va-block-media-text > .va-block-image {
    margin-block: 1rem;
  }

  .va-block-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .va-block-image--float_left,
  .va-block-image--float_right {
    float: none;
    max-width: none;
    margin-inline: 0;
  }

  .mos-cms-main .mos-cms-body .va-block-wrap > .va-block-image {
    float: none;
    width: 100%;
    margin: 0 0 1rem;
  }
}

/* The formal detail stylesheet centers the breadcrumb. On narrow screens a
   long trail then overflows from both sides, making its beginning unreachable.
   Keep the formal DOM and base styling, but make the staging breadcrumb a
   left-origin, single-line horizontal scroller. */
@media (max-width: 31.25rem) {
  .mos-article-detail .mos-detail-breadcrumb {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
  }

  .mos-article-detail .mos-detail-breadcrumb::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .mos-article-detail .mos-detail-breadcrumb [aria-current="page"] {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Resin Article-only layout; the source site and its product/inquiry CSS stay intact. */
.mos-cms-main[data-site="09-resin"],.mos-cms-list[data-site="09-resin"]{color:#17362c;background:#fbfcf7;padding:64px 0 80px;overflow-wrap:anywhere}
[data-site="09-resin"] .mos-cms-container,.mos-resin-article-feed .mos-cms-container{width:min(1200px,calc(100% - 48px));margin-inline:auto}
[data-site="09-resin"] .mos-cms-title{font-size:clamp(30px,4vw,52px);line-height:1.14;letter-spacing:-.025em;max-width:1060px;margin:14px 0 22px}
[data-site="09-resin"] .mos-cms-eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#426b18}
[data-site="09-resin"] .mos-cms-lead{font-size:20px;line-height:1.65;max-width:900px;margin-bottom:24px}
[data-site="09-resin"] .mos-cms-meta{font-size:13px;line-height:1.6;color:#53645a;margin:20px 0}
[data-site="09-resin"] .mos-cms-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:48px;margin-top:32px;align-items:start}
[data-site="09-resin"] .mos-cms-layout>*{min-width:0}
[data-site="09-resin"] .mos-cms-body{font-size:17px;line-height:1.85}
[data-site="09-resin"] .mos-cms-body h2{font-size:30px;line-height:1.3;margin:40px 0 18px}
[data-site="09-resin"] .mos-cms-body h3{font-size:23px;line-height:1.4;margin:28px 0 14px}
[data-site="09-resin"] .mos-cms-body p{margin:0 0 20px}
[data-site="09-resin"] .mos-cms-body a,[data-site="09-resin"] .mos-cms-side a{color:#426b18;text-decoration:underline;text-underline-offset:3px}
[data-site="09-resin"] .mos-cms-hero{margin:28px 0;overflow:hidden;border-radius:16px}
[data-site="09-resin"] .mos-cms-hero img{display:block;width:100%;height:auto;object-fit:contain}
[data-site="09-resin"][data-category="company"] .mos-cms-hero img{width:auto;max-width:100%;max-height:560px;margin-inline:auto}
[data-site="09-resin"][data-category="company"] .va-block-image img{width:auto;max-width:100%;max-height:640px;object-fit:contain;margin-inline:auto}
[data-site="09-resin"] .mos-cms-side{display:grid;gap:24px;font-size:14px;line-height:1.7}
[data-site="09-resin"] .mos-side-card{padding:22px;border:1px solid #d5decc;border-radius:12px;background:#f3f6ec}
[data-site="09-resin"] .mos-side-card h2{font-size:20px;margin:0 0 14px}
[data-site="09-resin"] .mos-cms-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
[data-site="09-resin"] .mos-cms-body th,[data-site="09-resin"] .mos-cms-body td{border:1px solid #d5decc;padding:12px 14px;text-align:left;vertical-align:top}
[data-site="09-resin"] .mos-cms-body th{background:#edf3e2;font-weight:600}
[data-site="09-resin"] .va-table-wrap{max-width:100%;overflow-x:auto}
[data-site="09-resin"] .mos-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
[data-site="09-resin"] .mos-cms-grid,.mos-resin-article-feed .mos-cms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
[data-site="09-resin"] .mos-cms-card,.mos-resin-article-feed .mos-cms-card{border:1px solid #d5decc;border-radius:12px;overflow:hidden;background:#fff}
[data-site="09-resin"] .mos-cms-card img,.mos-resin-article-feed .mos-cms-card img{display:block;width:100%;height:220px;object-fit:cover}
[data-site="09-resin"] .mos-cms-card-content,.mos-resin-article-feed .mos-cms-card__body{padding:24px}
[data-site="09-resin"] .mos-cms-card h2,.mos-resin-article-feed .mos-cms-card h2{font-size:23px;line-height:1.35;letter-spacing:normal;margin:12px 0}
[data-site="09-resin"] .news-layout{width:min(1200px,calc(100% - 48px));margin:auto}
[data-site="09-resin"] .news-hero{padding:0 24px 36px;text-align:center}
[data-site="09-resin"] .news-category-panel{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0 32px}
[data-site="09-resin"] .news-pagination{display:flex;gap:16px;margin-top:32px}
@media(max-width:900px){[data-site="09-resin"] .mos-cms-layout{grid-template-columns:1fr;gap:32px}[data-site="09-resin"] .mos-cms-grid,.mos-resin-article-feed .mos-cms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mos-cms-main[data-site="09-resin"],.mos-cms-list[data-site="09-resin"]{padding-block:36px 52px}[data-site="09-resin"] .mos-cms-container,.mos-resin-article-feed .mos-cms-container,[data-site="09-resin"] .news-layout{width:calc(100% - 32px)}[data-site="09-resin"] .mos-cms-grid,.mos-resin-article-feed .mos-cms-grid{grid-template-columns:1fr}[data-site="09-resin"] .mos-cms-lead{font-size:17px}[data-site="09-resin"] .mos-cms-body{font-size:16px}[data-site="09-resin"] .mos-cms-body h2{font-size:26px}}

.mos-cms-main[data-site="09-resin"]{padding-top:128px}
[data-site="09-resin"] .mos-cms-body h2,[data-site="09-resin"] .mos-cms-body h3,[data-site="09-resin"] .mos-side-card h2{letter-spacing:normal}
@media(max-width:600px){.mos-cms-main[data-site="09-resin"]{padding-top:104px}}
@media(max-width:600px){[data-site="09-resin"] .mos-cms-body table{min-width:660px;overflow-wrap:normal;word-break:normal}[data-site="09-resin"] .mos-cms-body th,[data-site="09-resin"] .mos-cms-body td{overflow-wrap:normal;word-break:normal}[data-site="09-resin"] .mos-cms-body th:first-child,[data-site="09-resin"] .mos-cms-body td:first-child{white-space:nowrap}}
.mos-cms-list[data-site="09-resin"]{padding-top:56px}
[data-site="09-resin"] .mos-cms-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:40px}
[data-site="09-resin"] .mos-cms-pagination a,[data-site="09-resin"] .mos-cms-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 14px;border:1px solid #c9d6cc;border-radius:8px}
[data-site="09-resin"] .mos-cms-pagination [aria-current="page"]{background:#d7eb9a;color:#17362c}
@media(max-width:600px){.mos-cms-list[data-site="09-resin"]{padding-top:36px}}