/* Course cards shared by the home page, All Courses, Free Courses and My Courses (partial Views/Shared/_CourseCard.cshtml).
   3 equal cards per row (2 on tablets, 1 on phones), same-size images, clamped texts. Site colours: teal #137279, navy #04224A. */

/* display:block: on small screens the old site CSS makes .container a flex row, which squeezed the grid to ~170px */
.lc-section { padding: 10px 0 0; display: block !important; }
.lc-head { text-align: center; margin-bottom: 28px; }
.lc-head h2 { margin: 0; font-size: 32px; font-weight: 600; color: #1F2937; }
.lc-head p { text-align: center; margin: 6px 0 0; font-size: 15px; color: #6B7280; }
.lc-bar { width: 56px; height: 3px; background: #137279; margin: 12px auto 0; }

.lc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.lc-card { text-align: start; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(4, 34, 74, .10); color: inherit !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.lc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(4, 34, 74, .16); }

.lc-img { position: relative; aspect-ratio: 16 / 9; background: #E3EEEF; overflow: hidden; }
.lc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-chip { position: absolute; top: 10px; left: 10px; background: rgba(4, 34, 74, .85); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.lc-free { position: absolute; top: 10px; right: 10px; background: #137279; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
/* Offer (pricing, phase 2): badge on the image, crossed-out old price and end date next to the price */
.lc-off { position: absolute; top: 10px; right: 10px; background: #C0392B; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.lc-old { font-size: 14px; color: #9CA3AF; text-decoration: line-through; margin-left: 8px; }
.lc-ends { font-size: 12px; color: #C0392B; font-weight: 600; margin-left: 8px; white-space: nowrap; }
/* Diplomas (pricing, phase 3): blue chip, "Save X%" and "Part of …" in My Courses */
.lc-chip.lc-dip { background: #1D4ED8; }
.lc-save { display: inline-block; font-size: 12.5px; color: #137279; font-weight: 700; margin-left: 8px; background: #E7F3F4; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lc-part { margin: 0 0 6px; font-size: 13px; color: #1D4ED8; font-weight: 600; }

.lc-body { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 0; }
.lc-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; color: #137279; min-height: 54px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-inst { margin: 8px 0 6px; font-size: 14px; color: #6B7280; }
.lc-desc { margin: 0; font-size: 14px; line-height: 1.6; color: #4B5563; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.lc-foot { border-top: 1px solid #EEF0F3; margin-top: 14px; padding: 12px 18px 14px; }
.lc-foot .price { margin: 0; }
.lc-foot .amountprice { font-size: 18px; font-weight: 700; color: #04224A; }
.lc-continue { font-size: 15px; font-weight: 600; color: #137279; }

.lc-all { text-align: center; margin-top: 32px; }
.lc-all a { display: inline-block; background: #137279; color: #fff !important; border-radius: 8px; padding: 11px 30px; font-size: 16px; font-weight: 500; text-decoration: none !important; }
.lc-all a:hover { background: #0e5a60; }

/* Nothing to show (empty search, no free courses, no purchased courses) */
.lc-empty { text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(4, 34, 74, .08); padding: 40px 20px; margin: 10px auto 30px; max-width: 560px; }
.lc-empty strong { display: block; font-size: 20px; color: #1F2937; margin-bottom: 6px; }
.lc-empty span { display: block; font-size: 15px; color: #6B7280; }
.lc-empty a { display: inline-block; margin-top: 16px; background: #137279; color: #fff !important; border-radius: 8px; padding: 9px 24px; font-size: 15px; text-decoration: none !important; }
.lc-empty a:hover { background: #0e5a60; }

@media (max-width: 991.98px) { .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .lc-grid { grid-template-columns: 1fr; gap: 18px; } .lc-head h2 { font-size: 26px; } }