/* Shared photography and finishing details. Each theme supplies its own colors and crop. */
:where(:root) {
  --scene-water: url("../images/chemistry/water-treatment.webp");
  --scene-steel: url("../images/chemistry/process-steel.webp");
  --scene-lab: url("../images/chemistry/lab-glass.webp");
  --scene-copper: url("../images/chemistry/process-copper.webp");
  --scene-night: url("../images/chemistry/process-night.webp");
  --chemical-scene: var(--scene-water);
  --chemical-focus: 80%;
}

/* A category image supplied through the CMS takes precedence over the theme photograph. */
.section-banner {
  --section-photo: var(--banner-image, var(--chemical-scene));
  --section-tone: var(--wash);
  --section-tint: linear-gradient(100deg, var(--section-tone) 9%,
    color-mix(in srgb, var(--section-tone) 94%, transparent) 56%,
    color-mix(in srgb, var(--section-tone) 88%, transparent) 70%,
    color-mix(in srgb, var(--section-tone) 24%, transparent));
  border-color: var(--line);
  background-color: var(--section-tone);
  background-image: var(--section-tint), var(--section-photo);
  background-size: cover;
  background-position: center, var(--chemical-focus) center;
  color: var(--ink);
}

.section-banner-news { --section-photo: var(--banner-image, var(--scene-lab)); }
.section-banner-applications { --section-photo: var(--banner-image, var(--scene-water)); }

[data-theme="dark"] .section-banner {
  --section-tone: var(--paper);
  --section-tint: linear-gradient(100deg, var(--section-tone) 9%,
    color-mix(in srgb, var(--section-tone) 96%, transparent) 56%,
    color-mix(in srgb, var(--section-tone) 91%, transparent) 70%,
    color-mix(in srgb, var(--section-tone) 43%, transparent));
}

.section-banner:has(> .section-banner-image) { background-image: none; }

.section-banner:has(> .section-banner-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--section-tint);
  pointer-events: none;
}

.section-banner :is(h1, .product-banner-cas, .item-category),
.product-detail-page .product-banner .product-banner-title {
  color: var(--ink);
}

.section-banner :is(p, .article-meta) { color: var(--muted); }
.section-banner h1:last-child { margin-bottom: 0; }
.section-banner h1 { max-width: min(26ch, 68%); text-wrap: balance; }
.section-banner > p { max-width: min(66ch, 64%); }
.product-detail-page .product-banner .product-banner-title {
  max-width: min(35ch, 68%);
  text-wrap: balance;
}

/* Decorative layers on existing homepage panels preserve the managed carousel and imagery. */
:is(.cover-panel, .editorial-cover, .c01-intro, .edition-intro, .atlas-hero-copy) {
  background-image: linear-gradient(105deg, var(--intro-tone, var(--paper)) 16%,
    color-mix(in srgb, var(--intro-tone, var(--paper)) 95%, transparent) 60%,
    color-mix(in srgb, var(--intro-tone, var(--paper)) 77%, transparent)), var(--chemical-scene);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center, right center;
}

.cover-panel, .atlas-hero-copy { --intro-tone: var(--wash); }
.edition-cover .edition-intro { --intro-tone: var(--edition-paper); }

:is(.foundation, .c01-materials) {
  border-color: var(--line);
  background-image: linear-gradient(90deg, var(--wash) 35%,
    color-mix(in srgb, var(--wash) 88%, transparent)), var(--chemical-scene);
  background-repeat: no-repeat;
  background-size: auto, min(64%, 840px) auto;
  background-position: center, right center;
}

:is(.home-recommended-news, .atlas-brief, .c01-inquiry) {
  --panel-tone: var(--wash);
  background-image: linear-gradient(105deg, var(--panel-tone) 24%,
    color-mix(in srgb, var(--panel-tone) 92%, transparent)), var(--chemical-scene);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, right top;
}

.c01-inquiry { --panel-tone: var(--paper); }

.closing-section {
  --inquiry-tone: #103e43;
  background-image: linear-gradient(100deg, var(--inquiry-tone) 16%,
    color-mix(in srgb, var(--inquiry-tone) 94%, transparent) 58%,
    color-mix(in srgb, var(--inquiry-tone) 73%, transparent)), var(--chemical-scene);
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: cover;
}

.chem003 .closing-section { --inquiry-tone: #183857; }
.chem004 .closing-section { --inquiry-tone: #284936; }
.chem-edition .closing-section { --inquiry-tone: var(--closing-fill, var(--brand-dark)); }

/* Keep the typographic and interactive details consistent across page types. */
.section-heading > p { max-width: 62ch; }
:is(.content-card-body, .collection-product-copy) h3 { line-height: 1.25; }
.prose :is(p, li) a { text-decoration: underline; text-underline-offset: .18em; }
.site-footer { border-block-start: 1px solid var(--line); }

:is(.collection-product, .product-row, .c01-product, .journal-item, .resource-more):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .section-banner > :is(h1, p),
  .product-detail-page .product-banner .product-banner-title { max-width: 100%; }
  .section-banner,
  [data-theme="dark"] .section-banner {
    --section-tint: linear-gradient(100deg,
      color-mix(in srgb, var(--section-tone) 98%, transparent) 5%,
      color-mix(in srgb, var(--section-tone) 92%, transparent));
  }
  :is(.foundation, .c01-materials) {
    background-size: auto, auto 100%;
  }
}

@media (forced-colors: active) {
  .section-banner,
  .section-banner:has(> .section-banner-image)::after,
  :is(.cover-panel, .editorial-cover, .c01-intro, .edition-intro, .atlas-hero-copy),
  :is(.foundation, .c01-materials, .home-recommended-news, .atlas-brief, .c01-inquiry),
  .closing-section { background-image: none; }
  .section-banner > .section-banner-image { display: none; }
}