/* Professional Learning — near-black theme (#0E0D0B), per approved design */

/* The page wrapper class the theme actually emits is dd-page-<slug> (see dd_page_open()).
   .professional-page was never applied by any template, so the near-black page background
   the approved design specifies was never painted — the hero heading and eyebrow are white,
   so on the default paper background they were invisible. Both selectors kept so an
   existing child theme or template using the old class keeps working. */
.professional-page,
.dd-page-professional-learning{background:var(--dd-slate-deep);color:var(--dd-paper)}
.professional-hero{padding:110px 48px 90px}
@media (max-width:900px){ .professional-hero{padding:56px 20px 44px} }

.career-tracks-grid{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(251,248,244,.12);border:1px solid rgba(251,248,244,.12);border-radius:20px;overflow:hidden}
@media (min-width:901px){ .career-tracks-grid{grid-template-columns:repeat(3,1fr)} }
.career-tracks-grid > div{background:var(--dd-slate-deep);padding:32px 26px;transition:background .3s}
.career-tracks-grid > div:hover{background:var(--dd-slate-deep-2)}

.learning-path-row{display:flex;gap:20px;padding:20px 0;border-top:1px solid rgba(251,248,244,.12)}
.learning-path-row .idx{font-family:var(--dd-font-display);font-weight:600;font-size:14px;color:var(--dd-signal-1);flex:none}
.learning-path-row .label{font-family:var(--dd-font-grotesk);font-size:17px}

.cert-support-item{background:var(--dd-slate-deep-2);border:1px solid rgba(251,248,244,.1);border-radius:14px;padding:18px 20px;font-family:var(--dd-font-body);font-size:14.5px;color:rgba(251,248,244,.78)}

/* The career-track cards sit on the near-black panel; their titles must take
   the light foreground, not the inherited ink. */
.career-tracks-grid .h3{color:var(--dd-paper)}