/* Resources page specific styles (kept minimal and complementary to base.css) */
.page-hero { padding-block: var(--space-12) var(--space-12); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); border-bottom: 1px solid var(--color-border); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-copy .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-media { max-width: 760px; margin-inline: auto; }

.section { padding-block: var(--space-12); }
.section + .section { border-top: 1px solid var(--color-border); }

.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.search-wrap { margin-block: var(--space-6) var(--space-6); max-width: 720px; }
.library-figure { margin-top: var(--space-8); }
.library-figure figcaption { margin-top: var(--space-2); }

.meta { margin-top: var(--space-2); font-size: var(--text-sm); }

/* Responsive adjustments */
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}