/* ═══════════════════════════════════════════════
   Web Toolkit — Reading Time Badge (Frontend)
   ═══════════════════════════════════════════════ */

.wt-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b7280;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

.wt-reading-time .wt-rt-icon {
    font-style: normal;
    font-size: 13px;
    color: #6b7280;
}

.wt-reading-time .wt-rt-text {
    line-height: 1;
}

/* Variant used when badge sits in the same row as date/author meta
   (the "after_meta" position) — adds a left divider like a typical
   news-site byline row. */
.wt-reading-time.wt-rt-meta-row {
    margin-left: 8px;
    padding-left: 10px;
    border-left: 1px solid #d1d5db;
}

/* Variant used when the badge is auto-injected above the content
   (the "before_content" position) — gives it its own breathing room. */
.wt-reading-time.wt-rt-before-content {
    display: flex;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* ─── Mobile ─────────────────────────────────── */
@media (max-width: 480px) {
    .wt-reading-time {
        font-size: 13px;
    }
}