/* ═══════════════════════════════════════════════════════════
   COLAB — learn.css
   Section 06 — LEARN
   Theme: .section--mid (warm lifted dark)
   ═══════════════════════════════════════════════════════════ */

.learn-grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .learn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* CARD */
.learn-card {
  padding: var(--space-md);
  text-align: left;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.learn-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 40px rgba(26,16,8,0.12),
    0 0 20px rgba(249,115,22,0.2);
}

/* ICON */
.learn-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
}

.learn-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* LINK */
.learn-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--orange);
  text-shadow: var(--glow-text);
  text-decoration: none;
  transition: var(--t-base);
}

.learn-link:hover {
  opacity: 0.8;
}

/* CTA */
.learn-cta {
  margin-top: var(--space-lg);
  text-align: center;
}

/* Section header styling for mid sections */
.learn__headline {
  margin-top: var(--space-sm);
}

.learn__body {
  margin-top: var(--space-sm);
  max-width: 48ch;
  color: var(--mid-muted);
}

/* Animation — uses global .reveal class from cards.css */