/**
 * Page Content — assets/css/pages.css
 * Generic page header banner and content area for tool pages.
 *
 * @package  DEI4SME
 * @used-in  page-tool-social-sustainability-report.php,
 *           page-tool-vsme-standard-report.php,
 *           page-tool-inclusion-competencies.php,
 *           page-tool-learn-and-plan.php
 *
 * SELECTORS:
 *   .page-header     — Full-width alt-bg banner with centered heading (border-bottom)
 *   .page-header h1  — Page title (margin-bottom --spacing-xs)
 *   .page-header p   — Page subtitle (20px, --color-text-light)
 *   .page-content    — Main content wrapper (padding --spacing-lg vertical)
 */

/* === Page Content === */
.page-header {
    background: linear-gradient(180deg, #EBF4FF 0%, #FFFFFF 100%);
    padding: 64px 0;
    text-align: center;
}

.page-header h1 {
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
    font-size: 64px;
    color: #2B3A4A;
}

.page-header p {
    color: var(--color-text-light);
    font-size: 20px;
}

/* === Tool 4 Page Header Override === */
.page-header--tool4 {
    background: var(--color-bg);
    padding: 96px 0;
}

.page-header--tool4 .page-header__label {
    font-weight: 600;
    font-size: 20px;
    color: #4F81C9;
    margin-bottom: 16px;
}

.page-header--tool4 h1 {
    font-weight: 700;
    font-size: 64px;
    color: #2B3A4A;
    margin-bottom: 16px;
}

.page-header--tool4 .page-header__description {
    font-weight: 400;
    font-size: 20px;
    color: var(--color-text-body);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

.page-content {
    padding: var(--spacing-lg) 0;
}

/* === Tool Examples Pages === */
.tool-examples-content {
    max-width: 1200px;
    line-height: 1.7;
}

.tool-examples-content h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.tool-examples-content ul {
    padding-left: 20px;
}

.tool-examples-back {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.tool-examples-back a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

/* === Responsive: Tablet === */
@media (max-width: 1024px) {
    .page-content {
        padding: var(--spacing-md) 20px;
    }

    .page-header {
        padding: 48px 20px;
    }

    .page-header--tool4 {
        padding: 64px 20px;
    }
}

/* === Responsive: Mobile === */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 38px;
    }

    .page-header--tool4 h1 {
        font-size: 38px;
    }

    .page-content {
        padding: var(--spacing-sm) 16px;
    }

    .page-header {
        padding: 40px 16px;
    }

    .page-header--tool4 {
        padding: 48px 16px;
    }

    .tool-examples-content h2 {
        font-size: 22px;
    }

    .tool-examples-content ul {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .page-content {
        padding: var(--spacing-sm) 16px;
    }

    .page-header {
        padding: 32px 16px;
    }

    .page-header--tool4 {
        padding: 32px 16px;
    }
}