/* ============================================
   DEMAND GENERATION ACADEMY — extends styles.css
   Reuses existing design tokens and most components
   (.approach-list, .resources-grid, .reasons-grid, .final-cta, etc.)
   Only a handful of new, page-specific rules live here.
   ============================================ */

.academy-hero { min-height: 70vh; padding-top: 140px; padding-bottom: 60px; }
.academy-hero .hero-content { height: auto; padding-bottom: 24px; }

/* ---------- Plain text sections (Intro / Closing) ---------- */
.text-section { padding: var(--section-pad) 0; }
.text-section .section-head { max-width: 72ch; }

/* ---------- LEARNING TRACKS — card grid with background art ---------- */
.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1000px) { .track-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .track-grid { grid-template-columns: 1fr; } }

.track-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 32px 28px 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}
.track-card:hover { transform: translateY(-6px); border-color: var(--signal); }

/* unique gradient wash per card, cycling through the palette */
.track-card:nth-child(6n+1) { background: radial-gradient(120% 100% at 100% 0%, rgba(46,196,160,0.16), transparent 60%), var(--surface); }
.track-card:nth-child(6n+2) { background: radial-gradient(120% 100% at 100% 0%, rgba(92,130,255,0.16), transparent 60%), var(--surface); }
.track-card:nth-child(6n+3) { background: radial-gradient(120% 100% at 100% 0%, rgba(255,154,61,0.14), transparent 60%), var(--surface); }
.track-card:nth-child(6n+4) { background: radial-gradient(120% 100% at 100% 0%, rgba(46,196,160,0.14), transparent 60%), var(--surface); }
.track-card:nth-child(6n+5) { background: radial-gradient(120% 100% at 100% 0%, rgba(255,176,102,0.14), transparent 60%), var(--surface); }
.track-card:nth-child(6n+6) { background: radial-gradient(120% 100% at 100% 0%, rgba(92,130,255,0.14), transparent 60%), var(--surface); }

.track-card-bg {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 140px;
  height: 140px;
  color: var(--paper);
  opacity: 0.06;
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
  pointer-events: none;
}
.track-card-bg svg { width: 100%; height: 100%; }
.track-card:hover .track-card-bg { opacity: 0.12; transform: scale(1.08) rotate(4deg); }

.track-card:nth-child(6n+1) .track-card-bg,
.track-card:nth-child(6n+4) .track-card-bg { color: var(--signal); }
.track-card:nth-child(6n+2) .track-card-bg,
.track-card:nth-child(6n+6) .track-card-bg { color: var(--signal-soft); }
.track-card:nth-child(6n+3) .track-card-bg,
.track-card:nth-child(6n+5) .track-card-bg { color: var(--amber); }

.track-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}
.track-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--hairline);
}
.track-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-soft);
  border: 1px solid var(--hairline);
  padding: 5px 12px;
  border-radius: 999px;
}
.track-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.track-card p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}
.track-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.track-topics span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  border: 1px solid var(--hairline);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ---------- Industry chip row (Learning Resources) ---------- */
.industries-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--paper-dim);
  border: 1px solid var(--hairline);
  padding: 8px 16px;
  border-radius: 999px;
  transition: border-color 0.3s, color 0.3s;
}
.chip:hover { border-color: var(--signal); color: var(--paper); }