/* Bashkardi v1.0.185
 * Shared layout contract for single article and single video pages.
 * Keep section spacing and related-card columns identical on both pages.
 */
:root {
    --bk-single-section-gap: 8px;
    --bk-single-related-thumb: 130px;
}

/* One vertical rhythm for both single-content pages. */
.bk-article-maincol > .bk-cover-card,
.bk-video-main > .bk-player-card {
    margin-bottom: var(--bk-single-section-gap) !important;
}

.bk-article-maincol > .bk-info-card,
.bk-video-main > .bk-info-card {
    margin-top: 0 !important;
}

.bk-article-maincol > .bk-owner-card,
.bk-video-main > .bk-owner-card,
.bk-article-maincol > .bk-content-card,
.bk-article-maincol > .bk-comments-card,
.bk-video-main > .bk-comments-card {
    margin-top: var(--bk-single-section-gap) !important;
}

/* The thumbnail and the title/meta area are two rigid, independent columns. */
.bk-related-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
    contain: layout paint;
}

.bk-related-thumb {
    position: relative !important;
    flex: 0 0 var(--bk-single-related-thumb) !important;
    width: var(--bk-single-related-thumb) !important;
    min-width: var(--bk-single-related-thumb) !important;
    max-width: var(--bk-single-related-thumb) !important;
    min-height: 78px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    z-index: 1;
}

.bk-related-thumb > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.bk-related-info {
    position: relative !important;
    z-index: 2;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 8px 9px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: inherit;
}

.bk-related-name,
.bk-related-meta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.bk-related-name {
    overflow: hidden !important;
    overflow-wrap: anywhere;
}

.bk-related-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.bk-related-meta-stats {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.bk-related-meta-item,
.bk-related-time {
    flex: 0 0 auto !important;
}

/* When the sidebar drops below the main content, use the same section gap. */
@media (max-width: 1050px) {
    .bk-article-layout,
    .bk-video-layout {
        row-gap: var(--bk-single-section-gap) !important;
        column-gap: var(--bk-single-section-gap) !important;
    }
}

@media (max-width: 740px) {
    :root {
        --bk-single-section-gap: 7px;
        --bk-single-related-thumb: 124px;
    }

    .bk-related-info {
        padding: 7px 8px !important;
    }
}

@media (max-width: 360px) {
    :root {
        --bk-single-related-thumb: 116px;
    }

    .bk-related-info {
        padding-inline: 7px !important;
    }

    .bk-related-meta {
        gap: 4px !important;
    }
}

/* v1.0.191: restore the original summary treatment; only the parent content card loses its outer shadow. */
:root {
    --bk-single-card-shadow: 0 8px 24px rgba(24, 61, 78, .115);
}

/* Main white sections remain distinct from the light-gray page background. */
body.bk-single-content-light .bk-info-card,
body.bk-single-content-light .bk-owner-card,
body.bk-single-content-light .bk-comments-card,
body.bk-single-content-light .bk-related-card {
    border-color: #d9e6ec !important;
    box-shadow: var(--bk-single-card-shadow) !important;
}

/* v1.0.192: the article content parent is a borderless, padding-free wrapper. */
body.bk-single-content-light .bk-content-card {
    background: #fff !important;
    border: 0 !important;
    border-radius: 17px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/*
 * Do not flatten the summary or article typography here.
 * Their original one-sided accent, background, inset line and text styling
 * continue to come from blog/post.php and single-content-light.css.
 */

/* Featured article images keep their intrinsic aspect ratio with no letterboxing. */
.bk-cover-box {
    display: block !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

.bk-cover-box .bk-featured-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
}

body.bk-single-content-light .bk-cover-card,
body.bk-single-content-light .bk-cover-box,
body.bk-single-content-light .bk-featured-image {
    background: #fff !important;
}

@media (max-width: 740px) {
    :root {
        --bk-single-card-shadow: 0 6px 18px rgba(24, 61, 78, .11);
    }

    body.bk-single-content-light .bk-content-card {
        border: 0 !important;
        border-radius: 15px !important;
        padding: 0 !important;
    }
}

/* v1.0.197: compact category label aligned with the publish time on both pages. */
body.bk-single-content-light .bk-detail-row {
    align-items: center !important;
}
body.bk-single-content-light .bk-detail-row > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.35 !important;
}
body.bk-single-content-light .bk-category {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    gap: 3px !important;
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
body.bk-single-content-light .bk-category .bk-inline-svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
}
@media (max-width: 740px) {
    body.bk-single-content-light .bk-detail-row {
        align-items: center !important;
    }
    body.bk-single-content-light .bk-category {
        min-height: 19px !important;
        padding: 3px 6px !important;
        font-size: .61rem !important;
    }
    body.bk-single-content-light .bk-category .bk-inline-svg {
        width: 12px !important;
        height: 12px !important;
        flex-basis: 12px !important;
    }
}