/* ============================================================
    Dynamic Page Header
    All values are driven by Style tab fields via CSS variables
    set inline in module.html. Fallbacks below match the field
    defaults, so the module renders correctly even if a variable
    is ever missing.
============================================================ */
.dynamic-page-header {
    background-color: var(--dynamic-page-header-bg, #FBF6F1);
    background-image: radial-gradient(var(--dynamic-page-header-dot, #D9E2EC) 1px, transparent 1px);
    background-size: 22px 22px;
    border-bottom: 1px solid var(--dynamic-page-header-border, #D9E2EC);
    font-family: var(--dynamic-page-header-body-font, "Inter"), sans-serif;
}

.dynamic-page-header__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--dynamic-page-header-top-spacing, 48px) 32px var(--dynamic-page-header-bottom-spacing, 52px);
}

.dynamic-page-header__breadcrumb {
    margin-bottom: 14px;
    font-family: var(--dynamic-page-header-breadcrumb-font, "Roboto Mono"), monospace;
    font-size: var(--dynamic-page-header-breadcrumb-size, 12px);
    font-weight: var(--dynamic-page-header-breadcrumb-weight, 400);
    letter-spacing: .06em;
    color: var(--dynamic-page-header-breadcrumb-color, #6B7280);
    text-transform: uppercase;
}

.dynamic-page-header__breadcrumb-link {
    color: inherit;
    text-decoration: none;
}

.dynamic-page-header__breadcrumb-link:hover {
    color: var(--dynamic-page-header-accent, #E8610A);
}

.dynamic-page-header__breadcrumb-current {
    color: var(--dynamic-page-header-accent, #E8610A);
    font-weight: 400;
}

.dynamic-page-header__heading {
    margin: 0 0 14px;
    font-family: var(--dynamic-page-header-heading-font, "Barlow Condensed"), sans-serif;
    font-size: var(--dynamic-page-header-heading-size, 48px);
    font-weight: var(--dynamic-page-header-heading-weight, 700);
    color: var(--dynamic-page-header-heading-color, #1B4F72);
    line-height: 1.05;
}

.dynamic-page-header__desc {
    max-width: 560px;
    margin: 0;
    font-family: var(--dynamic-page-header-body-font, "Inter"), sans-serif;
    font-size: var(--dynamic-page-header-body-size, 16px);
    font-weight: var(--dynamic-page-header-body-weight, 400);
    color: var(--dynamic-page-header-body-color, #3D3D3D);
    line-height: 1.6;
}

.dynamic-page-header__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 32px;
}

.dynamic-page-header__stat-value {
    font-family: var(--dynamic-page-header-stat-value-font, "Barlow Condensed"), sans-serif;
    font-size: var(--dynamic-page-header-stat-value-size, 38px);
    font-weight: var(--dynamic-page-header-stat-value-weight, 700);
    line-height: 1;
    color: var(--dynamic-page-header-stat-value-color, #1B4F72);
}

.dynamic-page-header__stat-label {
    margin-top: 6px;
    font-family: var(--dynamic-page-header-stat-label-font, "Roboto Mono"), monospace;
    font-size: var(--dynamic-page-header-stat-label-size, 12px);
    font-weight: var(--dynamic-page-header-stat-label-weight, 400);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dynamic-page-header-stat-label-color, #6B7280);
}

@media (max-width: 767px) {
    .dynamic-page-header__wrap {
        padding: 40px 20px;
    }

    .dynamic-page-header__heading {
        font-size: clamp(36px, 8vw, var(--dynamic-page-header-heading-size, 48px));
    }

    .dynamic-page-header__stats {
        gap: 24px;
    }
}