.public-blog-info {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #d9e4eb;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 .4rem 1.2rem rgb(31 65 91 / 8%);
}

.public-blog-info .blog-description,
.public-blog-info .closed-blog {
    margin: 0;
}

.public-blog-info__offtop-notice {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1px solid #f1d6bd;
    border-radius: .55rem;
    background: #fff8f0;
    color: #8b4a16;
    font-size: .9rem;
    line-height: 1.4;
}

.public-blog-info__offtop-notice .offtop {
    position: relative;
    flex: 0 0 2.9rem;
    width: 2.9rem;
    height: 2.9rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #fee9d4;
}

.public-blog-info__offtop-notice .offtop::before,
.public-blog-info__offtop-notice .offtop::after {
    position: absolute;
    content: '';
    box-sizing: border-box;
}

.public-blog-info__offtop-notice .offtop::before {
    top: .48rem;
    left: .92rem;
    width: 1.04rem;
    height: 1.16rem;
    border: .24rem solid #a95e23;
    border-bottom: 0;
    border-radius: .72rem .72rem 0 0;
}

.public-blog-info__offtop-notice .offtop::after {
    top: 1.28rem;
    left: .74rem;
    width: 1.4rem;
    height: 1.14rem;
    border-radius: .24rem;
    background: #a95e23;
}

.public-blog-info__subscribers {
    padding: 1rem;
    border: 1px solid #dce8ef;
    border-radius: .6rem;
    background: #f6fafc;
}

.public-blog-info__subscribers-heading,
.public-blog-info__actions,
.public-blog-info__admin-actions,
.public-blog-info__subscriber-list,
.public-blog-info__dialog-header {
    display: flex;
    align-items: center;
}

.public-blog-info__subscribers-heading {
    gap: .55rem;
    margin-bottom: .75rem;
}

.public-blog-info__subscribers h2,
.public-blog-info__dialog h2 {
    margin: 0;
    padding: 0;
    color: #1d3d55;
    font-size: 1.05rem;
}

.public-blog-info__subscribers-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .45rem;
    border-radius: 99px;
    background: #e1f2fb;
    color: #0573ac;
    font-size: .82rem;
    font-weight: 700;
}

.public-blog-info__subscriber-list {
    flex-wrap: wrap;
    gap: .4rem .65rem;
}

.public-blog-info__subscriber,
.public-blog-info__dialog-user {
    min-width: 0;
}

.public-blog-info__subscriber .user,
.public-blog-info__dialog-user .user {
    display: inline-flex;
    align-items: center;
}

.public-blog-info__show-all {
    padding: .22rem .55rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: #0877b5;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.public-blog-info__show-all:hover,
.public-blog-info__show-all:focus {
    background: #e1f2fb;
    color: #005b91;
    outline: none;
}

.public-blog-info__actions {
    justify-content: space-between;
    gap: .75rem;
    padding-top: .2rem;
}

.public-blog-info__admin-actions {
    flex-wrap: wrap;
    gap: .5rem;
}

.public-blog-info__admin-action a,
.public-blog-info__subscribe-control a {
    display: block;
    border-radius: .45rem;
    text-decoration: none;
    font-weight: 600;
}

.public-blog-info__admin-action a {
    padding: .5rem .75rem;
    border: 1px solid #c8d8e3;
    background: #fff;
    color: #31566e;
}

.public-blog-info__admin-action--delete a {
    border-color: #efc4c0;
    color: #b42318;
}

.public-blog-info__subscribe-control {
    display: inline-block;
}

.public-blog-info__subscribe-control a {
    padding: .6rem 1rem;
    background: #087fc0;
    color: #fff;
    box-shadow: 0 .2rem .45rem rgb(8 127 192 / 25%);
}

.public-blog-info__subscribe-control a[title="Покинуть блог"] {
    border: 1px solid #bdd2df;
    background: #fff;
    color: #31566e;
    box-shadow: none;
}

.public-blog-info__admin-action a:hover,
.public-blog-info__admin-action a:focus,
.public-blog-info__subscribe-control a:hover,
.public-blog-info__subscribe-control a:focus {
    filter: brightness(.96);
    outline: none;
}

.public-blog-info__dialog[hidden] {
    display: none;
}

.public-blog-info__dialog,
.public-blog-info__dialog-backdrop {
    position: fixed;
    inset: 0;
}

.public-blog-info__dialog {
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.public-blog-info__dialog-backdrop {
    background: rgb(15 31 43 / 52%);
}

.public-blog-info__dialog-content {
    position: relative;
    z-index: 1;
    width: min(100%, 34rem);
    max-height: min(75vh, 38rem);
    padding: 1.15rem;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 1.1rem 3rem rgb(15 31 43 / 30%);
}

.public-blog-info__dialog-header {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.public-blog-info__dialog-close {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: #edf3f6;
    color: #31566e;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.public-blog-info__dialog-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .45rem .75rem;
    max-height: calc(min(75vh, 38rem) - 5rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: .2rem;
}

.public-blog-info__dialog-user {
    min-width: 0;
    overflow: hidden;
    padding: .5rem .6rem;
    border-radius: .4rem;
    background: #f3f8fa;
}

.public-blog-info__dialog-user > a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .public-blog-info__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .public-blog-info__subscribe-control,
    .public-blog-info__subscribe-control a {
        width: 100%;
        text-align: center;
    }
}