/* Training page. Only what the shared classes in site.css do not cover. */

/* Subject cards */
.tr-plan__text { margin-top: 10px; font-size: 16px; }
.tr-plan .plan__price { margin-top: 18px; }
.tr-plan .plan__list { margin-bottom: 14px; }
.tr-plan .more { margin-top: 0; margin-bottom: 26px; padding-block: 12px 6px; }

/* Title and text rows with a tick, used for the topics and for the preparation list */
.tr-list { border-bottom: 1px solid var(--line); }
.tr-list li { padding-block: 14px; border-top: 1px solid var(--line); }
.tr-list li::before { top: 22px; }
.tr-list strong { display: block; font-size: 17px; line-height: 1.35; font-weight: 800; color: var(--ink); }
.tr-list span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.55; }
.tr-list--large li { padding-block: 22px; padding-inline-start: 36px; }
.tr-list--large li::before { top: 31px; }
.tr-list--large strong { font-size: 20px; }
.tr-list--large span { font-size: 16px; }
.sec--grey .tr-list, .sec--grey .tr-list li { border-color: #d9dbe0; }

/* What each session covers: one column per subject */
.tr-cover { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.tr-cover__col { padding: 24px; background: var(--grey); scroll-margin-top: 16px; }
.tr-cover__col .tr-list { margin-top: 16px; }
.tr-cover__col .tr-list, .tr-cover__col .tr-list li { border-color: #d9dbe0; }
@media (min-width: 640px) and (max-width: 999px) {
  .tr-cover__col .tr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 1000px) {
  .tr-cover { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
  .tr-cover__col { padding: 32px 28px; }
}

/* Team: names and roles */
.tr-team { display: flex; flex-wrap: wrap; gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.tr-team li { flex: 1 1 200px; min-width: 0; padding: 22px 22px 24px; background: var(--tile); border-top: 3px solid var(--red); }
.tr-team strong { display: block; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--white); }
.tr-team span { display: block; margin-top: 4px; font-size: 15px; color: var(--muted-dark); }
@media (min-width: 1000px) { .tr-team { margin-top: 56px; } }

/* Questions beside their heading */
.tr-faq { margin-top: 0; }

/* Closing band: the eyebrow sits on red, so it takes the dark text colour */
.tr-cta .eyebrow { color: var(--ink); }
.tr-cta .h2 { margin-top: 10px; }

/* The questions section already ends with its own space */
#faq + .cta .wrap { padding-block-start: 0; }

/* A tick is not mirrored in Arabic; the shared rule for .checks turns it into a "v" */
[dir="rtl"] .tr-list li::before { transform: rotate(-45deg); }