/* =========================================
   Blog Index — list, cards, pager
   ========================================= */
.blog-list,
.blog-pager {
    width: 100%;
    margin-inline: auto;
    scrollbar-gutter: stable both-edges;
}

.blog-list {
    --blog-card-w: 372px;
    margin-top: 40px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--blog-card-w)));
    justify-content: center;
    gap: 24px;
    align-items: stretch;
}

.blog-pager {
    margin-top: 8px;
    margin-bottom: 32px;
}

/* Active tag filter + empty state */
.blog-filter {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cms-tag-container {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pixel-tag,
.blog-filter-tag {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    color: #a7483e;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease;
}

.pixel-tag::before,
.blog-filter-tag::before {
    content: '#';
    color: inherit;
}

.pixel-tag:hover {
    color: #8a3630;
}

.blog-filter-tag {
    font-size: 1.25rem;
    font-weight: 700;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .pixel-tag,
    .blog-filter-tag,
    .blog-readmore,
    .blog-filter-clear,
    .post-comments .cms-comment-area > .text-end > a.btn-primary,
    .post-comments .cms-comment-form button.btn-primary,
    .comment .btn {
        transition: none;
    }
}

.blog-empty {
    max-width: min(var(--site-content-narrow), 100%);
    margin: 40px auto 8px;
    padding: 18px 18px 14px;
    box-sizing: border-box;
    image-rendering: pixelated;
    border: 12px solid transparent;
    border-image: url('/images/WebUI/Container_5.png') 6 fill stretch;
}

.blog-empty > * { image-rendering: auto; }

.blog-empty-title {
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #a7483e;
}

.blog-empty-sub {
    margin: 0 0 14px;
    color: #0a0e14;
    line-height: 1.5;
}

/* The signup is skinned for the dark footer — a translucent black field and pale text. On
   this cream panel that turns muddy and low-contrast, so re-skin it like the comment box.
   Selectors sit one level deeper than footer.css, and !important matches its own. */
.blog-empty .enthroned-newsletter .newsletter-form .form-control,
.blog-empty .enthroned-newsletter .newsletter-form .form-control:-webkit-autofill {
    background: #eee7ca;
    border: 2px solid #cfbe4c !important;
    color: #0a0e14;
    -webkit-box-shadow: 0 0 0 1000px #eee7ca inset !important;
    -webkit-text-fill-color: #0a0e14 !important;
}

.blog-empty .enthroned-newsletter .newsletter-form .form-control::placeholder {
    color: #6b5c3a;
}

.blog-empty .enthroned-newsletter .newsletter-form .form-control:focus {
    background: #f1ead2;
    -webkit-box-shadow: 0 0 0 1000px #f1ead2 inset !important;
}

/* Footer sizing leaves the button a few pixels taller than the 38px field. */
.blog-empty .enthroned-newsletter .newsletter-form .btn-primary {
    height: 38px;
    padding: 0 16px;
    font-size: 1rem;
}

.blog-list:empty { display: none; margin: 0; }

/* Card */
.blog-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 420px;
    padding: 18px 18px 14px 18px;
    background: transparent;
    image-rendering: pixelated;
    border: 12px solid transparent;
    border-image: url('/images/WebUI/Container_5.png') 6 fill stretch;
    box-sizing: border-box;
}

.cover-link { display: block; width: 100%; }

/* Cover image */
.blog-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
    display: block;
    margin: 0;
    border-radius: 0;
}

/* Title + excerpt */
.blog-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.blog-title {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
    font-size: 1.4rem;
    color: #a7483e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-title a { color: inherit; text-decoration: none; }

.blog-excerpt {
    margin: 0;
    overflow-wrap: anywhere;
    color: #0a0e14;
    line-height: 1.5;
    font-size: 0.98rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Separator + footer */
.blog-sep {
    border: 0;
    min-height: 2px !important;
    height: 2px;
    background: #cfbe4c;
    margin-bottom: 0;
}

.blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.blog-date {
    margin: 0;
    font-size: .95rem;
    color: #a7483e;
}

/* The site's pixel button, shared with the store tabs and leaderboard tabs. Art is 17x17,
   sliced at 3 with a 6px border — a clean 2x, same convention as the frames. */
.blog-readmore,
.blog-filter-clear,
.post-comments .cms-comment-area > .text-end > a.btn-primary {
    display: inline-block;
    padding: 4px 12px;
    font-size: .95rem;
    font-weight: 600;
    color: #f4e3c2;
    background: transparent;
    border: 6px solid transparent;
    border-image: url('/images/WebUI/leaderboards/button.png') 3 fill stretch;
    border-radius: 0;
    image-rendering: pixelated;
    text-decoration: none;
    transition: filter .15s ease;
}

.blog-readmore:hover,
.blog-filter-clear:hover,
.post-comments .cms-comment-area > .text-end > a.btn-primary:hover {
    filter: brightness(1.12);
    color: #f4e3c2;
    text-decoration: none;
}

.blog-readmore:active,
.blog-filter-clear:active,
.post-comments .cms-comment-area > .text-end > a.btn-primary:active {
    transform: translateY(1px);
    color: #f4e3c2;
}

/* Pager */
.blog-pager .row { display: flex; justify-content: center; }
.blog-pager .col-sm-12.col-md-7 { flex: 0 1 auto; width: auto; max-width: 100%; }
.blog-pager .pagination { justify-content: center !important; margin: 0 auto; }
.blog-pager .pagination .page-item:first-child .page-link,
.blog-pager .pagination .page-item:last-child .page-link { font-size: 0; position: relative; }
.blog-pager .pagination .page-item:first-child .page-link::before { content: "\00AB"; font-size: 1rem; color: #cfbe4c; }
.blog-pager .pagination .page-item:last-child .page-link::before { content: "\00BB"; font-size: 1rem; color: #cfbe4c; }
.blog-pager .pagination .page-link { background: transparent; color: #cfbe4c; border: 1px solid #cfbe4c; }
.blog-pager .pagination .page-link:hover { background: rgba(207, 190, 76, .15); color: #cfbe4c; }
.blog-pager .pagination .page-item.active .page-link { background: #cfbe4c !important; color: #3a2b18 !important; border-color: #cfbe4c !important; }

.blog-list:has(.blog-card:first-child:nth-last-child(-n+2)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.blog-list:has(.blog-card:first-child:nth-last-child(-n+2)) > .blog-card {
    flex: 0 0 auto;
    width: min(var(--blog-card-w), 100%);
    height: auto;
    align-self: stretch;
}

@media (max-width: 1200px) {
    .blog-list { grid-template-columns: repeat(2, minmax(0, var(--blog-card-w))); }
}

@media (max-width: 768px) {
    .blog-list { grid-template-columns: minmax(0, var(--blog-card-w)); }
    .blog-card { height: auto; }
    .blog-info { flex: 0; }
}


/* =========================================
   Blog Post — article, comments
   ========================================= */
.post-centered {
    max-width: min(var(--site-content-narrow), 100%);
    margin: 40px auto 32px;
    scrollbar-gutter: stable both-edges;
}

/* Article frame */
.post-frame {
    padding: 22px;
    background: transparent;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border: 12px solid transparent;
    border-image: url('/images/WebUI/Container_5.png') 6 fill stretch;
    image-rendering: pixelated;
}

.post-cover-frame {
    margin-bottom: 16px;
}

.post-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Post header */
.post-header {
    margin: 6px 0 16px;
    text-align: center;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}

.post-title {
    margin: 0;
    font-size: 2rem !important;
    font-weight: 700;
    color: #a7483e;
    position: relative;
    z-index: 1;
}

.post-date {
    margin: 0;
    font-size: 0.95rem;
    color: #a7483e !important;
    position: relative;
    z-index: 1;
}

/* Post body */
.post-body {
    margin-top: 6px;
    color: #0a0e14;
    position: relative;
    z-index: 1;
    overflow-wrap: anywhere;
    min-width: 0;
}

.post-body p,
.post-body div,
.post-body span,
.post-body li,
.post-body td,
.post-body th {
    color: #0a0e14 !important;
}

.post-body img,
.post-body iframe {
    max-width: 100%;
    height: auto;
}

.post-body table {
    width: 100%;
    display: block;
    overflow-x: auto;
}

.post-body pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Tags & extras */
.post-meta {
    margin-top: 12px;
}

.post-extras {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.post-extra {
    flex: 1;
    min-width: 250px;
}

/* Comments section */
.post-comments {
    margin-top: 24px;
    width: 100%;
    max-width: 100%;
}

.post-comments-frame {
    padding: 18px;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 12px solid transparent;
    border-image: url('/images/WebUI/Container_5.png') 6 fill stretch;
    image-rendering: pixelated;
}

.comments-inner {
    width: 100%;
    max-width: 100%;
}

.post-comments .cms-comment-form,
.post-comments .cms-comment-area,
.post-comments .cms-comment-list,
.post-comments .row,
.post-comments .col-12 {
    width: 100%;
    max-width: 100%;
}

.post-comments .cms-comment-area.mb-5 {
    margin-bottom: 0 !important;
}

.post-comments .cms-comment-area {
    margin-bottom: 16px;
}

/* Comment form */
.post-comments .cms-comment-form {
    padding: 16px;
    border-radius: 6px;
    background: #eee7ca;
    border: 2px solid #cfbe4c;
    margin: 0;
}

.post-comments .cms-comment-form-area.bg-light.card,
.post-comments .cms-comment-form .card,
.post-comments .cms-comment-form .card-body {
    background: transparent !important;
    border: none;
    box-shadow: none;
    padding: 0;
}

.post-comments .cms-comment-form-area.bg-light.card {
    margin: 12px 0;
}

.post-comments .cms-comment-form-area.card.p-3 {
    padding: 0 !important;
}

/* Comment textarea */
.post-comments .cms-comment-form textarea,
.post-comments .form-control {
    padding: 12px !important;
    border-radius: 4px;
    background: #eee7ca;
    color: #0a0e14;
    border: 2px solid #cfbe4c !important;
}

.post-comments .form-control:hover {
    border-color: #cfbe4c !important;
}

.post-comments .cms-comment-form textarea:focus,
.post-comments .form-control:focus {
    outline: none;
    background: #f1ead2;
    border-color: #cfbe4c !important;
    box-shadow: 0 0 0 2px rgba(207, 190, 76, 0.35);
}

.post-comments .form-control::placeholder {
    color: #0a0e14;
    opacity: 1;
}

.post-comments .cms-comment-form small,
.post-comments .cms-comment-form .text-muted {
    color: #0a0e14;
}

.post-comments .cms-comment-form small a,
.post-comments .cms-comment-form .text-muted a,
.comment .cms-comment-content-area a {
    color: #a7483e;
    text-decoration: underline;
}

.post-comments .cms-comment-form small a:hover,
.post-comments .cms-comment-form .text-muted a:hover,
.comment .cms-comment-content-area a:hover {
    color: #8a3630;
}

/* Send button */
/* Every control in the comment box — Send, Reply, Edit, Delete, Update, Cancel — is the same
   pixel button as the store and leaderboard tabs. !important is needed only because Bootstrap
   puts it on the .bg-white and .text-muted utilities the delete and edit links carry. */
.post-comments .cms-comment-form button.btn-primary,
.comment .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: .85rem;
    font-weight: 600;
    color: #f4e3c2 !important;
    background: transparent !important;
    border: 6px solid transparent;
    border-image: url('/images/WebUI/leaderboards/button.png') 3 fill stretch;
    border-radius: 0;
    image-rendering: pixelated;
    text-decoration: none;
    box-shadow: none;
    /* Edit and Delete carry Bootstrap's .text-muted, which the theme dims to 0.8 — that made
       Edit look disabled next to Reply. */
    opacity: 1;
    transition: filter .15s ease;
}

.post-comments .cms-comment-form button.btn-primary:hover,
.comment .btn:hover {
    filter: brightness(1.12);
    color: #f4e3c2 !important;
    text-decoration: none;
}

.post-comments .cms-comment-form button.btn-primary:active,
.comment .btn:active {
    transform: translateY(1px);
}

/* Delete is the odd one out, so it takes the tan "selected" variant the store and leaderboard
   tabs use for their active state. Reply and Edit stay on the red button with Send. */
.comment .comment-delete-link,
.comment .comment-delete-link:hover {
    border-image: url('/images/WebUI/leaderboards/buttonselected.png') 3 fill stretch;
    color: #3a2b18 !important;
}

/* CmsKit emits Reply, Delete, Edit in that order. Flex ordering puts the destructive action
   last without touching its markup. */
.comment .inner-comment-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.comment .comment-reply-link { order: 1; }
.comment .comment-edit-link { order: 2; }
.comment .comment-delete-link { order: 3; }

/* Comment boxes */
.comment {
    width: 100%;
    max-width: 100%;
    margin-bottom: 12px;
}

.comment:last-child {
    margin-bottom: 0;
}

.comment .card {
    background: #eee7ca;
    border: 2px solid #cfbe4c;
    border-radius: 6px;
    padding: 16px;
    box-sizing: border-box;
}

.comment .card.p-3 {
    padding: 16px !important;
}

.comment .card.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.comment .card.my-3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Comment content & author */
.comment h5 {
    margin-bottom: 4px;
    font-weight: 500;
    color: #a7483e;
    font-size: 1rem;
}

.comment h5 .text-muted {
    opacity: 0.8;
    font-size: 0.85rem;
}

.comment .cms-comment-content-area {
    color: #0a0e14;
    background: transparent;
    margin-top: 4px;
    margin-bottom: 0;
    overflow-wrap: anywhere;
    min-width: 0;
}

.comment .reaction-in-comment {
    display: none;
}

.post-comments .cms-comment-area > .text-end {
    margin: 6px 0 14px;
    text-align: center !important;
}

.comment a.btn.btn-light:not(.comment-links) {
    display: none;
}

.comment .row.mt-2:not(:has(.comment-links)) {
    display: none;
}

.comment .cms-comment-content-area p {
    margin-bottom: 0;
}

.comment .cms-comment-content-area p:empty {
    display: none;
}

.comment .cms-comment-content-area p:not(:empty) + p:not(:empty) {
    margin-top: 10px;
}

.comment h5 .text-muted::after {
    content: ' UTC';
}

/* Comment action buttons */
.comment .btn:focus,
.comment .btn:active {
    outline: none;
    box-shadow: none;
}

.comment .row.mt-2 {
    margin-top: 8px !important;
}

/* Comment edit mode */
.comment .cms-comment-edit-area .card.bg-light {
    background: transparent !important;
    border: 2px solid #cfbe4c;
    box-shadow: none;
    border-radius: 6px;
    padding: 16px;
}

.comment .cms-comment-edit-area .card,
.comment .cms-comment-edit-area .card-body {
    background: transparent !important;
    box-shadow: none;
    border: none;
    padding: 0;
}

.comment .cms-comment-edit-area textarea.form-control {
    background: #eee7ca;
    border: 2px solid #cfbe4c;
    color: #0a0e14;
    border-radius: 4px;
    padding: 12px;
}

.comment .cms-comment-edit-area textarea.form-control:focus {
    outline: none;
    border-color: #cfbe4c;
    box-shadow: 0 0 0 2px rgba(207, 190, 76, 0.35);
    background: #f1ead2;
}

.post-comments button .abp-block-area {
    background: transparent;
    opacity: 1;
}

.post-comments button .abp-block-area-busy::before,
.post-comments button .abp-block-area-busy::after {
    display: none;
}

/* Update button */
@media (max-width: 768px) {
    .post-title {
        font-size: 1.4rem !important;
    }

    .post-extras {
        flex-direction: column;
    }

    .post-comments .cms-comment-replies {
        margin-left: 16px;
        padding-left: 12px;
    }
}