/* Stories Page Styles - scoped additions without duplicating base.css */

.page-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(180deg, rgba(20, 27, 61, 0.6) 0%, rgba(26, 35, 71, 0.2) 100%);
  border-bottom: 2px solid var(--color-gray-800);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.hero-copy p {
  color: var(--color-text-muted);
}

.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }

.hero-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-gray-800); }
.hero-media img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

/* Search and Filters */
.search-filters { margin-top: var(--space-12); margin-bottom: var(--space-8); }
.search-form { margin-bottom: var(--space-4); }
.search-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.filter-btn[aria-pressed="true"] { border-color: var(--color-secondary); color: var(--color-text); background-color: rgba(5, 217, 232, 0.12); box-shadow: var(--glow-secondary); }

/* Grid of story categories */
.story-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-12); }

@media (min-width: 768px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.story-media { margin: 0 0 var(--space-4) 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-gray-800); }
.story-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Submit card */
.submit-card { margin-bottom: var(--space-16); }
.form-actions { display: flex; gap: var(--space-3); }

/* Minor enhancements */
#resultsCount { margin-top: var(--space-3); }

/* Reduce image density on smaller screens for faster paint */
@media (max-width: 480px) { .hero-media img { content-visibility: auto; } }