/* edljx Card Styles (v1.0.0, 2026-06-15)
 *
 * Single source of truth for the canonical .oss-* card classes used
 * across all 4 "best of" pages: /self-hosted/, /open-source/,
 * /remote-work/, /learning/.
 *
 * Loaded via <link rel="stylesheet" href="/card-styles.css"> in each
 * page's <head>. The 4 render scripts no longer duplicate these
 * rules in their inline <style> blocks.
 *
 * The canonical card structure is:
 *   <article class="bento-card glass-card reveal" data-featured="true|false">
 *     <span class="featured-badge">★ Featured</span>      <!-- if featured -->
 *     <div class="bento-content">
 *       <div class="oss-card-title">                    <!-- title row + stars/badge -->
 *         <a href="...">Title</a>
 *         <span class="oss-card-stars">★ 12.3k</span>     <!-- or oss-card-cost, oss-card-domain -->
 *       </div>
 *       <p class="oss-card-desc">One-line description.</p>
 *       <div class="oss-why"><strong>Why we picked it:</strong> Reason.</div>
 *       <div class="oss-card-tags">
 *         <span class="oss-tag tier-gold">★ GOLD</span>   <!-- or license, lang, sources-badge, or generic -->
 *       </div>
 *       <div class="oss-card-meta">
 *         <a href="...">GitHub</a> &middot; <a href="...">Site</a>
 *       </div>
 *       <div class="oss-card-source">Sourced from <strong>...</strong></div>
 *     </div>
 *   </article>
 */

/* ----- Card title (with optional badge to the right) ----- */
.oss-card-title {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 2rem;
}

/* ----- Stars badge (with .fire / .hot color modifiers) ----- */
.oss-card-stars {
    color: var(--terracotta);
    font-size: .8rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, monospace;
    white-space: nowrap;
}
.oss-card-stars.fire { color: var(--deep-burgundy); }
.oss-card-stars.hot { color: var(--golden-orange); }

/* ----- Cost badge (page-specific to /learning/, now canonical) ----- */
.oss-card-cost {
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.oss-card-cost.free {
    background: rgba(247, 165, 39, .12);
    color: var(--deep-burgundy);
    border: 1px solid rgba(247, 165, 39, .35);
}
.oss-card-cost.free-with-cert {
    background: rgba(105, 31, 101, .10);
    color: var(--deep-purple);
    border: 1px solid rgba(105, 31, 101, .30);
}

/* ----- Domain badge (page-specific to /remote-work/, now canonical) ----- */
.oss-card-domain {
    color: var(--text-secondary);
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    white-space: nowrap;
}

/* ----- One-line description ----- */
.oss-card-desc {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.55;
    margin: .5rem 0 0;
}

/* ----- "Why we picked it" callout ----- */
.oss-why {
    color: var(--text-primary);
    font-size: .82rem;
    font-style: italic;
    line-height: 1.5;
    margin: .75rem 0 0;
    padding: .5rem .75rem;
    border-left: 3px solid var(--golden-orange);
    background: rgba(247, 165, 39, .06);
    border-radius: 0 6px 6px 0;
}

/* ----- Tags container ----- */
.oss-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .6rem;
}

/* ----- Individual tag (with modifiers .license, .lang, .tier-*, .sources-badge) ----- */
.oss-tag {
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: .2rem .55rem;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 500;
}
.oss-tag.license {
    color: var(--deep-burgundy);
    border-color: rgba(136, 38, 58, .25);
}
.oss-tag.lang {
    color: var(--deep-purple);
    border-color: rgba(105, 31, 101, .25);
}
.oss-tag.tier-gold {
    background: linear-gradient(135deg, var(--golden-orange), #e85d1a);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
}
.oss-tag.tier-silver {
    background: linear-gradient(135deg, #b0b6c4, #8a92a3);
    color: #fff;
    font-weight: 600;
}
.oss-tag.tier-bronze {
    background: linear-gradient(135deg, #c08b5a, #9c6b3e);
    color: #fff;
    font-weight: 600;
}
.oss-tag.sources-badge {
    background: rgba(34, 139, 87, .85);
    color: #fff;
    font-weight: 600;
}

/* ----- Meta row (GitHub, Site, Visit links) ----- */
.oss-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .78rem;
    color: var(--text-secondary);
    margin-top: .6rem;
}

/* ----- Source attribution (small text at the bottom of the card) ----- */
.oss-card-source {
    font-size: .72rem;
    color: var(--text-secondary);
    opacity: .7;
    margin-top: .4rem;
}

