// ═══════════════════════════════════════════════
// FERMENTY MOBILE — Components
// ═══════════════════════════════════════════════

// ── Hero card (active ferment) ───────────────
.fm-hero {
    margin: $sp-xs $sp-md 0;
    background: $g-main;
    border-radius: $r-xl;
    padding: $sp-lg;
    position: relative;
    overflow: hidden;

    // Decorative circle
    &::after {
        content: '';
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        right: -20px;
        bottom: -45px;
        pointer-events: none;
    }

    &.fm-hero-orange { background: $o-main; }
}

.fm-hero-badge {
    position: absolute;
    top: $sp-md;
    right: $sp-md;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: $r-pill;
    padding: 3px 10px;
    font-family: $font-ui;
    font-size: $fs-xs;
    font-weight: $fw-medium;
    color: #fff;
}

.fm-hero-eyebrow {
    font-family: $font-ui;
    font-size: $fs-xs;
    font-weight: $fw-medium;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: $sp-xs;
}

.fm-hero-name {
    font-family: $font-brand;
    font-size: $fs-xl;
    font-weight: $fw-semibold;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2px;
}