/* Guides page specific styles – focused, minimal, leveraging base.css tokens */

.page-hero {
  padding: var(--space-56) 0 var(--space-40);
  background:
    radial-gradient(60% 80% at 10% -10%, rgba(0,229,255,0.08), transparent 60%),
    radial-gradient(60% 80% at 100% 0%, rgba(255,159,26,0.07), transparent 60%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-hero .hero-inner { display: grid; align-items: center; }
.page-hero .hero-copy p { color: var(--color-text-muted); }
.page-hero .hero-ctas { margin-top: var(--space-20); display: flex; gap: var(--space-12); flex-wrap: wrap; }

/* Filters */
.guide-filters { margin-top: var(--space-24); margin-bottom: var(--space-16); }
.filters-bar { display: grid; gap: var(--space-16); }
.filters-form { display: grid; gap: var(--space-12); }
.search-wrap { display: grid; }
.filters-help { color: var(--color-text-muted); font-size: var(--text-sm); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.filter-btn[aria-pressed="true"] { outline: 2px solid var(--color-primary); box-shadow: var(--shadow-glow-primary); }

/* Grid */
.guides-grid { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }
@media (min-width: 640px) { .guides-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .guides-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Cards */
.guide-card { padding: 0; overflow: hidden; display: grid; }
.guide-link { color: inherit; display: grid; grid-template-rows: auto 1fr; height: 100%; }
.guide-media img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.guide-content { padding: var(--space-20); display: grid; gap: var(--space-12); align-content: start; }
.guide-content p { color: var(--color-text-muted); }
.guide-meta { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.guide-cta { justify-self: start; margin-top: var(--space-8); }

/* Empty state */
.empty-state { margin-top: var(--space-24); text-align: left; }
.empty-actions { margin-top: var(--space-12); }

/* How-to section */
.guide-help { padding: var(--space-40) 0 var(--space-56); }
.howto-grid { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }
@media (min-width: 768px) { .howto-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }