/**
 * Audience link aggregator — dept-grouped link list rendered on the
 * /staff-portal, /parents, and /students resource pages by the
 * mvsd_audience_link_aggregator block.
 *
 * Compact dept-grouped layout: each dept is a small uppercase eyebrow
 * label followed by a flat list of its audience-relevant links. Goal is
 * dense info, scannable at a glance, low vertical real estate (vs. the D9
 * pattern of one stacked menu block per dept which ate the whole page).
 */

.audience-aggregator {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
}

.audience-aggregator__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  break-inside: avoid;
}

.audience-aggregator__dept {
  margin: 0;
  padding: 0 0 var(--space-2, 0.5rem);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-accent, #b45309);
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}

.audience-aggregator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.audience-aggregator__item {
  margin: 0;
}

.audience-aggregator__link {
  display: block;
  padding: 0.4rem 0.5rem;
  color: var(--color-link, var(--color-primary));
  text-decoration: none;
  font-size: var(--font-size-sm, 0.95rem);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm, 4px);
  transition:
    background var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease);
}

.audience-aggregator__link:hover,
.audience-aggregator__link:focus-visible {
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
  border-left-color: var(--color-accent, #b45309);
  color: var(--color-link-hover, var(--color-primary-dark, var(--color-primary)));
}

.audience-aggregator__link:focus-visible {
  outline: 2px solid var(--color-focus-ring, #2563eb);
  outline-offset: -2px;
}

/* External-link indicator: small upward-pointing arrow after the label. */
.audience-aggregator__link.is-external::after {
  content: " ↗";
  margin-left: 0.2em;
  font-size: 0.85em;
  opacity: 0.6;
}

/* Mobile: collapse to single column with tighter spacing. */
@media (max-width: 640px) {
  .audience-aggregator {
    grid-template-columns: 1fr;
    gap: var(--space-4, 1rem);
  }
}