/* ==========================================================================
   bands.css — one photographic band per page.

   The same treatment #audiences carries on the homepage, generalised. Two
   things forced the shape of this file:

   1. Most of these sections are .fx .fx-seam, whose ::before is the accent
      hairline and whose ::after is a drifting blob. Both pseudos are spoken
      for, so the photograph is built as a background-image STACK on the
      section itself — edge fade on top, a flat veil that sets strength in
      the middle, the picture underneath. Same result, no pseudos consumed.

   2. .section--alt grounds on --ink-2 rather than --ink, so the veil has to
      match whichever ground it is sitting on or it prints a visible rectangle
      at the section edges. Hence --band-gnd.

   TO REMOVE: delete this file and the one <link> to it. Nothing else refers
   to it and no HTML was changed — every placement below identifies its page
   with :has() on a section id that page already owned.
   ========================================================================== */

:root:has(#platform) #outcomes,
:root:has(#principles) #team,
:root:has(#work) #measure {
  --band-gnd: var(--ink-rgb);
  --band-op: 0.4;                    /* solved per theme, as #audiences was */
  position: relative;
  background-color: rgb(var(--band-gnd));
  background-image:
    linear-gradient(180deg,
      rgb(var(--band-gnd)) 0%,
      rgba(var(--band-gnd), 0) 16%,
      rgba(var(--band-gnd), 0) 84%,
      rgb(var(--band-gnd)) 100%),
    linear-gradient(
      rgba(var(--band-gnd), calc(1 - var(--band-op))),
      rgba(var(--band-gnd), calc(1 - var(--band-op)))),
    var(--band-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* the alternate ground, or the veil edges show as a band of the wrong grey */
:root:has(#platform) #outcomes.section--alt,
:root:has(#principles) #team.section--alt,
:root:has(#work) #measure.section--alt {
  --band-gnd: var(--ink-3-rgb);
}

/* A daylight photograph on a near-white ground washes out rather than
   drowning, so the light build needs far more of it, not less. */
:root[data-theme="light"]:has(#platform) #outcomes,
:root[data-theme="light"]:has(#principles) #team,
:root[data-theme="light"]:has(#work) #measure {
  --band-op: 0.78;
}
:root[data-theme="dim"]:has(#platform) #outcomes,
:root[data-theme="dim"]:has(#principles) #team,
:root[data-theme="dim"]:has(#work) #measure {
  --band-op: 0.38;
}

/* Cards inside a band need their own ground or the picture reads straight
   through the copy. .card already has one; .work__item leans on its canvas
   and the rest vary, so this makes it uniform. */
:root:has(#platform) #outcomes :is(.card, .work__item, .tm__c, .objn, .dayl__stage, details),
:root:has(#principles) #team :is(.card, .work__item, .tm__c, .objn, .dayl__stage, details),
:root:has(#work) #measure :is(.card, .work__item, .tm__c, .objn, .dayl__stage, details) {
  background-color: rgba(var(--ink-rgb), 0.86);
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
}

/* ---- the picture for each page ---- */
:root:has(#platform) #outcomes { --band-img: url("img/site/how.jpg"); }   /* index.html */
:root:has(#principles) #team { --band-img: url("img/site/team.jpg"); }   /* about.html */
:root:has(#work) #measure { --band-img: url("img/site/stories.jpg"); }   /* success-stories.html */

@media (prefers-reduced-data: reduce) {
:root:has(#platform) #outcomes,
:root:has(#principles) #team,
:root:has(#work) #measure { background-image: none; }
}