/* ==========================================================================
   CyberBuzz — Components
   Reusable UI building blocks: buttons, cards, badges, tags.
   ========================================================================== */

/* ---------- Buttons ---------- */
.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cb-space-2);
    padding: var(--cb-space-3) var(--cb-space-6);
    font-family: var(--cb-font-sans);
    font-weight: 700;
    font-size: var(--cb-text-sm);
    letter-spacing: var(--cb-tracking-wider);
    text-transform: uppercase;
    border-radius: var(--cb-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--cb-duration-fast) var(--cb-ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.cb-btn--primary {
    background: var(--cb-accent);
    color: var(--cb-accent-text);
    border-color: var(--cb-accent);
}
.cb-btn--primary:hover {
    background: var(--cb-accent-hover);
    border-color: var(--cb-accent-hover);
    color: var(--cb-accent-text);
    box-shadow: var(--cb-shadow-glow);
    transform: translateY(-1px);
}

.cb-btn--ghost {
    background: transparent;
    color: var(--cb-text);
    border-color: var(--cb-border-strong);
}
.cb-btn--ghost:hover {
    border-color: var(--cb-accent);
    color: var(--cb-accent);
}

.cb-btn--sm { padding: var(--cb-space-2) var(--cb-space-4); font-size: var(--cb-text-xs); }
.cb-btn--lg { padding: var(--cb-space-4) var(--cb-space-8); font-size: var(--cb-text-base); }

.cb-btn .cb-btn__icon {
    width: 1em;
    height: 1em;
    transition: transform var(--cb-duration-fast) var(--cb-ease);
}
.cb-btn:hover .cb-btn__icon--arrow { transform: translateX(3px); }

/* ---------- Cards ---------- */
.cb-card {
    background: var(--cb-bg-card);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-lg);
    padding: var(--cb-space-6);
    transition: border-color var(--cb-duration-base) var(--cb-ease),
                transform var(--cb-duration-base) var(--cb-ease),
                box-shadow var(--cb-duration-base) var(--cb-ease);
}
.cb-card:hover {
    border-color: var(--cb-border-accent);
    transform: translateY(-2px);
    box-shadow: var(--cb-shadow-md);
}

.cb-card--flat:hover { transform: none; box-shadow: none; }

/* Article card (for grid) */
.cb-article-card {
    background: var(--cb-bg-card);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--cb-duration-base) var(--cb-ease);
}
.cb-article-card:hover {
    border-color: var(--cb-border-accent);
    transform: translateY(-3px);
    box-shadow: var(--cb-shadow-md);
}
.cb-article-card__image {
    aspect-ratio: 16 / 10;
    background: var(--cb-bg-input);
    overflow: hidden;
}
.cb-article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cb-duration-slow) var(--cb-ease);
}
.cb-article-card:hover .cb-article-card__image img { transform: scale(1.05); }

.cb-article-card__body {
    padding: var(--cb-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--cb-space-3);
    flex: 1;
}
.cb-article-card__cats {
    font-family: var(--cb-font-mono);
    font-size: var(--cb-text-xs);
    color: var(--cb-accent);
    letter-spacing: var(--cb-tracking-wider);
    text-transform: uppercase;
}
.cb-article-card__title {
    font-size: var(--cb-text-lg);
    font-weight: 700;
    line-height: var(--cb-leading-snug);
    margin: 0;
    color: var(--cb-text);
}
.cb-article-card__title a { color: inherit; }
.cb-article-card__title a:hover { color: var(--cb-accent); }

.cb-article-card__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cb-text-muted);
    font-size: var(--cb-text-sm);
}

/* ---------- Badges & Tags ---------- */
.cb-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-space-1);
    padding: 0.25em 0.75em;
    font-family: var(--cb-font-mono);
    font-size: var(--cb-text-xs);
    font-weight: 600;
    letter-spacing: var(--cb-tracking-wider);
    text-transform: uppercase;
    border-radius: var(--cb-radius-sm);
    background: rgba(57, 255, 20, 0.1);
    color: var(--cb-accent);
    border: 1px solid var(--cb-border-accent);
}

.cb-tag {
    display: inline-block;
    font-family: var(--cb-font-mono);
    font-size: var(--cb-text-xs);
    color: var(--cb-text-muted);
    margin-right: var(--cb-space-2);
}
.cb-tag::before { content: "# "; color: var(--cb-accent); }

/* ---------- Section heading (mono small caps eyebrow) ---------- */
.cb-eyebrow {
    font-family: var(--cb-font-mono);
    font-size: var(--cb-text-xs);
    color: var(--cb-accent);
    letter-spacing: var(--cb-tracking-wider);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--cb-space-3);
    display: block;
}

/* ---------- Form elements ---------- */
.cb-input {
    background: var(--cb-bg-input);
    border: 1.5px solid var(--cb-border);
    border-radius: var(--cb-radius-sm);
    padding: var(--cb-space-3) var(--cb-space-4);
    color: var(--cb-text);
    font-family: var(--cb-font-sans);
    font-size: var(--cb-text-base);
    width: 100%;
    transition: border-color var(--cb-duration-fast) var(--cb-ease);
}
.cb-input:focus {
    outline: none;
    border-color: var(--cb-accent);
    box-shadow: 0 0 0 3px var(--cb-green-glow);
}
.cb-input::placeholder { color: var(--cb-text-dim); }

/* ---------- Status indicator ---------- */
.cb-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cb-accent);
    box-shadow: 0 0 8px var(--cb-green-glow);
    animation: cb-pulse 2s var(--cb-ease) infinite;
}
@keyframes cb-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ---------- Terminal preview ---------- */
.cb-terminal {
    background: #050805;
    border: 1px solid var(--cb-border-strong);
    border-radius: var(--cb-radius-md);
    overflow: hidden;
    font-family: var(--cb-font-mono);
    font-size: var(--cb-text-sm);
    line-height: 1.7;
    box-shadow: var(--cb-shadow-md), inset 0 0 0 1px rgba(57, 255, 20, 0.05);
}
[data-theme="light"] .cb-terminal {
    background: #0F1A0F;
    border-color: var(--cb-border-strong);
}
.cb-terminal__bar {
    background: linear-gradient(180deg, #11181C, #0A0F11);
    border-bottom: 1px solid var(--cb-border-strong);
    padding: var(--cb-space-2) var(--cb-space-3);
    display: flex;
    align-items: center;
    gap: var(--cb-space-2);
}
.cb-terminal__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.cb-terminal__dot--red    { background: #FF5F56; }
.cb-terminal__dot--yellow { background: #FFBD2E; }
.cb-terminal__dot--green  { background: #27C93F; }
.cb-terminal__title {
    margin-left: var(--cb-space-3);
    color: #6A7E6A;
    font-size: var(--cb-text-xs);
    letter-spacing: 0.04em;
}
.cb-terminal__body {
    padding: var(--cb-space-5);
    color: #C8E6C8;
}
.cb-terminal__body p { margin: 0 0 var(--cb-space-1); }
.cb-terminal__prompt { color: var(--cb-accent); margin-right: var(--cb-space-2); }
.cb-terminal__out    { color: #8FA68F; }
.cb-terminal__out--warn { color: var(--cb-yellow-500); }
.cb-terminal__cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--cb-accent);
    margin-left: 4px;
    vertical-align: -2px;
    animation: cb-blink 1s steps(2, start) infinite;
}
@keyframes cb-blink { to { visibility: hidden; } }