/* V03-F Materials page, Masterbatch box (materials_v03.mjs). Only what the cloned Elementor rules cannot give:
   the box's picture (the Masterbatch Division illustration already on the site, metadata-clean) and its "Masterbatch Division" link.
   Every selector is scoped to .psg-mat4, so no other element on the page is touched. */

/* picture: same panel, sizing and crop as the other three boxes (cover, centred). 1x/2x pairs sized to the panel
   (desktop 589 x 600 px, phone 342 x 350 px). The page's lazy-background rule still holds it back until the box nears the view. */
.psg-mat4 .psg-mat4-img {
  background-color: #0f0f0f;
  background-image: url("/r049/media/psg-masterbatch-illustration-b8f2b0d2-1024x585.png");
  background-image: image-set(url("/r049/media/psg-masterbatch-illustration-b8f2b0d2-1024x585.png") 1x, url("/r049/media/psg-masterbatch-illustration-b8f2b0d2.png") 2x);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 767px) {
  .psg-mat4 .psg-mat4-img {
    background-image: url("/r049/media/psg-masterbatch-illustration-b8f2b0d2-768x439.png");
    background-image: image-set(url("/r049/media/psg-masterbatch-illustration-b8f2b0d2-768x439.png") 1x, url("/r049/media/psg-masterbatch-illustration-b8f2b0d2-1024x585.png") 2x);
  }
}

/* link: a quiet text link in the site's bronze, in the bullets' type; a 44 px target */
.psg-mat4 .psg-mat4-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--e-global-color-primary, #9b8261);
  text-decoration: underline;
  text-decoration-color: rgba(155, 130, 97, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .3s, text-decoration-color .3s;
}
.psg-mat4 .psg-mat4-link:hover,
.psg-mat4 .psg-mat4-link:focus-visible {
  color: var(--e-global-color-e4bd027, #fffbf8);
  text-decoration-color: currentColor;
}
.psg-mat4 .psg-mat4-link:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #9b8261);
  outline-offset: 4px;
  border-radius: 2px;
}
.psg-mat4 .psg-mat4-arrow { white-space: pre; text-decoration: none; }
