/* ================================================================
   MC ARTICLE — blog post layer on the mc-v3 design language
   Loaded by /blog/* posts after mc-cards.css (and tailwind.css, which
   still provides the posts' layout utilities: flex, grid, gap, spacing).
   Everything here is scoped to .mc-hero--article / .mc-art so it can
   out-rank single-class Tailwind utilities without !important.
   ================================================================ */

/* ---------- Article hero: the shared .mc-hero, compact ---------- */
.mc-hero.mc-hero--article {
    min-height: 0;
    padding: 112px 20px 28px;
}
@media (min-width: 768px) {
    .mc-hero.mc-hero--article { min-height: 0; padding: 150px 32px 48px; }
}
.mc-hero--article .mc-hero-inner.mc-art-head { max-width: 880px; }
/* The compact hero is short, so the shared glow would end on a hard line: fade it out */
.mc-hero.mc-hero--article::before {
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

.mc-art-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px 10px;
    font-family: var(--ln-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mc-text-mute);
    margin: 0 0 18px;
}
.mc-art-crumbs a { color: var(--mc-text-soft); text-decoration: none; transition: color 160ms ease; }
.mc-art-crumbs a:hover { color: var(--mc-teal); }
.mc-art-crumbs > span { color: rgba(223, 225, 244, 0.22); }
.mc-art-crumbs > span:last-child { color: var(--mc-text-mute); }
/* On phones the current-page crumb just repeats the H1 below it (often 2-3 lines of caps) */
@media (max-width: 520px) { .mc-art-crumbs > :nth-last-child(-n+2) { display: none; } }

.mc-art-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    font-size: 13.5px;
    color: var(--mc-text-soft);
    margin: 0 0 20px;
}
.mc-art-meta a { color: var(--mc-text); text-decoration: none; border-bottom: 1px solid rgba(34, 178, 133, 0.35); }
.mc-art-meta a:hover { border-bottom-color: var(--mc-teal); }
.mc-art-meta .mc-art-cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid rgba(34, 178, 133, 0.28);
    border-radius: 999px;
    background: rgba(34, 178, 133, 0.07);
    font-family: var(--ln-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mc-teal);
}
.mc-art-meta [class~="text-white/20"] { color: rgba(223, 225, 244, 0.2); }

.mc-art-title {
    font-family: var(--ln-font-display);
    font-weight: 500;
    font-size: clamp(32px, 2.2vw + 22px, 54px);
    line-height: 1.08;
    letter-spacing: -0.028em;
    margin: 0 auto;
    max-width: 900px;
    text-wrap: balance;
    background: linear-gradient(103deg, #FFFFFF 4%, rgba(223, 225, 244, 0.62) 50%, #FFFFFF 96%);
    background-size: 220% 100%;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mc-title-shimmer 8s ease-in-out 1.4s infinite;
}
@media (prefers-reduced-motion: reduce) { .mc-art-title { animation: none; } }
.mc-art-title .mc-amount {
    background: linear-gradient(120deg, #22B285 0%, #78FFCA 50%, #22B285 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mc-art-lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--mc-text-soft);
    max-width: 640px;
    margin: 18px auto 0;
}
@media (min-width: 768px) { .mc-art-lead { font-size: 18.5px; } }
.mc-art-crumbs svg { width: 12px; height: 12px; align-self: center; color: rgba(223, 225, 244, 0.3); opacity: 1; }

/* ---------- Reading column ---------- */
.mc-art-wrap {
    max-width: 728px; /* 680px measure, same as the About page's .mc-prose */
    margin: 0 auto;
    padding: 8px 20px 80px;
}
@media (min-width: 768px) { .mc-art-wrap { padding: 12px 24px 112px; } }

.mc-art {
    color: var(--mc-text-soft);
    font-size: 16px;
    line-height: 1.75;
}
.mc-art p { font-size: 16px; line-height: 1.75; color: var(--mc-text-soft); margin: 0 0 20px; }
@media (min-width: 768px) { .mc-art p { font-size: 17px; line-height: 1.8; } }

.mc-art :is(h1, h2, h3, h4) {
    font-family: var(--ln-font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--mc-text);
}
.mc-art > h2 {
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin: 52px 0 16px;
    text-wrap: balance;
}
@media (min-width: 768px) { .mc-art > h2 { font-size: 30px; margin-top: 60px; } }
.mc-art > h3 { font-size: 20px; line-height: 1.35; margin: 34px 0 10px; }
@media (min-width: 768px) { .mc-art > h3 { font-size: 21px; } }

.mc-art strong, .mc-art b { color: var(--mc-text); font-weight: 600; }
.mc-art .text-white { color: var(--mc-text); }
.mc-art .text-textMuted { color: var(--mc-text-soft); }
.mc-art :is([class~="text-white/20"], [class~="text-white/30"], [class~="text-white/40"], [class~="text-white/50"], [class~="text-white/60"], [class~="text-white/80"], [class~="text-textMuted/50"], [class~="text-textMuted/70"]) { color: var(--mc-text-mute); }
.mc-art :is(.text-accent, .text-blue, [class~="text-[#22B285]"], [class~="text-[#0285FF]"]) { color: var(--mc-teal); }
.mc-art .font-extrabold, .mc-art .font-bold { font-weight: 600; }

/* Headings keep weight 500 even when they carry font-bold / font-semibold */
.mc-art :is(h1, h2, h3, h4):is(.font-bold, .font-extrabold, .font-semibold) { font-weight: 500; }

/* Inline links in running text */
.mc-art :is(p, li, td) a:not([class*="w-10"]):not(.mc-btn) {
    color: var(--mc-teal);
    text-decoration: none;
    border-bottom: 1px solid rgba(34, 178, 133, 0.35);
    transition: border-color 160ms ease, color 160ms ease;
}
.mc-art :is(p, li, td) a:not([class*="w-10"]):not(.mc-btn):hover { border-bottom-color: var(--mc-teal); }

/* Lists */
.mc-art > ul, .mc-art > ol { margin: 0 0 22px; padding-left: 1.25em; }
.mc-art > ul > li, .mc-art > ol > li { margin: 0 0 8px; padding-left: 4px; }
.mc-art ul.list-disc, .mc-art > ul:not([class~="list-none"]) { list-style: disc; }
.mc-art > ol { list-style: decimal; }
.mc-art li::marker { color: var(--mc-teal); }
.mc-art li { font-size: 16px; line-height: 1.7; }
@media (min-width: 768px) { .mc-art > ul > li, .mc-art > ol > li { font-size: 17px; } }

/* Mono labels (Sources, About the Author, category tags, table captions) */
.mc-art [class~="tracking-widest"] {
    font-family: var(--ln-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.5;
}

/* ---------- Cards ---------- */
.mc-art :is(.bg-darkCard, [class~="bg-[#111118]"], [class~="bg-white/[0.03]"]) {
    background: rgba(255, 255, 255, 0.025);
}
.mc-art :is(.border-darkBorder, [class~="border-white/10"], [class~="border-[#1e1e2a]"], [class~="border-darkBorder/50"]) {
    border-color: rgba(255, 255, 255, 0.07);
}
.mc-art.border-darkBorder { border-color: rgba(255, 255, 255, 0.07); }
.mc-art .rounded-xl { border-radius: 16px; }
.mc-art .rounded-2xl { border-radius: 18px; }
.mc-art .rounded-lg { border-radius: 12px; }

/* Teal-edged callout (the free-ebook box) */
.mc-art [class~="border-accent/20"] {
    border-color: rgba(34, 178, 133, 0.28);
    background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(34, 178, 133, 0.08), transparent 70%), rgba(255, 255, 255, 0.02);
}

/* Linked cards (related articles) */
.mc-art a.group {
    transition: border-color 200ms ease, background 200ms ease;
}
.mc-art a.group:hover { border-color: rgba(34, 178, 133, 0.32); background: rgba(34, 178, 133, 0.03); }
.mc-art a.group h3 { font-size: 15.5px; line-height: 1.4; margin: 0; }
.mc-art a.group:hover h3 { color: var(--mc-teal); }

/* Icon tiles, numbered badges, avatar */
.mc-art [class~="bg-accent/15"] {
    background: rgba(34, 178, 133, 0.12);
    border: 1px solid rgba(34, 178, 133, 0.22);
}
.mc-art [class~="bg-accent/15"].rounded-xl { border-radius: 14px; }
.mc-art [class~="bg-accent/10"].rounded-full { background: rgba(34, 178, 133, 0.12); border: 1px solid rgba(34, 178, 133, 0.28); color: var(--mc-teal); font-family: var(--ln-font-mono); font-weight: 500; }
.mc-art :is([class~="bg-accent/10"], [class~="bg-blue/10"]):not(.rounded-full) { background: rgba(34, 178, 133, 0.08); }
.mc-art img.rounded-full { border-color: rgba(34, 178, 133, 0.4); }

/* Share buttons */
.mc-art :is(a, button)[class~="bg-white/5"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: border-color 180ms ease, background 180ms ease;
}
.mc-art :is(a, button)[class~="bg-white/5"]:hover {
    transform: none;
    background: rgba(34, 178, 133, 0.10);
    border-color: rgba(34, 178, 133, 0.35);
}
.mc-art :is(a, button)[class~="bg-white/5"]:hover svg { color: var(--mc-teal); }

/* Big numbers inside cards */
.mc-art :is(.text-2xl, .text-3xl).font-extrabold,
.mc-art p.text-xl.font-bold { font-family: var(--ln-font-display); font-weight: 600; letter-spacing: -0.02em; }

/* Fine print */
.mc-art .italic { font-size: 13px; line-height: 1.6; color: var(--mc-text-mute); }

/* ---------- Tables ---------- */
.mc-art .overflow-x-auto {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
}
.mc-art table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mc-art th {
    font-family: var(--ln-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mc-text-mute);
    text-align: left;
    vertical-align: bottom;
}
.mc-art th.text-accent { color: var(--mc-teal); }
.mc-art th.text-white { color: var(--mc-text); }
.mc-art td { color: var(--mc-text-soft); vertical-align: top; line-height: 1.55; }
.mc-art td.text-white, .mc-art td .text-white { color: var(--mc-text); }
.mc-art td.text-accent { color: var(--mc-teal); }
.mc-art tr { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mc-art thead tr { border-bottom-color: rgba(34, 178, 133, 0.25); }
.mc-art tbody tr:last-child { border-bottom: 0; }

/* ---------- Closing CTA card (last card in every post) ---------- */
.mc-art div.text-center[class~="rounded-2xl"] {
    position: relative;
    overflow: hidden;
    border-color: rgba(34, 178, 133, 0.22);
    background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(34, 178, 133, 0.12), transparent 70%), rgba(255, 255, 255, 0.02);
}
.mc-art div.text-center[class~="rounded-2xl"] h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 768px) { .mc-art div.text-center[class~="rounded-2xl"] h2 { font-size: 34px; } }
.mc-art .mc-btn { text-decoration: none; gap: 8px; }
.mc-art .mc-btn svg { width: 16px; height: 16px; }

/* ---------- Inline eligibility CTA injected by js/blog-cta.js ---------- */
.mc-art-inline-cta {
    margin: 36px 0;
    padding: 24px 24px 26px;
    border-radius: 18px;
    border: 1px solid rgba(34, 178, 133, 0.22);
    background: radial-gradient(ellipse 80% 90% at 50% 0%, rgba(34, 178, 133, 0.10), transparent 70%), rgba(255, 255, 255, 0.02);
    text-align: center;
}
.mc-art .mc-art-inline-cta-title { font-family: var(--ln-font-display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--mc-text); margin: 0 0 6px; }
.mc-art .mc-art-inline-cta-desc { font-size: 14px; line-height: 1.6; color: var(--mc-text-soft); margin: 0 0 16px; }
.mc-art-inline-cta .mc-btn { display: inline-flex; }

/* The sticky desktop CTA left over from the old template (never slid in; kept off-screen) */
#stickyCta { background: linear-gradient(180deg, rgba(1, 3, 20, 0) 0%, rgba(1, 3, 20, 0.92) 30%, #010314 100%) !important; }

/* Decorative blurred blobs from the old template: their styles lived in the removed inline block,
   so without this they render as a flat square in the flow */
.mc-art .blob { display: none; }

/* Tailwind's .hidden is toggled by the copy-link button; keep it authoritative here */
.mc-art .hidden { display: none; }