/* ============================================================
   Make Capitalism Behave — Home page "Solarpunk" skin
   ------------------------------------------------------------
   Everything here is scoped under .mcb-home, so the rest of the
   site keeps its dark "hacker" theme. Loaded AFTER css/app.css
   (see App.razor) so these rules win.

   The trick: the dark theme drives most highlights off a handful
   of CSS custom properties (--accent, --accent-glow, …). We
   redefine those on .mcb-home to a warm, growing palette, which
   re-skins buttons, scores, hovers and tabs for free, then layer
   a bright sunrise hero on top.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

.mcb-home {
    /* solarpunk palette */
    --sp-sun:        #ffce5c;
    --sp-sun-deep:   #f5a623;
    --sp-leaf:       #6cc24a;
    --sp-leaf-deep:  #2f8f4e;
    --sp-forest:     #15402a;
    --sp-teal:       #2ec4b6;
    --sp-cream:      #fff7e6;

    /* retint the shared accent tokens */
    --accent:        var(--sp-leaf);
    --accent-dim:    var(--sp-leaf-deep);
    --accent-glow:   0 0 14px #ffce5c66;
    --border-glow:   #6cc24a1f;
    --link:          #59c0b4;

    /* warm dawn wash so the dark sections below the hero read like
       a garden at dusk rather than a terminal */
    background:
        radial-gradient(1200px 460px at 50% -140px, #ffce5c14 0%, transparent 70%),
        radial-gradient(820px 420px at 88% 6%, #2ec4b610 0%, transparent 60%);
}

/* inline Lucide line icons */
.mcb-home .mcb-ico {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.14em;
}

/* ── "We're growing" banner ───────────────────────────────── */
.mcb-home .mcb-dust-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, #6cc24a14, #ffce5c14);
    border: 1px solid #6cc24a3d;
    border-radius: 14px;
    color: #b7e3a0;
    font-family: var(--font);
}
.mcb-home .mcb-dust-banner strong { color: #dcf4cd; }
.mcb-home .mcb-dust-banner .mcb-ico { width: 1.15em; height: 1.15em; color: var(--sp-leaf); }

/* ── Hero: sunrise over the meadow ────────────────────────── */
.mcb-home .mcb-hero {
    border: 1px solid #6cc24a40;
    border-radius: 28px;
    padding: 168px 24px 132px;
    background: linear-gradient(180deg,
        #ffe9b0 0%, #ffe1bf 22%, #ffd9c2 38%,
        #dcefb4 64%, #b6e09a 100%);
    box-shadow: 0 26px 64px -30px rgba(47,143,78,.45), inset 0 0 90px rgba(255,243,207,.45);
    overflow: hidden;
}
/* drop the dark radial overlay app.css paints on the hero */
.mcb-home .mcb-hero::before { content: none; }

.mcb-home .mcb-hero-scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mcb-home .mcb-hero-inner { position: relative; z-index: 2; }

/* the sun */
.mcb-home .mcb-sun {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #fffdf2 0%, #ffe28a 44%, #ffc24d 78%, #f5a623 100%);
    box-shadow: 0 0 48px 12px rgba(255,216,107,.7), 0 0 130px 52px rgba(255,206,92,.35);
}
.mcb-home .mcb-sun::before {
    content: '';
    position: absolute;
    inset: -58px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,206,92,.45) 0deg 3deg, transparent 3deg 18deg);
    -webkit-mask: radial-gradient(circle, transparent 60px, #000 62px, #000 88px, transparent 96px);
            mask: radial-gradient(circle, transparent 60px, #000 62px, #000 88px, transparent 96px);
}

/* soft clouds */
.mcb-home .mcb-cloud {
    position: absolute;
    background: #ffffff;
    filter: blur(7px);
    opacity: .5;
    border-radius: 50%;
}
.mcb-home .mcb-cloud-1 { width: 180px; height: 46px; top: 70px;  left: 12%; }
.mcb-home .mcb-cloud-2 { width: 130px; height: 38px; top: 116px; right: 14%; opacity: .42; }

/* rolling hills anchored to the bottom edge */
.mcb-home .mcb-hills {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: auto;
    display: block;
}

/* hero typography */
.mcb-home .mcb-hero-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--sp-forest);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.mcb-home .mcb-hero-title span { color: var(--sp-sun-deep); }
.mcb-home .mcb-hero-sub { color: #2f5d3a; font-size: 16px; }

/* hero buttons — rounded, warm */
.mcb-home .mcb-hero .mcb-btn-primary {
    background: linear-gradient(135deg, #ffd86b, #f5a623);
    color: #5b3b00;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 11px 22px;
    box-shadow: 0 8px 22px -8px rgba(245,166,35,.6), inset 0 0 0 1px rgba(255,255,255,.35);
}
.mcb-home .mcb-hero .mcb-btn-primary:hover {
    color: #5b3b00;
    transform: translateY(-2px);
    box-shadow: 0 13px 30px -8px rgba(245,166,35,.8);
}
.mcb-home .mcb-hero .mcb-btn-secondary {
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(47,143,78,.4);
    color: #2f6d40;
    font-family: var(--font);
    font-weight: 600;
    border-radius: 999px;
    padding: 11px 22px;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}
.mcb-home .mcb-hero .mcb-btn-secondary:hover {
    background: #ffffff;
    border-color: var(--sp-leaf-deep);
    color: var(--sp-forest);
}

/* ── Category chips ───────────────────────────────────────── */
.mcb-home .mcb-cat-chip {
    border-radius: 999px;
    border-color: #6cc24a33;
    background: rgba(108,194,74,.06);
    font-family: var(--font);
}
.mcb-home .mcb-cat-chip:hover {
    border-color: var(--sp-leaf);
    color: var(--sp-leaf);
    background: rgba(108,194,74,.12);
}

/* ── Section header + sort tabs ───────────────────────────── */
.mcb-home .mcb-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.mcb-home .mcb-posts-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 21px;
    color: #e8f3da;
}
.mcb-home .mcb-posts-header h2 .mcb-ico { color: var(--sp-leaf); width: 0.95em; height: 0.95em; }
.mcb-home .mcb-sort-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
}

/* ── Post cards: warmer, more organic ─────────────────────── */
.mcb-home .mcb-post-card {
    border-radius: 14px;
    border-color: rgba(255,255,255,.07);
}
.mcb-home .mcb-post-card:hover {
    border-color: #6cc24a45;
    background: #0d1410;
    box-shadow: 0 0 0 1px rgba(108,194,74,.18), 0 12px 26px -18px rgba(255,206,92,.45);
}
.mcb-home .mcb-card-action,
.mcb-home .mcb-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mcb-home .mcb-card-action .mcb-ico { width: 1.05em; height: 1.05em; }
.mcb-home .mcb-card-play-icon .mcb-ico { width: 26px; height: 26px; fill: currentColor; }
.mcb-home .mcb-author-location,
.mcb-home .mcb-post-location {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.mcb-home .mcb-post-location .mcb-ico,
.mcb-home .mcb-author-location .mcb-ico { color: var(--sp-leaf-deep); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .mcb-home .mcb-hero { padding: 124px 18px 92px; border-radius: 22px; }
    .mcb-home .mcb-sun { width: 88px; height: 88px; top: 28px; }
    .mcb-home .mcb-sun::before {
        inset: -44px;
        -webkit-mask: radial-gradient(circle, transparent 44px, #000 46px, #000 64px, transparent 70px);
                mask: radial-gradient(circle, transparent 44px, #000 46px, #000 64px, transparent 70px);
    }
    .mcb-home .mcb-cloud-2 { display: none; }
}