/* ================================================
   12. トップページ専用スタイル
   ================================================ */

/* ========== ヒーローセクション ========== */
.hero-section {
    background: var(--color-bg-section);
    padding: var(--spacing-48) 0;
}

/* ヒーローセクションのタイトル */
.hero-section h1 {
    font-size: var(--font-size-hero);
}

/* ペルソナアバター横並び表示 */
body .hero-section .persona-avatars-inline {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--spacing-24) !important;
    margin-top: 2rem !important;
    flex-wrap: nowrap !important;
}

body .hero-section .persona-avatar-inline-item {
    text-align: center !important;
    flex: 0 0 auto !important;
}

body .hero-section .persona-name-inline {
    margin: var(--spacing-8) 0 0 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}


/* ========== 特集記事カード内ペルソナスニペット ========== */
/* 特集記事カード下部のペルソナスピーチ冒頭表示エリア */
.feature-article-personas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: var(--spacing-24);
}

/* 個別ペルソナスニペット */
.persona-snippet {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: 0.75rem;
    background: var(--color-bg-section);
    border-radius: 6px;
}

/* ペルソナスニペット内のテキスト */
.jiji-main-content .feature-article-personas .persona-snippet p,
.weekly-articles-container .feature-article-personas .persona-snippet p {
    font-size: var(--font-size-s);
    color: var(--color-gray);
    margin: 0;
    line-height: var(--line-height-narrow);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ========== トップページメインレイアウト ========== */
/* メインコンテンツコンテナ */
.jiji-main-content {
    width: 100%;
    max-width: 93.75rem; /* 最大幅 */
    margin: var(--spacing-48) auto;
    padding: 0 var(--spacing-20);
}

/* 記事グリッドレイアウト */
.jiji-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 基本は3カラム */
    gap: 0; /* グリッド間の余白 */
    margin: 0 auto; /* 中央揃え */
}

/* 小カードのみの場合（6記事未満）のグリッドレイアウト調整 */
.jiji-articles-grid:not(:has(.feature-article-card)) {
    gap: var(--spacing-16);
}

/* 記事エリア内のリンク共通スタイル */
.jiji-main-content a {
    text-decoration: none;
    color: inherit;
}

.jiji-main-content a:hover,
.jiji-main-content a:focus,
.jiji-main-content a:visited {
    text-decoration: none;
}


/* ========== 特集記事カード ========== */
/* 特集記事カードのグリッド配置 */
.feature-article-card {
    grid-column: span 2; /* 2カラム分を占有 */
    grid-row: span 2;    /* 2行分を占有 */
}

/* トップページのみ大カードに罫線 */
.home .feature-article-card {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* 特集記事カード内のリンク */
.feature-article-card .feature-article-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 3.5rem 2.5rem 1.5rem 2.5rem;
}

/* トップページのみ特集記事カードのpadding統一 */
body.home .feature-article-card .feature-article-link {
    padding: 2rem;
}

.feature-article-card .feature-article-link:hover {
    text-decoration: none;
}

/* ========== ペルソナグリッド ========== */
/* ペルソナ表示グリッド */
.personas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-12);
}


/* ========== 週別記事表示（新デザイン） ========== */
/* 週別記事コンテナ */
.weekly-articles-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-48);
    margin-bottom: 3rem;
}

/* 日別記事セクション */
.daily-articles-section {
    margin-bottom: 0;
}

/* 日付ヘッダー */
.daily-header {
    position: sticky;
    top: 99px; /* デスクトップ版ヘッダー高さ */
    background: var(--color-bg-section);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-16) 5rem; /* spacing-48(3rem) + カードpadding(2rem) = 5rem */
    margin-bottom: var(--spacing-48);
    z-index: 10;
    width: 100%;
}

.daily-date {
    font-size: var(--font-size-ll);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.daily-date .day-of-week {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-normal);
}

/* アーカイブリンクセクション */
.archive-link-section {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-48);
}

.archive-link-container {
    max-width: 400px;
    margin: 0 auto;
}

/* ========== レスポンシブ対応 ========== */
/* 大画面対応 - トップページのみ */
@media (min-width: 1500px) {
    body.home .feature-article-title {
        font-size: 2.5rem;
    }
    
    body.home .normal-article-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

@media (max-width: 640px) {
    .daily-header {
        top: 73px;
        padding: var(--spacing-12) var(--spacing-20);
        margin-bottom: var(--spacing-32);
    }
    
    /* ヒーローセクション */
    .hero-section {
        padding: var(--spacing-32) 0;
    }
    
    .hero-section h1 {
        font-size: var(--font-size-ll);
        line-height: var(--line-height-limited);
    }
    
    body .hero-section .persona-avatars-inline {
        gap: var(--spacing-12) !important;
        flex-wrap: wrap !important;
        margin: 1.5rem auto 0 auto !important;
    }
    
    .hero-section .persona-name-inline {
        font-size: var(--font-size-ss);
    }
    
    /* ペルソナスニペット */
    .feature-article-personas {
        grid-template-columns: 1fr;
    }
    
    .jiji-main-content .feature-article-personas .persona-snippet p,
    .weekly-articles-container .feature-article-personas .persona-snippet p {
        font-size: var(--font-size-s);
    }
    
    /* メインレイアウト */
    .jiji-main-content {
        margin: var(--spacing-24) auto;  /* スマホでは48pxから24pxに縮小 */
        padding: 0 var(--spacing-20);
    }
    
    .jiji-articles-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* スマホでは全カードを1カラム */
    .feature-article-card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    
    /* 特集記事カード内のリンク */
    .feature-article-card .feature-article-link {
        padding: var(--spacing-24) 0;
    }
    
    /* スマホでトップページ特集記事カードのpadding上書き */
    body.home .feature-article-card .feature-article-link {
        padding: 0;
    }
    
    /* ペルソナグリッド */
    .personas-grid {
        grid-template-columns: 1fr;
    }
    
    /* 週別記事表示 - スマホ対応 */
    .weekly-articles-container {
        margin: 0 auto var(--spacing-24) auto;
        padding: 0 var(--spacing-20);
    }
    
    .daily-articles-section {
        margin-bottom: var(--spacing-48);
    }
    
    .daily-header {
        top: 73px; /* スマホ版ヘッダー高さ */
        padding: var(--spacing-12) var(--spacing-20);
        margin-bottom: var(--spacing-32);
    }
    
    .daily-date {
        font-size: var(--font-size-l);
    }
    
    .daily-date .day-of-week {
        font-size: var(--font-size-m);
    }
    
    .archive-link-section {
        padding-top: var(--spacing-32);
    }
}