/* Page Hero Styles - Centralized from template-parts/hero.php */

.page-hero {
    background: linear-gradient(180deg, var(--color-off-white), var(--color-white));
    padding: 50px 0 35px;
    text-align: center;
}

.page-hero .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .3s;
}

.breadcrumbs a:hover {
    color: var(--color-primary);
}

.breadcrumbs .separator {
    margin: 0 8px;
}

/* ── Title ────────────────────────────────────────────────── */
.page-hero h1 {
    font-size: var(--font-size-hero-section-title);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0 0 12px;
    line-height: 1.2;
}

.page-hero h1 span {
    color: var(--color-primary);
}

/* ── Description ──────────────────────────────────────────── */
.hero-description {
    font-size: var(--font-size-section-desc);
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto 16px;
    line-height: 1.75;
}

.hero-description p {
    margin: 0 0 8px;
}

.hero-description p:last-child {
    margin-bottom: 0;
}

.hero-description strong {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.hero-description a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .3s;
}

.hero-description a:hover {
    text-decoration: underline;
    color: var(--color-progress-end);
}

.hero-description ul,
.hero-description ol {
    padding-left: 20px;
    margin: 6px 0;
}

.hero-description li {
    margin-bottom: 4px;
}

/* ── Stats ────────────────────────────────────────────────── */
.archive-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 6px;
    justify-content: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.stat-item i {
    color: var(--color-primary);
}

/* ── Post Meta ────────────────────────────────────────────── */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.meta-item i {
    color: var(--color-primary);
}

/* ── Responsive ───────────────────────────────────────────── */


@media (max-width: 767px) {
    .archive-stats {
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .page-hero {
        padding: 30px 0 22px;
    }
}