/* ============================================
   news-test.css
   Instagram ニュース表示用スタイル
   既存の style.css には一切干渉しない
   クラス名はすべて nt- プレフィックスで統一
   レイアウト: PC=3列グリッド / スマホ=縦1列
   ============================================ */

/* --- コンテナ --- */
#nt-news-container {
  margin-top: 40px;
  overflow-x: hidden;
  max-width: 100%;
}

/* --- 3列グリッド --- */
.nt-grid {
  display: grid;
  grid-template-columns: 1fr;          /* スマホ: 縦1列 */
  gap: 40px;
}

@media (min-width: 768px) {
  .nt-grid {
    grid-template-columns: repeat(3, 1fr);  /* PC: 横3列 */
    gap: 32px;
  }
}

/* --- 各投稿カード --- */
.nt-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;       /* グリッド内ではみ出し防止 */
}

/* --- 見出し --- */
.nt-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 1rem;
  color: #1C1C1A;
  line-height: 1.55;
  margin: 0;
}

/* --- 埋め込みラッパー: はみ出し防止 --- */
.nt-embed-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Instagram blockquote がグリッドセルからはみ出さないよう上書き */
.nt-embed-wrap .instagram-media {
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}