/* ==========================================================================
   Gold Academy — Browse journey (stage.html, grade.html, catalog journey mode)
   Stage-coloured hero, step bar, grade cards, subject cards, motion.
   ========================================================================== */

/* ---------- Stage-coloured hero ---------- */
.stage-hero {
  --hero-bg: var(--navy-900); --hero-ink: #fff; --hero-muted: rgba(244, 239, 228, .78); --hero-accent: var(--gold-400);
  --hero-chip: rgba(255, 255, 255, .1); --hero-line: rgba(220, 175, 90, .08);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--hero-muted);
  padding-block: clamp(2.25rem, 1.6rem + 3vw, 3.75rem) clamp(4rem, 3rem + 3vw, 5.5rem);
  --c-focus: var(--gold-400);
}
/* Each stage: a real photo, faded under the stage colour (denser on the text side, right in RTL) */
.stage-hero {
  background-color: var(--hero-base, var(--navy-900));
  background-image: var(--hero-tint, none), var(--hero-photo, none);
  background-size: cover; background-position: center;
}
.stage-hero--basic {
  --hero-base: #1d3a6a;
  --hero-tint: linear-gradient(to left, rgba(38, 76, 138, .95) 0%, rgba(29, 58, 106, .84) 50%, rgba(29, 58, 106, .66) 100%);
  --hero-photo: url("../../img/stages/bg-basic-1920.webp");
}
.stage-hero--secondary {
  --hero-base: #132a52;
  --hero-tint: linear-gradient(to left, rgba(34, 66, 118, .95) 0%, rgba(19, 42, 82, .84) 50%, rgba(19, 42, 82, .66) 100%);
  --hero-photo: url("../../img/stages/bg-secondary-1920.webp");
}
.stage-hero--university {
  --hero-base: #0a1426;
  --hero-tint: linear-gradient(to left, rgba(23, 47, 85, .95) 0%, rgba(10, 20, 38, .84) 50%, rgba(10, 20, 38, .66) 100%);
  --hero-photo: url("../../img/stages/bg-university-1920.webp");
}
.stage-hero--tawjihi {
  --hero-base: #c99a3e;
  --hero-tint: linear-gradient(to left, rgba(236, 200, 127, .95) 0%, rgba(216, 169, 79, .86) 50%, rgba(190, 140, 50, .72) 100%);
  --hero-photo: url("../../img/stages/bg-tawjihi-1920.webp");
  --hero-ink: var(--navy-900); --hero-muted: rgba(15, 27, 51, .8); --hero-accent: var(--navy-900);
  --hero-chip: rgba(15, 27, 51, .1); --hero-line: rgba(15, 27, 51, .07);
  --c-focus: var(--navy-900);
}
@media (max-width: 767.98px) {
  .stage-hero--basic      { --hero-photo: url("../../img/stages/bg-basic-960.webp"); }
  .stage-hero--secondary  { --hero-photo: url("../../img/stages/bg-secondary-960.webp"); }
  .stage-hero--university { --hero-photo: url("../../img/stages/bg-university-960.webp"); }
  .stage-hero--tawjihi    { --hero-photo: url("../../img/stages/bg-tawjihi-960.webp"); }
}
.stage-hero::before {   /* ruled lines */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--hero-line) 1px, transparent 1px); background-size: 100% 34px;
  mask-image: linear-gradient(to left, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
}
.stage-hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-8); }
.stage-hero .crumbs a { color: var(--hero-muted); }
.stage-hero .crumbs li + li::before { color: var(--hero-muted); opacity: .5; }
.stage-hero .crumbs [aria-current="page"] { color: var(--hero-accent); }
.stage-hero h1 { color: var(--hero-ink); font-size: var(--fs-display); margin-bottom: var(--sp-2); }
.stage-hero-lead { font-size: var(--fs-md); margin: 0 0 var(--sp-6); max-width: 56ch; }
.stage-stats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.stage-stats li {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: .55rem 1rem; border-radius: var(--r-md); background: var(--hero-chip);
  font-size: var(--fs-sm); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.stage-stats strong { color: var(--hero-ink); font-size: var(--fs-xl); font-weight: 800; line-height: 1; }

/* the stage's 3D icon, floating inside soft rings */
.stage-hero-art { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.stage-hero-art::before, .stage-hero-art::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--hero-chip);
}
.stage-hero-art::before { inset: 0; background: var(--hero-chip); }
.stage-hero-art::after { inset: -28px; border-style: dashed; animation: spin 40s linear infinite; }
.stage-hero-art img { position: relative; width: 150px; height: 150px; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .3)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* entrance of hero text */
.stage-hero .reveal-up { animation: upIn var(--dur-slow) var(--ease) both; }
.stage-hero .reveal-up[data-d="1"] { animation-delay: 90ms; }
.stage-hero .reveal-up[data-d="2"] { animation-delay: 180ms; }
@keyframes upIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Step bar ---------- */
.jsteps {
  position: relative; margin: calc(-1 * var(--sp-8)) 0 var(--sp-10); z-index: 2;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.jsteps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.jsteps-item + .jsteps-item { border-inline-start: 1px solid var(--c-line); }
.jsteps-link {
  display: flex; align-items: center; gap: var(--sp-3); height: 100%;
  padding: var(--sp-4) var(--sp-5); color: var(--c-text-soft); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
a.jsteps-link:hover { background: var(--c-surface-2); color: var(--c-heading); }
.jsteps-dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  border: 1px solid var(--c-line-strong); background: var(--c-surface);
}
.jsteps-text { display: grid; min-width: 0; line-height: 1.35; }
.jsteps-label { font-size: var(--fs-xs); font-weight: 600; }
.jsteps-value { font-size: var(--fs-sm); font-weight: 700; color: var(--c-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jsteps-item.is-done .jsteps-dot { background: var(--c-success-soft); border-color: transparent; color: var(--c-success); }
.jsteps-item.is-current .jsteps-link { color: var(--c-heading); background: var(--c-accent-soft); }
.jsteps-item.is-current .jsteps-label { font-size: var(--fs-sm); font-weight: 700; }
.jsteps-item.is-current .jsteps-dot { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 175, 90, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(220, 175, 90, 0); } }
.jsteps-fill {
  --p: 0%;
  position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; width: var(--p);
  background: linear-gradient(to left, var(--gold-500), var(--gold-300));
  transition: width .9s var(--ease);
}

.jsteps--flat { margin: 0 0 var(--sp-6); box-shadow: var(--shadow-sm); }
.jsteps[hidden] { display: none; }

/* ---------- Section heading for the list ---------- */
.browse-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.browse-head h2 { font-size: var(--fs-2xl); margin: 0; }
.browse-head p { margin: var(--sp-1) 0 0; color: var(--c-text-muted); }

/* staggered entrance for generated cards (index set by JS as --i) */
.stagger > * { animation: cardRise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cardRise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Grade cards (stage.html) ---------- */
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-5); }
.grade-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 230px;
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: var(--c-surface); border: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.grade-card::before {   /* gold wash that sweeps in on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--c-accent-soft) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.grade-small { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-soft); }
.grade-big {
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 800; line-height: 1.15; color: var(--c-heading);
  margin: var(--sp-1) 0 var(--sp-4); transition: color var(--dur) var(--ease);
}
.grade-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-5); }
.grade-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.grade-meta .icon { color: var(--c-accent-ink); }
.grade-icons { margin-top: auto; display: flex; align-items: center; gap: var(--sp-2); }
.grade-icons span {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--c-surface-2); color: var(--c-accent-ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  transition-delay: calc(var(--k, 0) * 40ms);
}
.grade-icons .more { width: auto; padding: 0 .55rem; font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); }
.grade-go {
  position: absolute; top: var(--sp-5); inset-inline-end: var(--sp-5);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--c-line-strong); color: var(--c-accent-ink);
  transition: all var(--dur) var(--ease);
}
.grade-card:hover, .grade-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-300); }
.grade-card:hover::before, .grade-card:focus-visible::before { opacity: 1; }
.grade-card:hover .grade-big, .grade-card:focus-visible .grade-big { color: var(--c-accent-ink); }
.grade-card:hover .grade-icons span, .grade-card:focus-visible .grade-icons span { transform: translateY(-4px); background: var(--c-accent-soft); }
.grade-card:hover .grade-go, .grade-card:focus-visible .grade-go { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); transform: translateX(-4px); }
.grade-card:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* ---------- Subject cards (grade.html) ---------- */
.subject-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-5); }
.subj-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.subj-top { display: flex; align-items: center; justify-content: space-between; }
.subj-icon {
  width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.subj-icon .icon { width: 28px; height: 28px; }
.subj-price { font-size: var(--fs-xs); color: var(--c-text-soft); text-align: end; line-height: 1.3; }
.subj-price strong { display: block; font-size: var(--fs-lg); color: var(--c-heading); }
.subj-name { font-size: var(--fs-lg); font-weight: 800; color: var(--c-heading); margin: 0; }
.subj-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); margin-top: auto; }
.avatars { display: flex; align-items: center; }
.avatars img, .avatars span {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--c-surface); background: var(--navy-100);
  margin-inline-start: -10px; transition: transform var(--dur) var(--ease);
}
.avatars > :first-child { margin-inline-start: 0; }
.avatars span { display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--navy-800); }
.subj-teachers { font-size: var(--fs-sm); color: var(--c-text-muted); }
.subj-go { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent-ink); }
.subj-go .icon { transition: transform var(--dur-fast) var(--ease); }
.subj-card:hover, .subj-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.subj-card:hover .subj-icon, .subj-card:focus-visible .subj-icon { background: var(--gold-400); color: var(--navy-900); transform: rotate(-6deg) scale(1.06); }
.subj-card:hover .avatars img, .subj-card:hover .avatars span { transform: translateY(-3px); }
.subj-card:hover .avatars > :nth-child(2) { transition-delay: 40ms; }
.subj-card:hover .avatars > :nth-child(3) { transition-delay: 80ms; }
.subj-card:hover .subj-go .icon { transform: translateX(-4px); }
.subj-card:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.subj-card.is-empty { opacity: .6; pointer-events: none; }

/* ---------- Sibling switcher ---------- */
.siblings { margin-top: var(--sp-10); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--c-surface-2); border: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.siblings strong { color: var(--c-heading); margin-inline-end: var(--sp-2); }
.siblings a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .45rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong);
  background: var(--c-surface); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
.siblings a img { width: 22px; height: 22px; }
.siblings a:hover { border-color: var(--gold-400); color: var(--c-heading); transform: translateY(-2px); }

/* ---------- Not found / loading ---------- */
.browse-empty { text-align: center; padding: var(--sp-12) var(--sp-5); border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface); }
.browse-empty[hidden] { display: none; }
.browse-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
.browse-skel[hidden] { display: none; }
.browse-skel span { height: 220px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-line) 50%, var(--c-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .stage-hero-art { width: 150px; height: 150px; }
  .stage-hero-art img { width: 104px; height: 104px; }
  .stage-hero-art::after { inset: -18px; }
}
@media (max-width: 767.98px) {
  .stage-hero .container { grid-template-columns: 1fr; }
  .stage-hero-art { position: absolute; top: 46px; inset-inline-end: 8px; width: 96px; height: 96px; opacity: .95; }
  .stage-hero-art img { width: 70px; height: 70px; }
  .stage-hero-art::after { inset: -10px; }
  .stage-hero h1 { padding-inline-end: 100px; }
  .jsteps-list { grid-template-columns: repeat(4, 1fr); }
  .jsteps-link { flex-direction: column; text-align: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-1); }
  .jsteps-value { display: none; }
  .jsteps-label { font-size: .6875rem; }
  .jsteps-item.is-current .jsteps-label { font-size: var(--fs-xs); }
  .jsteps-dot { width: 26px; height: 26px; font-size: var(--fs-xs); }
}
@media (max-width: 575.98px) {
  .grade-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .grade-card { min-height: 0; padding: var(--sp-4); border-radius: var(--r-lg); }
  .grade-big { font-size: 1.6rem; margin-bottom: var(--sp-2); }
  .grade-meta { font-size: var(--fs-xs); margin-bottom: var(--sp-3); }
  .grade-icons span:nth-child(n+4) { display: none; }
  .grade-icons span { width: 28px; height: 28px; }
  .grade-go { width: 30px; height: 30px; top: var(--sp-3); inset-inline-end: var(--sp-3); }
  .subject-grid2 { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .subj-card { padding: var(--sp-4); }
  .subj-icon { width: 46px; height: 46px; }
  .subj-name { font-size: var(--fs-base); }
  .subj-price strong { font-size: var(--fs-base); }
  .subj-go { display: none; }
  .avatars img, .avatars span { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .stagger > *, .stage-hero .reveal-up { animation: none; }
  .stage-hero-art img, .stage-hero-art::after, .jsteps-item.is-current .jsteps-dot { animation: none; }
}