/* ============================================================
   EJADAH PRO 101 — Landing Page Theme (scoped under .ejadah-home)
   Ported from update/EJADAH PRO 101/src/app/shared.tsx brand tokens
   All rules are scoped to avoid conflicts with Bootstrap/jQuery
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

.ejadah-home {
  /* Brand tokens (from shared.tsx `brand` object) */
  --ej-red: #FF2D32;
  --ej-orange: #FF6B1A;
  --ej-amber: #FFAA18;
  --ej-gold: #FFC62E;
  --ej-off-white: #FFF9EF;
  --ej-white: #FFFFFF;
  --ej-pale-gray: #F5F2EC;
  --ej-border-gray: #E7E2DA;
  --ej-warm-gray: #716D67;
  --ej-charcoal: #1B1B1B;
  --ej-deep-charcoal: #121212;

  --ej-gradient-flow: linear-gradient(135deg, #FF2D32 0%, #FF6B1A 50%, #FFC62E 100%);
  --ej-gradient-glow: linear-gradient(135deg, #FF6B1A 0%, #FFAA18 60%, #FFC62E 100%);

  font-family: 'Inter', sans-serif;
  background: var(--ej-off-white);
  color: var(--ej-charcoal);
}

.ejadah-home * { box-sizing: border-box; }

/* Gradient text helper */
.ej-gradient-text {
  background: var(--ej-gradient-flow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient badge */
.ej-badge {
  background: var(--ej-gradient-flow);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ej-badge.ej-small { font-size: 10px; padding: 2px 8px; }

/* LIVE badge */
.ej-live {
  background: var(--ej-red);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ej-live .ej-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: ej-pulse 1.5s infinite;
  flex-shrink: 0;
}

/* Section header */
.ej-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}
.ej-section-header .ej-label {
  font-family: 'Inter'; font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; color: var(--ej-orange);
  text-transform: uppercase; margin-bottom: 8px;
}
.ej-section-header h2 {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(22px, 3vw, 30px); color: var(--ej-charcoal);
  line-height: 1.2; margin: 0;
}
.ej-section-header .ej-subtitle {
  font-family: 'Inter'; font-size: 14px; color: var(--ej-warm-gray);
  margin-top: 6px; max-width: 480px;
}
.ej-section-header .ej-action {
  font-family: 'Inter'; font-weight: 500; font-size: 13px;
  color: var(--ej-orange); background: none; border: none;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; flex-shrink: 0; text-decoration: none;
}

/* Progress bar */
.ej-progress { background: var(--ej-border-gray); border-radius: 4px; height: 6px; overflow: hidden; }
.ej-progress > span { display: block; height: 100%; background: var(--ej-gradient-flow); border-radius: 4px; transition: width 0.6s ease; }

/* Card hover */
.ej-card-hover { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.ej-card-hover:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(27,27,27,0.1); }

/* Container */
.ej-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Animations */
@keyframes ej-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.9); } }

/* Responsive helpers (replace Tailwind hidden/lg:flex) */
.ej-hide-mobile { display: none; }
@media (min-width: 768px) { .ej-hide-mobile { display: block; } }
.ej-hide-desktop { display: block; }
@media (min-width: 768px) { .ej-hide-desktop { display: none; } }

/* Grid helpers */
.ej-grid-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ej-grid-specialties { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.ej-grid-exams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ej-grid-paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.ej-grid-testimonials { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }