/* NTKComms shared card + CTA-box components — Design System Refinement Pilot,
   Phase 3 (2026-08-18, session 096). Consolidates the 23 card variants / 9
   CTA-box variants found in the Phase 1 audit
   (reports/NTKCOMMS_DESIGN_SYSTEM_AUDIT_2026-08-18.md §5) onto one shared visual
   language — the underlying intent (white card, grey-200 border, radius-md
   corners, brand-blue hover; dark navy-to-grey-900 gradient CTA box with a
   brand-blue button) was already consistent across templates even though the
   CSS wasn't shared, confirmed by comparing several of the 23/9 variants
   directly before writing this.

   Body text colour fixed 2026-08-18 (same session, post-POC): the original
   per-page CTA-box variants (readiness-cta-box, phone-compat-cta-box, etc.)
   all used --ntk-color-grey-400 for the paragraph text on the dark gradient,
   which is a real contrast problem (light grey on navy) — Dan flagged it on
   the live POC page. First attempt (plain var(--ntk-color-white), no
   !important) silently did nothing: office_phone_readiness_check.html has
   an ambient `.readiness-section p { color: #4A5568; }` rule at equal
   specificity (0,1,1) to `.ntk-cta-box p`, defined later in the page's own
   <style> block (which loads after this external stylesheet), so it won
   the cascade tie. Fixed with !important, matching the same defensive
   pattern this file already uses on .ntk-cta-box__btn's colour for exactly
   this reason — a shared component has to reliably beat arbitrary
   page-level ambient selectors it can't predict in advance.

   Additive only, proof-of-concept scope for now (1 page:
   templates/blog/tools/office_phone_readiness_check.html). Migrating a
   template means adding these classes alongside its existing page-specific
   class (kept as a JS/id hook and for any real per-page deltas — icon boxes,
   title typography, etc. stay in the page's own CSS) and trimming the page's
   own CSS down to just those deltas. Depends on static/css/ntk-tokens.css
   being loaded first. */

.ntk-card {
  background: var(--ntk-color-white);
  border: 1px solid var(--ntk-color-grey-200);
  border-radius: var(--ntk-radius-md);
  padding: 1.5rem;
}
.ntk-card--hover {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ntk-card--hover:hover {
  border-color: var(--ntk-color-brand-blue);
  box-shadow: var(--ntk-shadow-card);
}

.ntk-cta-box {
  background: linear-gradient(135deg, var(--ntk-color-navy) 0%, var(--ntk-color-grey-900) 100%);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.ntk-cta-box p {
  color: var(--ntk-color-white) !important;
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.ntk-cta-box p:last-child { margin-bottom: 0; }
.ntk-cta-box__btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--ntk-color-brand-blue);
  color: var(--ntk-color-white) !important;
  border-radius: var(--ntk-radius-sm);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.15s;
}
.ntk-cta-box__btn:hover {
  background: var(--ntk-color-brand-blue-hover);
  color: var(--ntk-color-white) !important;
}