/* Modern CSS Grid – replaces Skeleton V1.1 960 float grid
 * Keeps the same class names so no HTML changes are needed.
 * Uses a 12-column grid (maps cleanly to the old 16-col layout
 * since only: sixteen, twelve, eight, four, one-third, two-thirds
 * are actually used in this project).
 */

/* ---- Container ---- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    align-items: start;
}

.container .column,
.container .columns {
    min-width: 0;
    box-sizing: border-box;
}

/* ---- Column spans (desktop) ---- */
.container .sixteen.columns   { grid-column: span 12; }
.container .fifteen.columns   { grid-column: span 11; }
.container .fourteen.columns  { grid-column: span 11; }
.container .thirteen.columns  { grid-column: span 10; }
.container .twelve.columns    { grid-column: span 9;  }
.container .eleven.columns    { grid-column: span 9;  }
.container .ten.columns       { grid-column: span 8;  }
.container .nine.columns      { grid-column: span 7;  }
.container .eight.columns     { grid-column: span 6;  }
.container .seven.columns     { grid-column: span 5;  }
.container .six.columns       { grid-column: span 5;  }
.container .five.columns      { grid-column: span 4;  }
.container .four.columns      { grid-column: span 3;  }
.container .three.columns     { grid-column: span 3;  }
.container .two.columns       { grid-column: span 2;  }
.container .one.column,
.container .one.columns       { grid-column: span 1;  }

.container .one-third.column  { grid-column: span 4;  }
.container .two-thirds.column { grid-column: span 8;  }

/* ---- Tablet portrait (768–959 px) ---- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        max-width: 768px;
        gap: 15px;
    }

    /* Rebalance the most-used pairs so they still sit side by side */
    .container .twelve.columns  { grid-column: span 8; }
    .container .four.columns    { grid-column: span 4; }
    .container .one-third.column { grid-column: span 4; }
    .container .eight.columns   { grid-column: span 6; }
}

/* ---- Mobile (< 768 px) – stack everything ---- */
@media only screen and (max-width: 767px) {
    .container {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 0;
    }

    .container .column,
    .container .columns,
    .container .sixteen.columns,
    .container .twelve.columns,
    .container .eight.columns,
    .container .four.columns,
    .container .one-third.column,
    .container .two-thirds.column {
        grid-column: span 1;
    }
}

/* ---- Utility ---- */
.row { margin-bottom: 20px; }

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.clear {
    clear: both;
    display: block;
}