/* Training: course cards, the group-training panel, and underlined tabs as on the old page. */

.pg-training .tab-list { gap: 8px 40px; margin-bottom: 40px; }
.pg-training .tab-list [role="tab"] {
  padding: 8px 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font-family: var(--font-head); font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: #56687f;
}
.pg-training .tab-list [role="tab"][aria-selected="true"] { background: none; color: var(--steel-text); border-bottom-color: var(--steel); }
.pg-training .tab-list [role="tab"]:hover { color: var(--steel-text); }

.trn-title { margin-bottom: 24px; font-family: var(--font-head); font-size: clamp(28px, 3vw, 34px); }

.trn-courses { align-items: stretch; }
.trn-course { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); font-size: 15px; line-height: 1.65; }
.trn-course h3 { margin: 24px 0 16px; font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 1.3; }
.trn-course-top { display: flex; justify-content: space-between; align-items: flex-start; }
.trn-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--steel-soft); color: var(--steel); font-size: 20px; }
.trn-kind { font-size: 12px; font-weight: 600; color: var(--steel-text); }
.trn-prereq { margin: 8px 0 0; padding: 18px 22px; border: 1px solid var(--steel); border-radius: 12px; background: var(--steel-soft); font-size: 14px; line-height: 1.6; }
.trn-prereq h4 { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.trn-prereq p { margin: 0; }
.trn-enroll { margin-top: auto; padding-top: 24px; text-align: center; }
.trn-enroll p { margin: 0 0 12px; font-size: 14px; color: var(--navy-text); }
.trn-enroll .btn { padding: 15px 20px; font-size: 14px; font-weight: 500; }
.trn-enroll .icon { font-size: 16px; }
.trn-soon { align-self: start; }
.trn-soon h3 { margin-top: 12px; }
.trn-soon-note { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-style: italic; color: var(--navy-text); }
.trn-soon-note .icon { font-size: 13px; }

.trn-help {
  display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 720px; margin: 64px auto 0; padding: 22px 28px;
  border: 1px solid var(--steel-faint); border-radius: 14px; background: var(--steel-soft); color: var(--navy-text); font-size: 15px;
}
.trn-help > .icon { font-size: 24px; color: #1f547a; }
.trn-help a { font-weight: 600; }
.trn-help a, .trn-reach a { overflow-wrap: anywhere; }

/* Training for Groups */
.trn-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.trn-options { padding: 28px; border: 1px solid var(--line); }
.trn-options h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 21px; font-weight: 700; color: #0f172a; }
.trn-options h3 .icon { color: var(--steel); }
.trn-options ul { display: grid; gap: 14px; }
/* Plain boxes, no check-mark icons: icon bullets read as sales copy (owner, 2026-11-04) */
.trn-options li { padding: 15px; border-radius: 11px; background: var(--bg-tint); font-size: 14px; font-weight: 500; line-height: 1.5; color: #334155; }
.trn-group-side { display: flex; flex-direction: column; gap: 24px; padding: 15px 0; }
.trn-feature { display: flex; gap: 14px; }
.trn-feature-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #dbeafe; color: var(--steel); font-size: 21px; }
.trn-feature h3 { margin-bottom: 5px; font-size: 16px; font-weight: 700; color: #0f172a; }
.trn-feature p { margin: 0; font-size: 14px; line-height: 1.6; }
.trn-quote { margin-top: auto; text-align: center; }
.trn-quote .btn { padding: 14px 20px; border-radius: 11px; font-size: 14px; font-weight: 700; }
.trn-quote p { margin: 10px 0 0; font-size: 12px; color: #56687f; }
.trn-reach {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 900px; margin: 24px auto 0; padding: 24px 28px;
  border: 1px solid var(--steel-faint); border-radius: 16px; background: rgb(72 146 220 / 10%);
}
.trn-reach p { display: flex; gap: 15px; margin: 0; font-size: 15px; color: rgb(25 36 52 / 90%); }
.trn-reach p .icon { margin-top: 2px; font-size: 24px; color: #192434; }
.trn-reach a:not(.btn) { font-weight: 600; color: rgb(25 36 52 / 90%); }
.trn-reach .btn { flex: none; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 16px 31px; }

@media (max-width: 760px) {
  .pg-training .tab-list { gap: 8px 12px; margin-bottom: 24px; }
  .pg-training .tab-list [role="tab"] { padding: 8px 4px 10px; font-size: 14px; }
  .trn-course { padding: 28px 22px; }
  .trn-groups { grid-template-columns: 1fr; }
  .trn-reach { flex-direction: column; align-items: stretch; padding: 22px 20px; }
  .trn-help { margin-top: 48px; padding: 18px 20px; align-items: flex-start; }
}

/* Banner (2026-11-05): the photo's monitor shows a slide ("STPA Fundamentals", "Principles of Modern System
   Safety", rows 240-650 of 1156) that clashed with the banner's own text. The photo sits on the banner's bottom
   edge, which lifts the slide's lines up under the header on wide screens, and a strong white burst, a little
   left of centre where the slide is, covers what remains behind the title and subtitle. */
.trn-hero { background-position: 50% 100%; }


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .pg-training .tab-list [role="tab"] { color: #b1c5df; }
  .pg-training .tab-list [role="tab"][aria-selected="true"] { border-bottom-color: #4892dc; }
  .trn-icon { color: #7ebaf9; }
  .trn-prereq { border-color: #4892dc; }
  .trn-help { border-color: #313b45; }
  .trn-help > .icon { color: #9cd2ff; }
  .trn-options h3 { color: #d6e3fe; }
  .trn-options h3 .icon { color: #7ebaf9; }
  .trn-options li { color: #c2d3ec; }
  .trn-feature-icon { background-color: #202833; color: #7ebaf9; }
  .trn-feature h3 { color: #d6e3fe; }
  .trn-quote p { color: #b1c5df; }
  .trn-reach { border-color: #313b45; background-color: rgb(72 146 220 / 10%); }
  .trn-reach p { color: rgb(207 222 244 / 90%); }
  .trn-reach p .icon { color: #cfdef4; }
  .trn-reach a:not(.btn) { color: rgb(207 222 244 / 90%); }
}