/* Target-group variants. Owner: lane A. Contract D3.

   <div data-tg-group>
     <p data-tg-show="all">neutral copy</p>
     <p data-tg-show="saas">SaaS copy</p>
     <p data-tg-show="logistiek machinebouw">shared copy for two sectors</p>
   </div>

   html[data-tg] is set before paint by the inline head script (wp_head, prio 1).
   A variant is visible when the active tg is in its list. The "all" variant is
   the fallback: visible for tg=all / no tg, AND whenever the group has no variant
   for the active tg. :has() does that in CSS; segment.js also sets
   [data-tg-hit] on groups that do match, for browsers without :has().
   Only display:none is ever applied — visible variants keep their own display. */

/* no choice yet, or "Alle": only the neutral variant */
html:not([data-tg]) [data-tg-group] [data-tg-show]:not([data-tg-show~="all"]),
html[data-tg="all"] [data-tg-group] [data-tg-show]:not([data-tg-show~="all"]) {
  display: none !important;
}

/* a sector is active: hide variants for other sectors */
html[data-tg="saas"] [data-tg-group] [data-tg-show]:not([data-tg-show~="saas"]):not([data-tg-show~="all"]),
html[data-tg="logistiek"] [data-tg-group] [data-tg-show]:not([data-tg-show~="logistiek"]):not([data-tg-show~="all"]),
html[data-tg="digital"] [data-tg-group] [data-tg-show]:not([data-tg-show~="digital"]):not([data-tg-show~="all"]),
html[data-tg="machinebouw"] [data-tg-group] [data-tg-show]:not([data-tg-show~="machinebouw"]):not([data-tg-show~="all"]) {
  display: none !important;
}

/* ...and hide the neutral variant only where the group has a matching one */
html[data-tg="saas"] [data-tg-group]:has([data-tg-show~="saas"]) [data-tg-show~="all"]:not([data-tg-show~="saas"]),
html[data-tg="logistiek"] [data-tg-group]:has([data-tg-show~="logistiek"]) [data-tg-show~="all"]:not([data-tg-show~="logistiek"]),
html[data-tg="digital"] [data-tg-group]:has([data-tg-show~="digital"]) [data-tg-show~="all"]:not([data-tg-show~="digital"]),
html[data-tg="machinebouw"] [data-tg-group]:has([data-tg-show~="machinebouw"]) [data-tg-show~="all"]:not([data-tg-show~="machinebouw"]) {
  display: none !important;
}

/* same rule, JS-assisted, for engines without :has() */
html[data-tg="saas"] [data-tg-group][data-tg-hit] [data-tg-show~="all"]:not([data-tg-show~="saas"]),
html[data-tg="logistiek"] [data-tg-group][data-tg-hit] [data-tg-show~="all"]:not([data-tg-show~="logistiek"]),
html[data-tg="digital"] [data-tg-group][data-tg-hit] [data-tg-show~="all"]:not([data-tg-show~="digital"]),
html[data-tg="machinebouw"] [data-tg-group][data-tg-hit] [data-tg-show~="all"]:not([data-tg-show~="machinebouw"]) {
  display: none !important;
}

/* ---------------------------------------------- industry atomization -- */
/* Wrapper the merge (apply_tg_variants.py) puts around every atomized block.
   display:contents = no box of its own, so grids, flex rows and margins see the
   variant exactly where the original element stood. */
.tg-atom { display: contents; }

/* Sector strip above the WordPress-editor pages: shown only for a chosen sector. */
.tg-lens {
  max-width: var(--measure, 44rem);
  margin: 0 auto 2.5rem;
}
.tg-lens__inner {
  position: relative;
  padding: 1.4rem 1.6rem 1.5rem;
  border: 1px solid rgba(169, 196, 222, 0.16);
  border-radius: var(--radius, 14px);
  background: rgba(19, 38, 54, 0.6);
}
.tg-lens__inner::before {            /* gold as hairline only */
  content: "";
  position: absolute;
  top: 0; left: 1.6rem;
  width: 2.2rem; height: 1px;
  background: var(--gold, #C99A3E);
}
.tg-lens__kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky, #5E9AC8);
}
.tg-lens .tg-lens__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.25;
  color: var(--pale, #E9F1F7);
}
.tg-lens__body { margin: 0 0 0.8rem; color: var(--text-2, #AEBFCB); }
.tg-lens .tg-lens__examples {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
  color: var(--text-2, #AEBFCB);
}
.tg-lens .tg-lens__examples li { margin: 0 0 0.3rem; }
.tg-lens__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 0; }
.tg-lens__links .cro-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.62em 1.2em;
  border: 1px solid rgba(94, 154, 200, 0.55);
  border-radius: 999px;
  color: var(--pale, #E9F1F7);
  text-decoration: none;
  font-size: 0.88rem;
}
.tg-lens__links .cro-btn:hover { background: rgba(94, 154, 200, 0.14); border-color: var(--sky, #5E9AC8); }
.tg-lens__cta {
  color: var(--text-2, #AEBFCB);
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(94, 154, 200, 0.6);
}
.tg-lens__cta:hover { color: var(--pale, #E9F1F7); }
/* Sector copy carries long compounds (DE "Kreditorenbuchhaltung", NL
   "managed-servicescontract"): let them hyphenate/wrap instead of pushing a
   phone layout sideways. <html lang> is set per language, so hyphens:auto uses
   the right dictionary. */
.tg-atom > [data-tg-show] { overflow-wrap: break-word; hyphens: auto; }