/* Ported from the prototype's lectures.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — المحاضرات (public listing)
   Loads after circles.css, which carries the page ground and the
   shared catalogue (toolbar, chips, sort, drawer, empty, more).
   ---------------------------------------------------------
   HERO — a full-width cinematic photograph of a lecture with the
     copy laid over it on the right (RTL) behind a deep-forest fade
     that clears toward the lecturer; one light CTA, no floating UI.

   GRID — spartanai.framer.website team cards, measured at 1280:
     286×419, a 286×338 photo with 20px corners, a 72px footer
     (10 / 10 / 20 padding) with a thin rule beside the text; on
     hover a panel slides across the whole card (from just outside
     it, ~0.7s, ease-out, scaleX .96 → 1). Here: 3 per row, a deep
     forest panel with the details and one "استعرض المحاضرة" action.
   ========================================================= */


/* =========================================================
   1 — HERO
   One cinematic composition: a full-width lecture photograph
   (mirrored so the lecturer faces the copy from the left), a
   deep-forest fade behind the copy on the right that clears
   toward the subject, ivory type, one light CTA. Slow zoom on
   load, a touch of parallax on scroll (lectures.js).
   ========================================================= */

.lv{
  --py:0px;                                     /* parallax offset (lectures.js) */
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:clamp(600px, 82vh, 860px);
  display:flex; align-items:center;
  color:var(--u-ivory);
  background:#0B2923;
}

.lv-media{ position:absolute; inset:-6% 0; z-index:-3; transform:translate3d(0, var(--py), 0); }
.lv-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:55% 40%;
  transform:scaleX(-1) scale(1.12);
  animation:lv-zoom 14s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes lv-zoom{ to{ transform:scaleX(-1) scale(1.04); } }

/* deep green near the copy → clear toward the lecturer, a warm
   gold breath behind the headline, a soft foot so it ends cleanly */
.lv-shade{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(42% 50% at 80% 42%, rgba(212,175,90,.14), transparent 70%),
    linear-gradient(to left, rgba(7,31,26,.9) 0%, rgba(7,31,26,.78) 28%, rgba(7,31,26,.36) 56%, rgba(7,31,26,.06) 78%, rgba(7,31,26,0) 100%),
    linear-gradient(to top, rgba(7,31,26,.45) 0%, rgba(7,31,26,0) 32%),
    linear-gradient(to bottom, rgba(7,31,26,.35) 0%, rgba(7,31,26,0) 22%);
}

.lv-wrap{ width:100%; max-width:1240px; margin:0 auto; padding:90px 28px 0; }
.lv-copy{ max-width:600px; }

.lv-label{
  display:inline-flex; align-items:center; gap:9px;
  margin:0;
  padding:6px 15px;
  border-radius:99px;
  font-size:14px; font-weight:600;
  color:var(--gold-light);
  background:rgba(248,243,231,.08);
  border:1px solid rgba(248,243,231,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lv-label span{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(212,175,90,.22); }

.lv-title{
  margin:22px 0 0;
  font-size:clamp(42px, 5.6vw, 82px);
  line-height:1.22;
  font-weight:700;
  color:#FBF7EE;
  text-shadow:0 2px 30px rgba(7,31,26,.35);
}
.lv-title > span{ display:block; }
.lv-title .circled svg{ width:112%; height:138%; }
.lv-title .circled path{ stroke-width:3.4; }

.lv-lead{
  max-width:470px;
  margin:22px 0 0;
  font-size:clamp(16px, 1.35vw, 19px);
  line-height:1.9;
  color:rgba(248,243,231,.84);
}

.lv-cta{
  display:inline-flex; align-items:center; gap:10px;
  height:52px;
  margin-top:32px;
  padding:0 24px;
  border-radius:14px;
  font-size:16px; font-weight:600;
  color:var(--u-forest);
  background:#F8F3E7;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.55);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.lv-cta svg{ width:17px; height:17px; color:var(--gold-deep); transition:transform .4s var(--cl-out); }
.lv-cta:hover{ background:#FFFDF8; transform:translateY(-2px); }
.lv-cta:hover svg{ transform:translateY(3px); }

/* entrance */
.lv-up{
  opacity:0;
  transform:translateY(20px);
  animation:lv-up .9s var(--cl-out) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes lv-up{ to{ opacity:1; transform:none; } }


/* =========================================================
   2 — LECTURE CARD (spartan)
   ========================================================= */

.lc-page .cat{ padding-top:40px; }
.lc-page .cg{ gap:26px 18px; }

/* the card itself lives in content-cards.css (shared with the dashboard) */

/* skeleton */
.lc.is-skel{ pointer-events:none; animation:none; }
.lc.is-skel .lc-media{ background:none; }
.lc.is-skel .lc-media .sk{ position:absolute; inset:0; border-radius:20px; }


/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width:820px){
  .lv{ height:auto; min-height:560px; padding:0 0 60px; align-items:flex-end; }
  .lv-wrap{ padding:130px 20px 0; }
  .lv-img{ object-position:30% 40%; }
  /* on a narrow screen the copy sits low; darken from the foot instead */
  .lv-shade{
    background:
      linear-gradient(to top, rgba(7,31,26,.92) 0%, rgba(7,31,26,.7) 42%, rgba(7,31,26,.2) 72%, rgba(7,31,26,.35) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .lv-up{ opacity:1; transform:none; animation:none; }
  .lv-img{ animation:none; transform:scaleX(-1) scale(1.04); }
  .lv-media{ transform:none; }
  .lc{ animation:none; }
  .lc-panel, .lc-media img{ transition-duration:.01s !important; }
}


/* =========================================================
   3 — CLOSING CTA (moved here from the details page; this is now
   its only home): a warm tinted card with teacher portraits
   floating at its edges, a title, a line and one action.
   ========================================================= */

.le-end{ padding:70px 24px 110px; }
.le-end-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:1200px;
  margin:0 auto;
  padding:84px 24px 88px;
  border-radius:28px;
  text-align:center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255,250,236,.9), transparent 70%),
    linear-gradient(160deg, #F6E9C8 0%, #EEDCB0 100%);
}
.le-end-card::before{               /* one soft sweep, like the reference's curve */
  content:"";
  position:absolute; z-index:-1;
  width:900px; height:900px;
  left:50%; top:46%;
  border-radius:50%;
  border:60px solid rgba(255,253,248,.28);
  transform:translateX(-12%);
}
.le-end-av{
  position:absolute;
  left:var(--ax); top:var(--ay);
  width:var(--as); height:var(--as);
  translate:-50% -50%;
  border-radius:50%;
  padding:3px;
  background:#FFFDF8;
  box-shadow:0 10px 20px -10px rgba(18,60,53,.4);
  animation:le-bob var(--af) ease-in-out infinite alternate;
}
.le-end-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
@keyframes le-bob{ to{ transform:translateY(-8px); } }

.le-end-title{
  max-width:560px;
  margin:0 auto;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.3;
  font-weight:700;
  color:var(--cl-ink);
  text-wrap:balance;
}
.le-end-text{
  max-width:480px;
  margin:16px auto 28px;
  font-size:16.5px;
  line-height:1.9;
  color:var(--cl-sub);
}

.le-end-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px;
  border-radius:99px;
  font-size:16px; font-weight:600;
  color:var(--u-ivory);
  background:var(--u-forest);
  box-shadow:0 14px 30px -14px rgba(18,60,53,.6);
  transition:transform .4s var(--cl-out), box-shadow .4s var(--cl-out), background-color .3s var(--cl-out);
}
.le-end-cta svg{ width:18px; height:18px; color:var(--gold); transition:transform .4s var(--cl-out); }
.le-end-cta:hover{ transform:translateY(-2px); background:#174A41; box-shadow:0 18px 34px -14px rgba(18,60,53,.6), 0 0 0 4px rgba(212,175,90,.18); }
.le-end-cta:hover svg{ transform:translateX(-4px); }
.le-end-cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* fade up on scroll (lectures.js adds .is-in) */
.le-end.js .le-end-card{ opacity:0; translate:0 24px; }
.le-end.js.is-in .le-end-card{ opacity:1; translate:0 0; transition:opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1); }

/* the catalogue above already ends with room; keep the gap even */
.lc-page .cat{ padding-bottom:40px; }

@media (max-width:640px){
  .le-end{ padding:48px 16px 80px; }
  .le-end-card{ padding:96px 20px 64px; border-radius:22px; }
  .le-end-av{ --as:42px !important; top:50px; }
  .le-end-av:nth-of-type(1){ left:20%; } .le-end-av:nth-of-type(2){ left:40%; }
  .le-end-av:nth-of-type(3){ left:60%; } .le-end-av:nth-of-type(4){ left:80%; }
}
@media (prefers-reduced-motion:reduce){
  .le-end-av{ animation:none; }
  .le-end.js .le-end-card{ opacity:1; translate:none; }
}

}