/**
 * Homepage BEM sections – Anna Oszajca
 * Loaded conditionally on is_front_page()
 * Full implementation in Homepage etap
 */

/* ─── Hero section ───────────────────────────────────── */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-section__heading {
    font-family: var(--font-heading);
    font-size: var(--text-8xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-light);
}

.hero-section__subheading {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-4xl);
    line-height: var(--leading-snug);
    color: var(--color-text-light);
    margin-top: var(--space-4);
}

.hero-section__cta {
    margin-top: var(--space-8);
}

@media (max-width: 1024px) {
    .hero-section__heading {
        font-size: var(--text-6xl);
    }

    .hero-section__subheading {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 768px) {
    .hero-section__heading {
        font-size: var(--text-5xl);
    }

    .hero-section__subheading {
        font-size: var(--text-2xl);
    }
}

/* ─── Generic section pattern ────────────────────────── */
.section {
    padding-block: var(--space-20);
}

.section__heading {
    font-family: var(--font-heading);
    font-size: var(--text-5-5xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-dark);
    margin-bottom: var(--space-6);
}

.section__heading--accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-7xl);
    font-weight: var(--weight-normal);
    color: var(--color-primary);
}

.section__lead {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    color: var(--color-gray-600);
    max-width: 720px;
}

@media (max-width: 1024px) {
    .section__heading {
        font-size: var(--text-4xl);
    }

    .section__heading--accent {
        font-size: var(--text-5xl);
    }
}

@media (max-width: 768px) {
    .section {
        padding-block: var(--space-12);
    }

    .section__heading {
        font-size: var(--text-3xl);
    }

    .section__heading--accent {
        font-size: var(--text-4xl);
    }
}

/* ─── About section ──────────────────────────────────── */
.about-section {
    background-color: var(--color-bg-warm);
}

/* ─── Products / Courses section ─────────────────────── */
.products-section {
    background-color: var(--color-white);
}

/* ─── Testimonials section ───────────────────────────── */
.testimonials-section {
    background-color: var(--color-bg-light-1);
}

/* ─── Newsletter / CTA section ───────────────────────── */
.cta-section {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
}

.cta-section .section__heading {
    color: var(--color-text-light);
}

.cta-section .section__lead {
    color: var(--color-gray-400);
}