/* Custom Card Grid — frontend */
.ccg-grid {
  --ccg-columns: 3;
  --ccg-gap: 20px;
  --ccg-img-h: 170px;
  --ccg-radius: 18px;
  --ccg-accent: #2271b1;
  display: grid;
  grid-template-columns: repeat(var(--ccg-columns), minmax(0, 1fr));
  gap: var(--ccg-gap);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 1024px) { .ccg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .ccg-grid { grid-template-columns: 1fr; } }

.ccg-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: var(--ccg-radius);
  overflow: hidden;
  box-shadow: 0 14px 40px -12px rgba(12,25,54,.16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ccg-grid--hover .ccg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -14px rgba(12,25,54,.26);
}

.ccg-card__media { height: var(--ccg-img-h); overflow: hidden; background: #eef1f5; }
.ccg-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ccg-grid--hover .ccg-card:hover .ccg-card__img { transform: scale(1.05); }

.ccg-card__body { padding: 22px 20px 26px; text-align: center; flex: 1; display: flex; flex-direction: column; }
.ccg-card__emoji {
  font-size: 28px; line-height: 56px; width: 56px; height: 56px;
  background: #fff; border-radius: 50%;
  margin: -50px auto 0; position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ccg-card__title { margin: 14px 0 6px; font-size: 20px; font-weight: 700; color: #0c1936; }
.ccg-card__text  { margin: 0; font-size: 14px; line-height: 1.6; color: #677383; }
.ccg-card__btn {
  margin: 18px auto 0; display: inline-block; text-decoration: none;
  background: var(--ccg-accent); color: #fff; font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: 999px; transition: opacity .2s ease;
}
.ccg-card__btn:hover { opacity: .88; color: #fff; }
.ccg-empty-note { color: #b32d2e; font-style: italic; }