/* --- ブログカード（WPSSOプラグイン環境対応版） --- */

/* カード全体：FlexではなくGridを使います */
.wp-embed {
  display: grid !important;
  /* 左:120px、右:残り全部 という2列を作る */
  grid-template-columns: 120px 1fr !important;
  /* 上:タイトル用(自動)、下:説明文用(残り) という2行を作る */
  grid-template-rows: auto auto !important;
  gap: 0 15px !important; /* 横の隙間15px */
  
  align-content: center !important;
  align-items: center !important;

  padding: 15px !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  text-decoration: none !important;
  overflow: hidden !important;
  height: auto !important; /* 高さをなりゆきに */
}

/* 左側の画像 */
/* HTMLクラス名が wpsso の影響で変わっている可能性があるため、汎用的に指定します */
.wp-embed-featured-image,
.wp-embed-featured-image.rectangular {
  /* グリッドの左側(1列目)・縦は上から下まで(1行目〜3行目の線)ぶち抜く */
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  
  width: 120px !important;
  height: 120px !important;
  margin: 0 !important;
  flex: none !important; /* Flexの影響を消す */
}

.wp-embed-featured-image img,
.wp-embed-featured-image.rectangular img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* タイトル（見出し） */
.wp-embed-heading {
  /* グリッドの右側(2列目)・上段(1行目) */
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  
  margin: 0 0 6px 0 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  
  /* 行数制限 */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
.wp-embed-heading a {
  color: inherit !important;
  text-decoration: none !important;
}

/* 説明文（Content） */
.wp-embed-excerpt {
  /* グリッドの右側(2列目)・下段(2行目) */
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  max-height: 6.0em !important;
  
  /* 行数制限 */
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* フッターは非表示 */
.wp-embed-footer {
  display: none !important;
}

/* --- スマホ調整 --- */
@media screen and (max-width: 480px) {
  .wp-embed {
    /* スマホ時は画像を100px列にする */
    grid-template-columns: 100px 1fr !important;
    padding: 10px !important;
  }
  .wp-embed-featured-image,
  .wp-embed-featured-image.rectangular {
    width: 100px !important;
    height: 100px !important;
  }
  .wp-embed-heading {
    font-size: 0.9rem !important;
  }
  .wp-embed-excerpt {
    font-size: 0.75rem !important;
    -webkit-line-clamp: 2;
  }
}