/**
 * Chess Academy — Layout System
 *
 * Container, 12-column responsive grid, utility spacing.
 */

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-6);
    }
}

/* ── Grid System ──────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--space-5);
}

/* 12-column desktop, 8-column tablet, 4-column mobile */
.grid--cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid--cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid--cols-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 1023px) {
    .grid--cols-4  { grid-template-columns: repeat(2, 1fr); }
    .grid--cols-6  { grid-template-columns: repeat(3, 1fr); }
    .grid--cols-12 { grid-template-columns: repeat(8, 1fr); }
}

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

/* Span utilities */
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-6  { grid-column: span 6; }
.col-span-8  { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

/* ── Flex Utilities ───────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-5       { gap: var(--space-5); }
.gap-6       { gap: var(--space-6); }

/* ── Spacing Utilities ────────────────────────────────────── */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.pt-4 { padding-top: var(--space-4); }
.pt-8 { padding-top: var(--space-8); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-8 { padding-bottom: var(--space-8); }

/* ── Section Spacing ──────────────────────────────────────── */
section {
    padding-block: var(--space-10);
}

@media (max-width: 767px) {
    section {
        padding-block: var(--space-8);
    }
}

/* ── Visibility ───────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hidden { display: none !important; }

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}