/*
 * links.css — styles for the links feature.
 *
 * Shared component classes (.card, .btn, .badge, .form, .page-header, etc.)
 * live in application.css.
 */

/* -------------------------------------------------------------------------- */
/* Category sections                                                         */
/* -------------------------------------------------------------------------- */

.link-category { margin-bottom: var(--fh-space-6); }
.link-category:last-child { margin-bottom: 0; }

.link-category-title {
  margin: 0 0 var(--fh-space-3);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fh-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Card grid                                                                  */
/* -------------------------------------------------------------------------- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--fh-space-4);
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--fh-space-1);
}

.link-title {
  font-weight: 700;
  color: var(--fh-text);
  text-decoration: none;
}
.link-title:hover { color: var(--fh-accent); }

/* Small external-link affordance after the title. */
.link-title::after {
  content: "\2197";
  display: inline-block;
  margin-left: var(--fh-space-1);
  font-weight: 400;
  color: var(--fh-text-muted);
}
.link-title:hover::after { color: var(--fh-accent); }

.link-domain {
  margin: 0 0 var(--fh-space-2);
  font-size: 0.85rem;
}

.link-description {
  margin: 0 0 var(--fh-space-3);
  font-size: 0.9rem;
  flex: 1;
}

.link-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fh-space-2);
  margin-top: auto;
  padding-top: var(--fh-space-2);
  border-top: 1px solid var(--fh-border);
}

.link-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
}