/* ==========================================================================
   In-House Training page (/academy/in-house-training/)
   The hero is borrowed from academy.css (loaded first) to stay consistent with
   /academy/. This sheet styles the marketer's orange-led body below the hero,
   scoped under .in-house-training-page. Dark bands reuse the Academy navy
   (#001D32) so every dark surface on the page matches the hero.

   Cohesion rules (kept in sync with /academy/, see cms/static/cms/css/CLAUDE.md):
   - Cards are flat-by-default. Hover shifts border colour only, never geometry
     (no translateY, no shadow inflation) — DESIGN.md: hover is colour, not motion.
   - The accent stays brand-bright --ih-orange (#f37321). Where orange needs to
     read as text (the intro stat figures), the backing is darkened to navy so it
     clears AA by contrast (5.3:1) rather than by dulling the orange. --ih-orange-ink
     (#c73f00, 5:1 on white) is used only for orange TEXT that must sit on a light
     surface (the intro eyebrow and the "Contact us" inline link).
   ========================================================================== */

.in-house-training-page {
  --ih-orange: #f37321;
  --ih-orange-ink: #c73f00;   /* AA-safe orange for TEXT on light surfaces */
  --ih-navy: #001d32;         /* matches the Academy hero navy */
  --ih-navy-deep: #020b25;
  --ih-navy-accent: #143a5e;  /* track-header gradient endpoint */
  --ih-text: #0e2238;
  --ih-muted: #566476;        /* AA-safe muted, matches academy.css */
  --ih-light: #f2f7fb;
  --ih-border: #e0e6ed;

  color: var(--ih-text);
}

.in-house-training-page .inhouse-muted { color: var(--ih-muted); }

.in-house-training-page .inhouse-inline-link {
  color: var(--ih-orange-ink);
  font-weight: 600;
  text-decoration: none;
}
.in-house-training-page .inhouse-inline-link:hover { text-decoration: underline; }

/* Outline buttons (scoped so global Bootstrap variants stay untouched). */
.in-house-training-page .inhouse-btn-outline-light {
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.55rem 1.6rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.in-house-training-page .inhouse-btn-outline-light:hover,
.in-house-training-page .inhouse-btn-outline-light:focus {
  background-color: #fff;
  color: var(--ih-navy);
}

/* ===== Section headings =====
   One canonical treatment across the page; --light flips the colour for the
   dark benefits band so every section title matches in size and weight. */
.in-house-training-page .inhouse-h2 {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ih-navy);
  margin-bottom: 1rem;
}
.in-house-training-page .inhouse-h2--light { color: #fff; }

/* ===== Stats (right of the intro copy) =====
   Two quantitative tiles (a figure) + two qualitative tiles (an icon of the
   same visual weight) so nothing is forced into the number slot that isn't a
   number. Navy tiles let the brand-bright orange figures/icons clear AA by
   contrast (5.3:1) without dulling the hue. */
.in-house-training-page .inhouse-stat {
  background: var(--ih-navy);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  height: 100%;
}
.in-house-training-page .inhouse-stat__number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--ih-orange);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.in-house-training-page .inhouse-stat__icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--ih-orange);
  margin-bottom: 0.6rem;
}
.in-house-training-page .inhouse-stat__label {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ===== How it works ===== */
.in-house-training-page .inhouse-how { background-color: var(--ih-light); }
.in-house-training-page .inhouse-step {
  background: #fff;
  border: 1px solid var(--ih-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  height: 100%;
  transition: border-color 0.15s ease;
}
.in-house-training-page .inhouse-step:hover {
  border-color: var(--ih-orange);
}
.in-house-training-page .inhouse-step__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ih-orange);
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.in-house-training-page .inhouse-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ih-navy);
  margin-bottom: 0.5rem;
}
.in-house-training-page .inhouse-step p { color: var(--ih-muted); margin: 0; }

/* ===== Benefits (dark band) ===== */
.in-house-training-page .inhouse-benefits {
  background: linear-gradient(135deg, var(--ih-navy) 0%, var(--ih-navy-deep) 100%);
  color: #fff;
}
.in-house-training-page .inhouse-benefits__sub { color: rgba(255, 255, 255, 0.8); }
.in-house-training-page .inhouse-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.in-house-training-page .inhouse-benefit__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--ih-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.in-house-training-page .inhouse-benefit__title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}
.in-house-training-page .inhouse-benefit p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin: 0;
}

/* ===== Example programmes (course track cards) ===== */
.in-house-training-page .inhouse-track {
  background: #fff;
  border: 1px solid var(--ih-border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}
.in-house-training-page .inhouse-track:hover {
  border-color: var(--ih-orange);
}
.in-house-training-page .inhouse-track__head {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--ih-navy) 0%, var(--ih-navy-accent) 100%);
  color: #fff;
}
.in-house-training-page .inhouse-track__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--ih-orange);
  color: #fff;
  border-radius: 8px;
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}
.in-house-training-page .inhouse-track__title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.in-house-training-page .inhouse-track__for {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  margin: 0;
}
.in-house-training-page .inhouse-track__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.in-house-training-page .inhouse-track__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  flex: 1;
}
.in-house-training-page .inhouse-track__body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ih-text);
  font-size: 0.92rem;
}
.in-house-training-page .inhouse-track__body ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--ih-orange);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.8rem;
}

/* Topic tags — one restrained pill for every category. Was eight invented
   colours; the brand is cool-neutral + rare orange, so category meaning is
   carried by the tag text, not a per-entity palette. Navy on ice clears AA. */
.in-house-training-page .inhouse-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  align-self: flex-start;
  background: var(--ih-light);
  color: var(--ih-navy);
  border: 1px solid var(--ih-border);
}

/* ===== CTA card (single closing block) ===== */
.in-house-training-page .inhouse-cta-section { background-color: var(--ih-light); }
.in-house-training-page .inhouse-cta-card {
  background: linear-gradient(135deg, var(--ih-navy) 0%, var(--ih-navy-deep) 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 29, 50, 0.2);
}
.in-house-training-page .inhouse-cta-card__title { color: #fff; font-weight: 700; }
.in-house-training-page .inhouse-cta-card p { color: rgba(255, 255, 255, 0.85); }
.in-house-training-page .inhouse-cta-card__image {
  max-height: 200px;
  border-radius: 12px;
}
/* Centre button labels so the orange (Bootstrap-padding) and outline (taller,
   bordered) buttons align vertically when the flex row stretches them to match. */
.in-house-training-page .inhouse-cta-card__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.in-house-training-page .inhouse-cta-card__catalogue {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}
.in-house-training-page .inhouse-cta-card__catalogue-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.in-house-training-page .inhouse-cta-card__catalogue-link:hover,
.in-house-training-page .inhouse-cta-card__catalogue-link:focus {
  color: var(--ih-orange);
}