/* Components page specific styles (built on base.css) */
.page-hero { padding-block: var(--space-16) var(--space-10); }
.page-hero .hero-cta { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.section { padding-block: var(--space-16); }
.section__header p { color: var(--color-text-muted); max-width: 70ch; }

/* Gallery cards */
.gallery .media { display: grid; gap: var(--space-3); }
.gallery .media img { width: 100%; height: auto; }
.gallery figcaption h3 { margin: 0 0 var(--space-2) 0; }
.gallery figcaption p { margin: 0; color: var(--color-text-muted); }

/* Search */
.search { margin-block: var(--space-6) var(--space-6); display: grid; gap: var(--space-3); }
.search__status { color: var(--color-text-muted); margin: 0; }

/* Media blocks */
.media figcaption { color: var(--color-text-muted); }

/* Lists inside cards */
.card ul { padding-left: var(--space-6); }
.card ol { padding-left: var(--space-6); }

@media (min-width: 768px) {
  .page-hero { padding-block: var(--space-18) var(--space-12); }
}