/* ============================================
   Hero / Banner Sections
   ============================================ */

.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(44, 95, 45, 0.85) 0%, rgba(26, 26, 26, 0.7) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  color: var(--color-white);
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-white);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-tight);
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-2xl);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-light);
}

.hero__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Page Banner (smaller hero for inner pages) */
.page-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--spacing-4xl) 0 var(--spacing-3xl);
  text-align: center;
}

.page-banner__title {
  color: var(--color-white);
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-sm);
}

.page-banner__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-md);
}