@charset "UTF-8";

/* ===========================================================================
   EXPLORE THE ACADEMY — TOPIC VIEW
   ---------------------------------------------------------------------------
   Class naming convention (so styles can be merged with catalog.css later):
     .ex-*   : shared with catalog.cfm (hero, breadcrumb, filter tabs, CTA form)
     .tp-*   : topic-view only (single-topic header + course cards grid)
   The body uses #explore-page so both views share the same scope. All .ex-*
   rules below are intentionally byte-identical to catalog.css.
   =========================================================================== */

#explore-page {
  --ex-purple: #7C3AED;
  --ex-magenta: #D6336C;
  --ex-teal: #3FB0CA;
  --ex-teal-dark: #1F5F66;
  --ex-yellow: #FFC130;
  --ex-grad: linear-gradient(90deg, #483EC4 0%, #A82348 100%);
  --ex-grad-btn: linear-gradient(90deg, #4A39C8 0%, #A82348 100%);
  --ex-dark: #0B0B13;
  --ex-ink: #14141C;
  --ex-muted: #5b6170;
  --ex-line: #e7e8ee;
  --ex-soft: #f5f6f9;
  --ex-blue:   #2D6BE4;
  --ex-orange: #F97316;
  --ex-pink:   #EC4899;
  --ex-green:  #22C55E;
  --ex-violet: #A21CAF;
  font-family: 'Poppins', system-ui, sans-serif;
  overflow-x: hidden;
}

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html, body { overflow-x: hidden; }
#explore-page,
#explore-page > main,
#explore-page section { position: relative; overflow-x: clip; }

/* Reveal animation pre-state */
#explore-page .ex-reveal {
  opacity: 0;
  transform: translateY(0);
  will-change: transform, opacity;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}
.no-gsap #explore-page .ex-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   COLOR TOKEN HELPERS (shared)
   ========================================================================== */
#explore-page .ex-bg-blue   { background: var(--ex-blue); }
#explore-page .ex-bg-orange { background: var(--ex-orange); }
#explore-page .ex-bg-pink   { background: var(--ex-pink); }
#explore-page .ex-bg-green  { background: var(--ex-green); }
#explore-page .ex-bg-violet { background: var(--ex-violet); }

#explore-page .ex-tx-blue   { color: var(--ex-blue) !important; }
#explore-page .ex-tx-orange { color: var(--ex-orange) !important; }
#explore-page .ex-tx-pink   { color: var(--ex-pink) !important; }
#explore-page .ex-tx-green  { color: var(--ex-green) !important; }
#explore-page .ex-tx-violet { color: var(--ex-violet) !important; }

/* ==========================================================================
   HERO  (shared)
   ========================================================================== */
#explore-page .ex-hero {
  position: relative;
  padding: 40px 0px;
  color: #fff;
  background: #0B1117;
  background-image:
    linear-gradient(180deg, rgba(8,11,18,.92) 0%, rgba(8,11,18,.78) 60%, rgba(8,11,18,.92) 100%),
    url('/academy/img/academy/hero-grid.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#explore-page .ex-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 380px at 18% 30%, rgba(72,62,196,.20), transparent 65%),
    radial-gradient(700px 360px at 90% 90%, rgba(168,35,72,.18), transparent 65%);
  pointer-events: none;
}

#explore-page .ex-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

#explore-page .ex-hero > .container { position: relative; z-index: 2; }

#explore-page .ex-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255,255,255,1);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
#explore-page .ex-breadcrumb-list {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#explore-page .ex-breadcrumb-list li {
  display: inline-flex !important;
  align-items: center;
  list-style: none !important;
}
#explore-page .ex-breadcrumb-list li::before,
#explore-page .ex-breadcrumb-list li::marker { content: none !important; }
#explore-page .ex-breadcrumb-list li:not(:last-child)::after {
  content: "\203A";
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  opacity: .55;
  color: #fff;
  margin: 0 10px;
}
#explore-page .ex-breadcrumb a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color .2s ease;
}
#explore-page .ex-breadcrumb a:hover { color: #fff; }
#explore-page .ex-breadcrumb .current {
  color: var(--ex-yellow);
  font-weight: 500;
}
#explore-page .ex-breadcrumb i { font-size: 11px; opacity: .55; }

#explore-page .ex-hero-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(24px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 22px;
  color: #fff;
  max-width: inherit;
}

#explore-page .ex-hero-lead {
  font-size: clamp(1rem, 1.2vw, 16px);
  line-height: 1.7;
  color: rgb(255, 255, 255);
  margin: 0;
}

/* ==========================================================================
   FILTER TABS  (shared)
   ========================================================================== */
#explore-page .ex-filters-wrap {
  background: #f3f4f7;
  border-bottom: 1px solid #e3e5ec;
  position: sticky;
  top: 0;
  z-index: 20;
}

#explore-page .ex-filters {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
#explore-page .ex-filters::-webkit-scrollbar { height: 4px; }
#explore-page .ex-filters::-webkit-scrollbar-thumb { background: #cfd2dc; border-radius: 2px; }

#explore-page .ex-filters li {
  flex: 0 0 auto;
  padding: 0;
}

#explore-page .ex-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #9ca0ad;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
#explore-page .ex-filter:hover { color: var(--ex-ink); }
#explore-page .ex-filter.is-active {
  color: var(--ex-ink);
  border-bottom-color: var(--ex-ink);
}

/* ---- Underline color follows the dot color (hover + active) ---- */
#explore-page .ex-filter:has(.ex-dot.ex-c-blue):hover,
#explore-page .ex-filter:has(.ex-dot.ex-c-blue).is-active     { border-bottom-color: var(--ex-blue) !important; }
#explore-page .ex-filter:has(.ex-dot.ex-c-orange):hover,
#explore-page .ex-filter:has(.ex-dot.ex-c-orange).is-active   { border-bottom-color: var(--ex-orange) !important; }
#explore-page .ex-filter:has(.ex-dot.ex-c-pink):hover,
#explore-page .ex-filter:has(.ex-dot.ex-c-pink).is-active     { border-bottom-color: var(--ex-pink) !important; }
#explore-page .ex-filter:has(.ex-dot.ex-c-green):hover,
#explore-page .ex-filter:has(.ex-dot.ex-c-green).is-active    { border-bottom-color: var(--ex-green) !important; }
#explore-page .ex-filter:has(.ex-dot.ex-c-violet):hover,
#explore-page .ex-filter:has(.ex-dot.ex-c-violet).is-active   { border-bottom-color: var(--ex-violet) !important; }

#explore-page .ex-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
#explore-page .ex-dot.ex-c-blue   { background: var(--ex-blue); }
#explore-page .ex-dot.ex-c-orange { background: var(--ex-orange); }
#explore-page .ex-dot.ex-c-pink   { background: var(--ex-pink); }
#explore-page .ex-dot.ex-c-green  { background: var(--ex-green); }
#explore-page .ex-dot.ex-c-violet { background: var(--ex-violet); }

/* ==========================================================================
   TOPIC HEADER + COURSE CARDS  (topic-view only)
   ========================================================================== */
#explore-page .tp-topic {
  padding: 70px 0 90px;
  background: #fff;
}

#explore-page .tp-topic-head {
  margin-bottom: 44px;
  max-width: 1100px;
}

#explore-page .tp-topic-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

#explore-page .tp-topic-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ex-ink);
  margin: 0 0 14px;
  line-height: 1.1;
}

#explore-page .tp-topic-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ex-muted);
  margin: 0;
}

/* Course card */
#explore-page .tp-ccard {
  position: relative;
  background: #fff;
  border: 1px solid var(--ex-line);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 16px rgba(15, 22, 36, .04);
}
#explore-page .tp-ccard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(15, 22, 36, .10);
}

#explore-page .tp-ccard-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef0f4;
  border-bottom: 4px solid var(--ex-blue);
}
#explore-page .tp-ccard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
#explore-page .tp-ccard:hover .tp-ccard-thumb img { transform: scale(1.04); }

#explore-page .tp-ccard-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 400;
  padding: 3px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

#explore-page .tp-ccard-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#explore-page .tp-ccard-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ex-ink);
  margin: 0 0 10px;
  line-height: 1.3;
}
#explore-page .tp-ccard-title a {
  color: inherit;
  text-decoration: none;
}
#explore-page .tp-ccard-title a:hover { color: var(--ex-teal); }

#explore-page .tp-ccard-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ex-muted);
  margin: 0 0 18px;
  flex: 1;
}

#explore-page .tp-ccard-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #6f7484;
  font-size: 14px;
  margin-bottom: 16px;
}
#explore-page .tp-ccard-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#explore-page .tp-ccard-meta i { font-size: 13px; }

#explore-page .tp-ccard-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  background: var(--ex-teal);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  border-radius: 8px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  margin-top: auto;
}
#explore-page .tp-ccard-cta:hover {
  background: var(--ex-teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(31, 95, 102, .25);
}

/* Per-topic accent for the course-card thumb underline.
   The class is added on <body> (e.g. data-topic="brand-web-presence")
   or via the parent section (data-topic="..."). */
#explore-page .tp-topic[data-topic="marketing-foundations"]      .tp-ccard-thumb { border-bottom-color: var(--ex-blue); }
#explore-page .tp-topic[data-topic="brand-web-presence"]         .tp-ccard-thumb { border-bottom-color: var(--ex-orange); }
#explore-page .tp-topic[data-topic="lead-generation-conversions"] .tp-ccard-thumb { border-bottom-color: var(--ex-pink); }
#explore-page .tp-topic[data-topic="analytics-strategy"]         .tp-ccard-thumb { border-bottom-color: var(--ex-green); }
#explore-page .tp-topic[data-topic="ai-industrial-businesses"]   .tp-ccard-thumb { border-bottom-color: var(--ex-violet); }

/* ==========================================================================
   FREE ACCESS CTA + FORM  (shared)
   ========================================================================== */
#explore-page .ex-cta-wrap {
  padding: 30px 0 100px;
  background: #fff;
}

#explore-page .ex-cta-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 22, 36, .10);
  background: #fff;
}

#explore-page .ex-cta-left {
  position: relative;
  padding: 30px 50px;
  color: #fff;
  background: linear-gradient(300deg, #3FB0CA 0%, #535E73 110%)
}
#explore-page .ex-cta-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: .9;
}
#explore-page .ex-cta-left > * { position: relative; z-index: 2; }

#explore-page .ex-cta-eyebrow {
  display: inline-block;
  color: var(--ex-yellow);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

#explore-page .ex-cta-title {
  font-size: clamp(2rem, 3vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 22px;
  color: #fff;;
}

#explore-page .ex-cta-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  margin: 0 0 26px;
  max-width: 460px;
}

#explore-page .ex-cta-checks {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#explore-page .ex-cta-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}
#explore-page .ex-cta-checks i {
  color: var(--ex-yellow);
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Form side */
#explore-page .ex-cta-right {
  padding: 30px 50px;
  background: #fff;
}

#explore-page .ex-cta-form-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 26px;
  color: var(--ex-ink);
}

#explore-page .ex-cta-form label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ex-ink);
  margin-bottom: 6px;
  display: block;
}
#explore-page .ex-req { color: #E11D48; }

#explore-page .ex-cta-form .form-control {
  width: 100%;
  border: 1px solid #d9dce3;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ex-ink);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#explore-page .ex-cta-form .form-control::placeholder { color: #b5b9c2; }
#explore-page .ex-cta-form .form-control:focus {
  outline: none;
  border-color: var(--ex-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

#explore-page .ex-cta-submit {
  display: inline-block;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--ex-grad-btn);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  margin-top: 6px;
}
#explore-page .ex-cta-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(72,62,196,.25);
  filter: brightness(1.05);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  #explore-page .ex-hero { padding: 90px 0 70px; }
  #explore-page .ex-breadcrumb { justify-content: center; }

  #explore-page .ex-cta-card { grid-template-columns: 1fr; }
  #explore-page .ex-cta-left,
  #explore-page .ex-cta-right { padding: 44px 36px; }
}

@media (max-width: 767.98px) {
  #explore-page .ex-hero { padding: 70px 0 56px; }
  #explore-page .ex-hero-title { font-size: 2.1rem; }
  #explore-page .ex-hero-lead { font-size: 15px; }
  #explore-page .ex-breadcrumb { font-size: 14px; }

  #explore-page .ex-filter { padding: 18px 12px; font-size: 14px; }

  #explore-page .tp-topic { padding: 50px 0 70px; }
  #explore-page .tp-topic-head { margin-bottom: 30px; }

  #explore-page .ex-cta-left,
  #explore-page .ex-cta-right { padding: 36px 26px; }
  #explore-page .ex-cta-title { font-size: 1.7rem; }
  #explore-page .ex-cta-form-title { font-size: 1.35rem; }
}
@media (max-width: 380px) {
  #explore-page .ex-breadcrumb {
    font-size: 12px;
  }
  #explore-page .ex-breadcrumb-list li:not(:last-child)::after {
    margin: 0 4px;
  }
}