/**
 * Post Meta Block — Static Styles.
 *
 * BEM: boost-post-meta
 * Layout modifiers: --inline, --stacked
 * Dynamic CSS (font-size, separator, alignment) rendered inline via render.php.
 *
 * @package Boost Theme Framework
 * @since 3.6.0
 */

/* /blocks/post-meta/style.css */

/* =============================================================================
   BASE
   ============================================================================= */

.boost-post-meta {
    position: relative;
    font-size: 0.85rem;
    color: var(--boost-text-muted, #64748b);
    line-height: 1.5;
}

/* =============================================================================
   LIST
   ============================================================================= */

.boost-post-meta__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =============================================================================
   ITEM
   ============================================================================= */

.boost-post-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Stacked: items take full width for consistent text alignment. */
.boost-post-meta--stacked .boost-post-meta__list {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.boost-post-meta--stacked .boost-post-meta__item {
    width: 100%;
}

/* Kill any separator in stacked mode (safety net for dynamic CSS edge cases). */
.boost-post-meta--stacked .boost-post-meta__item::before {
    content: none !important;
    display: none !important;
}

/* =============================================================================
   ICON (inline, no container)
   ============================================================================= */

.boost-post-meta__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--boost-icon-color, currentColor);
}

.boost-post-meta__icon svg {
    width: 1em;
    height: 1em;
    stroke-width: 2;
}

/* Styled icon containers inherit text size. */
.boost-post-meta .boost-styled-icon {
    font-size: inherit;
    vertical-align: middle;
}

/* =============================================================================
   LINK
   ============================================================================= */

.boost-post-meta__link {
    color: var(--boost-text, inherit);
    text-decoration: none;
    transition: color 0.2s ease;
}

.boost-post-meta__link:hover {
    color: var(--boost-primary, #2563eb);
}

/* =============================================================================
   AVATAR
   ============================================================================= */

.boost-post-meta__avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* =============================================================================
   TAGS (pill style)
   ============================================================================= */

.boost-post-meta__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.boost-post-meta__tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: var(--boost-bg-alt, #f1f5f9);
    border-radius: 999px;
    color: var(--boost-text, inherit);
    text-decoration: none;
    font-size: 0.9em;
    transition: background 0.2s ease, color 0.2s ease;
}

.boost-post-meta__tag:hover {
    background: var(--boost-primary, #2563eb);
    color: #fff;
}

/* =============================================================================
   CATEGORIES
   ============================================================================= */

.boost-post-meta__cats {
    display: inline;
}

/* =============================================================================
   VALUE (plain text items)
   ============================================================================= */

.boost-post-meta__value {
    /* Inherits parent color. */
}

/* =============================================================================
   FOCUS
   ============================================================================= */

.boost-post-meta a:focus-visible {
    outline: 2px solid var(--boost-primary, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .boost-post-meta__link,
    .boost-post-meta__tag {
        transition: none;
    }
}