/* =========================================================
   MAYOBA LEARNER MY DASHBOARD
   Scoped exclusively to:
   .dashboard-learner-my-dashboard
   ========================================================= */

.dashboard-learner-my-dashboard {
  --navy: #0c2a7a;
  --navy2: #071c5e;
  --blue: #1e63ef;
  --ink: #12205c;
  --muted: #5f6f9a;
  --bg: #f3f7ff;
  --line: #dbe5f6;
  --white: #fff;
  --green: #10a56f;
  --purple: #7042eb;
  --orange: #ff7a24;
  --shadow: 0 10px 28px rgba(13, 41, 113, .08);
  --radius: 15px;

  margin: 0;
  padding: 20px 18px 30px;

  min-height: 100vh;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  font-size: 14px;
  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #f7faff 0%,
      #edf4ff 100%
    );
}


/* =========================================================
   BOX SIZING
   ========================================================= */

.dashboard-learner-my-dashboard *,
.dashboard-learner-my-dashboard *::before,
.dashboard-learner-my-dashboard *::after {
  box-sizing: border-box;
}


/* =========================================================
   LINKS
   ========================================================= */

.dashboard-learner-my-dashboard a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   ALL IMAGES
   ========================================================= */

.dashboard-learner-my-dashboard img {
  object-fit: contain;
}


/* =========================================================
   ICONS
   ========================================================= */

.dashboard-learner-my-dashboard .icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}


/* =========================================================
   MAIN PAGE LAYOUT
   ========================================================= */

.dashboard-learner-my-dashboard .main {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.dashboard-learner-my-dashboard .content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.dashboard-learner-my-dashboard .page-hero {
  position: relative;

  min-height: 132px;
  height: auto;

  margin-bottom: 16px;
  padding: 24px 34px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border-radius: var(--radius);

  color: #fff;

  background:
    linear-gradient(
      90deg,
      #08236d 0%,
      #0e3194 55%,
      rgba(14, 49, 148, .35) 100%
    ),
    url("/assets/dashboard-assets/banner-mountain.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;

  box-shadow: var(--shadow);
}


/* Hero overlay */

.dashboard-learner-my-dashboard .page-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 28, 94, .12),
      rgba(7, 28, 94, 0)
    );

  pointer-events: none;
}


/* Hero content */

.dashboard-learner-my-dashboard .page-hero .hero-copy {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 64%;

  padding: 3px 0;
}


/* Hero heading */

.dashboard-learner-my-dashboard .page-hero h1 {
  margin: 0 0 8px;

  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -.025em;
}


/* Hero paragraph */

.dashboard-learner-my-dashboard .page-hero p {
  margin: 0;

  color: rgba(255, 255, 255, .9);

  font-size: 18px;
  line-height: 1.35;
}


/* =========================================================
   HERO NOTE
   ========================================================= */

.dashboard-learner-my-dashboard .hero-note {
  position: absolute;
  z-index: 3;

  top: 24px;
  right: 28px;

  color: #fff;

  font-family: cursive;
  font-size: 24px;
  line-height: 1.1;

  text-align: right;

  transform: rotate(-2deg);
}


/* =========================================================
   PATHWAYS
   ========================================================= */

.dashboard-learner-my-dashboard .pathways {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


/* Individual pathway card */

.dashboard-learner-my-dashboard .path-card {
  min-height: 78px;

  padding: 14px 17px;

  display: flex;
  align-items: center;

  gap: 14px;

  border-radius: 12px;
}


/* Hero pathway cards */

.dashboard-learner-my-dashboard .page-hero .path-card {
  background: #fff;
  color: #0c2371;
}


/* Main pathway cards */

.dashboard-learner-my-dashboard .path-card.hire {
  background: #eee9ff;
}

.dashboard-learner-my-dashboard .path-card.business {
  background: #fff0e5;
}

.dashboard-learner-my-dashboard .path-card.study {
  background: #e4f7ef;
}


/* Pathway headings */

.dashboard-learner-my-dashboard .path-card h3 {
  margin: 0 0 4px;

  font-size: 15px;
}


/* Pathway descriptions */

.dashboard-learner-my-dashboard .path-card p {
  margin: 0;

  font-size: 11px;
  color: #65769d;
}


/* Pathway arrow */

.dashboard-learner-my-dashboard .path-card .go {
  width: 38px;
  height: 38px;

  margin-left: auto;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #fff;
  color: #1f62e7;
}


/* =========================================================
   GRID
   ========================================================= */

.dashboard-learner-my-dashboard .grid {
  display: grid;
  gap: 14px;
}

.dashboard-learner-my-dashboard .g4 {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* =========================================================
   CARDS
   ========================================================= */

.dashboard-learner-my-dashboard .card {
  background: #fff;

  border: 1px solid #e0e8f6;
  border-radius: 14px;

  box-shadow:
    0 7px 20px rgba(14, 41, 114, .045);
}


/* =========================================================
   PANELS
   ========================================================= */

.dashboard-learner-my-dashboard .panel {
  padding: 20px;
}


/* =========================================================
   ICON TILES
   ========================================================= */

.dashboard-learner-my-dashboard .tile-icon {
  width: 44px;
  height: 44px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 12px;
}


/* Blue */

.dashboard-learner-my-dashboard .tile-icon.blue {
  background: #e9f1ff;
  color: #1f65ef;
}


/* Green */

.dashboard-learner-my-dashboard .tile-icon.green {
  background: #e4f8ef;
  color: #0b9d6b;
}


/* Purple */

.dashboard-learner-my-dashboard .tile-icon.purple {
  background: #efe8ff;
  color: #6f3eeb;
}


/* Orange */

.dashboard-learner-my-dashboard .tile-icon.orange {
  background: #fff0e3;
  color: #f27418;
}


/* =========================================================
   STAT CARDS
   ========================================================= */

.dashboard-learner-my-dashboard .stat-card {
  min-height: 86px;

  padding: 16px;

  display: flex;
  align-items: center;

  gap: 14px;
}


/* Statistic value */

.dashboard-learner-my-dashboard .stat-card .val {
  color: #0e246e;

  font-size: 25px;
  font-weight: 850;
  line-height: 1;
}


/* Statistic label */

.dashboard-learner-my-dashboard .stat-card .label {
  font-size: 13px;
  font-weight: 700;
}


/* Statistic description */

.dashboard-learner-my-dashboard .stat-card .sub {
  margin-top: 4px;

  color: #7583a5;

  font-size: 11px;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.dashboard-learner-my-dashboard .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}


/* Section title left side */

.dashboard-learner-my-dashboard .section-title .left {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


/* Section heading */

.dashboard-learner-my-dashboard .section-title h2 {
  margin: 0;

  color: #112668;

  font-size: 21px;
  line-height: 1.2;
}


/* Section supporting text */

.dashboard-learner-my-dashboard .section-title p {
  margin: 3px 0 0;

  color: #6879a0;

  font-size: 12px;
}


/* Section links */

.dashboard-learner-my-dashboard .link {
  flex-shrink: 0;

  color: #0f54e8;

  font-size: 12px;
  font-weight: 750;
}


/* =========================================================
   CONTINUE LEARNING
   ========================================================= */

.dashboard-learner-my-dashboard .course-row {
  display: grid;

  grid-template-columns:
    190px minmax(0, 1fr) auto;

  align-items: center;

  gap: 16px;

  padding: 12px 14px;

  background: #fff;

  border: 1px solid #e1e9f6;
  border-radius: 12px;
}


/* Course image */

.dashboard-learner-my-dashboard .course-row img {
  width: 190px;
  height: 92px;

  display: block;

  object-fit: contain;

  border-radius: 10px;
}


/* Course heading */

.dashboard-learner-my-dashboard .course-row h3 {
  margin: 0 0 4px;

  color: #0b226a;

  font-size: 16px;
  line-height: 1.3;
}


/* Course metadata */

.dashboard-learner-my-dashboard .course-row .meta {
  color: #6878a0;

  font-size: 12px;
}


/* =========================================================
   COURSE PROGRESS
   ========================================================= */

.dashboard-learner-my-dashboard .progress {
  height: 7px;

  margin: 10px 0 5px;

  overflow: hidden;

  background: #e6ebf6;

  border-radius: 999px;
}


.dashboard-learner-my-dashboard .progress span {
  display: block;

  width: 0;
  height: 100%;

  background: #2264ed;

  border-radius: 999px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.dashboard-learner-my-dashboard .btn {
  min-height: 42px;

  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 1px solid #1d5df0;
  border-radius: 9px;

  background: #fff;
  color: #0e4bdc;

  font-weight: 750;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


/* Primary button */

.dashboard-learner-my-dashboard .btn.primary {
  background:
    linear-gradient(
      135deg,
      #0a2577,
      #071c61
    );

  border-color: #0a2577;

  color: #fff;
}


/* Button hover */

.dashboard-learner-my-dashboard .btn:hover {
  transform: translateY(-1px);
}


/* =========================================================
   RECOMMENDED COURSES
   ========================================================= */

.dashboard-learner-my-dashboard .recommend-card {
  padding: 13px;

  display: grid;

  grid-template-columns:
    132px minmax(0, 1fr);

  gap: 12px;
}


/* Recommendation image */

.dashboard-learner-my-dashboard .recommend-card img {
  width: 132px;
  height: 107px;

  display: block;

  object-fit: contain;

  border-radius: 10px;
}


/* Recommendation title */

.dashboard-learner-my-dashboard .recommend-card h3 {
  margin: 2px 0 5px;

  font-size: 14px;
  line-height: 1.3;
}


/* Recommendation description */

.dashboard-learner-my-dashboard .recommend-card p {
  margin: 0 0 9px;

  color: #63739a;

  font-size: 11px;
  line-height: 1.35;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.dashboard-learner-my-dashboard .panel + .panel {
  margin-top: 14px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .dashboard-learner-my-dashboard .g4 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .dashboard-learner-my-dashboard .page-hero .hero-copy {
    max-width: 75%;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE/TABLET
   ========================================================= */

@media (max-width: 900px) {

  .dashboard-learner-my-dashboard .g4 {
    grid-template-columns: 1fr;
  }

  .dashboard-learner-my-dashboard .pathways {
    grid-template-columns: 1fr;
  }

  .dashboard-learner-my-dashboard .course-row {
    grid-template-columns: 1fr;
  }

  .dashboard-learner-my-dashboard .course-row img {
    width: 100%;
    height: 170px;
    object-fit: contain;
  }

  .dashboard-learner-my-dashboard .page-hero {
    padding: 22px 24px;
  }

  .dashboard-learner-my-dashboard .page-hero .hero-copy {
    max-width: 100%;
  }

  .dashboard-learner-my-dashboard .page-hero h1 {
    font-size: 32px;
  }

  .dashboard-learner-my-dashboard .page-hero p {
    font-size: 15px;
  }

  .dashboard-learner-my-dashboard .hero-note {
    display: none;
  }

  .dashboard-learner-my-dashboard .section-title {
    align-items: flex-start;
  }

  .dashboard-learner-my-dashboard .stat-card {
    min-height: 80px;
  }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .dashboard-learner-my-dashboard {
    padding: 12px 10px 24px;
  }

  .dashboard-learner-my-dashboard .page-hero {
    padding: 20px;
    border-radius: 12px;
  }

  .dashboard-learner-my-dashboard .page-hero h1 {
    font-size: 28px;
  }

  .dashboard-learner-my-dashboard .page-hero p {
    font-size: 14px;
  }

  .dashboard-learner-my-dashboard .panel {
    padding: 14px;
  }

  .dashboard-learner-my-dashboard .stat-card {
    padding: 14px;
  }

  .dashboard-learner-my-dashboard .stat-card .val {
    font-size: 22px;
  }

  .dashboard-learner-my-dashboard .section-title {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-learner-my-dashboard .section-title .left {
    width: 100%;
  }

  .dashboard-learner-my-dashboard .link {
    align-self: flex-start;
  }

  .dashboard-learner-my-dashboard .course-row {
    padding: 12px;
  }

  .dashboard-learner-my-dashboard .course-row img {
    height: 160px;
    object-fit: contain;
  }

  .dashboard-learner-my-dashboard .course-row .btn {
    width: 100%;
  }

  .dashboard-learner-my-dashboard .recommend-card {
    grid-template-columns: 1fr;
  }

  .dashboard-learner-my-dashboard .recommend-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
  }

  .dashboard-learner-my-dashboard .recommend-card .btn {
    width: 100%;
  }

  .dashboard-learner-my-dashboard .path-card {
    min-height: 72px;
    padding: 13px 14px;
  }

}