/* fcc-see-also.css — Shared cross-museum "See also" block.
 * Inherits museum-level design tokens; keeps a restrained look so it never
 * overwhelms the artifact itself.
 */

.see-also-block {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.see-also-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 600;
}

.see-also-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.see-also-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.55rem;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  max-width: 100%;
}

.see-also-pill:hover,
.see-also-pill:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.see-also-museum {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 600;
}

.see-also-title {
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

@media (max-width: 480px) {
  .see-also-title { max-width: 18ch; }
}