/* Ported from the prototype's curricula.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 — waitlistkit.framer.website: a full-bleed WebGL shader of
     slow, morphing bands of light that sweep in on load and keep
     drifting, clear in the middle behind a centred headline.
     Here: ivory ground; sage, muted gold and green-beige light.

   CARDS — kidora.framer.website/programs: a tinted card (10px
     radius, 10px inset), a wide photo with the same radius and a
     strong pill badge on it, 20px content inset, a 26px title, a
     short description, an underlined "View details →", and one big
     lighter circle sweeping through the lower half of the card.
     Here: 3 per row, six tones drawn from the brand palette.
   ========================================================= */


/* =========================================================
   1 — HERO
   ========================================================= */

.mh{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(640px, 94vh, 880px);
  display:flex; align-items:center; justify-content:center;
  padding:120px 24px 90px;
  text-align:center;
  background:#F8F4EC;
}

.mh-gl{ position:absolute; inset:0; z-index:-3; width:100%; height:100%; }

/* without WebGL (or with reduced motion): three soft blurred fields */
.mh-fallback{ position:absolute; inset:0; z-index:-3; display:none; overflow:hidden; }
.mh.no-gl .mh-fallback{ display:block; }
.mh-fallback i{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.75; animation:mh-drift 26s ease-in-out infinite alternate; }
.mh-fallback i:nth-child(1){ width:60vw; height:45vw; top:-18vw; right:-12vw; background:radial-gradient(closest-side, #A9C7B3, transparent); }
.mh-fallback i:nth-child(2){ width:50vw; height:40vw; bottom:-16vw; left:-10vw; background:radial-gradient(closest-side, #E6CF94, transparent); animation-duration:32s; }
.mh-fallback i:nth-child(3){ width:40vw; height:32vw; top:30%; left:-14vw; background:radial-gradient(closest-side, #D3DEC6, transparent); animation-duration:38s; }
@keyframes mh-drift{ to{ transform:translate(4vw, 3vw) scale(1.08); } }

/* ---- copy ---- */
.mh-inner{ position:relative; max-width:780px; }

.mh-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin:0;
  padding:6px 16px;
  border-radius:99px;
  font-size:14px; font-weight:600;
  color:var(--cl-sub);
  background:rgba(255,253,248,.66);
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.mh-badge svg{ width:14px; height:14px; fill:var(--gold); }

.mh-title{
  margin:24px 0 0;
  font-size:clamp(40px, 5.6vw, 80px);
  line-height:1.2;
  font-weight:700;
  color:var(--cl-ink);
}
.mh-title > span{ display:block; }
.mh-accent{ color:#3F7A61; }                      /* the reference's coloured second line, in sage */

.mh-lead{
  max-width:520px;
  margin:22px auto 0;
  font-size:clamp(16px, 1.3vw, 18.5px);
  line-height:1.9;
  color:var(--cl-sub);
}

.mh-cta{
  display:inline-flex; align-items:center; gap:10px;
  height:54px;
  margin-top:30px;
  padding:0 26px;
  border-radius:99px;
  font-size:16px; font-weight:600;
  color:var(--u-ivory);
  background:var(--u-forest);
  box-shadow:0 16px 30px -18px rgba(18,60,53,.9);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.mh-cta svg{ width:18px; height:18px; color:var(--gold-light); transition:transform .4s var(--cl-out); }
.mh-cta:hover{ background:#0E322C; transform:translateY(-2px); }
.mh-cta:hover svg{ transform:translateY(3px); }

.mh-help{ margin:14px 0 0; font-size:13.5px; color:var(--cl-muted); }

.mh-up{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
  animation:mh-up .9s var(--cl-out) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes mh-up{ to{ opacity:1; transform:none; filter:none; } }


/* =========================================================
   2 — CURRICULUM CARD (kidora)
   ========================================================= */

.mc-page .cat{ padding-top:40px; }
.mc-page .cg{ gap:24px; }

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

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


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

@media (max-width:720px){
  .mh{ min-height:600px; padding:110px 18px 70px; }
  .mc-title{ font-size:21px; }
}

@media (prefers-reduced-motion:reduce){
  .mh-up{ opacity:1; animation:none; filter:none; transform:none; }
  .mh-fallback i{ animation:none; }
  .mc{ animation:none; }
  .mc, .mc::before, .mc-media img{ transition-duration:.01s !important; }
}

}