/* ── Breadcrumb band ─────────────────────────────────────────────────── */
.blog-single-breadcrumb {
    background: var(--color-bg-green);
    padding:    20px 0;
}

.blog-single-breadcrumb .breadcrumbs { margin-bottom: 0; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.blog-single {
    display:               grid;
    grid-template-columns: 1fr 330px;
    gap:                   64px;
    padding:               40px 0 80px;
}

/* ── Article header ───────────────────────────────────────────────────── */
.blog-single__meta {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin:      0 0 16px;
}

.blog-single__category {
    display:         inline-flex;
    align-items:     center;
    padding:         6px 10px;
    background:      rgba(85, 172, 97, .1);
    border-radius:   50px;
    font-size:       12px;
    line-height:     1.1;
    color:           var(--color-text);
}

.blog-single__category a { color: inherit; text-decoration: none; }
.blog-single__category a:not(:last-child)::after { content: ', '; }

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

.blog-single__date-icon { flex: none; width: 20px; height: 20px; }

.blog-single__title {
    margin:         0;
    font-size:      46px;
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: -0.02em;
    color:          var(--color-secondary);
}

/* ── Content (the_content output) ────────────────────────────────────── */
.blog-single__content {
    font-size:   16px;
    line-height: 1.6;
    color:       var(--color-text);
}

.blog-single__content > * + * { margin-top: 16px; }

.blog-single__content h2 {
    margin-top:  40px;
    font-size:   28px;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--color-secondary);
}

.blog-single__content h3 {
    margin-top:  32px;
    font-size:   22px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--color-secondary);
}

.blog-single__content h2 + *,
.blog-single__content h3 + * { margin-top: 12px; }

.blog-single__content ul,
.blog-single__content ol {
    margin:       0;
    padding-left: 24px;
}

.blog-single__content li { margin-bottom: 10px; line-height: 1.6; }
.blog-single__content li:last-child { margin-bottom: 0; }

.blog-single__content a {
    color:           var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-single__content strong { font-weight: 700; color: var(--color-secondary); }

.blog-single__content img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 16px;
}

.blog-single__content blockquote {
    margin:        0;
    padding:       16px;
    background:    var(--color-bg-lighter);
    border-left:   0;
    border-radius: 16px;
    font-size:     16px;
    font-style:    normal;
    line-height:   1.6;
    color:         #000000;
}

.blog-single__content blockquote > * + * { margin-top: 12px; }

.blog-single__content .btn,
.blog-single__content .wp-block-button__link {
    margin-top: 8px;
}

.blog-single__content .wp-block-button {
    display: flex;
}

.blog-single__content .wp-block-button__link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 26px;
    background:      linear-gradient(90deg, #3F8F46 0%, #6DC170 100%);
    border:          1px solid #ffffff;
    border-radius:   10px;
    box-shadow:      0 7px 13px rgba(0, 0, 0, .1);
    font-family:     var(--font-body);
    font-size:       18px;
    font-weight:     500;
    line-height:     24px;
    color:           #ffffff;
    text-decoration: none;
    transition:      background var(--transition);
}

.blog-single__content .wp-block-button__link:hover {
    background: linear-gradient(180deg, var(--color-primary-hov) 0%, var(--color-primary-hov) 100%);
}

.blog-single__content .page-links {
    margin-top:  24px;
    font-size:   14px;
    font-weight: 500;
    color:       var(--color-muted);
}

/* ── Tags footer ──────────────────────────────────────────────────────── */
.blog-single__footer {
    margin-top:  32px;
    padding-top: 24px;
    border-top:  1px solid var(--color-border);
}

.blog-single__tags-label {
    margin-right: 8px;
    font-weight:  600;
    color:        var(--color-secondary);
}

.blog-single__tags a {
    display:         inline-block;
    margin:          0 6px 6px 0;
    padding:         6px 14px;
    background:      var(--color-bg-alt);
    border-radius:   50px;
    font-size:       13px;
    color:           var(--color-text);
    text-decoration: none;
    transition:      background var(--transition);
}

.blog-single__tags a:hover { background: var(--color-bg-lighter); }

/* ── Prev/next navigation ────────────────────────────────────────────── */
.blog-single__nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             16px;
    margin-top:      48px;
    padding-top:     32px;
    border-top:      1px solid var(--color-border);
}

.blog-single__nav-pills { display: flex; gap: 16px; }

.blog-single__nav-pill {
    display:         flex;
    align-items:     center;
    gap:             8px;
    height:          40px;
    padding:         0 20px;
    background:      var(--color-bg-alt);
    border:          1px solid #ffffff;
    border-radius:   6px;
    font-size:       14px;
    font-weight:     500;
    letter-spacing:  0.02em;
    color:           var(--color-secondary);
    text-decoration: none;
    transition:      background var(--transition);
}

.blog-single__nav-pill:hover { background: var(--color-bg-lighter); }

.blog-single__nav-arrow { flex: none; }
.blog-single__nav-arrow--prev { transform: rotate(180deg); }

.blog-single__nav-back {
    font-size:      14px;
    font-weight:    500;
    letter-spacing: 0.02em;
    color:          var(--color-text);
    text-decoration: none;
    transition:      color var(--transition);
}

.blog-single__nav-back:hover { color: var(--color-primary); }

/* ── Sidebar: recent posts ───────────────────────────────────────────── */
.blog-single-sidebar__card {
    position:      sticky;
    top:           calc(var(--header-height) + 24px);
    padding:       24px 20px;
    background:    var(--color-bg-green);
    border-radius: 16px;
}

.blog-single-sidebar__title {
    margin:         0 0 24px;
    font-size:      18px;
    font-weight:    700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color:          #000000;
}

.blog-single-sidebar__list {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.blog-single-sidebar__item {
    padding-top: 20px;
    border-top:  1px solid var(--color-border);
}

.blog-single-sidebar__item:first-child { padding-top: 0; border-top: 0; }

.blog-single-sidebar__link {
    display:         flex;
    gap:             20px;
    text-decoration: none;
}

.blog-single-sidebar__image {
    display:       block;
    flex:          none;
    width:         60px;
    height:        50px;
    border-radius: 8px;
    overflow:      hidden;
}

.blog-single-sidebar__image img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.blog-single-sidebar__body {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.blog-single-sidebar__title-text {
    display:             -webkit-box;
    overflow:            hidden;
    -webkit-box-orient:  vertical;
    -webkit-line-clamp:  2;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.3;
    color:       #000000;
}

.blog-single-sidebar__date {
    font-size: 14px;
    color:     var(--color-muted);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .blog-single { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 60px; }

    .blog-single-sidebar__card { position: static; }

    .blog-single__title { font-size: 36px; }
}

@media (max-width: 767px) {
    .blog-single { padding: 24px 0 40px; }

    .blog-single__title { font-size: 26px; }

    .blog-single__content h2 { font-size: 22px; }
    .blog-single__content h3 { font-size: 19px; }

    .blog-single__nav { flex-direction: column; align-items: flex-start; }
}