/* ============================================================
   MSC JOURNEY BOARD — CSS
   Version: 1.1.0
   ============================================================ */

/* Hide string table */
.msc-strings {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* ============================================================
   MSC JOURNEY BOARD — HIDDEN STRING TABLE
   Keeps Moodle translation strings in the DOM but hides them
   from the rendered course page.
   ============================================================ */

#msc-strings,
.msc-string-table {
  display: none !important;
}

/* ── Vertical colour tokens ─────────────────────────────── *
 *  Set via data-vertical on the panel. The header eyebrow   *
 *  and title pick up these custom properties.               *
 *  Add new verticals here as needed.                        */

.msc-journey-panel { --msc-accent: #008080; --msc-heading: #19393a; }

.msc-journey-panel[data-vertical="care"]        { --msc-accent: #008080; --msc-heading: #19393a; }
.msc-journey-panel[data-vertical="health"]      { --msc-accent: #2e7d32; --msc-heading: #1b3d1e; }
.msc-journey-panel[data-vertical="safety"]      { --msc-accent: #c62828; --msc-heading: #3c1010; }
.msc-journey-panel[data-vertical="education"]   { --msc-accent: #1565c0; --msc-heading: #0d2e5e; }
.msc-journey-panel[data-vertical="compliance"]  { --msc-accent: #6a1b9a; --msc-heading: #2d0e42; }
.msc-journey-panel[data-vertical="finance"]     { --msc-accent: #00695c; --msc-heading: #0d2b26; }
.msc-journey-panel[data-vertical="leadership"]  { --msc-accent: #b8741a; --msc-heading: #3e2a12; }
.msc-journey-panel[data-vertical="hospitality"] { --msc-accent: #ad1457; --msc-heading: #3d0a20; }
.msc-journey-panel[data-vertical="technology"]  { --msc-accent: #0277bd; --msc-heading: #0a2a42; }

/* === PANEL === */
.msc-journey-panel {
  width: min(100%, 1180px);
  margin: 1.25rem auto 2rem;
  padding: 1.2rem;
  background: #fff;
  border: 1px solid #d8e3e4;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  display: block !important;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.msc-journey-panel *,
.msc-journey-panel *::before,
.msc-journey-panel *::after { box-sizing: border-box; }

.msc-journey-panel__header { margin-bottom: .75rem; }
.msc-journey-panel__eyebrow {
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--msc-accent, #008080);
}
.msc-journey-panel__title {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--msc-heading, #19393a);
}
.msc-journey-panel__intro {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: #536667;
}

/* === GRID === */
.msc-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  align-items: stretch;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (max-width: 1023.98px) {
  .msc-journey-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599.98px) {
  .msc-journey-grid { grid-template-columns: 1fr; }
}

/* === CARD === */
.msc-journey-card {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding: .75rem;
  border-radius: 10px;
  border: 1px solid #d5dddd;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  width: 100%;
  min-width: 0;
  float: none !important;
  clear: none !important;
  cursor: pointer;
}
a.msc-journey-card:hover,
a.msc-journey-card:focus-visible {
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  outline: none;
}
.msc-journey-card.is-disabled { cursor: not-allowed; }
.msc-journey-card[aria-disabled="true"] { pointer-events: none; }

.msc-journey-card__bg,
.msc-journey-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}
.msc-journey-card__bg {
  background-size: cover;
  background-position: center;
  opacity: .34;
  filter: saturate(.92) contrast(.94);
}
.msc-journey-card__overlay {
  background: rgba(255,255,255,.68);
}

.msc-journey-card__top,
.msc-journey-card__body {
  position: relative;
  z-index: 2;
}
.msc-journey-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.msc-journey-card__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  line-height: 1;
}
.msc-journey-card__pill {
  flex: 0 0 auto;
  max-width: 52%;
  padding: .32rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
}

.msc-journey-card__body { min-width: 0; }
.msc-journey-card__phase {
  margin: 0 0 .15rem;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.msc-journey-card__title {
  margin: 0 0 .2rem;
  font-size: .92rem;
  line-height: 1.2;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}
.msc-journey-card__meta {
  margin: 0;
  font-size: .82rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.msc-journey-card__date {
  margin: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.3;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* === STATE THEMES === */

.msc-journey-card,
.msc-journey-card--locked {
  background: #f2f4f5; border-color: #d7dddf;
}
.msc-journey-card--locked .msc-journey-card__overlay { background: rgba(242,244,245,.88); }
.msc-journey-card--locked .msc-journey-card__icon { background: #98a3a6; color: #fff; }
.msc-journey-card--locked .msc-journey-card__phase { color: #6d7a7d; }
.msc-journey-card--locked .msc-journey-card__title { color: #48585d; }
.msc-journey-card--locked .msc-journey-card__meta,
.msc-journey-card--locked .msc-journey-card__date { color: #6c7b80; }
.msc-journey-card--locked .msc-journey-card__pill { background: #e7ebec; color: #6d7a7d; border: 1px solid #d7dddf; }

.msc-journey-card--available {
  background: #e8f6f6; border-color: #b8dddd;
}
.msc-journey-card--available .msc-journey-card__overlay { background: rgba(232,246,246,.82); }
.msc-journey-card--available .msc-journey-card__icon { background: #008080; color: #fff; }
.msc-journey-card--available .msc-journey-card__phase { color: #0d6a6a; }
.msc-journey-card--available .msc-journey-card__title { color: #173536; }
.msc-journey-card--available .msc-journey-card__meta,
.msc-journey-card--available .msc-journey-card__date { color: #496364; }
.msc-journey-card--available .msc-journey-card__pill { background: #cfeeee; color: #0d6a6a; border: 1px solid #b8dddd; }

.msc-journey-card--complete {
  background: #e7f6ea; border-color: #bfe2c8;
}
.msc-journey-card--complete .msc-journey-card__overlay { background: rgba(231,246,234,.84); }
.msc-journey-card--complete .msc-journey-card__icon { background: #3b9a55; color: #fff; }
.msc-journey-card--complete .msc-journey-card__phase { color: #2f7d45; }
.msc-journey-card--complete .msc-journey-card__title { color: #1f3927; }
.msc-journey-card--complete .msc-journey-card__meta,
.msc-journey-card--complete .msc-journey-card__date { color: #4a6651; }
.msc-journey-card--complete .msc-journey-card__pill { background: #d5eedb; color: #2f7d45; border: 1px solid #bfe2c8; }

.msc-journey-card--awaiting {
  background: #efe7fb; border-color: #d5c5f2;
}
.msc-journey-card--awaiting .msc-journey-card__overlay { background: rgba(239,231,251,.84); }
.msc-journey-card--awaiting .msc-journey-card__icon { background: #7a57c2; color: #fff; }
.msc-journey-card--awaiting .msc-journey-card__phase { color: #60449c; }
.msc-journey-card--awaiting .msc-journey-card__title { color: #2f2448; }
.msc-journey-card--awaiting .msc-journey-card__meta,
.msc-journey-card--awaiting .msc-journey-card__date { color: #5a4c79; }
.msc-journey-card--awaiting .msc-journey-card__pill { background: #e1d4f8; color: #60449c; border: 1px solid #d5c5f2; }

.msc-journey-card--failed,
.msc-journey-card--expired {
  background: #fbe7e6; border-color: #efc1bc;
}
.msc-journey-card--failed .msc-journey-card__overlay,
.msc-journey-card--expired .msc-journey-card__overlay { background: rgba(251,231,230,.86); }
.msc-journey-card--failed .msc-journey-card__icon,
.msc-journey-card--expired .msc-journey-card__icon { background: #b2433c; color: #fff; }
.msc-journey-card--failed .msc-journey-card__phase,
.msc-journey-card--expired .msc-journey-card__phase { color: #91352f; }
.msc-journey-card--failed .msc-journey-card__title,
.msc-journey-card--expired .msc-journey-card__title { color: #46211f; }
.msc-journey-card--failed .msc-journey-card__meta,
.msc-journey-card--failed .msc-journey-card__date,
.msc-journey-card--expired .msc-journey-card__meta,
.msc-journey-card--expired .msc-journey-card__date { color: #724442; }
.msc-journey-card--failed .msc-journey-card__pill,
.msc-journey-card--expired .msc-journey-card__pill { background: #f4d4d1; color: #91352f; border: 1px solid #efc1bc; }
/* MSC Journey — MSCSIM hard-fail lockout state */
.msc-journey-card--hardfail {
  border-color: rgba(180, 35, 24, .32);
}

.msc-journey-card--hardfail .msc-journey-card__overlay {
  background: rgba(253, 226, 225, .88);
}

.msc-journey-card--hardfail .msc-journey-card__icon {
  background: #b42318;
  color: #fff;
}

.msc-journey-card--hardfail .msc-journey-card__phase {
  color: #8a1f17;
}

.msc-journey-card--hardfail .msc-journey-card__title {
  color: #46211f;
}

.msc-journey-card--hardfail .msc-journey-card__meta,
.msc-journey-card--hardfail .msc-journey-card__date {
  color: #724442;
}

.msc-journey-card--hardfail .msc-journey-card__pill {
  background: #fde2e1;
  color: #8a1f17;
  border: 1px solid rgba(180, 35, 24, .32);
}