/* =========================================================
   cards.css — shared grid system, the glass card and the
   icon badge used across Services, Roles, Industries, etc.
   ========================================================= */

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .4s ease, background-color .4s ease;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
  background: linear-gradient(var(--green), var(--green-bright)); opacity: .9;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: rgba(124, 179, 66, 0.5); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.98rem; }

.icon-badge {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.18), rgba(124, 179, 66, 0.06));
  color: var(--green); margin-bottom: 18px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease, box-shadow .3s ease;
}
.icon-badge svg, .icon-badge img { width: 26px; height: 26px; }

/* icon pops + glows when its card is hovered */
.card:hover .icon-badge,
.ind-card:hover .icon-badge {
  transform: scale(1.12) rotate(-5deg);
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.32), rgba(124, 179, 66, 0.12));
  box-shadow: 0 6px 18px -6px rgba(124, 179, 66, 0.6);
}