/* [Article] Content Piece widget styles.
   Ports the `.post-content` rhythm from prototype/src/styles/global.css
   (h2 / h3 / p / .divider inside a LearnPost). Each widget is one
   composable chunk — title, body, optional trailing divider. Styles are
   scoped under `.mnny-article-content-piece`. */

.mnny-article-content-piece {
    /* No outer margin — let Elementor's widget/section spacing handle the
       rhythm between stacked content pieces. The `mt-*` modifier below
       lets editors re-create the prototype's between-section gap when
       needed without relying on :first-child selectors that Elementor
       breaks by wrapping every widget in its own div. */
}

.mnny-article-content-piece--mt-section { margin-top: var(--space-10); }
.mnny-article-content-piece--mt-subsection { margin-top: var(--space-8); }

.mnny-article-content-piece .cp-title {
    margin: 0 0 var(--space-5);
}

.mnny-article-content-piece .cp-body > :first-child { margin-top: 0; }
.mnny-article-content-piece .cp-body p {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-5);
    margin-bottom: 0;
}
.mnny-article-content-piece .cp-body h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}
.mnny-article-content-piece .cp-body h4 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}
.mnny-article-content-piece .cp-body ul,
.mnny-article-content-piece .cp-body ol {
    margin-top: var(--space-5);
    padding-left: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}
.mnny-article-content-piece .cp-body li + li { margin-top: var(--space-2); }
.mnny-article-content-piece .cp-body blockquote {
    margin: var(--space-6) 0 0;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-light);
    color: var(--color-text-primary);
    font-style: italic;
}

/* Trailing divider — matches the prototype's <div class="divider"> placed
   between sections inside .post-content. */
.mnny-article-content-piece .cp-divider {
    width: 60px;
    height: 2px;
    background: var(--color-accent);
    margin-block: var(--space-8) 0;
}
.mnny-article-content-piece .cp-divider--center { margin-inline: auto; }
.mnny-article-content-piece .cp-divider--right  { margin-inline: auto 0; }

/* Drop Elementor's default widget padding so stacked pieces read as one
   flowing article, not separated cards. */
.elementor-widget-mnny_article_content_piece > .elementor-widget-container {
    padding: 0 !important;
}