/* Layout primitivos — container, section, grid, sidebar */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-4);
    max-width: var(--container-2xl);
}
@media (max-width: 1024px) { .container { padding-inline: var(--space-5); } }

.container-narrow { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-4); }

.section {
    padding-block: clamp(var(--space-5), 1.5vw + var(--space-2), var(--space-8));
}
.section-sm { padding-block: var(--space-4); }
.section-lg { padding-block: clamp(var(--space-8), 3vw + var(--space-4), var(--space-12)); }

.section-alt   { background: var(--color-bg-alt); }
.section-muted { background: var(--color-bg-muted); }
.section-dark  { background: var(--color-dark); color: var(--color-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 { color: var(--color-on-dark); }

/* Grids — auto-fit é o pão com manteiga, evita media queries para 99% dos casos */
.grid {
    display: grid;
    gap: var(--space-4);
}
.grid-auto      { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-auto-sm   { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-auto-lg   { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Sidebar pattern: conteúdo + sidebar lado a lado. Em mobile vira coluna. */
.sidebar-layout {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .sidebar-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
    .sidebar-layout.reverse { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
}

/* Stack vertical com gap consistente */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-6); }

/* Cluster horizontal com wrap */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Carrossel CSS puro com scroll-snap — substitui OwlCarousel sem JS */
.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4);
    padding: var(--space-2) var(--space-4) var(--space-6);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.carousel-track > * { scroll-snap-align: start; }
@media (min-width: 640px)  { .carousel-track { grid-auto-columns: 45%; } }
@media (min-width: 1024px) { .carousel-track { grid-auto-columns: 23%; } }

/* Sticky sidebar (para CTAs em /cursos e /categorias) */
.sticky-cta {
    position: sticky;
    top: var(--space-6);
}

/* Utilities mínimos */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.text-secondary { color: var(--color-secondary); }
.bg-alt      { background: var(--color-bg-alt); }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

.hide-mobile  { display: none; }
@media (min-width: 768px) { .hide-mobile  { display: revert; } .hide-desktop { display: none; } }