/* Resource pages: a calmer, more readable version of the existing blue system. */
.resources-section {
  padding-top: 40px;
}

.resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.resource-card {
  min-height: 0;
  border-color: #dbe5f0;
  box-shadow: 0 1px 3px #0f172a0a;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.resource-card:hover {
  transform: none;
  border-color: #a9c5f8;
  box-shadow: 0 5px 16px #2563eb12;
}

.resource-card-top { padding: 22px 22px 0; }
.resource-card-body { padding: 20px 22px 24px; }
.resource-card h3 { margin: 12px 0 10px; font-size: 20px; line-height: 1.45; }
.resource-card p { min-height: 0; font-size: 14px; line-height: 1.7; }
.resource-tagline { font-size: 13px; }
.resource-format { font-size: 12px; letter-spacing: 0; }
.resource-card-meta { font-size: 12px; }
.resource-card-tags span { font-size: 12px; }
.resource-card-link-block { margin-top: 22px; padding: 14px 15px; }
.resource-card-link-head > span { font-size: 13px; }
.resource-card-link-url,
.resource-card-link-empty small { font-size: 12px; }
.resource-card-footer { min-height: 62px; padding: 13px 22px; font-size: 12px; }
.resource-card-page-preview-action { font-size: 13px; }

.subject-sort-bar { padding: 8px 10px; }
.subject-sort-label { font-size: 13px; }
.subject-sort-option { min-height: 44px; font-size: 14px; }
.filter-bar { gap: 10px; }
.filter-search,
.filter-control,
.filter-scope,
.filter-submit,
.filter-clear { min-height: 48px; }
.filter-search input { font-size: 15px; }
.filter-control select,
.filter-scope strong,
.filter-submit,
.filter-clear { font-size: 13px; }
.page-back-button { min-height: 44px; font-size: 13px; }
.copy-link-button.compact { min-height: 44px; font-size: 12px; }

.resources-section :is(a, button, input, select):focus-visible,
.subject-sort-option:focus-within {
  outline: 3px solid #2563eb59;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .resource-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .resource-card-top { padding: 18px 18px 0; }
  .resource-card-body { padding: 18px; }
  .resource-card h3 { font-size: 18px; }
  .resource-card-footer { padding: 12px 18px; }
  .filter-search input { font-size: 16px; }
}

@media (max-width: 420px) {
  .resource-card-footer { flex-wrap: wrap; gap: 10px; }
  .resource-card-link-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .resource-card { transition: none; }
}