/**
 * CheckToBuild - Container System
 * Sistema de contenedores responsive consistente
 * 
 * @package CheckToBuild
 * @since 2.0.0
 */

/* ===========================
   CONTAINER BASE
   =========================== */

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Container sin padding (para secciones edge-to-edge) */
.container-fluid {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Container sin límite de ancho */
.container-full {
    width: 100%;
    max-width: none;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ===========================
   CONTAINER VARIANTS
   =========================== */

/* Container estrecho (para contenido de lectura) */
.container-narrow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Container medio */
.container-medium {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Container ancho (default) */
.container-wide {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ===========================
   SECTION CONTAINERS
   =========================== */

/* Section wrapper con padding vertical */
.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.section-sm {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.section-lg {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

/* Section sin padding top (para apilar secciones) */
.section-no-top {
    padding-top: 0;
}

/* Section sin padding bottom */
.section-no-bottom {
    padding-bottom: 0;
}

/* ===========================
   WRAPPER INTERNO
   =========================== */

/* Wrapper para contenido dentro de containers */
.content-wrapper {
    width: 100%;
}

/* Centrar contenido */
.content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ===========================
   RESPONSIVE CONTAINERS
   =========================== */

/* Tablet */
@media (max-width: 992px) {
    .container,
    .container-wide,
    .container-medium,
    .container-narrow,
    .container-fluid {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
    
    .section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
    
    .section-sm {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }
    
    .section-lg {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .container,
    .container-wide,
    .container-medium,
    .container-narrow,
    .container-fluid {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    .section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }
    
    .section-sm {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }
    
    .section-lg {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container,
    .container-wide,
    .container-medium,
    .container-narrow,
    .container-fluid {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}