/* Home: course catalogue */
.catalog-hero {
  background: linear-gradient(135deg, #1a1a4e 0%, #303078 50%, #1a1a4e 100%);
  color: var(--white);
  padding: 72px 0 56px; position: relative; overflow: hidden;
}
.catalog-hero::before {
  content: ''; position: absolute; top: -30%; left: -10%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(108,107,216,0.3) 0%, transparent 70%); pointer-events: none;
}
.catalog-hero::after {
  content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(156,155,232,0.18) 0%, transparent 70%); pointer-events: none;
}
.catalog-hero .wrap { position: relative; z-index: 1; }
.catalog-hero h1 { font-size: 2.75rem; max-width: 650px; margin-top: 10px; line-height: 1.15; }

.search-row { display: flex; gap: 12px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md); padding: 12px 18px; min-width: 260px; color: var(--white);
}
.search-box:focus-within { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.18); }
.search-box input {
  border: none; outline: none; font-size: 0.95rem; width: 100%;
  font-family: var(--body); background: transparent; color: var(--white);
}
.search-box input::placeholder { color: rgba(255,255,255,0.6); }
/* An inline SVG rather than the 🔍 emoji: the emoji renders in colour on most
   phones, which clashes with the monochrome navy control it sits inside. */
.search-icon { display: flex; flex: 0 0 auto; color: rgba(255,255,255,0.7); }
.search-icon svg { width: 18px; height: 18px; }

.catalog-meta { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 10px; color: var(--slate); font-size: 0.88rem; }
.meta-heading { font-size: 0.88rem; font-weight: 400; letter-spacing: 0; }
.meta-heading strong { color: var(--ink); }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 10px 0 72px; }
.course-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.card-banner {
  height: 120px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 2.2rem; font-weight: 700; color: var(--white);
}
.card-eyebrow { font-size: 0.75rem; color: var(--primary-ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.course-card .card-title { font-size: 1.25rem; margin-top: 6px; }
.card-desc { color: var(--slate); font-size: 0.9rem; margin-top: 10px; flex: 1; line-height: 1.5; }
.level-tag { font-size: 0.75rem; font-weight: 600; color: var(--primary-ink); background: var(--primary-light); padding: 4px 10px; border-radius: var(--radius-sm); }
.topic-count { font-size: 0.8rem; color: var(--slate); font-weight: 500; }
.no-results { color: var(--slate); padding: 0 0 60px; }

/* Latest articles */
.latest-section { background: var(--panel); border-top: 1px solid var(--line); padding-top: 56px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
/* The heading is a flex item and was shrinking to fit beside the "Updated"
   line, clipping the tail of the sentence on narrow phones. Letting it take
   the free space and wrap to its own line keeps the whole line readable. */
.section-head h2 { font-size: 2rem; margin-top: 4px; flex: 1 1 auto; min-width: 0; }
.section-head > span { flex: 0 0 auto; }

/* Category pills beside the course search box */
.pill-scroll { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }


@media (max-width: 1024px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .course-grid { grid-template-columns: 1fr; }
  .catalog-hero { padding: 44px 0 36px; }
  .catalog-hero h1 { font-size: 2rem; }
  .search-box { min-width: 0; width: 100%; }
  /* One horizontally scrolling row of pills, so the cards stay near the top. */
  .pill-scroll { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .pill-scroll::-webkit-scrollbar { display: none; }
  .pill-scroll .pill { flex: 0 0 auto; white-space: nowrap; }
}

/* =====================================================================
   Home landing page (templates/home.php). Everything is prefixed "lp-"
   so it cannot leak into the /courses catalogue that shares this file.
   ===================================================================== */

/* ---- Hero ---- */
.lp-hero {
  position: relative; overflow: hidden; color: var(--white);
  background: radial-gradient(120% 90% at 85% 0%, #3b3a9a 0%, transparent 55%),
              linear-gradient(160deg, #0f0f2e 0%, #1a1a4e 55%, #262670 100%);
  padding: 88px 0 96px;
}
.lp-hero::after {
  /* Fine dot grid: texture without an image request. */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.lp-hero-glow {
  position: absolute; width: 520px; height: 520px; left: -160px; bottom: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,107,216,.45), transparent 65%); pointer-events: none;
}
.lp-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center;
}
.lp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.9);
}
.lp-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,.2); }
.lp-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.035em;
  margin-top: 20px; font-weight: 800;
}
.lp-grad {
  display: block;
  background: linear-gradient(90deg, #A5B4FC 0%, #C4B5FD 45%, #67E8F9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-lead { margin-top: 18px; max-width: 540px; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.75); }

.lp-search {
  display: flex; align-items: center; gap: 8px; margin-top: 30px; max-width: 560px;
  padding: 6px 6px 6px 16px; border-radius: 14px;
  background: var(--white); box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
}
.lp-hero-copy { min-width: 0; }
.lp-search { width: 100%; box-sizing: border-box; }
.lp-search input { width: 100%; -webkit-appearance: none; appearance: none; }
.lp-search input::-webkit-search-decoration, .lp-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lp-search .btn { flex: none; }
.lp-search-icon { width: 20px; height: 20px; flex: none; color: var(--slate); }
.lp-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink); padding: 10px 4px;
}
.lp-search input::placeholder { color: #94A3B8; }
.lp-search .btn { padding: 12px 22px; border-radius: 10px; }
.lp-search:focus-within { box-shadow: 0 0 0 4px rgba(165,180,252,.45), 0 18px 40px -12px rgba(0,0,0,.45); }


.lp-stats { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.lp-stats li { color: rgba(255,255,255,.65); font-size: .9rem; }
.lp-stats strong { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--white); font-weight: 800; letter-spacing: -0.02em; }

/* Hero visual: a course "window" */
.lp-hero-visual { position: relative; padding: 24px 10px 40px; }
.lp-window {
  position: relative; border-radius: 18px; overflow: hidden; background: var(--white); color: var(--ink);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(1.5deg);
}
.lp-window-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #F1F1F8; border-bottom: 1px solid var(--line); }
.lp-window-bar span { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.lp-window-bar span:nth-child(2) { background: #FBBF24; }
.lp-window-bar span:nth-child(3) { background: #34D399; }
.lp-window-bar em { margin-left: 10px; font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--slate); }
.lp-window-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--white); }
.lp-window-icon {
  width: 46px; height: 46px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
}
.lp-window-head strong { display: block; font-size: 1.05rem; }
.lp-window-head small { font-size: .78rem; opacity: .85; }
.lp-window-list { list-style: none; margin: 0; padding: 14px 20px 6px; display: grid; gap: 4px; }
.lp-window-list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--slate-dark); }
.lp-window-list li.now { background: var(--primary-light); color: var(--primary-ink); }
.lp-step {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; border: 1.5px solid var(--line-strong); color: var(--slate);
}
.lp-step svg { width: 13px; height: 13px; }
.done .lp-step { background: #10B981; border-color: #10B981; color: var(--white); }
.now .lp-step { border-color: var(--primary); color: var(--primary-ink); background: var(--white); }
.lp-window-progress { margin: 10px 20px 0; height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.lp-window-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #8B5CF6); }
.lp-window-foot { padding: 10px 20px 18px; font-size: .75rem; color: var(--slate); }
.lp-float {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px; font-size: .82rem; font-weight: 700; color: var(--ink);
  background: var(--white); box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
  animation: lp-bob 6s ease-in-out infinite;
}
.lp-float span {
  width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-ink); font-size: .85rem;
}
.lp-float-a { top: 0; right: -6px; }
.lp-float-b { bottom: -10px; left: -18px; animation-delay: -3s; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .lp-float { animation: none; } }

/* ---- Shared section frame ---- */
.lp-section { padding: 80px 0; }
.lp-tint { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.lp-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.lp-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.03em; margin-top: 6px; line-height: 1.15; }
.lp-sub { margin-top: 8px; color: var(--slate); font-size: 1rem; max-width: 560px; }
.lp-all {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--primary-ink);
  background: var(--primary-light); transition: background .2s, color .2s;
}
.lp-all svg { width: 16px; height: 16px; transition: transform .2s; }
.lp-all:hover { background: var(--primary); color: var(--white); }
.lp-all:hover svg { transform: translateX(3px); }
.lp-all-mobile { display: none; }
.lp-grid { padding: 0; }

/* ---- Why ---- */
.lp-why { padding: 0 0 80px; }
.lp-why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-sm);
}
.lp-why-item { padding: 28px 26px; }
.lp-why-item + .lp-why-item { border-left: 1px solid var(--line); }
.lp-why-icon {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-light), #E0E7FF); color: var(--primary-ink);
  font-family: var(--mono); font-weight: 700; font-size: 1rem; margin-bottom: 14px;
}
.lp-why-item h3 { font-size: 1.02rem; }
.lp-why-item p { margin-top: 6px; color: var(--slate); font-size: .9rem; line-height: 1.55; }

/* ---- Tools ---- */
.lp-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-tool {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lp-tool:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-tool-icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-ink);
}
.lp-tool-icon svg { width: 22px; height: 22px; }
.lp-tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lp-tool-group { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.lp-tool-text strong { font-size: 1rem; color: var(--ink); }
.lp-tool-short { font-size: .86rem; color: var(--slate); line-height: 1.45; }
.lp-tool-go { flex: none; color: var(--slate-light); align-self: center; transition: color .2s, transform .2s; }
.lp-tool-go svg { width: 18px; height: 18px; display: block; }
.lp-tool:hover .lp-tool-go { color: var(--primary); transform: translateX(3px); }
.lp-groups { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lp-groups a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .2s, color .2s;
}
.lp-groups a:hover { border-color: var(--primary); color: var(--primary-ink); }
.lp-groups span { display: inline-flex; color: var(--primary); }
.lp-groups span svg { width: 16px; height: 16px; }
.lp-groups em { font-style: normal; font-size: .75rem; color: var(--slate); background: var(--panel-2); padding: 1px 8px; border-radius: 99px; }

/* ---- Jobs ---- */
.lp-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-job {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .2s;
}
.lp-job:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.lp-job-dept { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.lp-job h3 { font-size: 1.08rem; }
.lp-job-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-job-meta span { font-size: .78rem; padding: 3px 10px; border-radius: 99px; background: var(--panel-2); color: var(--slate-dark); }
.lp-job-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--primary-ink); }
.lp-job-go svg { width: 16px; height: 16px; }

/* ---- Closing CTA ---- */
.lp-cta-wrap { padding: 80px 0; }
.lp-cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 48px 52px; border-radius: 24px; color: var(--white);
  background: radial-gradient(80% 140% at 100% 0%, #4F46E5 0%, transparent 60%), linear-gradient(135deg, #1a1a4e, #303078);
  box-shadow: 0 30px 60px -30px rgba(48,48,120,.7);
}
.lp-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; }
.lp-cta p { margin-top: 8px; color: rgba(255,255,255,.75); max-width: 480px; }
.lp-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-btn-light { background: var(--white); color: var(--primary-ink); }
.lp-btn-light:hover { background: #EEF2FF; color: var(--primary-ink); }
.btn-hero-ghost { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.3); }
.btn-hero-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); color: var(--white); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-hero-visual { max-width: 460px; }
  .lp-tools, .lp-jobs { grid-template-columns: repeat(2, 1fr); }
  .lp-why-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-why-item:nth-child(3) { border-left: 0; }
  .lp-why-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 768px) {
  .lp-hero { padding: 48px 0 56px; }
  .lp-hero-visual { display: none; }
  .lp-lead { font-size: 1rem; }
  .lp-search { padding: 5px 5px 5px 12px; }
  .lp-search .btn { padding: 11px 16px; }
  .lp-stats { gap: 10px 22px; margin-top: 28px; }
  .lp-stats strong { font-size: 1.4rem; }
  .lp-section { padding: 52px 0; }
  .lp-head { margin-bottom: 22px; }
  .lp-head .lp-all { display: none; }
  .lp-all-mobile { display: flex; width: 100%; margin-top: 22px; }
  .lp-tools, .lp-jobs { grid-template-columns: 1fr; gap: 12px; }
  .lp-tool { padding: 16px; }
  .lp-tool:nth-child(n+5) { display: none; }
  .lp-why { padding-bottom: 52px; }
  .lp-cta-wrap { padding: 52px 0; }
  .lp-cta { padding: 32px 24px; border-radius: 20px; }
  .lp-cta-actions, .lp-cta-actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .lp-why-grid { grid-template-columns: 1fr; }
  .lp-why-item + .lp-why-item { border-left: 0; border-top: 1px solid var(--line); }
  .lp-why-item { padding: 20px; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
  .lp-why-icon { margin: 0; grid-row: span 2; }
  .lp-why-item p { margin-top: 2px; }
  .lp-search { gap: 6px; padding: 4px 4px 4px 12px; border-radius: 12px; }
  .lp-search-icon { width: 18px; height: 18px; }
  .lp-search input { font-size: 16px; padding: 10px 2px; }
  .lp-search input::placeholder { font-size: .9rem; }
  .lp-search .btn { padding: 10px 14px; font-size: .85rem; }
  .lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .lp-stats li { font-size: .78rem; }
  .lp-stats strong { font-size: 1.25rem; }
}
@media (max-width: 360px) {
  .lp-search-icon { display: none; }
  .lp-search .btn { padding: 10px 12px; }
}