/* =========================================================
   FLEX GRID SYSTEM (Bootstrap-like)
   Base: 12 columns | Flexbox only
   ========================================================= */

/* ---------- RESET BÁSICO ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------- ROW ---------- */
.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.row-nowrap {
    flex-wrap: nowrap;
}

.row-reverse {
    flex-direction: row-reverse;
}

/* ---------- ALIGNMENT ---------- */

/* Horizontal */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Vertical */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* ---------- GAP / GUTTER ---------- */
.gap-0  { gap: 0; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.gap-xl { gap: 32px; }

/* ---------- ROW SPACING HELPERS ---------- */

/* Padding vertical (top + bottom) */
.row-py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Gap fixo de 10px */
.row-gap-10 {
    gap: 10px;
}

/* Atalho: padding vertical + gap */
.row-space-10 {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
}

/* ---------- COLUMNS (BASE) ---------- */
[class^="col"] {
    min-width: 0;
}

/* Auto column */
.col {
    flex: 1 1 0;
}

/* ---------- FIXED COLUMNS (12 GRID) ---------- */
.col-1  { flex: 0 0 8.333%;  width: 8.333%; }
.col-2  { flex: 0 0 16.666%; width: 16.666%; }
.col-3  { flex: 0 0 25%;     width: 25%; }
.col-4  { flex: 0 0 33.333%; width: 33.333%; }
.col-5  { flex: 0 0 41.666%; width: 41.666%; }
.col-6  { flex: 0 0 50%;     width: 50%; }
.col-7  { flex: 0 0 58.333%; width: 58.333%; }
.col-8  { flex: 0 0 66.666%; width: 66.666%; }
.col-9  { flex: 0 0 75%;     width: 75%; }
.col-10 { flex: 0 0 83.333%; width: 83.333%; }
.col-11 { flex: 0 0 91.666%; width: 91.666%; }
.col-12 { flex: 0 0 100%;    width: 100%; }

/* ---------- AUTO / INLINE COLUMNS ---------- */

/* Coluna com largura baseada no conteúdo */
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

/* Coluna inline (não cresce, não quebra) */
.col-inline {
    flex: 0 0 auto;
    width: max-content;
    white-space: nowrap;
}

/* ---------- AUTO / INLINE FLEX VARIANTS ---------- */

/* col-auto como container flex inline */
.col-auto-inline {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    align-items: center;
    gap: 10px;
}

/* col-inline como container flex (conteúdo sem quebra) */
.col-inline-flex {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* ---------- AUTO / INLINE FLEX (ALIGN END) ---------- */

/* col-auto inline com alinhamento ao final */
.col-auto-inline-end {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    align-items: flex-end;
    gap: 10px;
}

/* col-inline flex com alinhamento ao final */
.col-inline-flex-end {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    align-items: flex-end;
    gap: 10px;
    white-space: nowrap;
}

/* ---------- GROUP (NESTING SUPPORT) ---------- */
.group {
    display: flex;
    flex-wrap: inherit;
    width: 100%;
}

/* ---------- SELF ALIGN ---------- */
.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }
.self-stretch{ align-self: stretch; }

/* ---------- RESPONSIVE (MOBILE FIRST) ---------- */

/* Tablets */
@media (max-width: 768px) {
    .col-sm-1  { width: 8.333%; }
    .col-sm-2  { width: 16.666%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.333%; }
    .col-sm-5  { width: 41.666%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.333%; }
    .col-sm-8  { width: 66.666%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.333%; }
    .col-sm-11 { width: 91.666%; }
    .col-sm-12 { width: 100%; }
}

/* Mobile */
@media (max-width: 480px) {
    .col-xs-12 { width: 100%; }
}

/* =========================================================
   SPACING UTILITIES (10px)
   ========================================================= */

/* ---------- MARGIN ---------- */
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }

.mx-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.m-10 {
    margin: 10px;
}

/* ---------- PADDING ---------- */
.pt-10 { padding-top: 10px; }
.pb-10 { padding-bottom: 10px; }
.pl-10 { padding-left: 10px; }
.pr-10 { padding-right: 10px; }

.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.p-10 {
    padding: 10px;
}