/**
 * Responsive Grids - 統合グリッドレイアウト
 *
 * すべてのグリッドレイアウトを統一的に管理
 * モバイルファースト設計（デフォルト: 1列）
 *
 * 作成日: 2025-10-14
 */

/* ============================================
   CSS変数定義
   ============================================ */
:root {
    /* ブレークポイント */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;

    /* グリッドギャップ */
    --grid-gap-mobile: 1rem;
    --grid-gap-tablet: 1.5rem;
    --grid-gap-desktop: 2rem;
}

/* ============================================
   ブロググリッド (.blog-grid)
   ============================================ */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile);
}

/* タブレット: 2列 */
@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-tablet);
    }
}

/* デスクトップ: 3列 */
@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-desktop);
    }
}

/* ============================================
   チームグリッド (.team-grid)
   ============================================ */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile);
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* タブレット: 2列 */
@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-tablet);
    }
}

/* デスクトップ: 3列またはauto-fit */
@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-desktop);
    }
}

/* チームカードのモバイル調整 */
@media (max-width: 767px) {
    .team-card {
        min-height: auto;
        height: auto;
        align-self: start;
    }

    .team-card > div {
        padding: 1.5rem;
    }
}

/* ============================================
   その他の共通グリッド
   ============================================ */

/* Values Grid (4列グリッド) */
.values-grid,
.key-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
    .values-grid,
    .key-values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-tablet);
    }
}

@media (min-width: 1024px) {
    .values-grid,
    .key-values-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--grid-gap-desktop);
    }
}

/* Mission & Vision Cards (2列グリッド) */
.mission-vision-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile);
}

/* モバイル: フォントサイズを読みやすく調整 */
@media (max-width: 767px) {
    .mission-vision-cards h3 {
        font-size: 1.75rem !important; /* タイトルを大きく */
        line-height: 2rem;
    }

    .mission-vision-cards blockquote {
        font-size: 1.125rem !important; /* 引用文を維持 */
        line-height: 1.75rem;
    }

    .mission-vision-cards .text-sm {
        font-size: 1rem !important; /* 小さい文字を base サイズに */
        line-height: 1.5rem;
    }

    .mission-vision-cards .space-y-3 {
        margin-top: 1.5rem;
    }

    .mission-vision-cards .p-8 {
        padding: 1.5rem !important; /* パディングも調整 */
    }
}

/* タブレット: 2列 */
@media (min-width: 768px) {
    .mission-vision-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-tablet);
    }
}

/* デスクトップ: 2列（維持） */
@media (min-width: 1024px) {
    .mission-vision-cards {
        gap: var(--grid-gap-desktop);
    }
}

/* ============================================
   モバイルフォントサイズ調整（全セクション共通）
   ============================================ */

@media (max-width: 767px) {
    /* Values Grid - バリューカード */
    .values-grid .text-sm,
    .key-values-grid .text-sm {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.5rem;
    }

    .values-grid h4,
    .key-values-grid h4 {
        font-size: 1.125rem !important; /* 18px */
        line-height: 1.5rem;
    }

    /* Team Grid - チームカード */
    .team-grid h3 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.75rem;
    }

    .team-grid .text-sm {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.5rem;
    }

    .team-grid p {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.5rem;
    }

    /* Blog Grid - ブログカード */
    .blog-grid .blog-title {
        font-size: 1.125rem !important; /* 18px */
        line-height: 1.5;
    }

    .blog-grid .blog-excerpt {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6;
    }

    .blog-grid .text-sm {
        font-size: 0.875rem !important; /* 14px - メタ情報は少し小さめでOK */
        line-height: 1.25rem;
    }

    /* Services Grid - サービスカード */
    .feelflow-services-grid h3 {
        font-size: 1.25rem !important; /* 20px - タイトル */
        line-height: 1.75rem !important;
    }

    .feelflow-services-grid p,
    .feelflow-services-grid p.text-gray-600,
    .feelflow-services-grid .mb-4 {
        font-size: 1rem !important; /* 16px - 説明文を大きく */
        line-height: 1.6 !important;
    }

    .feelflow-services-grid h4,
    .feelflow-services-grid h4.text-sm {
        font-size: 1rem !important; /* 16px - 「主な特徴:」 */
        line-height: 1.5rem !important;
    }

    .feelflow-services-grid .text-xs,
    .feelflow-services-grid span.text-xs {
        font-size: 0.9375rem !important; /* 15px - 特徴リスト、タグを大きく */
        line-height: 1.25rem !important;
    }

    .feelflow-services-grid li,
    .feelflow-services-grid li span {
        font-size: 0.9375rem !important; /* 15px - リスト項目を大きく */
        line-height: 1.5 !important;
    }
}

/* ============================================
   ユーティリティ
   ============================================ */

/* グリッドアイテムの共通スタイル */
.grid-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-4px);
}

/* レスポンシブ画像 */
.grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}