/* Design token bridge — references Webflow's published CSS custom properties
   with safe fallbacks. TODO(prereq-7): inspect melodev.com's published CSS and
   replace the --wf-* names below with the actual variable names from the site. */
:host {
  --melo-font-body: var(--wf-font-body, "Inter", system-ui, sans-serif);
  --melo-font-heading: var(--wf-font-heading, var(--melo-font-body));
  --melo-color-text: var(--wf-color-text, #1a1a2e);
  --melo-color-muted: var(--wf-color-muted, #6b7280);
  --melo-color-bg: var(--wf-color-bg, #ffffff);
  --melo-color-surface: var(--wf-color-surface, #f9fafb);
  --melo-color-border: var(--wf-color-border, #e5e7eb);
  --melo-color-accent: var(--wf-color-accent, #2563eb);
  --melo-color-accent-text: var(--wf-color-accent-text, #ffffff);
  --melo-radius: var(--wf-border-radius, 12px);
  --melo-radius-sm: 8px;
  --melo-space-xs: 6px;
  --melo-space-sm: 12px;
  --melo-space-md: 20px;
  --melo-space-lg: 32px;
  --melo-space-xl: 48px;
}

.mlw-cg-root {
  font-family: var(--melo-font-body);
  color: var(--melo-color-text);
  width: 100%;
}
.mlw-cg-heading {
  font-family: var(--melo-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 var(--melo-space-lg);
}
.mlw-cg-grid { display: grid; gap: var(--melo-space-md); }
.mlw-cg-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mlw-cg-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlw-cg-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .mlw-cg-grid[data-columns="3"],
  .mlw-cg-grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mlw-cg-grid[data-columns="2"],
  .mlw-cg-grid[data-columns="3"],
  .mlw-cg-grid[data-columns="4"] { grid-template-columns: 1fr; }
}
.mlw-cg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--melo-color-bg);
  border: 1px solid var(--melo-color-border);
  border-radius: var(--melo-radius);
  padding: var(--melo-space-lg) var(--melo-space-md);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.mlw-cg-card:hover {
  transform: translateY(-2px);
  border-color: var(--melo-color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.mlw-cg-logo-wrap {
  width: 120px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--melo-space-md);
}
.mlw-cg-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mlw-cg-logo-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--melo-color-accent);
  color: var(--melo-color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}
.mlw-cg-body { display: flex; flex-direction: column; gap: var(--melo-space-xs); }
.mlw-cg-name {
  font-family: var(--melo-font-heading);
  font-size: 1.05rem;
  margin: 0;
}
.mlw-cg-message {
  padding: var(--melo-space-lg);
  text-align: center;
  color: var(--melo-color-muted);
}