/* Exploration page styles - built on top of base.css; minimal, non-duplicative */

.hero {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, #fff 100%);
}
.hero-inner {
  display: grid;
  gap: var(--space-6);
}
.search {
  background: var(--color-neutral-100);
  border: 2px dashed var(--color-neutral-200);
}
.search-hint { color: var(--color-text-secondary); }
.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.section { margin-top: var(--space-16); }

/* Breadcrumbs */
.breadcrumbs { margin: var(--space-6) 0 var(--space-4); }
.breadcrumbs ol { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.breadcrumbs li { color: var(--color-text-secondary); }
.breadcrumbs li+li::before { content: '›'; margin: 0 var(--space-2); color: var(--color-neutral-400); }

/* Media split layouts */
.media { margin-top: var(--space-6); }
.media-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: start; }
.media-col { align-self: stretch; }
@media (max-width: 1024px) { .media-split { grid-template-columns: 1fr; } }

/* FAQ tweaks */
.faq details { padding: var(--space-4); border: 2px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.faq details+details { margin-top: var(--space-4); }
.faq summary { cursor: pointer; outline: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { position: relative; padding-right: 1.5rem; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 0; color: var(--color-accent); font-weight: 700; }
.faq details[open] summary::after { content: '–'; }

/* Utility refinements */
.tips-list { display: grid; gap: var(--space-3); padding-left: var(--space-4); }
.tips-list li { list-style: decimal; margin-left: var(--space-4); }

/* Emphasis for filter hidden state (handled via JS by [hidden]) */
.filter-item[hidden] { display: none !important; }