/* ============================================================
   public/assets/css/blog_index.css

   【役割】
   - ブログ一覧（blogs/index.php）のカード用スタイル
   - 既存の events.css のグリッド（.ev-grid）と card デザインを活かしつつ、
     ブログ用に以下を調整：
       ・サムネイル表示
       ・メタ情報（著者 / 日付）
       ・タイトル・導入文の行数制限（line-clamp）

   【行数制限について】
   - 現行ブラウザ対応のため -webkit-line-clamp を使用
   - 将来の互換性を考慮し、標準仕様の line-clamp も併記
   - 対応ブラウザでは標準仕様が優先され、未対応でも表示は崩れない

   ============================================================
*/

/* ============================================================
   ▼ カード全体
============================================================ */

.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;           /* 角丸に合わせて中身を切る */
}

.blog-card:hover {
  transform: translateY(-1px);
}

/* ============================================================
   ▼ サムネイル
============================================================ */

.blog-card__thumb {
  width: 100%;
}

.blog-card__thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ============================================================
   ▼ 本文エリア
============================================================ */

.blog-card__body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================
   ▼ タイトル（2行まで）
============================================================ */

.blog-card__title {
  font-size: 1rem;
  margin: 0;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* 現行ブラウザ向け */
  -webkit-line-clamp: 2;

  /* 標準仕様（将来互換） */
  line-clamp: 2;

  overflow: hidden;
}

/* ============================================================
   ▼ メタ情報（著者 / 日付）
============================================================ */

.blog-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: #777;
}

.blog-card__author,
.blog-card__date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   ▼ イントロ文（3行まで）
============================================================ */

.blog-card__intro {
  font-size: 0.92rem;
  color: #555;
  margin: 0;
  line-height: 1.5;

  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* 現行ブラウザ向け */
  -webkit-line-clamp: 3;

  /* 標準仕様（将来互換） */
  line-clamp: 3;

  overflow: hidden;
}

/* ============================================================
   ▼ スマホ調整
============================================================ */

@media (max-width: 480px) {
  .blog-card__thumb img {
    height: 160px;
  }

  .blog-card__body {
    padding: 10px 10px 12px;
  }
}