/* ═══════════════════════════ lances.css ═══════════════════════════ */

.lances-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.lances-intro h2 { margin-bottom: 16px; }
.lances-intro p { color: var(--text-dim); margin-bottom: 26px; }

.lances-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.lance-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px 24px 84px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.lance-card:hover {
  transform: translateX(4px);
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.lance-num {
  position: absolute;
  left: 22px; top: 24px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 12px;
  box-shadow: var(--shadow-blue);
}
.lance-card h3 { margin-bottom: 6px; }
.lance-card p { font-size: 0.95rem; color: var(--text-dim); }

@media (max-width: 900px) {
  .lances-grid { grid-template-columns: 1fr; gap: 36px; }
}