/* ==========================================================================
   Layout - Grid System, Containers, Responsive
   ========================================================================== */

.tc-container {
    width: 100%;
    max-width: var(--tc-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tc-space-lg);
    padding-right: var(--tc-space-lg);
}

.tc-container--wide {
    max-width: var(--tc-container-wide);
}

.tc-container--narrow {
    max-width: 800px;
}

/* Main layout */
.tc-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.tc-site__content {
    flex: 1;
    padding-top: calc(var(--tc-header-height) + var(--tc-top-bar-height));
}

/* Grid */
.tc-grid {
    display: grid;
    gap: var(--tc-space-lg);
}

.tc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tc-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Product grid */
.tc-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tc-space-lg);
}

/* Flex utilities */
.tc-flex {
    display: flex;
}

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

.tc-flex--between {
    align-items: center;
    justify-content: space-between;
}

.tc-flex--column {
    flex-direction: column;
}

.tc-flex--gap-sm { gap: var(--tc-space-sm); }
.tc-flex--gap-md { gap: var(--tc-space-md); }
.tc-flex--gap-lg { gap: var(--tc-space-lg); }

/* Section spacing */
.tc-section {
    padding: var(--tc-space-3xl) 0;
}

.tc-section--sm {
    padding: var(--tc-space-2xl) 0;
}

.tc-section__header {
    text-align: center;
    margin-bottom: var(--tc-space-2xl);
}

.tc-section__title {
    font-size: var(--tc-text-3xl);
    margin-bottom: var(--tc-space-sm);
}

.tc-section__subtitle {
    color: var(--tc-text-secondary);
    font-size: var(--tc-text-lg);
}

/* Two-column content */
.tc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tc-space-2xl);
    align-items: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .tc-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .tc-two-col {
        grid-template-columns: 1fr;
        gap: var(--tc-space-xl);
    }
}

@media (max-width: 768px) {
    :root {
        --tc-header-height: 60px;
    }

    .tc-container {
        padding-left: var(--tc-space-md);
        padding-right: var(--tc-space-md);
    }

    h1 { font-size: var(--tc-text-3xl); }
    h2 { font-size: var(--tc-text-2xl); }
    h3 { font-size: var(--tc-text-xl); }

    .tc-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tc-space-md);
    }

    .tc-grid--3,
    .tc-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tc-section {
        padding: var(--tc-space-2xl) 0;
    }

    .tc-section__title {
        font-size: var(--tc-text-2xl);
    }
}

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