/* Multimedia page specific styles (lean, complements base.css) */
.hero {
  padding: var(--space-16) 0 var(--space-10);
  background: radial-gradient(1200px 600px at 90% -10%, rgba(74,158,255,0.12), transparent 60%), linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);
  border-bottom: 1px solid var(--color-neutral-800);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy p { max-width: 60ch; }
.hero-ctas { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.hero-media { margin: 0; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--shadow-glow); }

@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr; }
}

.section { padding: var(--space-12) 0; }
.section-header { margin-bottom: var(--space-8); }
.section-header p { max-width: 70ch; }

.filter-bar { margin-top: var(--space-10); display: grid; gap: var(--space-4); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filter-buttons .btn[aria-pressed="true"] { outline: 2px solid var(--color-primary); box-shadow: var(--shadow-glow); }

/* Media grids */
.media-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-8); }
@media (min-width: 768px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Responsive video wrapper */
.video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-neutral-700); background: var(--color-surface-elevated); }
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Card media images with ratio */
.card-media { position: relative; overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.card-media::before { content: ""; display: block; padding-bottom: 56.25%; }
.card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Minor enhancements */
.card .badge { margin-top: var(--space-2); }

/* Accessibility helpers for hidden results (native [hidden] is used) */
[data-media-item][hidden] { display: none !important; }