/* =============================================================================
   accordion.css — generic <details> disclosure, one row per topic.
   Used by /alumni/ to keep a long list of resource links collapsed by default
   so it does not bury the page's actual content. Native <details>, so it is
   keyboard-accessible and needs no JS.

   Distinct from .course__d in program-detail.css, which is a fixed three-column
   grid (code / title / credits) and is not reusable for plain topic rows.
   ============================================================================ */

.accordion { display: grid; gap: var(--space-2); max-width: 72ch; }

.acc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.acc[open] { background: var(--color-surface); }

.acc > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  border-radius: var(--radius-md);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--color-accent-hover); }
.acc > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.acc[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; }

.acc__icon { flex-shrink: 0; color: var(--color-accent); display: flex; }
.acc__label { flex: 1; }
.acc__count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); white-space: nowrap; }

/* Chevron, rotating on open. */
.acc__chev {
  flex-shrink: 0;
  width: 0.45rem; height: 0.45rem;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
  margin-right: 0.15rem;
}
.acc[open] > summary .acc__chev { transform: rotate(-135deg); }

.acc__body { padding: var(--space-3); }
.acc__body > *:first-child { margin-top: 0; }

@media (max-width: 560px) {
  .acc > summary { padding: var(--space-2); }
  .acc__count { display: none; }
  .acc__body { padding: var(--space-2); }
}