/* links block (Phase 3 Stage 4).
   A grid of related-link cards with an optional text search and category
   filters. The block emits the .sortable-links-* vocabulary, so its styling
   lives here (moved out of downloads.css, which does not use these classes).
   No literal colour, every value a token. */

.sortable-links-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
.sortable-links-search { flex: 1 1 280px; }
.sortable-links-search-input {
  width: 100%; font-size: var(--fs-min); padding: .7rem 1rem;
  /* white field on a white section: an empty input has no text to identify it,
     so the border carries the 3:1 interactive weight (WCAG 1.4.11) */
  border: 2px solid var(--control-border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.sortable-links-search-input:focus { border-color: var(--link); }
.sortable-links-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
.sortable-links-filter {
  font-size: var(--fs-min); font-weight: 700; padding: .5rem 1.1rem;
  /* unpressed filter is a white pill on a white section; the border is the only
     thing marking its bounds, so it takes the 3:1 interactive weight */
  border: 1px solid var(--control-border); border-radius: var(--radius-pill);
  background: var(--white); color: var(--text-heading); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sortable-links-filter:hover { border-color: var(--accent); }
.sortable-links-filter[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.sortable-links-area { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.sortable-links-card { display: flex; flex-direction: column; gap: .3rem; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; text-decoration: none; }
/* The filter JS toggles the [hidden] attribute; display:flex above would defeat
   its UA display:none, so re-assert it. This is why filtering appeared dead. */
.sortable-links-card[hidden] { display: none; }
.sortable-links-card:hover { border-left-width: var(--card-edge-hover); }
.sortable-links-card-featured { border-left-color: var(--aud-students); }
.sortable-links-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.sortable-links-card__note { font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 64em) { .sortable-links-area { grid-template-columns: 1fr; } }