/* =========================================================
   カスタムブロック: コラム記事カード (careritz/column-card)
   フロント・エディタ共通スタイル
   配色: タイトル #1955c4 / ボタン #eb522a / 枠線 #e4e0de

   ※ 本文(.p_single_content)内では app.css が h3 / p / a を
     詳細度 (0,1,1) で強くスタイルしている（h3は橙文字＋ピンク背景＋
     左ボーダー等）。そのため当ブロックは「ルートクラス + 要素クラス」=
     詳細度 (0,2,0) で記述し、app.css の装飾を明示的にリセットして上書きする。
   ========================================================= */
.c-column-card {
  margin-block: 24px;
}

.c-column-card .c-column-card__link {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e4e0de;
  color: #262626;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.c-column-card .c-column-card__link:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.c-column-card .c-column-card__thumb {
  flex: 0 0 30%;
  max-width: 30%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.c-column-card .c-column-card__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.c-column-card .c-column-card__body {
  flex: 1 1 auto;
  min-width: 0; /* 長いタイトルでカードが横に伸びるのを防ぐ */
  display: flex;
  flex-direction: column;
}

/* タイトル: app.css の .p_single_content h3 をリセットしてから整える */
.c-column-card .c-column-card__title {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #28A5FF;
  font-size: 1rem;
  line-height: 1.5;
  /* 2行でクランプ */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-weight: inherit;
}

/* 抜粋: app.css の .p_single_content p / _main_inner p をリセット */
.c-column-card .c-column-card__excerpt {
  margin: 16px 0 0;
  padding: 0;
  color: #262626; /* --color-text-default */
  font-size: 1rem; /* 16px */
  line-height: 1.7;
  /* 1行でクランプ（入らない分は … で省略） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.c-column-card .c-column-card__button {
  margin-top: auto; /* 本文下端（カード右下）へ */
  align-self: flex-end;
  display: inline-block;
  padding: 10px 32px;
  background: #eb522a; /* ボタンオレンジ（デザインから抽出） */
  color: #fff;
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  text-align: center;
}
.c-column-card .c-column-card__link:hover .c-column-card__button {
  opacity: 0.9;
}

/* 未選択／エラー時のエディタ内表示 */
.c-column-card--empty {
  display: block;
  padding: 24px;
  border: 1px dashed #c9c9c9;
  background: #fafafa;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}

/* SP: PC と同じ横並び配置を維持（画像左／本文右／ボタン右下）。
   狭い画面向けに余白とボタンの大きさだけ調整する */
@media (max-width: 740px) {
  .c-column-card .c-column-card__link {
    gap: 12px;
    padding: 12px;
  }
  .c-column-card .c-column-card__button {
    padding: 8px 20px;
    font-size: 0.9375rem; /* 15px */
    margin-top: 8px;
  }
  .c-column-card .c-column-card__excerpt {
    display: none;
  }
}