/* ============================================================
   MODERN GRID SYSTEM FOR LEGACY BOOTSTRAP-2 HTML
   - replaces .row, .row-fluid, .spanX, .offsetX completely
   - keeps the original HTML 1:1 (no changes required)
   - works with all existing pages
   ============================================================ */

/* GLOBAL RESET FOR FLOAT GRID */
.row,
.row-fluid {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* BASE PADDING FOR COLUMNS */
[class*="span"] {
    padding: 0 0px;
    box-sizing: border-box;
    display: block;
}

/* WIDTHS – identical to Bootstrap 2 proportions */
.span12 { width: 100%; }
.span11 { width: 91.666%; }
.span10 { width: 83.333%; }
.span9  { width: 75%; }
.span8  { width: 70%; }
.span7  { width: 58.333%; }
.span6  { width: 50%; }
.span5  { width: 41.666%; }
.span4  { width: 30%; }
.span3  { width: 25%; }
.span2  { width: 16.666%; }
.span1  { width: 8.333%; }

/* OFFSETS – modern equivalents */
.offset1  { margin-left: 8.333%; }
.offset2  { margin-left: 16.666%; }
.offset3  { margin-left: 25%; }
.offset4  { margin-left: 33.333%; }
.offset5  { margin-left: 41.666%; }
.offset6  { margin-left: 50%; }
.offset7  { margin-left: 58.333%; }
.offset8  { margin-left: 66.666%; }
.offset9  { margin-left: 75%; }
.offset10 { margin-left: 83.333%; }
.offset11 { margin-left: 91.666%; }

/* MAKE ALL IMAGES RESPONSIVE */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* UL inside rows (used in Latest News) */
.row ul,
.row-fluid ul {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* FORCE LIST ITEMS TO BE FLEX CHILDREN */
.row li[class*="span"],
.row-fluid li[class*="span"] {
    display: block;
}

/* MOBILE BREAKPOINTS */
@media (max-width: 1024px) {
    /* Slightly wider padding on large tablets */
    [class*="span"] {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    /* All columns become 100% width */
    [class*="span"] {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 10px;
    }

    /* offsets removed */
    [class*="offset"] {
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    /* tighter padding on mobile */
    [class*="span"] {
        padding: 0 8px;
    }
}