/* v2 2026-10-28 (Jeremy): campus building photo as a soft texture inside the existing dark
   header band of a campus case log. Opt-in per page: add class "campus-photo-top" to the
   .top header and set background-image + --campus-photo-ar (image width / height) on its ::before.
   The whole building shows: the layer is sized to the photo's own aspect ratio and fitted to
   the header height (never stretched or cropped on desktop), anchored right, away from the
   title, and its left edge fades into the band color. The band color itself is untouched.
   Display only — no motion, no layout change. */
#app .top.campus-photo-top { position: relative; isolation: isolate; }
#app .top.campus-photo-top::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 0; left: auto; height: 100%; width: auto;
  aspect-ratio: var(--campus-photo-ar, 1.5);
  max-width: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: luminosity;
  opacity: .34;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%), linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.45) 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%), linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.45) 100%);
          mask-composite: intersect;
}
html[data-theme="enterprise"] #app .top.campus-photo-top::before { opacity: .36; }
/* Classic (dark purple page, no solid band): feather every edge so it melts into the page */
html[data-theme="classic"] #app .top.campus-photo-top::before {
  top: -14px; bottom: -6px; height: auto; right: -12px; opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
          mask-composite: intersect;
}
/* Phone (v3): fit the WHOLE photo to the header width (never wider, never upscaled past
   the file's own pixels), anchored to the bottom of the band, with every edge feathered into
   the header color so the full building reads as a small, soft picture behind the copy */
@media (max-width: 768px) {
  #app .top.campus-photo-top::before,
  html[data-theme="classic"] #app .top.campus-photo-top::before {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    width: 100%; max-width: 100%; height: auto;
    aspect-ratio: var(--campus-photo-ar, 1.5);
    background-size: contain; background-position: center bottom;
    opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
            mask-composite: intersect;
  }
  html[data-theme="enterprise"] #app .top.campus-photo-top::before { opacity: .32; }
  html[data-theme="classic"] #app .top.campus-photo-top::before { opacity: .27; }
}