/* ============================================================
   Course Design Cards — faithful RSB port
   Palette + structure mirror the original component:
   .card > .card-header (.date) / .card-body (h3, p, .progress)
          / .card-footer (ul avatars + .btn-add, .btn-countdown)
   Everything is scoped under .rsb-course-grid so the generic
   token names (--bg-dark, --color-white, .card, .progress, …)
   can never leak into or collide with the rest of the site CSS.
   ============================================================ */
.rsb-course-grid{
  --clr-blue:#1890ff;
  --clr-green:#01c3a8;
  --clr-orange:#ffb741;
  --clr-red:#a63d2a;
  --bg-dark:#232228;
  --bg-footer:#151419;
  --color-white:#fff;
  --color-gray-light:#ddd;
  --color-gray-medium:#363636;
  --color-gray-dark:#292929;
  --color-gray-very-dark:#222127;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,280px));
  justify-content:center;
  gap:30px 28px;
  margin:26px auto 18px;
}
.rsb-course-grid,.rsb-course-grid *{box-sizing:border-box}

/* ---------- card ---------- */
.rsb-course-grid .card{
  --card-accent:var(--clr-blue);
  --card-rgb:24,144,255;
  position:relative;
  display:flex;
  min-width:0;
  min-height:280px;
  flex-direction:column;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:32px;
  color:var(--color-white);
  --card-surface:
    radial-gradient(ellipse at 100% 0%,rgba(var(--card-rgb),.48) 0%,rgba(var(--card-rgb),.17) 33%,rgba(var(--card-rgb),0) 65%) padding-box,
    linear-gradient(var(--bg-footer),var(--bg-footer)) padding-box,
    linear-gradient(225deg,var(--card-accent) 0%,#29282e 38%,#1d1c21 70%) border-box;
  background:var(--card-surface);
  box-shadow:0 22px 24px -12px rgba(0,0,0,.75),0 7px 12px -7px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .25s ease,box-shadow .25s ease;
}
.rsb-course-grid .card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 28px -12px rgba(0,0,0,.8),0 8px 14px -7px rgba(0,0,0,.65);
}
.rsb-course-grid .card.green{--card-accent:var(--clr-green);--card-rgb:1,195,168}
.rsb-course-grid .card.orange{--card-accent:var(--clr-orange);--card-rgb:255,183,65}
.rsb-course-grid .card.red{--card-accent:var(--clr-red);--card-rgb:166,61,42}
.rsb-course-grid .card.blue{--card-accent:var(--clr-blue);--card-rgb:24,144,255}

/* ---------- header: date + ellipsis ---------- */
.rsb-course-grid .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 18px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
.rsb-course-grid .date{
  color:var(--color-gray-light);
  font-size:.72rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
}
.rsb-course-grid .card-menu{
  display:grid;
  width:28px;
  height:28px;
  flex:none;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--color-white);
  background:transparent;
  font-size:.75rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.rsb-course-grid .card-menu:hover{background:rgba(255,255,255,.08)}
.rsb-course-grid :is(a,button):focus-visible{outline:2px solid #fff!important;outline-offset:3px}

/* ---------- body: title, copy, progress ---------- */
.rsb-course-grid .card-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  padding:22px 18px 16px;
  text-align:center;
  background:transparent;
}
.rsb-course-grid .card-body h3{
  margin:0 0 6px;
  color:var(--color-white);
  font-size:1.08rem;
  font-weight:700;
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
}
.rsb-course-grid .card-body h3 a{color:inherit;text-decoration:none}
.rsb-course-grid .card-body h3 a:hover{color:inherit;text-decoration:underline;text-underline-offset:4px}
.rsb-course-grid .card-body p{
  margin:0 0 16px;
  color:var(--color-gray-light);
  font-size:.74rem;
  line-height:1.85;
}

.rsb-course-grid .progress{
  display:grid;
  flex:none;
  grid-template-columns:minmax(0,1fr);
  height:auto;
  gap:6px;
  margin: auto 0 0;
  overflow:visible;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  font-size:.72rem;
  line-height:1.35;
  color:var(--color-white);
  text-align:start;
}
.rsb-course-grid .progress > span{
  font-weight:600;
  white-space:nowrap;
}
.rsb-course-grid .progress > span:last-child{
  color:var(--color-white);
  font-weight:400;
  text-align:end;
}
.rsb-course-grid .progress-bar{
  position:relative;
  display:block;
  width:100%;
  height:5px;
  min-height:0;
  margin:0;
  overflow:hidden;
  border-radius:99px;
  background:var(--color-gray-medium);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.25);
}
.rsb-course-grid .progress-bar::after{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:var(--progress,0%);
  border-radius:inherit;
  background:var(--card-accent);
  content:"";
}

/* ---------- footer: avatars + countdown pill ---------- */
.rsb-course-grid .card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding:10px 18px;
  border:0;
  border-radius:0;
  background:var(--bg-footer);
}
.rsb-course-grid .card-footer ul{
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  direction:ltr;
}
.rsb-course-grid .card-footer ul li{display:flex}
.rsb-course-grid .card-footer ul li+li{margin-left:-6px}
.rsb-course-grid .avatar{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  color:var(--color-white);
  background:var(--color-gray-dark);
  font-size:.8rem;
  box-shadow:0 0 0 2px var(--bg-footer);
}
.rsb-course-grid .btn-add{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--card-accent);
  font-size:.65rem;
  text-decoration:none;
  box-shadow:0 0 0 2px var(--bg-footer);
  transition:background .2s ease,color .2s ease;
}
.rsb-course-grid .orange .btn-add{color:#151419}
.rsb-course-grid .btn-add:hover{color:var(--bg-footer);background:var(--color-white)}
.rsb-course-grid .btn-countdown{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-radius:99px;
  color:var(--color-white);
  background:var(--bg-dark);
  font-size:.72rem;
  font-weight:400;
  line-height:1.5;
  white-space:nowrap;
  text-decoration:none;
  transition:background .2s ease;
}
.rsb-course-grid .btn-countdown:hover{
  color:var(--color-white);
  background:#313037;
  text-decoration:none;
}

/* ---------- dark theme: cards stay solid, shadows deepen ---------- */
[data-theme="dark"] .rsb-course-grid .card{
  color:var(--color-white)!important;
  border-color:transparent!important;
  background:var(--card-surface)!important;
  box-shadow:0 22px 24px -12px rgba(0,0,0,.85),0 7px 12px -7px rgba(0,0,0,.7);
}
[data-theme="dark"] .rsb-course-grid .card:hover{box-shadow:0 26px 28px -12px rgba(0,0,0,.9),0 8px 14px -7px rgba(0,0,0,.75)}
[data-theme="dark"] .rsb-course-grid .card .card-header{background:transparent!important;border-color:transparent!important}
[data-theme="dark"] .rsb-course-grid .card .card-body{color:var(--color-gray-light)!important}
[data-theme="dark"] .rsb-course-grid .card .card-footer{background:var(--bg-footer)!important;border-color:transparent!important}
[data-theme="dark"] .rsb-course-grid .progress{background:transparent!important}
[data-theme="dark"] .rsb-course-grid .progress-bar{background:var(--color-gray-medium)!important}
[data-theme="dark"] .rsb-course-grid .card-body h3 a,
[data-theme="dark"] .rsb-course-grid .btn-countdown,
[data-theme="dark"] .rsb-course-grid .btn-add{color:var(--color-white)!important}
[data-theme="dark"] .rsb-course-grid .date,
[data-theme="dark"] .rsb-course-grid .card-body p{color:var(--color-gray-light)!important}
[data-theme="dark"] .rsb-course-grid .orange .btn-add,
[data-theme="dark"] .rsb-course-grid .btn-add:hover{color:var(--bg-footer)!important}

.rsb-course-grid .card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  padding:1.5px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(var(--card-rgb),.18) 10%,rgba(var(--card-rgb),.9) 30%,rgba(255,255,255,.8) 40%,rgba(var(--card-rgb),.2) 52%,rgba(var(--card-rgb),.65) 80%);
  background-size:250% 250%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.55;
  transition:opacity .25s ease;
}
.rsb-course-grid .card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.07) 48%,transparent 61%);
  background-size:250% 100%;
  opacity:0;
}
.rsb-course-grid .card:is(:hover,:focus-within){
  transform:translateY(-5px);
  box-shadow:0 26px 30px -13px rgba(0,0,0,.8),0 0 24px -8px rgba(var(--card-rgb),.3);
}
.rsb-course-grid .card:is(:hover,:focus-within)::before{opacity:1;animation:rsb-card-border-flow 4s ease-in-out infinite}
.rsb-course-grid .card:is(:hover,:focus-within)::after{animation:rsb-card-sheen .85s ease-out}
.rsb-course-grid .card .avatar{transition:transform .3s ease,box-shadow .3s ease}
.rsb-course-grid .card:is(:hover,:focus-within) .avatar{transform:translateY(-2px);box-shadow:0 0 0 2px var(--bg-footer),0 0 12px rgba(var(--card-rgb),.3)}
.rsb-course-grid .btn-countdown{border:1px solid rgba(var(--card-rgb),.18);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.rsb-course-grid .btn-countdown:is(:hover,:focus-visible){border-color:rgba(var(--card-rgb),.7);box-shadow:0 0 14px -5px rgba(var(--card-rgb),.45)}
@keyframes rsb-card-border-flow{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@keyframes rsb-card-sheen{0%{background-position:120% 0;opacity:0}30%,70%{opacity:1}100%{background-position:-20% 0;opacity:0}}
@keyframes rsb-card-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){
  .rsb-course-grid .card{animation:rsb-card-arrive .55s ease-out backwards}
  .rsb-course-grid .card:nth-child(2){animation-delay:.06s}
  .rsb-course-grid .card:nth-child(3){animation-delay:.12s}
  .rsb-course-grid .card:nth-child(4){animation-delay:.18s}
}

/* ---------- responsive ---------- */
@media (max-width:575px){
  .rsb-course-grid{grid-template-columns:minmax(0,280px);gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .rsb-course-grid .card,
  .rsb-course-grid .card-menu,
  .rsb-course-grid .btn-add,
  .rsb-course-grid .btn-countdown{transition:none}
  .rsb-course-grid .card:is(:hover,:focus-within),
  .rsb-course-grid .card:is(:hover,:focus-within) .avatar{transform:none}
  .rsb-course-grid .card::before,
  .rsb-course-grid .card::after,
  .rsb-course-grid .card .avatar{animation:none!important;transition:none}
}