/* Background: Imagery + Solids.
   Scoped to html[data-bg="2"]. Tokens only; the scrim is mixed from --ct-surface so it follows mode.
   The hero is tagged by ct-site.js: [data-ct-imagery="<page>"]. Let's Discuss is not tagged. */
html[data-bg="2"] [data-ct-imagery] { isolation: isolate; }
html[data-bg="2"] [data-ct-imagery]::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: var(--bgi-vw, 100%); transform: translateX(-50%);
  background:
    linear-gradient(90deg,
      var(--ct-surface) 0%,
      color-mix(in srgb, var(--ct-surface) 98%, transparent) 24%,
      color-mix(in srgb, var(--ct-surface) 91%, transparent) 43%,
      color-mix(in srgb, var(--ct-surface) 50%, transparent) 64%,
      transparent 85%),
    var(--bgi-image) center right / cover no-repeat,
    var(--ct-surface);
}
html[data-bg="2"] [data-ct-imagery="home"] h1 { max-width: 16ch !important; }

html[data-bg="2"] [data-ct-imagery="home"]           { --bgi-image: url('img/bg-imagery/home-study.webp'); }
html[data-bg="2"] [data-ct-imagery="capabilities"]   { --bgi-image: url('img/bg-imagery/capabilities-study.webp'); }
html[data-bg="2"] [data-ct-imagery="infrastructure"] { --bgi-image: url('img/bg-imagery/infrastructure-study.webp'); }
html[data-bg="2"] [data-ct-imagery="orchestration"]  { --bgi-image: url('img/bg-imagery/orchestration-study.webp'); }
html[data-bg="2"] [data-ct-imagery="compliance"]     { --bgi-image: url('img/bg-imagery/compliance-study.webp'); }
html[data-bg="2"] [data-ct-imagery="digital"]        { --bgi-image: url('img/bg-imagery/digital-study.webp'); }
html[data-bg="2"] [data-ct-imagery="about"]          { --bgi-image: url('img/bg-imagery/about-study.webp'); }
html[data-bg="2"] [data-ct-imagery="discuss"]        { --bgi-image: url('img/bg-imagery/discuss-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="discuss"] { --bgi-image: url('img/bg-imagery/discuss-light-study.webp'); }
html[data-bg="2"] [data-ct-imagery="partnership"]    { --bgi-image: url('img/bg-imagery/partnership-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="partnership"] { --bgi-image: url('img/bg-imagery/partnership-light-study.webp'); }
/* Let's Discuss: the image sits beside the intro only and fades out before the form fields. */
html[data-bg="2"] [data-ct-imagery="discuss"]::before { bottom: auto; height: 640px; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
html[data-bg="2"] [data-ct-imagery="partnership"]::before { bottom: auto; height: 640px; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="home"]           { --bgi-image: url('img/bg-imagery/home-light-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="capabilities"]   { --bgi-image: url('img/bg-imagery/capabilities-light-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="infrastructure"] { --bgi-image: url('img/bg-imagery/infrastructure-light-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="orchestration"]  { --bgi-image: url('img/bg-imagery/orchestration-light-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="compliance"]     { --bgi-image: url('img/bg-imagery/compliance-light-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="digital"]        { --bgi-image: url('img/bg-imagery/digital-light-study.webp'); }
html[data-bg="2"][data-mode="light"] [data-ct-imagery="about"]          { --bgi-image: url('img/bg-imagery/about-light-study.webp'); }

@media (max-width: 1100px) {
  html[data-bg="2"] [data-ct-imagery]::before {
    background:
      linear-gradient(90deg, var(--ct-surface) 0%, color-mix(in srgb, var(--ct-surface) 97%, transparent) 40%, color-mix(in srgb, var(--ct-surface) 88%, transparent) 60%, color-mix(in srgb, var(--ct-surface) 40%, transparent) 82%, transparent 100%),
      var(--bgi-image) center right / cover no-repeat,
      var(--ct-surface);
  }
}
@media (max-width: 900px) {
  html[data-bg="2"] [data-ct-imagery]::before {
    background:
      linear-gradient(90deg, var(--ct-surface) 0%, color-mix(in srgb, var(--ct-surface) 96%, transparent) 62%, color-mix(in srgb, var(--ct-surface) 45%, transparent) 100%),
      var(--bgi-image) 60% center / cover no-repeat,
      var(--ct-surface);
  }
}
/* Phone: image as a band above the copy, not behind it. */
@media (max-width: 720px) {
  html[data-bg="2"] [data-ct-imagery] { padding-top: clamp(180px, 53vw, 235px) !important; }
  html[data-bg="2"] [data-ct-imagery]::before {
    bottom: auto; height: clamp(180px, 53vw, 235px);
    background: var(--bgi-image) 72% 43% / cover no-repeat, var(--ct-surface);
  }
  html[data-bg="2"] [data-ct-imagery] > div { padding-top: 34px !important; }
  html[data-bg="2"] [data-ct-imagery] h1 { max-width: none !important; }
}