/* ================================================================
   KITOTOOL — Layout (Vercel/Geist Design System v2.0)
   Version: 2.0 | 2026-04-12
   ================================================================ */

/* Container — fluid với padding responsive */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
}

.container-fluid {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
}

.container-sm { max-width: min(640px, var(--container-max)); }
.container-md { max-width: min(768px, var(--container-max)); }
.container-lg { max-width: min(1024px, var(--container-max)); }
.container-content { max-width: min(720px, var(--container-max)); }

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

.main-content {
    flex: 1;
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
}

/* Sidebar Layout — 1fr 260px grid */
.layout-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    gap: var(--space-8);
    align-items: start;
}

.layout-with-sidebar .main-column { min-width: 0; }

.layout-with-sidebar .sidebar-column {
    min-width: 0;
    width: 100%;
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    padding: 0;
}

/* ===== TOOLS GRID — Geist auto-fill grid ===== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

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

/* ===== SECTION SPACING ===== */
.section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.section-sm { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section-lg { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* ===== UTILITIES ===== */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ===== RESPONSIVE — Tablet ===== */
/* The 960px shell (992-1199px) uses one column; sidebar starts at 1200px. */
@media (max-width: 1199.98px) {
    .layout-with-sidebar {
        grid-template-columns: 1fr;
    }
    .layout-with-sidebar .sidebar-column {
        display: none;
    }
}

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

/* ===== RESPONSIVE — Mobile ===== */
@media (max-width: 768px) {
    .tools-grid-2,
    .tools-grid-3,
    .tools-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ===== RESPONSIVE — Small Mobile ===== */
@media (max-width: 480px) {
    .tools-grid-2,
    .tools-grid-3,
    .tools-grid-4 {
        grid-template-columns: 1fr;
    }
    .tools-grid {
        grid-template-columns: 1fr;
    }
}