/* =====================================================
   TALACOTE LAYOUT — Grid, Containers, Sections
===================================================== */

/* Container */
.tc-container {
    width: 100%;
    max-width: var(--tc-container-max);
    margin: 0 auto;
    padding: 0 var(--tc-container-padding);
}

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

.tc-container--wide {
    max-width: 1400px;
}

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

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

@media (min-width: 768px) {
    .tc-section {
        padding: var(--tc-space-3xl) 0;
    }
    .tc-section--hero {
        padding: 80px 0;
    }
}

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

.tc-grid--2 { grid-template-columns: 1fr; }
.tc-grid--3 { grid-template-columns: 1fr; }

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

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

/* Flex utilities */
.tc-flex { display: flex; }
.tc-flex-col { flex-direction: column; }
.tc-flex-center { align-items: center; justify-content: center; }
.tc-flex-between { justify-content: space-between; align-items: center; }
.tc-flex-wrap { flex-wrap: wrap; }
.tc-gap-sm { gap: var(--tc-space-sm); }
.tc-gap-md { gap: var(--tc-space-md); }
.tc-gap-lg { gap: var(--tc-space-lg); }

/* Text alignment */
.tc-text-center { text-align: center; }
.tc-text-left { text-align: left; }
.tc-text-right { text-align: right; }

/* Spacing utilities */
.tc-mt-sm { margin-top: var(--tc-space-sm); }
.tc-mt-md { margin-top: var(--tc-space-md); }
.tc-mt-lg { margin-top: var(--tc-space-lg); }
.tc-mt-xl { margin-top: var(--tc-space-xl); }
.tc-mb-sm { margin-bottom: var(--tc-space-sm); }
.tc-mb-md { margin-bottom: var(--tc-space-md); }
.tc-mb-lg { margin-bottom: var(--tc-space-lg); }
.tc-mb-xl { margin-bottom: var(--tc-space-xl); }

/* Page wrapper */
.tc-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tc-page__content {
    flex: 1;
}