/* ============================================================
   RosterDive — Org Members Masterpage Page
   Stili page-specific non coperti dai componenti DS.
   DS components usati: stat-card, datatable, button, badge,
   section-header, table-section, master-grid, card,
   page-header, back-link, alert, inline-header
   Token: css/tokens.css
   ============================================================ */

/* ── Back link spacing ── */
.org-members-masterpage__back {
  margin: 0 0 var(--space-4) 0;
}

/* ── Hub Card — Stili page-specific per card di navigazione ── */
.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.hub-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.hub-card__icon {
  font-size: var(--font-display-large);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.hub-card__title {
  font-size: var(--font-title-large);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.hub-card__description {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .hub-card__icon {
    font-size: var(--font-display-medium);
  }

  .hub-card__title {
    font-size: var(--font-title-medium);
  }
}