/* ==========================================================================
   SINGLE POST CSS
   ========================================================================== */

/* ----------------------------------------
   FEATURED IMAGE / SVG THUMBNAIL
   ---------------------------------------- */
.rbx-post-thumbnail {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: calc(var(--gap) * 1.5);
    border: 1px solid var(--rbx-border);
}

.rbx-post-thumbnail-img {
    width: 100%;
    height: auto;
    display: block;
}

.rbx-svg-thumbnail {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: calc(var(--gap) * 1.5);
    border: 1px solid var(--rbx-border);
    background: var(--rbx-dark-alt);
}
.rbx-svg-thumbnail svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------
   POST HEADER
   ---------------------------------------- */
.rbx-post-header {
    margin-bottom: calc(var(--gap) * 1.5);
}

.rbx-post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-bottom: var(--gap-sm);
}

.rbx-post-title {
    margin-bottom: var(--gap-sm);
}

.rbx-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
    font-size: 0.82rem;
    color: var(--rbx-text-dim);
    padding-top: var(--gap-sm);
    border-top: 1px solid var(--rbx-border);
}

.rbx-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.rbx-meta-item a {
    color: var(--rbx-text-dim);
}
.rbx-meta-item a:hover { color: var(--rbx-red); }

/* ----------------------------------------
   POST CONTENT
   ---------------------------------------- */
.rbx-post-inner {
    background: var(--rbx-dark-alt);
    border: 1px solid var(--rbx-border);
    border-radius: var(--radius-xl);
    padding: calc(var(--gap) * 1.75);
}

.rbx-post-content {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--rbx-text);
}

.rbx-post-content > * + * { margin-top: 1.2em; }
.rbx-post-content > *:first-child { margin-top: 0; }

/* ----------------------------------------
   POST FOOTER
   ---------------------------------------- */
.rbx-post-footer {
    margin-top: calc(var(--gap) * 1.5);
    padding-top: var(--gap);
    border-top: 1px solid var(--rbx-border);
}

.rbx-post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    font-size: 0.85rem;
    color: var(--rbx-text-dim);
}
.rbx-post-tags a {
    color: var(--rbx-text-dim);
    background: var(--rbx-mid);
    padding: 0.2em 0.6em;
    border-radius: var(--radius);
    font-size: 0.78rem;
    transition: all var(--transition);
}
.rbx-post-tags a:hover {
    background: var(--rbx-red);
    color: var(--rbx-white);
    text-decoration: none;
}