/* ==========================================================================
   Last Updated Date — front-end badge
   ========================================================================== */

/* ── Badge wrapper ────────────────────────────────────────────────────────── */
.lud-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;

    background: #f0f6fc;
    border: 1px solid #c8d8ea;
    border-left: 4px solid #2271b1;
    border-radius: 6px;

    padding: 10px 18px;
    margin: 1.4em 0;

    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1e1e1e;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.lud-badge__icon {
    display: flex;
    align-items: center;
    color: #2271b1;
    flex-shrink: 0;
}

.lud-badge__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ── Label ────────────────────────────────────────────────────────────────── */
.lud-badge__label {
    font-weight: 700;
    color: #2271b1;
    letter-spacing: 0.01em;
}

/* ── Separator ────────────────────────────────────────────────────────────── */
.lud-badge__sep {
    color: #9ba3af;
}

/* ── Date ─────────────────────────────────────────────────────────────────── */
.lud-badge__date {
    color: #374151;
    font-weight: 500;
}

/* ── Dark-mode support ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .lud-badge {
        background: rgba(34, 113, 177, 0.12);
        border-color: rgba(34, 113, 177, 0.4);
        color: #e5e7eb;
    }
    .lud-badge__label { color: #60a5fa; }
    .lud-badge__icon  { color: #60a5fa; }
    .lud-badge__date  { color: #d1d5db; }
    .lud-badge__sep   { color: #6b7280; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lud-badge { font-size: 0.8125rem; padding: 9px 14px; }
}