/* NSCOESN — Security domains interactive layer. Loaded only on pages that
   contain [nscoesn_domain_diagram]; all rules scoped under .nsd-page. */

/* ---- Section 1: Hyten hero quote --------------------------------------- */
.nsd-page .wp-block-quote{
  max-width:900px;margin:8px auto 6px;padding:clamp(28px,6vh,64px) 20px 8px;
  border:0;text-align:center;position:relative;
  animation:nsd-fade 0.8s ease-out both;
}
.nsd-page .wp-block-quote p{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(26px,4.6vw,50px);line-height:1.16;color:var(--color-argent);
  margin:0 auto;max-width:20ch;
}
.nsd-page .wp-block-quote p::before{
  content:"\201C";color:var(--color-or);font-family:var(--font-display);
  font-size:1.15em;line-height:0;vertical-align:-0.35em;margin-right:0.04em;
}
.nsd-page .wp-block-quote cite{
  display:block;margin-top:26px;font-style:normal;
  font-family:var(--font-body);font-size:13px;letter-spacing:.02em;
  color:rgba(240,237,232,.6);
}
@keyframes nsd-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- Section 2: threat-agents -> domains diagram ----------------------- */
.nsd-diagram{
  background:
    radial-gradient(60% 80% at 50% 0%,rgba(201,162,48,.06),rgba(14,12,11,0) 70%),
    var(--bg-deep);
  border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
}
.nsd-diagram-grid{
  display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;
  gap:clamp(16px,4vw,56px);
}
.nsd-col-head{
  font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);
  color:var(--color-argent);text-align:center;margin:0 0 22px;
}
.nsd-agent-list,.nsd-pill-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

/* threat agent cards */
.nsd-agents .nsd-agent-list{max-width:340px;margin:0 auto}
.nsd-agent{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;
  background:var(--color-surface-glass);border:1px solid var(--color-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:15px;color:rgba(240,237,232,.9);cursor:default;
  transition:border-color .25s,transform .25s;
}
.nsd-agent:hover,.nsd-agent:focus-visible{border-color:var(--color-or);outline:none;transform:translateX(3px)}
.nsd-agent-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--color-or);box-shadow:0 0 0 4px rgba(201,162,48,.14)}

/* centre bracket */
.nsd-bracket{align-self:stretch;display:flex;justify-content:center;min-height:220px}
.nsd-bracket svg{width:100%;height:100%;opacity:.85}
.nsd-bracket svg path{stroke:var(--color-or)}

/* domain pills */
.nsd-pill-list{max-width:360px;margin:0 auto}
.nsd-pill{position:relative}
.nsd-pill-link{
  display:block;text-decoration:none;border-radius:12px;padding:14px 20px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-left:4px solid var(--color-border);
  transition:border-color .25s,background .25s,transform .25s,box-shadow .25s,opacity .25s;
}
.nsd-tech  .nsd-pill-link{border-left-color:var(--color-vert)}
.nsd-nontech .nsd-pill-link{border-left-color:var(--color-gules)}
.nsd-abbr{font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;color:var(--color-argent);display:block}
.nsd-full,.nsd-one{display:block;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .3s ease,margin .3s ease}
.nsd-full{font-family:var(--font-body);font-size:14px;color:var(--color-or);margin:0}
.nsd-one{font-family:var(--font-body);font-size:13px;line-height:1.5;color:rgba(240,237,232,.7);margin:0}
.nsd-pill-link:hover,.nsd-pill-link:focus-visible,.nsd-pill.expand .nsd-pill-link{
  outline:none;border-color:var(--color-or);border-left-color:var(--color-or);
  transform:translateX(-3px);box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.nsd-pill.expand .nsd-full{max-height:2.4em;opacity:1;margin-top:6px}
.nsd-pill.expand .nsd-one{max-height:6em;opacity:1;margin-top:4px}
.nsd-pill.dim .nsd-pill-link{opacity:.4}
/* pulse when a threat agent is highlighted */
.nsd-pill.pulse .nsd-pill-link{border-color:var(--color-or);border-left-color:var(--color-or)}
.nsd-diagram-note{
  margin:34px auto 0;text-align:center;font-family:var(--font-body);font-style:italic;
  font-size:14px;color:rgba(240,237,232,.55);max-width:60ch;
}

/* ---- Section 3: domain deep-dive cards (authored group blocks) ---------
   Cards are authored as <div class="wp-block-group domain-card tech|nontech">
   holding an h2 (anchor + name), an h4 (abbreviation), and a paragraph. Because
   the colour lives on the block class, the cards survive being placed in Columns,
   nested in groups, and set to any width. They also render in the editor. */
.domain-card{
  position:relative;overflow:hidden;height:100%;
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-border);border-radius:12px;
  background:var(--color-surface-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:26px 28px;margin:0 0 22px;
}
.domain-card.tech{border-left-color:var(--color-vert)}
.domain-card.nontech{border-left-color:var(--color-gules)}
.domain-card h2{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--color-argent);margin:0 0 4px !important}
.domain-card h4{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px !important;text-align:left !important}
.domain-card.tech h4{color:var(--color-vert)}
.domain-card.nontech h4{color:var(--color-gules)}
.domain-card p{margin:0;position:relative;z-index:1;font-size:15px;line-height:1.6;color:rgba(240,237,232,.82)}
.domain-card .nsd-ghost{
  position:absolute;right:16px;top:6px;font-family:var(--font-mono);font-weight:700;
  font-size:clamp(40px,7vw,86px);letter-spacing:.02em;line-height:1;
  color:rgba(240,237,232,.05);pointer-events:none;user-select:none;z-index:0;
}
.domain-card.tech .nsd-ghost{color:rgba(74,122,58,.10)}
.domain-card.nontech .nsd-ghost{color:rgba(139,0,0,.12)}
/* scroll reveal, only when the script opts a card in */
.domain-card.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.domain-card.reveal.in{opacity:1;transform:none}
/* two-column 3+3 layout: even heights, comfortable gap */
.nsd-page .wp-block-columns{gap:clamp(16px,3vw,32px) !important}
.nsd-page .wp-block-column{display:flex;flex-direction:column}
/* the column labels (the two "Technological / Non-technological" h4s) sit left.
   Only the alignment is overridden here; colour (gold), font, and the 36px top
   margin come from the global .page-body h4 kicker rule, so the label renders in
   the standard kicker style with room above it, with no manual spacer needed. */
.nsd-page .wp-block-column > h4:first-child{text-align:left}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:820px){
  .nsd-diagram-grid{grid-template-columns:1fr;gap:34px}
  .nsd-bracket{display:none}
  .nsd-agents .nsd-agent-list,.nsd-pill-list{max-width:520px}
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nsd-page .wp-block-quote{animation:none}
  .domain-card.reveal{opacity:1;transform:none;transition:none}
  .nsd-pill-link,.nsd-full,.nsd-one,.nsd-agent{transition:none}
}