/**
 * GC Theme — Post Meta
 *
 * Author meta block shown at the top of all singular posts:
 *   .gc-single-meta            wrapper
 *     .gc-single-avatar        author avatar (round, 36px)
 *     <span>by [Author Name]</span>
 *     <span>Published on [Date]</span>
 *     .gc-single-updated       Last updated badge (right-aligned)
 *
 * Shared across content posts (post, gc_guide, case_study,
 * interview, podcast) AND casino reviews.
 *
 * @package GC_Theme
 */

.gc-single-meta {
    display: flex;
    align-items: center;
    column-gap: 12px;
    row-gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 56px;
    justify-content: flex-start;
}

.gc-single-meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    flex: 1;
}

.gc-single-meta-text > span:first-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--gc-navy);
}

.gc-single-meta-text > span:last-child {
    font-size: 12px;
    color: var(--gc-text-muted);
}

.gc-single-updated {
    margin-left: auto;
}

.gc-single-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.gc-single-meta a {
    color: var(--gc-navy);
    font-weight: 600;
    text-decoration: none;
}

.gc-single-meta a:hover {
    color: var(--gc-primary-dark);
}

/* ── Last Updated badge ── */
.gc-single-updated {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--gc-text-muted) !important;
    border: 1px solid var(--gc-border-soft);
    padding: 3px 10px;
    border-radius: 14px;
    font-weight: 400;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.gc-single-updated::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--gc-success);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Casino-specific override (no margin below meta block) ── */
.gc-casino-content .gc-single-meta {
    margin-bottom: 0;
}

/* ── Mobile responsive ── */
/* ── Mobile layout (≤600px) ────────────────────────── */
@media (max-width: 600px) {

    .gc-single-meta {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        align-items: start;
        margin-bottom: 0;
    }

    .gc-single-avatar {
        grid-row: 1 / span 2;
    }

    .gc-single-meta-text {
        flex: none;
        min-width: 0;
        grid-column: 2;
    }

    .gc-single-updated {
        grid-column: 2;
        margin-left: 0 !important;
        margin-top: 0;
        width: fit-content;
        align-self: start;
    }
}