/* /public/css/pages/home-collab-types.css
   Growth-tools cards on the homepage, rebuilt onto the Zero-Thinking
   design system alongside home.css. Section background lives in home.css. */

.collab-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 920px;
  margin: var(--space-8) auto 0;
}
@media (max-width: 640px) { .collab-types-grid { grid-template-columns: 1fr; } }

/* Keep the header row consistent: icon top-aligned so a one-line and a
   three-line title don't shove the icon to different vertical spots. */
.collab-type-card__header { align-items: flex-start; }
.collab-type-card__icon { margin-top: 2px; }

.collab-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.collab-type-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Featured tool card gets a subtle indigo edge */
.collab-type-card--tool { border-color: var(--color-primary-light); }
.collab-card-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.collab-type-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
/* Reserve room on the top row so the corner "New Tool" badge never sits on
   top of the title (badge is absolute top-right). */
.collab-type-card--tool .collab-type-card__header { padding-right: 90px; }
@media (max-width: 400px) {
  .collab-type-card--tool .collab-type-card__header { padding-right: 78px; }
}
.collab-type-card__icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 15px;
  font-size: 1.4rem;
  color: var(--color-white);
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-light));
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}
.collab-type-card__title-group { flex-grow: 1; min-width: 0; }
.collab-type-card__title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-gray-900); margin: 0 0 2px; }
.collab-type-card__goal { font-size: var(--font-size-sm); color: var(--color-primary-dark); font-weight: 700; }

.collab-type-card__description { color: var(--color-gray-600); line-height: 1.6; margin: 0 0 var(--space-4); flex-grow: 1; }

/* Meta row: platform + credit cost (credit cost stays visible per rules) */
.collab-type-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.meta-item { display: flex; align-items: center; gap: var(--space-2); }
.meta-item i { width: 1em; text-align: center; font-size: 1.05em; }
.meta-item strong { color: var(--color-gray-900); font-weight: 700; }