/* Ported from the prototype's content-cards.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — content cards: الحلقة · المنهج · المحاضرة
   One component each, shared by the public listings (circles,
   curricula, lectures, details, teacher pages) and the student
   dashboard, so a piece of content looks the same before and
   after login. Only the metadata, status and action change:

     CircleCard      public · enrolled · live · completed
     CurriculumCard  public · active · completed
     LectureCard     public · registered · live · recorded · completed

   The markup comes from circles-data.js / curricula-data.js /
   lectures-data.js (card(item, i, state)). Loads BEFORE the page
   stylesheets so their responsive tweaks still win.
   Uses --cl-* (page ground, ink, card), --ease, --gold* from the
   page; the dashboard sets the same tokens on .db.
   ========================================================= */


/* =========================================================
   CIRCLE CARD (makro)
   ========================================================= */
/* the card, measured off makro: 8px frame, photo 4:3 with 16px
   radius, 16px text inset, a grey pill + quiet meta on one row, a
   light title, air below it, and a 40px square arrow sitting in a
   notch cut from the bottom corner (6px gap, 14px concave curves).
   No border — only a very soft shadow, so the notch reads as a cut. */
.cc{
  --notch:var(--cl-bg);                      /* = page ground, for the corner cut */
  --cut:14px;                                /* concave radius around the notch */
  position:relative;
  display:flex; flex-direction:column;
  padding:8px;
  border-radius:22px;
  background:var(--cl-card);
  color:inherit;
  box-shadow:0 1px 2px rgba(18,60,53,.04), 0 16px 34px -26px rgba(18,60,53,.28);
  transition:transform .5s var(--cl-out), box-shadow .5s var(--cl-out);
  animation:cc-in .6s var(--cl-out) both;
  animation-delay:calc(var(--i, 0) * 60ms);
}
@keyframes cc-in{ from{ opacity:0; transform:translateY(18px); } }
.cc:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(18,60,53,.05), 0 28px 46px -28px rgba(18,60,53,.34);
}
.cc:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.cc-media{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:16px;
  overflow:hidden;
  background:#E9E1CF;
}
.cc-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--cl-out);
}
.cc:hover .cc-media img{ transform:scale(1.04); }
.cc-badge{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border-radius:99px;
  font-size:12.5px; font-weight:500;
  color:var(--u-forest);
  background:rgba(255,253,248,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cc-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--u-sage); }
.cc-badge.is-warn::before{ background:#D38B3A; }
.cc-badge.is-full::before{ background:#B6AFA0; }

.cc-body{ display:flex; flex-direction:column; gap:14px; padding:22px 16px 0; flex:1; }
.cc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cc-cat{
  padding:5px 14px;
  border-radius:99px;
  font-size:13px; font-weight:400;
  color:#46564F;
  background:#F0EBDF;
}
.cc-price{ font-size:13.5px; font-weight:400; color:var(--cl-muted); }
.cc-price b{ font-weight:600; color:#3E4E48; }
.cc-price.is-free{ color:#2F6B4F; font-weight:500; }

.cc-title{ margin:0; font-size:20px; line-height:1.55; font-weight:500; color:#26362F; }

.cc-teacher{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--cl-sub); }
.cc-teacher img{ width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:50% 20%; }

.cc-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  margin:0; padding:0;
  list-style:none;
  font-size:13px; color:var(--cl-muted);
}
.cc-meta li{ display:inline-flex; align-items:center; gap:5px; }
.cc-meta svg{ width:15px; height:15px; color:#A6AFAA; }

/* footer: quiet label, with room left for the notch */
.cc-foot{
  display:flex; align-items:flex-end;
  min-height:76px;
  padding:0 16px 14px;
  padding-inline-end:72px;                   /* keep the label clear of the notch */
}
.cc-more{ font-size:13.5px; color:var(--cl-muted); transition:color .3s var(--ease); }
.cc:hover .cc-more{ color:var(--cl-ink); }

/* the notch: a page-coloured block in the bottom corner (end side) */
.cc-go{
  position:absolute; left:0; bottom:0;
  padding:6px;
  border-top-right-radius:calc(var(--cut) + 4px);
  background:var(--notch);
}
/* two concave corners blend the cut into the card */
.cc-go::before, .cc-go::after{
  content:""; position:absolute;
  width:var(--cut); height:var(--cut);
  background:radial-gradient(circle at 100% 0, transparent calc(var(--cut) - .5px), var(--notch) var(--cut));
}
.cc-go::before{ left:0; bottom:100%; }
.cc-go::after { left:100%; bottom:0; }
.cc-go span{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  color:var(--u-forest);
  background:linear-gradient(140deg, #EAD3A0, var(--gold));
  transition:transform .45s var(--cl-out);
}
.cc-go svg{ width:18px; height:18px; transition:transform .45s var(--cl-out); }
.cc:hover .cc-go svg{ transform:translateX(-3px); }


/* =========================================================
   CURRICULUM CARD (kidora)
   ========================================================= */
/* six tones from the palette: card ground · inner circle · badge */
.mc{    --bg:#E1ECE3; --wave:#ECF4EE; --badge:#2F6B4F; --badge-ink:#FFFDF8; }   /* sage */
.mc.t2{ --bg:#F2E6D0; --wave:#F8F0E2; --badge:#D4AF5A; --badge-ink:#0E2721; }   /* sand */
.mc.t3{ --bg:#ECDDB8; --wave:#F4EAD0; --badge:#9C7C30; --badge-ink:#FFFDF8; }   /* gold-beige */
.mc.t4{ --bg:#E3E5CC; --wave:#EDEFDD; --badge:#7E8458; --badge-ink:#FFFDF8; }   /* olive-sage */
.mc.t5{ --bg:#DAE4DF; --wave:#E7EEEA; --badge:#174A43; --badge-ink:#F8F3E7; }   /* green-grey */
.mc.t6{ --bg:#F1E5DA; --wave:#F8EFE7; --badge:#B08F3E; --badge-ink:#FFFDF8; }   /* warm ivory, faint rose */

.mc{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:10px;
  border-radius:16px;
  color:inherit;
  background:var(--bg);
  transition:transform .5s var(--cl-out), box-shadow .5s var(--cl-out);
  animation:cc-in .6s var(--cl-out) both;
  animation-delay:calc(var(--i, 0) * 60ms);
}
/* the big lighter circle through the lower half (mirrored for RTL) */
.mc::before{
  content:""; position:absolute; z-index:-1;
  width:115%; aspect-ratio:1;
  top:52%; left:-48%;
  border-radius:50%;
  background:var(--wave);
  transition:transform .9s var(--cl-out);
}
.mc:hover{ transform:translateY(-5px); box-shadow:0 28px 48px -30px rgba(18,60,53,.4); }
.mc:hover::before{ transform:translate(-14px, -10px) scale(1.03); }
.mc:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.mc-media{
  position:relative;
  aspect-ratio:1.46;
  border-radius:12px;
  overflow:hidden;
  background:rgba(18,60,53,.06);
}
.mc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--cl-out); }
.mc:hover .mc-media img{ transform:scale(1.045); }
.mc-badges{ position:absolute; top:16px; right:16px; display:flex; gap:6px; }
.mc-badge{
  padding:7px 15px;
  border-radius:99px;
  font-size:13px; font-weight:600;
  color:var(--badge-ink);
  background:var(--badge);
}
.mc-badge.is-soft{ color:var(--u-forest); background:rgba(255,253,248,.92); }

.mc-body{ display:flex; flex-direction:column; flex:1; gap:10px; padding:22px 18px 18px; }
.mc-title{ margin:0; font-size:23px; line-height:1.45; font-weight:600; color:var(--cl-ink); }
.mc-desc{
  margin:0;
  font-size:14.5px; line-height:1.85;
  color:#55645E;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.mc-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:2px 0 0; padding:0; list-style:none; font-size:13px; color:#6E7B75; }
.mc-meta li{ display:inline-flex; align-items:center; gap:5px; }
.mc-meta svg{ width:15px; height:15px; color:var(--gold-deep); }

/* the single action, underlined like the reference */
.mc-link{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto; padding:14px 0 4px;
  font-size:15px; font-weight:600;
  color:var(--cl-ink);
  background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  transition:background-size .4s var(--cl-out), gap .4s var(--cl-out);
}
.mc-link svg{ width:16px; height:16px; transition:transform .4s var(--cl-out); }
.mc:hover .mc-link{ gap:11px; }
.mc:hover .mc-link svg{ transform:translateX(-3px); }


/* =========================================================
   LECTURE CARD (spartan)
   ========================================================= */
.lc{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:22px;
  overflow:hidden;                             /* clips the panel while it waits outside */
  isolation:isolate;
  color:inherit;
  animation:cc-in .6s var(--cl-out) both;
  animation-delay:calc(var(--i, 0) * 60ms);
}
.lc:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.lc-media{
  position:relative;
  aspect-ratio:286 / 300;
  border-radius:20px;
  overflow:hidden;
  background:#E9E1CF;
}
.lc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--cl-out), filter .6s var(--ease); }

.lc-tags{ position:absolute; top:14px; right:14px; left:14px; display:flex; flex-wrap:wrap; gap:6px; }
.lc-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px;
  border-radius:99px;
  font-size:12.5px; font-weight:600;
  color:var(--u-forest);
  background:rgba(255,253,248,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lc-tag.is-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#D9534F; }
.lc-tag.is-rec::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--u-sage); }

/* footer: a thin rule beside the text (spartan) */
.lc-foot{ padding:16px 10px 6px; }
.lc-foot-in{
  display:flex; flex-direction:column; gap:6px;
  padding-inline-start:14px;
  border-inline-start:2px solid rgba(18,60,53,.14);
}
.lc-title{ margin:0; font-size:18px; line-height:1.5; font-weight:600; color:var(--cl-ink); }

/* the hover panel — spartan's motion, measured: the panel waits just
   outside the card (clipped) and on hover slides across it in ~0.7s,
   easing out, while a slight horizontal squeeze (scaleX .96) relaxes
   to 1. RTL: it enters from the start (right) side. Deep forest. */
.lc-panel{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column;
  padding:22px 22px 20px;
  border-radius:22px;
  color:var(--u-ivory);
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(212,175,90,.16), transparent 70%),
    radial-gradient(70% 50% at 10% 100%, rgba(168,199,181,.10), transparent 70%),
    linear-gradient(165deg, #12423A 0%, #0B2923 55%, #071F1A 100%);
  transform:translateX(104%) scaleX(.96);
  transform-origin:100% 50%;
  pointer-events:none;
  transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.lc:hover .lc-panel, .lc:focus-visible .lc-panel{ transform:none; }
.lc:hover .lc-media img{ transform:scale(1.04); }

.lc-p-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.lc-p-tags .lc-tag{ color:var(--u-ivory); background:rgba(248,243,231,.1); border:1px solid rgba(248,243,231,.14); -webkit-backdrop-filter:none; backdrop-filter:none; }
.lc-p-title{ margin:18px 0 0; font-size:21px; line-height:1.5; font-weight:600; color:var(--u-ivory); }
.lc-p-text{ margin:10px 0 0; font-size:14.5px; line-height:1.85; color:rgba(248,243,231,.72); }

.lc-p-rows{
  display:flex; flex-direction:column; gap:10px;
  margin:auto 0 0; padding:16px 0 0;
  list-style:none;
  border-top:1px solid rgba(248,243,231,.14);
  font-size:14px; color:rgba(248,243,231,.75);
}
.lc-p-rows li{ display:flex; align-items:center; gap:9px; }
.lc-p-rows svg{ width:17px; height:17px; color:var(--gold-light); }
.lc-p-rows img{ width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:1.5px solid rgba(248,243,231,.5); }
.lc-p-rows b{ font-weight:600; color:var(--u-ivory); }

.lc-p-cta{
  display:flex; align-items:center; justify-content:space-between;
  height:52px;
  margin-top:16px;
  padding-inline:20px 6px;
  border-radius:16px;
  font-size:15.5px; font-weight:600;
  color:var(--u-forest);
  background:var(--u-ivory);
}
.lc-p-cta i{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  color:var(--u-forest);
  background:linear-gradient(140deg, #EAD3A0, var(--gold));
}
.lc-p-cta svg{ width:18px; height:18px; transition:transform .45s var(--cl-out); }
.lc:hover .lc-p-cta svg{ transform:translateX(-3px); }


/* touch screens have no hover: the panel stays hidden, the card
   itself opens the lecture, and the footer already carries the gist */
@media (hover:none){
  .lc-panel{ display:none; }
}


/* =========================================================
   SIGNED-IN STATES (.is-me) — same card, the student's details
   ========================================================= */

/* circle: enrolled · live · completed */
.cc-badge.is-live::before{ background:#D9534F; box-shadow:0 0 0 3px rgba(217,83,79,.2); animation:cc-pulse 1.8s infinite; }
.cc-badge.is-completed::before{ background:#B6AFA0; }
@keyframes cc-pulse{ 50%{ box-shadow:0 0 0 6px rgba(217,83,79,0); } }
.cc-next{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:10px 12px;
  border-radius:12px;
  font-size:13.5px; color:var(--cl-sub);
  background:#F6F1E6;
}
.cc-next svg{ width:16px; height:16px; color:var(--gold-deep); flex:none; }
.cc-next b{ font-weight:600; color:var(--cl-ink); }
.cc.is-live .cc-next{ background:#FBEFEA; }
.cc-att{ display:grid; grid-template-columns:1fr auto; gap:6px; font-size:12.5px; color:var(--cl-muted); }
.cc-att b{ font-weight:600; color:var(--cl-ink); }
.cc-bar, .mc-bar{ grid-column:1 / -1; height:6px; border-radius:99px; overflow:hidden; background:rgba(18,60,53,.08); }
.cc-bar i, .mc-bar i{ display:block; height:100%; width:var(--w, 0); border-radius:inherit; background:var(--u-sage); transform-origin:100% 50%; animation:cc-fill 1.2s var(--cl-out) both; animation-delay:calc(var(--i, 0) * 60ms + .2s); }
@keyframes cc-fill{ from{ transform:scaleX(0); } }
.cc.is-me .cc-foot{ min-height:66px; }
.cc.is-me .cc-more{ font-weight:600; color:var(--cl-ink); }
.cc.is-live .cc-more{ color:#B5523F; }

/* curriculum: active · completed */
.mc-prog{ display:grid; grid-template-columns:1fr auto; gap:8px 10px; margin-top:4px; font-size:13px; color:#5E6B65; }
.mc-prog b{ font-size:18px; font-weight:700; color:var(--cl-ink); }
.mc-prog > span:nth-child(2){ align-self:end; }
.mc-bar{ height:8px; background:rgba(255,253,248,.7); }
.mc-bar i{ background:var(--badge); }
.mc-last{ margin:0; font-size:13.5px; line-height:1.7; color:#5E6B65; }
.mc-last b{ font-weight:600; color:var(--cl-ink); }

/* lecture: registered · live · recorded · completed */
.lc-tag.is-booked::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.lc-tag.is-done::before{ content:""; width:6px; height:6px; border-radius:50%; background:#B6AFA0; }
.lc-when{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; font-size:13px; color:var(--cl-muted); }
.lc-act{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--cl-ink); white-space:nowrap; }
.lc-act svg{ width:15px; height:15px; transition:transform .4s var(--cl-out); }
.lc:hover .lc-act svg{ transform:translateX(-3px); }

@media (prefers-reduced-motion:reduce){
  .cc-bar i, .mc-bar i, .cc-badge.is-live::before{ animation:none; }
}

}