/* Cantinho do Mucusse — Spacing System */

:root {
    --cm-space-2xs: 0.25rem;  /* 4px */
    --cm-space-xs:  0.5rem;   /* 8px */
    --cm-space-sm:  0.75rem;  /* 12px */
    --cm-space-md:  1rem;     /* 16px */
    --cm-space-lg:  1.5rem;   /* 24px */
    --cm-space-xl:  2rem;     /* 32px */
    --cm-space-2xl: 3rem;     /* 48px */
    --cm-space-3xl: 4rem;     /* 64px */
    --cm-page-x: clamp(1.125rem, 2.5vw, 2.25rem);
    --cm-section-y: clamp(2.75rem, 5vw, 4.5rem);
    --cm-gap-grid: 1.5rem;
    --cm-gap-grid-lg: 2rem;
}

/* ── Layout principal ── */
.cm-site-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.cm-site-main > section,
.cm-site-main > article,
.cm-site-main > .cm-page-header {
    flex-shrink: 0;
}
.cm-site-main .cm-footer {
    margin-top: auto;
}

/* Container com margens laterais consistentes */
.cm-site-main .container {
    padding-left: var(--cm-page-x);
    padding-right: var(--cm-page-x);
    max-width: 1120px;
}

/* ── Secções ── */
.cm-section {
    padding-top: var(--cm-section-y);
    padding-bottom: var(--cm-section-y);
}
.cm-section-tight {
    padding-top: var(--cm-space-2xl);
    padding-bottom: var(--cm-space-2xl);
}
.cm-section-header {
    margin-bottom: var(--cm-space-xl);
    gap: var(--cm-space-md);
}
.cm-section-header .cm-section-subtitle {
    margin-bottom: 0;
}
.cm-section-title {
    margin-bottom: var(--cm-space-xs);
    line-height: 1.3;
}
.cm-section-subtitle {
    margin-bottom: 0;
    line-height: 1.5;
}

/* Grid de artigos */
.cm-site-main .row.g-4 { --bs-gutter-x: var(--cm-gap-grid); --bs-gutter-y: var(--cm-gap-grid); }
.cm-site-main .row.g-5 { --bs-gutter-x: var(--cm-gap-grid-lg); --bs-gutter-y: var(--cm-gap-grid-lg); }

.cm-grid-articles {
    --bs-gutter-x: var(--cm-gap-grid);
    --bs-gutter-y: var(--cm-gap-grid);
}
@media (min-width: 992px) {
    .cm-grid-articles {
        --bs-gutter-x: var(--cm-gap-grid-lg);
        --bs-gutter-y: var(--cm-gap-grid-lg);
    }
}

.cm-pagination-wrap {
    margin-top: var(--cm-space-2xl);
    padding-top: var(--cm-space-lg);
}

/* ── Page header ── */
.cm-page-header {
    padding: var(--cm-space-2xl) 0 var(--cm-space-xl);
}
.cm-page-header h1 {
    margin-bottom: var(--cm-space-sm);
    line-height: 1.2;
}
.cm-page-header p {
    margin-top: var(--cm-space-xs);
    line-height: 1.6;
    max-width: 52ch;
}
.cm-breadcrumb {
    margin-bottom: var(--cm-space-md);
    line-height: 1.5;
}

/* ── Hero ── */
.cm-hero {
    padding: var(--cm-space-3xl) 0;
}
.cm-hero .container {
    padding-top: var(--cm-space-lg);
    padding-bottom: var(--cm-space-lg);
}
.cm-hero-badge {
    margin-bottom: var(--cm-space-lg);
}
.cm-hero h1 {
    margin-bottom: var(--cm-space-md);
}
.cm-hero .lead {
    margin-bottom: var(--cm-space-xl);
}
.cm-hero-lead { max-width: 36rem; }
.cm-newsletter-form { max-width: 28rem; }
.cm-search-form {
    margin-bottom: var(--cm-space-2xl);
}
.cm-article-image {
    margin-bottom: var(--cm-space-xl);
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--cm-radius-lg);
}
.cm-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cm-space-sm);
    margin: var(--cm-space-xl) 0;
}
.cm-profile-stack {
    display: flex;
    flex-direction: column;
    gap: var(--cm-space-lg);
}
.cm-comments-section {
    margin-top: var(--cm-space-2xl);
    padding-top: var(--cm-space-xl);
    border-top: 1px solid var(--cm-border);
}
.cm-comments-section .cm-section-title {
    margin-bottom: var(--cm-space-lg);
}

/* ── Cards de artigo ── */
.cm-article-card .card-body {
    padding: var(--cm-space-lg);
    gap: var(--cm-space-sm);
}
.cm-article-card .card-title {
    margin-top: var(--cm-space-sm);
    margin-bottom: var(--cm-space-sm);
}
.cm-article-card .card-meta {
    margin-top: auto;
    padding-top: var(--cm-space-md);
    margin-top: var(--cm-space-md);
}

/* ── Widgets (sidebar home) ── */
.cm-widgets-stack {
    display: flex;
    flex-direction: column;
    gap: var(--cm-space-lg);
}
.cm-widget {
    padding: var(--cm-space-lg);
    margin-bottom: 0;
}
.cm-widget-title {
    margin-bottom: var(--cm-space-md);
    padding-bottom: var(--cm-space-sm);
}
.cm-category-list li a {
    padding: var(--cm-space-sm) 0;
}
.cm-popular-item {
    padding: var(--cm-space-sm) 0;
    gap: var(--cm-space-md);
}
.cm-popular-item small {
    margin-top: var(--cm-space-2xs);
}

/* ── Categorias ── */
.cm-category-card {
    padding: var(--cm-space-xl);
}
.cm-category-card .icon {
    margin-bottom: var(--cm-space-md);
}
.cm-category-card h5 {
    margin-bottom: var(--cm-space-sm);
}
.cm-category-card p {
    margin-bottom: var(--cm-space-md);
}

/* ── Artigo (detalhe) ── */
.cm-article-header {
    margin-bottom: var(--cm-space-xl);
}
.cm-article-header h1 {
    margin-top: var(--cm-space-md);
    margin-bottom: var(--cm-space-md);
}
.cm-article-meta {
    margin: var(--cm-space-lg) 0;
    padding: var(--cm-space-md) 0;
    gap: var(--cm-space-md) var(--cm-space-xl);
}
.cm-article-content {
    margin-bottom: var(--cm-space-xl);
}
.cm-article-content p {
    margin-bottom: var(--cm-space-lg);
}
.cm-article-content p:last-child {
    margin-bottom: 0;
}
.cm-share-bar {
    margin: var(--cm-space-2xl) 0;
    padding: var(--cm-space-lg);
    gap: var(--cm-space-sm);
}

/* Comentários */
.cm-comment {
    padding: var(--cm-space-lg);
    margin-bottom: var(--cm-space-md);
}
.cm-comment p {
    margin-top: var(--cm-space-sm);
}
.cm-comment-reply {
    margin-left: var(--cm-space-lg);
    margin-top: var(--cm-space-md);
    padding: var(--cm-space-md);
}

/* ── Formulários ── */
.cm-form-panel {
    padding: var(--cm-space-xl);
    margin-bottom: 0;
}
.cm-form-panel h6 {
    margin-bottom: var(--cm-space-lg);
    padding-bottom: var(--cm-space-sm);
}
.cm-form-panel .mb-3:last-child,
.cm-form-panel .mb-0 {
    margin-bottom: 0 !important;
}
.cm-form-panel .form-label {
    margin-bottom: var(--cm-space-xs);
}

/* ── Newsletter CTA ── */
.cm-newsletter-cta {
    padding: var(--cm-space-2xl) var(--cm-space-xl);
    margin: 0;
}
.cm-newsletter-cta h3 {
    margin-bottom: var(--cm-space-sm);
}
.cm-newsletter-cta p {
    margin-bottom: var(--cm-space-xl);
}

/* ── Empty state ── */
.cm-empty {
    padding: var(--cm-space-3xl) var(--cm-space-lg);
}
.cm-empty i {
    margin-bottom: var(--cm-space-lg);
}
.cm-empty p {
    margin-bottom: var(--cm-space-md);
}

/* ── Footer ── */
.cm-footer {
    padding: var(--cm-space-3xl) 0 var(--cm-space-2xl);
    margin-top: var(--cm-space-2xl);
}
.cm-footer .row {
    --bs-gutter-x: var(--cm-gap-grid-lg);
    --bs-gutter-y: var(--cm-gap-grid);
}
.cm-footer h5,
.cm-footer h6 {
    margin-bottom: var(--cm-space-md);
}
.cm-footer .footer-brand {
    margin-bottom: var(--cm-space-md);
}
.cm-footer p.small {
    margin-bottom: 0;
    line-height: 1.65;
}
.cm-footer ul li {
    margin-bottom: var(--cm-space-sm) !important;
}
.cm-footer hr {
    margin: var(--cm-space-2xl) 0 var(--cm-space-lg);
}
.cm-footer .text-center {
    padding-top: var(--cm-space-xs);
}

/* ── Alerts ── */
.cm-alert .container,
.cm-alert .px-3 {
    padding-top: var(--cm-space-sm);
    padding-bottom: var(--cm-space-sm);
}

/* ── Paginação Bootstrap ── */
.cm-site-main .pagination {
    margin-bottom: 0;
    gap: var(--cm-space-2xs);
}

/* ── Mobile ── */
@media (max-width: 991.98px) {
    :root {
        --cm-section-y: 2.25rem;
        --cm-page-x: 1.125rem;
    }

    .cm-page-header {
        padding: var(--cm-space-xl) 0 var(--cm-space-lg);
    }
    .cm-page-header h1 {
        font-size: 1.65rem;
    }

    .cm-hero {
        padding: var(--cm-space-2xl) 0;
    }

    .cm-article-header h1 {
        font-size: 1.65rem;
    }

    .cm-footer {
        padding-bottom: calc(var(--cm-space-2xl) + env(safe-area-inset-bottom));
        margin-top: var(--cm-space-xl);
    }

    .cm-newsletter-cta {
        padding: var(--cm-space-xl) var(--cm-space-lg);
    }
}

@media (min-width: 992px) {
    .cm-site-main .container {
        padding-left: var(--cm-page-x);
        padding-right: var(--cm-page-x);
    }

    /* Coluna lateral com widgets fixos ao scroll */
    .cm-sidebar-col {
        position: sticky;
        top: var(--cm-space-lg);
        align-self: flex-start;
    }
}