/* MFTD 2027 - participation hub. Loaded on top of base.css (Participation::index()). */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  padding-bottom: var(--section-y);
}
@media (max-width: 700px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.hub-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* Cards reveal in sequence rather than all at once - a small, discreet cue
   that this is a set of 3 distinct choices, not one block. */
.hub-grid .hub-card:nth-child(1) { transition-delay: 0ms; }
.hub-grid .hub-card:nth-child(2) { transition-delay: 90ms; }
.hub-grid .hub-card:nth-child(3) { transition-delay: 180ms; }

.hub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-accent-text);
}
.hub-card__icon .icon { width: 1.75rem; height: 1.75rem; }

.hub-card h3 { color: var(--c-primary); margin: 0; }
.hub-card p { color: var(--c-muted); font-size: var(--fs-small); margin: 0; flex: 1; }