/*
 * post-list.css
 * ブログ記事一覧（インデックス、カテゴリー、検索結果）の共通スタイル
 */
@import url('imports/basic.css');  /* リセット */
@import url('imports/flex.css');  /* flex pattern */

body {
    font-family: sans-serif;
    line-height: 1.6;
		/* --- Sticky Footer --- */
			display: flex;
			flex-direction: column;
			min-height: 100vh;
}

.container {
    max-width: 800px;
    margin: 0px auto;
    padding: 20px;
}
/* category、serchに表示　上部にpost-comment表示 */
.post-comment {
    width: 100%;
}
.post-comment h3 {
    color: #007bff;
}
.post-comment p {
    margin-top: 3px;
}
/* --- Grid Layout --- */
#posts-container,
#pages-container,
#category-container,
#search-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4列のグリッドを作成 */
    gap: 8px;
    /* アイテム間の隙間 */
    margin-top: 20px;
}
#category-container {
    margin-top: 10px;
}
#search-container {
    margin-top: 10px;
}
.post-item,
.page-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    display: flex;
    /* Flexboxで内部要素を制御 */
    flex-direction: column;
    /* 子要素を縦に並べる */
}

.post-content-wrapper,
.page-content-wrapper {
    padding: 7px;
    flex-grow: 1;
    /* 高さが可変の部分を伸ばす */
    display: flex;
    flex-direction: column;
}

.post-cover,
.page-cover {
    border-bottom: #ddd 1px solid;
}

.post-item h2,
.page-item h2 {
    font-size: 1.08em;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 垂直方向に配置 */
    overflow: hidden;
    /* 溢れた部分を隠す */
    text-overflow: ellipsis;
    /* 溢れた部分に「...」を表示 */
    -webkit-line-clamp: 2;
    /* 最大行数を2行に設定 */
    border-bottom: #007bff 2px solid;
    height: 2.6em;
    /* 2行分の高さを確保 (line-height * 2) */
    width: auto;
}

.post-item h2 a,
.page-item h2 a {
    text-decoration: none;
    color: #333;

}

.post-item h2 a:hover,
.page-item h2 a:hover {
    color: #007bff;
}

.post-meta-id,
.page-meta-id {
    font-size: 0.80em;
    color: #666;
    margin-top: -3px;
    margin-bottom: 5px;
    width: 100%;
    text-align: right;
		justify-content: end;
}

.post-meta-id a,
.page-meta-id a {
    color: #666;
    text-decoration: none;
}

.post-meta-id a:hover,
.page-meta-id a:hover {
    text-decoration: underline;
}

.post-cover,
.page-cover {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.post-cover-placeholder,
.page-cover-placeholder {
    width: 100%;
    height: 120px;
    background-color: #e9ecef;
    /* グレーの背景色 */
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 0.8em;
}

.post-content,
.page-content {
    font-size: 0.85em;
    line-height: 1.1;
    color:#333;
}

.back-link {
    display: inline-block;
    margin-top: 20px;
}