/**
 * Responsive Utilities - ZeroDX Theme
 * レスポンシブ対応とユーティリティ
 */

/* レスポンシブデザイン */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

@media screen and (max-width: 768px) {
    /* セクションタイトル */
    .section-title {
        font-size: var(--font-size-xxxl);
    }
    
    /* DX理解促進セクション */
    .dx-explanation {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .checklist-grid {
        grid-template-columns: 1fr;
    }
    
    /* コンテンツタイプ */
    .content-types-grid {
        grid-template-columns: 1fr;
    }
    
    /* 記事グリッド */
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* 診断ツール */
    .diagnostic-tools {
        grid-template-columns: 1fr;
    }
    
    /* サインアップ */
    .signup-options {
        grid-template-columns: 1fr;
    }
    
    .email-form {
        flex-direction: column;
        align-items: center;
    }
    
    .email-form input {
        max-width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    /* アーカイブ・検索結果 */
    .archive-posts, .search-results {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .section-title {
        font-size: var(--font-size-xxl);
    }
    
    .todo-placeholder {
        padding: var(--spacing-lg);
    }
    
    .checklist-item {
        padding: var(--spacing-md);
    }
    
    .content-type-card, .diagnostic-tool-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-type-card, .post-card, .diagnostic-tool-card {
    animation: fadeInUp var(--transition-slow) ease-out;
}

/* ユーティリティクラス */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

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

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-muted { color: var(--dark-gray); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-light { background-color: var(--light-gray); }

.border-radius-sm { border-radius: var(--border-radius-sm); }
.border-radius-md { border-radius: var(--border-radius-md); }
.border-radius-lg { border-radius: var(--border-radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* モバイル用非表示/表示 */
@media screen and (max-width: 768px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
}

@media screen and (min-width: 769px) {
    .d-md-only { display: block; }
}

@media screen and (max-width: 768px) {
    .d-mobile-only { display: block; }
}

@media screen and (min-width: 769px) {
    .d-mobile-none { display: none; }
}