/**
 * Page Hero Component - General Reusable Hero Section
 */

.page-hero {
    background: var(--off-white);
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    position: relative;
}

.page-hero-content,
.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.page-hero-title,
.page-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--primary-dark);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: var(--leading-tight);
}

.page-hero-subtitle,
.page-description {
    font-size: var(--text-base);
    color: var(--text-gray);
    line-height: var(--leading-relaxed);
    margin: 0;
    font-weight: 500;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .page-hero {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }

    .page-hero-title,
    .page-title {
        font-size: var(--text-2xl);
    }

    .page-hero-subtitle,
    .page-description {
        font-size: var(--text-sm);
    }
}

@media (max-width: 480px) {
    .page-hero-title,
    .page-title {
        font-size: var(--text-xl);
    }
}