/**
 * Page-Specific Styles
 */

/* ===== Hero Section ===== */
.hero-section {
    background: linear-gradient(135deg, var(--color-navy) 0%, #001a8f 100%);
    color: var(--color-white);
    padding: var(--space-3xl) 0;
    text-align: center;
}

@media (min-width: 768px) {
    .hero-section {
        padding: var(--space-4xl) 0;
    }
}

@media (min-width: 1024px) {
    .hero-section {
        padding: var(--space-5xl) 0;
    }
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-headline {
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.hero-subheadline {
    font-size: var(--font-size-large);
    margin-bottom: var(--space-2xl);
    opacity: 0.95;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero-cta {
        flex-direction: row;
    }
}

/* ===== Donation Guarantee Section ===== */
.donation-guarantee-section {
    padding: var(--space-2xl) 0;
}

@media (min-width: 768px) {
    .donation-guarantee-section {
        padding: var(--space-3xl) 0;
    }
}

/* ===== Featured Programs Section ===== */
.featured-programs-section {
    background: var(--color-white);
}

/* ===== Impact Stats Section ===== */
.impact-stats-section {
    background: var(--color-cream);
}

/* ===== Latest News Section ===== */
.latest-news-section {
    background: var(--color-white);
}

/* ===== Newsletter Section ===== */
.newsletter-section {
    background: linear-gradient(135deg, var(--color-green) 0%, #008f04 100%);
    color: var(--color-white);
}

.newsletter-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-section .section-heading {
    color: var(--color-white);
}

.newsletter-description {
    font-size: var(--font-size-large);
    margin-bottom: var(--space-xl);
    opacity: 0.95;
}

.newsletter-section .form-input {
    border-color: var(--color-white);
}

.newsletter-section .form-input:focus {
    border-color: var(--color-white);
    outline-color: rgba(255, 255, 255, 0.3);
}