/* ============================================================
TPG – Theme (colours + section-level styling)
Scoped tokens. Easy to tweak later.
============================================================ */

#tpgTraining{
  /* --- tokens (safe defaults) --- */
  --tpg-bg: #ffffff;
  --tpg-surface: #ffffff;
  --tpg-surface-2: #f6f7f9;

  --tpg-text: #1f2328;
  --tpg-muted: #5a6472;

  --tpg-border: #e5e7eb;
  --tpg-soft-border: rgba(0,0,0,0.08);

  --tpg-accent: #1960a7;     /* change later to match your brand */
  --tpg-accent-2: #81B800;   /* optional secondary */
  --tpg-accent-wash: rgba(25,96,167,0.08);

  --tpg-shadow: 0 10px 24px rgba(0,0,0,0.06);

  background: var(--tpg-bg);
  color: var(--tpg-text);
}

/* ---------- Card polish ---------- */
#tpgTraining .tpg-card{
  border-color: var(--tpg-border);
  background: var(--tpg-surface);
}

#tpgTraining .tpg-card:hover{
  border-color: rgba(25,96,167,0.22);
}

/* ---------- Hero section “presence” ---------- */
#tpgTraining .tpg-hero .tpg-card--rounded{
  background: linear-gradient(180deg, var(--tpg-accent-wash), transparent);
  border-color: rgba(25,96,167,0.18);
}

#tpgTraining .tpg-sub{
  color: var(--tpg-muted);
}

/* ---------- Buttons ---------- */
#tpgTraining .tpg-btn{
  background: var(--tpg-accent);
  color: #fff;
  border: 1px solid rgba(0,0,0,0);
  box-shadow: 0 6px 18px rgba(25,96,167,0.18);
}

#tpgTraining .tpg-btn--ghost{
  background: transparent;
  color: var(--tpg-accent);
  border-color: rgba(25,96,167,0.35);
  box-shadow: none;
}

#tpgTraining .tpg-btn:hover{
  filter: brightness(0.98);
}

#tpgTraining .tpg-link{
  color: var(--tpg-accent);
  opacity: 1;
}

/* ---------- Subnav refinement ---------- */
.tpg-subnav{
  background: #ffffff;
  border-bottom: 1px solid var(--tpg-border);
}

.tpg-subnav__link{
  color: var(--tpg-muted);
}

.tpg-subnav__link.is-active{
  color: var(--tpg-accent);
  border-bottom-color: var(--tpg-accent);
}

/* ---------- About section: gentle banding ---------- */
#tpgTraining .tpg-about{
  padding-top: 18px;
}

/* ---------- Programs list styling ---------- */
#tpgTraining .tpg-progItem{
  background: #fff;
  border-color: var(--tpg-border);
}

#tpgTraining .tpg-progItem:hover{
  border-color: rgba(25,96,167,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

/* ---------- Gallery: full-width band ---------- */
#tpgTraining .tpg-gallery{
  background: var(--tpg-surface-2);
  border-top: 1px solid var(--tpg-border);
  border-bottom: 1px solid var(--tpg-border);
}

#tpgTraining .tpg-galleryItem{
  background: #e9edf2;
  border: 1px solid rgba(0,0,0,0.04);
}

/* ---------- Testimonials: make the rail feel premium ---------- */
#tpgTraining .tpg-testiCard{
  box-shadow: var(--tpg-shadow);
  border-color: rgba(0,0,0,0.06);
}

#tpgTraining .tpg-quote{
  color: var(--tpg-text);
}

#tpgTraining .tpg-who{
  color: var(--tpg-muted);
  opacity: 1;
}

/* ---------- Scope circle placeholder (only the “big circle” look) ---------- 
#tpgTraining .tpg-scopeCircle{
  background: radial-gradient(circle at 30% 30%, rgba(25,96,167,0.10), rgba(25,96,167,0.05));
  border: 1px solid rgba(25,96,167,0.18);
}
*/