/* Guides page specific styles - minimal and additive to base.css */

.hero {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.hero-inner {
  padding: var(--space-8);
}

.hero-lead {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.search-bar {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
}

.search-meta {
  margin-top: var(--space-4);
}

.help-text {
  color: var(--color-text-secondary);
}

.results-text {
  color: var(--color-neutral-700);
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--color-text-secondary);
}
.crumb-current {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-neutral-200);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

/* Guides grid cards */
.guide-figure {
  margin-bottom: var(--space-4);
}

.guide-media {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.kicker {
  color: var(--color-primary-dark);
  font-weight: 600;
}

@media (max-width: 768px) {
  .hero-inner {
    padding: var(--space-6);
  }
  .search-bar {
    grid-template-columns: 1fr;
  }
}