/* Walka page styles - scoped additions that build on base.css */

.page-hero {
  display: grid;
  gap: var(--space-8);
}

.page-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

@media (max-width: 900px) {
  .page-hero .hero-inner { grid-template-columns: 1fr; }
}

.hero-content p { max-width: 60ch; }

.hero-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}

@media (max-width: 600px) {
  .hero-search { grid-template-columns: 1fr; }
}

.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-media { display: flex; flex-direction: column; }

/* Breadcrumbs */
.breadcrumb-nav { opacity: 0.95; }
.breadcrumb-list { display: flex; gap: var(--space-2); align-items: center; }
.breadcrumb-link { color: var(--color-text-secondary); }
.breadcrumb-link:hover { color: var(--color-accent-mystical); }
.breadcrumb-current { color: var(--color-text); }
.breadcrumb-list li + li::before {
  content: '›';
  color: var(--color-text-muted);
  margin: 0 var(--space-2);
}

/* Lists */
.list-bullets { display: grid; gap: var(--space-3); }
.list-bullets li { position: relative; padding-left: 1.25rem; }
.list-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: var(--shadow-glow);
}

/* Card inner spacing */
.card-inner h3 { color: var(--color-text); }

/* FAQ */
.faq-header { display: grid; gap: var(--space-4); grid-template-columns: 1fr 320px; align-items: end; }
@media (max-width: 900px) { .faq-header { grid-template-columns: 1fr; } }

.faq-list { display: grid; gap: var(--space-3); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-base); background: var(--color-background-card); }
.faq-question {
  width: 100%; text-align: left; padding: var(--space-4); font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid transparent; color: var(--color-text);
}
.faq-question:hover { background: var(--color-surface); }
.faq-answer { padding: var(--space-4); color: var(--color-text-secondary); }

/* Video callout */
.video-callout { display: grid; gap: var(--space-3); }

/* Tips */
.tip { background: var(--color-background-card); border: 1px solid var(--color-border); border-radius: var(--radius-base); padding: var(--space-4); }

/* Utility helpers for this page */
.items-start { align-items: start; }