/* ==============================================
   COMPONENTS — Buttons, Badges, Cards
   ============================================== */

/* ── Buttons ──────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.6875rem var(--sp-6);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 2px solid transparent;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
    background-color: var(--accent);
    color: #1A1200;
    border-color: var(--accent);
}
.btn-primary:hover {
    background-color: var(--accent-light);
    border-color: var(--accent-light);
    color: #1A1200;
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-inverse);
    border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--text-inverse);
    box-shadow: none;
}

.btn-outline-navy {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-navy:hover {
    background-color: var(--primary);
    color: var(--text-inverse);
}

.btn-ghost {
    background-color: transparent;
    color: var(--primary);
    border-color: transparent;
    padding-inline: var(--sp-3);
}
.btn-ghost:hover {
    background-color: var(--bg-section-alt);
    color: var(--accent);
}

/* ── Badges ───────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: var(--font-body);
    text-transform: uppercase;
}
.badge--journal {
    background-color: #EEF4FF;
    color: #1D4ED8;
}
.badge--conference {
    background-color: #ECFDF5;
    color: #047857;
}
.badge--book {
    background-color: #F5F3FF;
    color: #6D28D9;
}
.badge--patent {
    background-color: #FFF7ED;
    color: #B45309;
}
[data-theme="dark"] .badge--journal   { background-color: #1E3A6E; color: #93C5FD; }
[data-theme="dark"] .badge--conference{ background-color: #064E3B; color: #6EE7B7; }
[data-theme="dark"] .badge--book      { background-color: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .badge--patent    { background-color: #431407; color: #FCD34D; }

/* ── Cards ────────────────────────────────────── */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.card--gold-hover:hover {
    border-left: 3px solid var(--accent);
}

/* ── Section Link ─────────────────────────────── */
.section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--primary);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: color var(--transition-fast), gap var(--transition-fast);
    text-decoration: none;
}
.section-link:hover {
    color: var(--accent);
    gap: var(--sp-3);
    text-decoration: none;
}
.section-link i { font-size: 0.8em; }

/* ── Icon Box ─────────────────────────────────── */
.icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}
[data-theme="dark"] .icon-box {
    background-color: rgba(212, 168, 67, 0.15);
}

/* ── Teaser Row (homepage previews) ───────────── */
.teaser-footer {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-10);
}

/* ── Membership Logo Strip (homepage) ────────── */
.member-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-5);
}
.member-logo-cell {
    width: 148px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    transition:
        box-shadow var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-fast);
}
.member-logo-cell:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(196, 154, 42, 0.4);
    transform: translateY(-2px);
}
.member-logo-img {
    max-width: 100%;
    max-height: 44px;
    width: auto;
    object-fit: contain;
    filter: saturate(0.65) opacity(0.75);
    transition: filter var(--transition-base);
}
.member-logo-cell:hover .member-logo-img {
    filter: saturate(1) opacity(1);
}
[data-theme="dark"] .member-logo-cell {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .member-logo-img {
    filter: saturate(0.5) opacity(0.6) brightness(1.4);
}
[data-theme="dark"] .member-logo-cell:hover .member-logo-img {
    filter: saturate(0.9) opacity(0.95) brightness(1.4);
}