/* Look settings for every page of the Marketing Hub (the overview and all detail pages).
   The Adjust look panel (tune.js) changes these live on this PC; paste its "Copy settings"
   output here to make the change permanent. Each page loads this file after its own styles. */
:root {
  --photo: url("assets/gtc-marketing-hub-background-image-pickelball.jpg");
  --photo-show: 25%;           /* how strongly the photo shows through (0% = hidden, 100% = full photo) */
  --photo-position: 100% 41%;  /* which part of the photo stays in view (left-right, top-bottom) */
  --photo-size: cover;         /* cover = fill the area; or e.g. auto 100% = full height */
  --card-opacity: 83%;         /* card background: 100% = solid, lower lets the photo show through */
  --card-blur: 0px;            /* blurs the photo behind see-through cards */
  --hero-opacity: .83;         /* the blue headline cards: 1 = solid, lower lets the photo show through */
  --hero: linear-gradient(135deg, #001799 0%, #5168d2 48%, #677dc5 100%);
}

/* Detail pages: the photo sits behind the whole page and stays put while it scrolls; the page
   colour laid over it (all but --photo-show of it) keeps the text easy to read.
   The hub draws its own photo behind the overview (index.html, .main). */
html:not(.hub) body {
  background:
    linear-gradient(color-mix(in srgb, var(--bg) calc(100% - var(--photo-show)), transparent) 0 0) fixed,
    var(--photo) var(--photo-position) / var(--photo-size) no-repeat fixed,
    var(--bg);
}

.card {
  background: color-mix(in srgb, var(--panel) var(--card-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}

/* Blue headline cards on the detail pages: the gradient is its own layer, so --hero-opacity
   fades it without fading the numbers (the hub's .kpi cards do the same in index.html). */
.kpi.hero { background: transparent; isolation: isolate; overflow: hidden; }
.kpi.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--hero); opacity: var(--hero-opacity);
}