/* Guides page specific styles - minimal, leveraging base.css */

.hero {
  position: relative;
  padding: var(--space-20) 0 var(--space-16);
  background: linear-gradient(180deg, rgba(10,10,15,0.2) 0%, rgba(10,10,15,0.8) 100%),
              url('../images/hero-banner.webp') center/cover no-repeat;
  box-shadow: var(--shadow-lg) inset 0 -120px 120px rgba(0,0,0,0.5);
}
.hero .hero-subtitle {
  color: var(--color-text-muted);
  max-width: 70ch;
}

.guide-search { margin-top: var(--space-8); }
.guide-search .search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
}

.section-guides { padding: var(--space-16) 0; }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .guide-grid { grid-template-columns: 1fr; }
}

/* Minor card tweaks for readability */
.card .card-text { color: var(--color-text-muted); }
.card .badge { opacity: 0.95; }

/* No-results visibility helper (uses .hidden from base.css) */
#no-results { margin-bottom: var(--space-8); }