/* ========== Hero Base Component - Unikode Design System ========== */
/* Reusable hero section patterns for consistent typography and layout */
/* Source: WP3-HERO standardization work package */

/* ========== Base Hero Container ========== */
.hero-base {
  text-align: center;
  padding: var(--space-9) var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

/* ========== Hero Title Typography ========== */
/* Standard pattern: responsive clamp with design tokens */
.hero-base h1,
.hero-title-base {
  font-size: clamp(var(--text-display-sm), 8vw, var(--text-display-lg));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

/* Medium variant: research/demo pages */
.hero-title-md {
  font-size: clamp(var(--text-display-sm), 8vw, var(--text-display-md));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

/* Small variant: compact hero sections */
.hero-title-sm {
  font-size: clamp(var(--text-headline-lg), 5vw, var(--text-display-sm));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

/* ========== Hero Subtitle Typography ========== */
.hero-base p,
.hero-subtitle-base {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Large subtitle variant */
.hero-subtitle-lg {
  font-size: var(--text-title-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
  text-wrap: pretty;
  letter-spacing: 0.01em;
}

/* ========== Hero Label (Optional) ========== */
.hero-label-base {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

/* ========== Responsive Breakpoints ========== */
@media (max-width: 768px) {
  .hero-base {
    padding: var(--space-8) var(--space-4);
  }

  .hero-base h1,
  .hero-title-base {
    font-size: clamp(28px, 8vw, var(--text-display-sm));
  }

  .hero-title-md {
    font-size: clamp(28px, 8vw, var(--text-display-sm));
  }

  .hero-title-sm {
    font-size: var(--text-headline-lg);
  }
}

/* ========== Theme Variants ========== */
/* Light theme adjustments if needed */
[data-theme="light"] .hero-base h1,
[data-theme="light"] .hero-title-base,
[data-theme="light"] .hero-title-md,
[data-theme="light"] .hero-title-sm {
  color: var(--color-text);
}

/* ========== Animation Support ========== */
/* Fade-in animation integration */
.hero-base.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-medium-2) var(--easing-emphasized-decelerate),
              transform var(--duration-medium-2) var(--easing-emphasized-decelerate);
}

.hero-base.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-base.fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========== Documentation ========== */
/*
Hero Patterns Summary (WP3-HERO):

| Page Type       | Container Class | Title Size                              | Weight | Line-Height | Letter-Spacing |
|-----------------|-----------------|----------------------------------------|--------|-------------|----------------|
| Standard pages  | .hero-base      | clamp(display-sm, 8vw, display-lg)     | 700    | 1.1         | -0.03em        |
| Demo/Research   | .hero-title-md  | clamp(display-sm, 8vw, display-md)     | 700    | 1.1         | -0.03em        |
| Homepage        | .hero-title-sm  | clamp(headline-lg, 5vw, display-sm)    | 700    | 1.15        | -0.02em        |

Usage:
  <section class="hero-base fade-in">
    <span class="hero-label-base">Label</span>
    <h1>Hero Title</h1>
    <p>Hero subtitle with supporting text.</p>
  </section>

Or with specific title variants:
  <h1 class="hero-title-md">Medium Title</h1>
*/