/* ========================================
   N-BLOG PROZON
   Clean-generation Blog CSS.

   Rules:
   - No legacy compatibility aliases.
   - No Blog-specific theme variables.
   - No muted color role.
   - Site variables are consumed directly.
   - Internal layout constants remain constants unless editor control is justified.
======================================== */

.pz-blog,
.pz-blog * { box-sizing: border-box; }

.pz-blog {
    width: 100%;
    margin: 0;
    color: var(--color-text, #1f2933);
    background: var(--color-prozon-bg, transparent);
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--size-body, 1rem);
}

.pz-blog__card {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--color-card-border, #d1d5db);
    border-radius: var(--radius-card, 12px);
    background: var(--color-card-bg, #ffffff);
    color: var(--color-text, #1f2933);
    box-shadow: var(--shadow-card, none);
}

.pz-blog__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing, 1rem);
    padding: calc(var(--spacing, 1rem) * 1.5) calc(var(--spacing, 1rem) * 1.5) 0;
}

.pz-blog .pz-blog__eyebrow {
    margin: 0 0 calc(var(--spacing, 1rem) * .45);
    color: var(--color-eyebrow, var(--color-text, #1f2933));
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pz-blog .pz-blog__title {
    margin: 0;
    color: var(--color-title, #000000);
    font-family: var(--font-title, var(--font-body, inherit));
    font-size: var(--size-title, 2rem);
    line-height: 1.15;
}

.pz-blog .pz-blog__subtitle {
    max-width: none;
    margin: calc(var(--spacing, 1rem) * .55) 0 0;
    color: var(--color-subtitle, var(--color-text, #1f2933));
    font-family: var(--font-subtitle, var(--font-body, inherit));
    font-size: var(--size-subtitle, var(--size-body, 1rem));
    line-height: 1.45;
}

.pz-blog__count {
    white-space: nowrap;
    font-family: var(--font-text-small, var(--font-body, inherit));
    font-size: var(--size-text-small, .9rem);
    color: var(--color-text, #1f2933);
}

.pz-blog__grid {
    display: grid;
    gap: var(--section-gap, 1.5rem);
    padding: var(--spacing, 1rem) calc(var(--spacing, 1rem) * 1.5) calc(var(--spacing, 1rem) * 1.5);
}

.pz-blog__item {
    overflow: hidden;
    border: 1px solid var(--color-card-border, #d1d5db);
    border-radius: var(--radius-card, 12px);
    background: var(--color-card-bg, #ffffff);
    color: var(--color-text, #1f2933);
    transition:
        transform var(--animation-duration, .25s) ease,
        border-color var(--animation-duration, .25s) ease,
        box-shadow var(--animation-duration, .25s) ease;
}

.pz-blog__item:hover,
.pz-blog__item:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card, none);
}

.pz-blog__link {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: var(--spacing, 1rem);
    color: inherit;
    text-decoration: none;
}

.pz-blog__link:focus-visible,
.pz-blog__back:focus-visible {
    outline: 3px solid var(--color-focus, var(--color-link, currentColor));
    outline-offset: 3px;
}

.pz-blog__image-wrap {
    aspect-ratio: 4 / 3;
    background: var(--color-card-border, #d1d5db);
    overflow: hidden;
}

.pz-blog__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pz-blog__content {
    min-width: 0;
    padding: var(--spacing, 1rem) var(--spacing, 1rem) var(--spacing, 1rem) 0;
}

.pz-blog__item-title {
    margin: 0;
    color: var(--color-subtitle, var(--color-title, #000000));
    font-family: var(--font-subtitle, var(--font-body, inherit));
    font-size: 1.15rem;
    line-height: 1.3;
}

.pz-blog__date {
    margin: calc(var(--spacing, 1rem) * .45) 0 0;
    font-family: var(--font-text-small, var(--font-body, inherit));
    font-size: var(--size-text-small, .9rem);
    color: var(--color-link, var(--color-text, #1f2933));
}

.pz-blog__excerpt {
    margin: calc(var(--spacing, 1rem) * .8) 0 0;
    color: var(--color-text, #1f2933);
    line-height: 1.55;
}

.pz-blog__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    margin-top: calc(var(--spacing, 1rem) * .9);
    padding: .45em .95em;
    border: 1px solid var(--color-cta-border, var(--color-cta-bg, currentColor));
    border-radius: var(--radius-cta-small, 999px);
    background: var(--color-cta-bg, transparent);
    color: var(--color-cta-text, var(--color-link, currentColor));
    font-family: var(--font-cta, var(--font-body, inherit));
    font-size: var(--size-cta-small, 1rem);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        transform var(--animation-duration, .25s) ease,
        background-color var(--animation-duration, .25s) ease,
        border-color var(--animation-duration, .25s) ease,
        color var(--animation-duration, .25s) ease;
}

.pz-blog__link:hover .pz-blog__cta,
.pz-blog__link:focus-visible .pz-blog__cta {
    background: var(--color-cta-hover-bg, var(--color-cta-bg, transparent));
    color: var(--color-cta-hover-text, var(--color-cta-text, currentColor));
    border-color: var(--color-cta-hover-bg, var(--color-cta-border, currentColor));
}

.pz-blog__back,
.pz-blog__detail-content a {
    color: var(--color-link, var(--color-text, #1f2933));
}

.pz-blog__back:hover,
.pz-blog__back:focus-visible,
.pz-blog__detail-content a:hover,
.pz-blog__detail-content a:focus-visible {
    color: var(--color-link-hover, var(--color-link, currentColor));
}

.pz-blog__empty {
    padding: var(--spacing, 1rem) calc(var(--spacing, 1rem) * 1.5) calc(var(--spacing, 1rem) * 1.5);
    color: var(--color-text, #1f2933);
}

/* Standalone detail page shell. The site should provide the same root variables as any other page. */
.pz-blog-detail-page {
    margin: 0;
    background: var(--color-page-bg, #ffffff);
    color: var(--color-text, #1f2933);
    font: var(--size-body, 1rem) / 1.6 var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.pz-blog-detail-page__wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(var(--spacing, 1rem) * 2) var(--spacing, 1rem);
}

.pz-blog__detail-card { overflow: hidden; }

.pz-blog__detail-header {
    padding: calc(var(--spacing, 1rem) * 1.5) calc(var(--spacing, 1rem) * 1.5) 0;
}

.pz-blog__back {
    display: inline-block;
    margin-bottom: var(--spacing, 1rem);
    font-family: var(--font-cta, var(--font-body, inherit));
    font-size: var(--size-cta-small, 1rem);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--animation-duration, .25s) ease;
}

.pz-blog__detail-title { max-width: 900px; }
.pz-blog__detail-date { margin-top: calc(var(--spacing, 1rem) * .6); }

.pz-blog__detail-image-wrap {
    margin: calc(var(--spacing, 1rem) * 1.25) calc(var(--spacing, 1rem) * 1.5) 0;
    border-radius: var(--radius-card, 12px);
    background: var(--color-card-border, #d1d5db);
    overflow: hidden;
}

.pz-blog__detail-image { aspect-ratio: 16 / 9; }

.pz-blog__detail-content {
    padding: calc(var(--spacing, 1rem) * 1.5);
    color: var(--color-text, #1f2933);
    line-height: 1.65;
}

.pz-blog__detail-content h2,
.pz-blog__detail-content h3,
.pz-blog__detail-content h4,
.pz-blog__section h3 {
    color: var(--color-subtitle, var(--color-title, #000000));
    font-family: var(--font-subtitle, var(--font-body, inherit));
    line-height: 1.25;
}

.pz-blog__detail-content h2,
.pz-blog__detail-content h3,
.pz-blog__detail-content h4 {
    margin-top: var(--section-gap, 1.5rem);
    margin-bottom: calc(var(--spacing, 1rem) * .5);
}

.pz-blog__detail-content p,
.pz-blog__detail-content ul,
.pz-blog__detail-content ol {
    margin-top: 0;
    margin-bottom: var(--spacing, 1rem);
}

.pz-blog__detail-content a {
    font-weight: 700;
    transition: color var(--animation-duration, .25s) ease;
}

.pz-blog__section { margin: 0 0 var(--section-gap, 1.5rem); }
.pz-blog__section:first-child h3 { margin-top: 0; }

.pz-blog__section h3 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pz-blog__section ul { padding-left: calc(var(--spacing, 1rem) * 1.45); }
.pz-blog__section li { margin-bottom: calc(var(--spacing, 1rem) * .35); }

@media (max-width: 980px) {
    .pz-blog .pz-blog__title { font-size: calc(var(--size-title, 2rem) * .8); }
    .pz-blog__link { grid-template-columns: 1fr; gap: 0; }
    .pz-blog__content { padding: var(--spacing, 1rem); }
}

@media (max-width: 640px) {
    .pz-blog__header { flex-direction: column; }
}