:root{
  --brand:#EB8BB9;
  --brand-2:#db6aa6;
  --ink:#9d9b9b;
  --border:#ead1df;
  --muted:#f7f7fb;
}

.rd-wrap{
  direction:rtl;
  color:var(--ink);
 
}

.rd-title{
  font-weight:800;
  text-align:center;
  margin:0 0 14px;
  font-size:clamp(18px,3.2vw,28px);
}

.rd-player{
  width:100%;
  max-width:1100px;
  margin:0 auto 18px;
  background:#0f1014;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  aspect-ratio:16/9;
  box-shadow:0 18px 48px rgba(235,139,185,.25);
}

.rd-player iframe,
.rd-player video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

@supports not (aspect-ratio:1){
  .rd-player{padding-top:56.25%;}
  .rd-player>*{position:absolute;inset:0;}
}

.rd-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  opacity:.9;
  padding:20px;
}

.rd-grid{
  display:grid;
  gap:14px;
  max-width:1100px;
  margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

/* موبايل: 4 كروت جنب بعض، بدون تمدد عمودي زائد */
@media (max-width:767px){
  .rd-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    padding-bottom:0;
  }

  /* ألغينا الـ aspect-ratio حتى ما يطوّل الكرت */
  .rd-card{
    aspect-ratio:auto;
  }

  /* نخفي صورة الدرس على الموبايل لتقليل الارتفاع */
  .rd-thumb{
    display:none;
  }

  .rd-card>button,
  .rd-card>a{
    padding:8px 6px;
  }

  .rd-text{
    font-size:11px;
    -webkit-line-clamp:3;
  }
}

/* ديسكتوب: 4 دروس في الصف */
@media (min-width:1100px){
  .rd-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

.rd-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:.15s ease;
  position:relative;
  isolation:isolate;
  aspect-ratio:1/1; /* ستُلغى على الموبايل بالميديا فوق */
  display:flex;
}

.rd-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  border-color:var(--brand);
  background:#fff7fb;
}

.rd-card[data-active="true"]{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(235,139,185,.28);
  border-color:#c36;
  background-color:#c36;
  color:#fff;
}

.rd-card[data-active="true"] > button{
  background-color:transparent;
  color:inherit;
}

.rd-card[data-active="true"] .rd-text{
  color:inherit;
}

.bar{
  position:absolute;
  inset-inline-start:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  opacity:0;
}

.rd-card[data-active="true"] .bar{
  opacity:1;
}

.rd-card>button,
.rd-card>a{
  all:unset;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  height:100%;
  width:100%;
  box-sizing:border-box;
}

.rd-thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:#f3f3f3;
  flex-shrink:0;
}

.rd-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.rd-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
}

.rd-badge{
  font-size:12px;
  padding:3px 10px;
  border-radius:999px;
  color:#fff;
  background:var(--brand);
  white-space:nowrap;
}

.rd-text{
  font-weight:700;
  font-size:15px;
  line-height:1.5;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.rd-card[data-soon="true"]{
  opacity:.85;
}

.rd-card[data-soon="true"] .soon{
  position:absolute;
  inset:auto 10px 10px auto;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  z-index:2;
}

.rd-card[data-soon="true"] .block{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg,#fff8,#fff8 12px,#fff0 12px,#fff0 24px);
  z-index:1;
}

.rd-card[data-soon="true"] button{
  cursor:not-allowed;
}

.rd-link{
  color:inherit;
}

.rd-link .rd-badge{
  background:#16a34a;
}

.rd-note{
  font-size:12px;
  opacity:.8;
  margin-top:auto;
}