/* Shared public layout: content and footer stay together on tall displays. */
:root {
    --xd-grid-width: min(1440px, calc(100vw - 64px));
}
.public-page > .xd-main {
    width: 100%;
    min-width: 0;
}
.xd-social-footer {
    padding: 26px 0 22px;
}
.cat-grid-page,
.illustration-detail-xd-shell {
    width: var(--xd-grid-width) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
}
.cat-grid { width: 100%; }
.cat-grid-page { padding-top: 28px; padding-bottom: 12px; }
.contact-xd-page {
    min-height: 0;
    padding: 48px 0 24px;
}
.about-xd-grid {
    width: min(1100px, var(--xd-grid-width)) !important;
}
.blog-xd-page .blog-xd-shell,
.blog-details-xd-page .blog-details-xd-shell {
    width: min(900px, var(--xd-grid-width)) !important;
    max-width: var(--xd-grid-width) !important;
}
.blog-xd-page .blog-xd-topbar,
.blog-xd-page .blog-xd-card,
.blog-details-xd-page .blog-details-xd-card {
    width: 100% !important;
    max-width: 100% !important;
}
.blog-xd-page .blog-xd-image,
.blog-details-xd-page .blog-details-xd-image {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
}
.about-xd-page,
.blog-xd-page,
.blog-details-xd-page,
.illustration-detail-xd-page {
    padding-top: 28px !important;
    padding-bottom: 12px !important;
}
.blog-xd-image img,
.blog-details-xd-image img,
.illustration-detail-xd-slide img {
    object-position: center;
    margin-inline: auto;
}
.blog-comment-reply {
    margin: 16px 0 0 20px;
    padding: 14px 16px;
    border-inline-start: 3px solid #f7b500;
    background: #faf8f1;
}
.blog-xd-comment-item p,
.blog-comment-reply p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.blog-xd-comment-head {
    flex-wrap: wrap;
    gap: 8px;
}
.comment-admin-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: #ffdf78;
    color: #302600;
    font-size: 11px;
}
.blog-detail-comments { margin-top: 28px; }
@media (max-width: 900px) {
    :root { --xd-grid-width: calc(100vw - 40px); }
}
@media (max-width: 780px) {
    :root { --xd-grid-width: calc(100vw - 28px); }
    .xd-header-inner { gap: 12px; }
    .blog-comment-reply { margin-inline-start: 10px; padding: 12px; }
}