/**
 * css/style.css
 * LearnDash Course Grid — responsive layout
 * Version: 1.0.14 → 1.0.15
 */

/* 1. Responsive grid container */
.custom-ld-grid {
  display: grid;
  /* two equal columns */
  grid-template-columns: repeat(2, 1fr);
  /* 20px gutter all around */
  gap: 20px;
  width: 100%;
}

/* collapse to one column on mobile/tablet portrait */
@media (max-width: 768px) {
  .custom-ld-grid {
    grid-template-columns: 1fr;
  }
}

/* 2. Card link wrapper */
.custom-ld-card-link {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 3. Card itself */
.custom-ld-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  /* default border color—overridable by settings page */
  border-color: #000000;
}

/* 4. Make the content area stretch */
.custom-ld-card-content {
  flex: 1;
}

/* 5. Progress bar height */
.custom-ld-progress-bar-bg,
.custom-ld-progress-bar-fill {
  height: 10px;
}

/* 6. Hover effect */
.custom-ld-card:hover {
  transform: scale(1.01);
  transition: transform 0.3s ease;
}

/* 7. (Optional) default badge colors—also overridable */
.custom-ld-badge.status-locked       { background-color: gray;   }
.custom-ld-badge.status-not-started  { background-color: orange; }
.custom-ld-badge.status-in-progress  { background-color: blue;   }
.custom-ld-badge.status-completed    { background-color: green;  }