/* Resource pages share the site's Lux typography and colors. */
.library-intro { max-width: 65ch; color: var(--bs-secondary-color, #555); }
.resource-list { display: grid; gap: .75rem; margin: 1rem 0 2rem; }
.resource-card {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--bs-border-color, #dedede);
  border-radius: .25rem;
  background: var(--bs-body-bg, #fff);
}
.resource-card:hover { border-color: var(--bs-secondary-color, #666); }
.resource-icon {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  background: var(--bs-tertiary-bg, #f5f5f5);
  border-radius: .2rem; font-size: 1.15rem;
}
.resource-card h3 { margin: 0 0 .25rem; font-size: 1rem; line-height: 1.5; letter-spacing: .04em; }
.resource-card h3 a { text-decoration: none; }
.resource-card h3 a:hover { text-decoration: underline; }
.resource-card p { margin: 0; font-size: .94rem; line-height: 1.6; }
.resource-type { display: block; margin-top: .4rem; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-secondary-color, #555); }
.resource-page iframe { max-width: 100%; }
.resource-page .video-frame { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
@media (max-width: 575px) {
  .resource-card { padding: .85rem; grid-template-columns: 2rem minmax(0, 1fr); gap: .65rem; }
  .resource-icon { width: 2rem; height: 2rem; font-size: 1rem; }
  .resource-card h3 { font-size: .93rem; }
}