.ck-public .ck-nav a[aria-current=page] {
    color: var(--ck-primary);
    text-decoration: underline;
    text-underline-offset: 6px
}

.ck-public .ck-blog-list {
    padding-top: 36px
}

.ck-public .ck-blog-list h1 {
    font-size: clamp(2rem,4vw,3rem)
}

.ck-public .ck-blog-search {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    margin: 0 auto 32px;
    max-width: 760px
}

    .ck-public .ck-blog-search label {
        color: var(--ck-primary-dark);
        font-weight: 700
    }

    .ck-public .ck-blog-search-actions {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 12px;
        min-width: 0
    }

    .ck-public .ck-blog-search input {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        padding: 12px 16px;
        border: 1px solid var(--ck-border);
        border-radius: 8px;
        font: inherit;
        background-color: var(--ck-card);
        color: var(--ck-primary-dark)
    }

    .ck-public .ck-blog-search .ck-button {
        min-height: 56px;
        padding: 12px 20px;
        border-radius: 8px;
        white-space: nowrap;
        cursor: pointer
    }

    .ck-public .ck-blog-search input:focus {
        border-color: var(--ck-explore-bg);
        outline: 2px solid var(--ck-explore-bg);
        outline-offset: 2px
    }

    .ck-public .ck-blog-search .ck-text-link {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        min-height: 44px
    }

.ck-blog-card {
    display: flex;
    flex-direction: column
}

    .ck-blog-card .ck-card-body {
        display: flex;
        flex-direction: column;
        flex: 1
    }

    .ck-blog-card .ck-text-link {
        margin-top: auto
    }

    .ck-blog-card h3 {
        overflow-wrap: anywhere
    }

    .ck-blog-card .ck-card-image {
        flex-shrink: 0
    }

.ck-public .ck-blog-detail {
    padding-top: 36px
}

.ck-blog-breadcrumb {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .85rem;
    margin-bottom: 38px
}

    .ck-blog-breadcrumb a {
        text-decoration: underline
    }

    .ck-blog-breadcrumb span:last-child {
        min-width: 0;
        overflow-wrap: anywhere
    }

.ck-blog-heading {
    margin: 0 auto 38px;
    text-align: center
}

    .ck-blog-heading h1 {
        font-size: clamp(2.5rem,5.8vw,5rem);
        overflow-wrap: anywhere
    }

    .ck-blog-heading time {
        font-size: .85rem
    }

.ck-public .ck-blog-summary {
    font-size: 1.15rem;
    line-height: 1.8;
    margin: 28px 0 0;
    padding: 24px;
    background: var(--ck-card);
    border-left: 4px solid var(--ck-accent);
    border-radius: 4px;
    text-align: left
}

.ck-blog-cover {
    width: 100%;
    aspect-ratio: 8/5;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    background: var(--ck-bg);
    margin-bottom: 48px
}

.ck-blog-content {
    min-width: 0;
    margin-inline: auto;
    font-size: 18px;
    line-height: 1.85;
    overflow-wrap: anywhere
}

    .ck-blog-content > * {
        max-width: 100%
    }

    .ck-blog-content h2, .ck-blog-content h3 {
        margin: 46px 0 22px
    }

    .ck-blog-content h2 {
        font-size: 2.2rem
    }

    .ck-blog-content h3 {
        font-size: 1.55rem
    }

    .ck-blog-content p, .ck-blog-content ul, .ck-blog-content ol {
        margin: 0 0 26px
    }

    .ck-blog-content ul, .ck-blog-content ol {
        padding-left: 1.5em
    }

    .ck-blog-content li {
        margin-bottom: 10px
    }

    .ck-blog-content blockquote {
        margin: 30px 0;
        padding: 20px 26px;
        border-left: 4px solid var(--ck-accent);
        background: var(--ck-card);
        font-style: italic
    }

    .ck-blog-content a {
        color: var(--ck-primary-dark);
        text-decoration: underline;
        text-underline-offset: 3px
    }

    .ck-blog-content img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
        margin: 26px auto
    }

    .ck-blog-content figure {
        margin: 30px 0
    }

    .ck-blog-content figcaption {
        font-size: .85rem;
        text-align: center
    }

    .ck-blog-content pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        background: var(--ck-card);
        padding: 20px
    }

.ck-blog-table {
    max-width: 100%;
    overflow-x: auto;
    margin: 30px 0;
    border: 1px solid var(--ck-border);
    border-radius: 6px
}

.ck-blog-content table {
    border-collapse: collapse;
    width: 100%;
    font-size: 1rem
}

.ck-blog-content th, .ck-blog-content td {
    padding: 12px 16px;
    border: 1px solid var(--ck-border);
    min-width: 130px;
    text-align: left
}

.ck-blog-content th {
    background: var(--ck-section-green)
}

.ck-blog-share {
    max-width: 760px;
    margin: 40px auto;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap
}

    .ck-blog-share .ck-button {
        padding: 5px 15px;
        min-height: auto;
    }

.ck-blog-share p {
    flex-basis: 100%;
    font-size: .9rem
}

.ck-blog-related {
    margin-top: 76px
}

@media(max-width:600px) {
    .ck-public .ck-blog-search-actions {
        grid-template-columns: minmax(0,1fr)
    }

    .ck-blog-content {
        font-size: 17px
    }

    .ck-blog-cover {
        border-radius: 10px;
        margin-bottom: 30px
    }

    .ck-blog-heading {
        text-align: left
    }

        .ck-blog-heading h1 {
            font-size: clamp(2.2rem,10vw,3.2rem)
        }

    .ck-public .ck-blog-summary {
        padding: 18px
    }

    .ck-blog-content blockquote {
        padding: 18px
    }

    .ck-blog-related {
        margin-top: 50px
    }
}