/*
===============================================
Shinka AI - Grid System
グリッドレイアウトシステム
===============================================
*/

/* ========================================
   基本グリッド
   ======================================== */

.c-grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* ========================================
   グリッドのカラム数
   ======================================== */

/* 2カラム */
.c-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3カラム */
.c-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4カラム */
.c-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 6カラム */
.c-grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ========================================
   自動フィット（レスポンシブ対応）
   ======================================== */

/* 最小幅を指定して自動的にカラム数を調整 */
.c-grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.c-grid--auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.c-grid--auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* ========================================
   ギャップのバリエーション
   ======================================== */

.c-grid--gap-sm {
    gap: var(--spacing-sm);
}

.c-grid--gap-md {
    gap: var(--spacing-md);
}

.c-grid--gap-lg {
    gap: var(--spacing-lg);
}

.c-grid--gap-xl {
    gap: var(--spacing-xl);
}

.c-grid--gap-none {
    gap: 0;
}

/* ========================================
   アイテムの配置
   ======================================== */

/* 中央揃え */
.c-grid--center {
    place-items: center;
}

/* 上揃え */
.c-grid--start {
    align-items: start;
}

/* 下揃え */
.c-grid--end {
    align-items: end;
}

/* ========================================
   グリッドアイテムの制御
   ======================================== */

/* カラムスパン */
.c-grid-item--span-2 {
    grid-column: span 2;
}

.c-grid-item--span-3 {
    grid-column: span 3;
}

.c-grid-item--span-4 {
    grid-column: span 4;
}

.c-grid-item--span-full {
    grid-column: 1 / -1;
}

/* ========================================
   Flexboxグリッド（代替）
   ======================================== */

.c-flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.c-flex-grid__item {
    flex: 1 1 300px;
}

/* ========================================
   カードグリッド（特化型）
   ======================================== */

.c-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

/* ========================================
   マルチカラムレイアウト
   ======================================== */

.c-columns {
    column-count: 2;
    column-gap: var(--spacing-xl);
}

.c-columns--3 {
    column-count: 3;
}

.c-columns--4 {
    column-count: 4;
}

/* カラム分割を防ぐ */
.c-columns__item {
    break-inside: avoid;
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   レスポンシブ
   ======================================== */

/* タブレット */
@media (max-width: 1024px) {
    .c-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .c-grid--6 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .c-columns {
        column-count: 2;
    }
    
    .c-columns--3,
    .c-columns--4 {
        column-count: 2;
    }
    
    .c-grid-item--span-3,
    .c-grid-item--span-4 {
        grid-column: span 2;
    }
}

/* モバイル */
@media (max-width: 767px) {
    .c-grid,
    .c-grid--2,
    .c-grid--3,
    .c-grid--4,
    .c-grid--6 {
        grid-template-columns: 1fr;
    }
    
    .c-grid,
    .c-flex-grid {
        gap: var(--spacing-md);
    }
    
    .c-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .c-columns,
    .c-columns--3,
    .c-columns--4 {
        column-count: 1;
    }
    
    .c-grid-item--span-2,
    .c-grid-item--span-3,
    .c-grid-item--span-4 {
        grid-column: span 1;
    }
    
    .c-flex-grid__item {
        flex-basis: 100%;
    }
}

/* 小型モバイル */
@media (max-width: 480px) {
    .c-grid--auto-fit {
        grid-template-columns: 1fr;
    }
}