/**
 * Page Header Component - Structure Only
 * Used on about, portfolio, services, contact pages
 * Colors are defined in colors.css
 */

.page-header {
  position: relative;
  padding: var(--space-24) 0 var(--space-16);
  text-align: center;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  border-radius: var(--radius-full);
  /* Color applied in colors.css */
}

.page-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--font-extrabold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

.page-subtitle {
  font-size: var(--text-xl);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
  .page-header {
    padding: var(--space-16) 0 var(--space-12);
  }

  .page-header::before {
    width: 120px;
    height: 3px;
  }

  .page-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .page-subtitle {
    font-size: var(--text-lg);
  }
}