/* =========================================================
CORE.CSS – FINAL CLEAN SYSTEM
Layout + grid + utilitare
========================================================= */


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

.container-fixed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


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

.section {
    padding: 60px 0;
}


/* =========================================================
SPACING SYSTEM
========================================================= */

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 60px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 60px; }


/* =========================================================
GRID SYSTEM
========================================================= */

.grid {
    display: grid;
    gap: 24px;
}

/* variante fixe */
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* auto */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* full width */
.full-width {
    grid-column: 1 / -1;
}


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

@media (max-width: 992px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
TYPOGRAPHY EXTENSION (SAFE)
========================================================= */

h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

h2 {
    font-size: 24px;
    margin-bottom: 15px;
}


/* =========================================================
TEXT CONTENT (HTML DIN DB)
========================================================= */

.text-content {
    line-height: 1.7;
    color: var(--text-dark);
}

.text-content p {
    margin-bottom: 15px;
}


/* =========================================================
UTILITY
========================================================= */

.text-muted {
    color: var(--text-muted);
}

.hr {
    height: 1px;
    background: var(--border-light);
    margin: 40px 0;
}


/* =========================================================
FLEX HELPERS
========================================================= */

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}