.secondary-filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: .75rem;
  margin: -.4rem 0 1.5rem;
}

.secondary-filters label { display: grid; gap: .3rem; }
.secondary-filters label > span { color: var(--soft-slate); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.secondary-filters select { min-width: 180px; padding: .65rem 2.2rem .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--white); font: inherit; font-size: .8rem; font-weight: 650; }
.secondary-filters select:hover { border-color: #94a3b8; }
.secondary-filters p { margin: 0 0 .65rem auto; color: var(--soft-slate); font-size: .76rem; }
.external-resource-list { display: contents; }

.external-resource-card { display: flex; min-height: 440px; flex-direction: column; transition: transform 180ms ease, box-shadow 180ms ease; }
.external-resource-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(15, 23, 42, .1); }
.external-resource-visual { position: relative; min-height: 145px; display: flex; align-items: flex-end; justify-content: space-between; padding: 1.3rem; overflow: hidden; color: white; background: linear-gradient(135deg, #153257, #0ea5e9); }
.external-resource-visual::before { content: ""; position: absolute; width: 180px; height: 180px; right: -55px; top: -75px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255, 255, 255, .06), 0 0 0 55px rgba(255, 255, 255, .04); }
.visual-symbol { position: relative; font-size: 2.4rem; font-weight: 750; letter-spacing: -.08em; }
.visual-label { position: relative; font-size: .65rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.visual-biology, .visual-science { background: linear-gradient(135deg, #115e59, #3ec6a8); }
.visual-physics, .visual-engineering { background: linear-gradient(135deg, #1e3a8a, #6366f1); }
.visual-mathematics, .visual-stem { background: linear-gradient(135deg, #713f12, #f6b83f); }
.visual-chemistry, .visual-art { background: linear-gradient(135deg, #7c2d12, #f9735b); }
.visual-coding { background: linear-gradient(135deg, #312e81, #8b7cf6); }
.visual-space, .visual-astronomy { background: radial-gradient(circle at 75% 15%, #6366f1, transparent 32%), linear-gradient(135deg, #07152d, #1e3a5f); }
.visual-history { background: linear-gradient(135deg, #4c1d95, #a855f7); }

.external-resource-copy { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.provider-label { margin: 0 0 .75rem; color: var(--sky-dark); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.external-resource-copy h3 { margin-bottom: .75rem; font-size: 1.45rem; line-height: 1.08; }
.external-resource-copy > p:not(.provider-label) { margin: 0 0 1rem; color: var(--soft-slate); font-size: .85rem; }
.resource-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: auto 0 1.2rem; }
.resource-tags span { padding: .32rem .52rem; border-radius: 999px; color: #334155; background: #f1f5f9; font-size: .6rem; font-weight: 750; }
.external-resource-copy .resource-link { font-size: .82rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.external-resource-disclaimer { margin-top: 1.5rem; padding: 1.2rem 1.35rem; border: 1px solid var(--line); border-radius: 18px; color: var(--slate); background: var(--paper); }
.external-resource-disclaimer h3 { margin-bottom: .35rem; font-size: .9rem; letter-spacing: -.01em; }
.external-resource-disclaimer p { max-width: 920px; margin: 0; font-size: .75rem; }

@media (max-width: 760px) {
  .secondary-filters { align-items: stretch; }
  .secondary-filters label { flex: 1 1 160px; }
  .secondary-filters select { width: 100%; min-width: 0; }
  .secondary-filters p { flex-basis: 100%; margin: 0; }
  .external-resource-card { min-height: 400px; }
}