/* 内部記事カード（mign/article-embed）
   ベースは news-page/block.css の .news-card 系。ここでは「横並びレイアウト」と
   「囲み枠（クリック可能な長方形）」「著者（連名＋アイコン）」をこのブロックに限って上書きする。
   セレクタは .mign-article-embed まで含めて、Articles/News の一覧グリッドには影響させない。 */

/* 枠は本文テキストの行幅いっぱい（.article-body は max-width:840px）。
   .mign-block-section の既定 padding:6px も外す。 */
.mign-block-section.mign-article-embed {
  padding: 0;
  max-width: none;
}

/* --- 囲み枠：角丸2px・線1px・#000000 15%。<a> なので枠全体がクリック可 --- */
.mign-block-section.mign-article-embed .news-card {
  display: block;
  padding: 16px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

/* --- 横並び：画像（左）＋テキスト（右） --- */
.mign-block-section.mign-article-embed .news-card .news-card__inner {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

/* 左の画像は news カードと同じくらいの大きさ（16:9 維持）。潰れない。 */
.mign-block-section.mign-article-embed .news-card__media {
  width: 360px;
  align-items: stretch;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  flex-shrink: 0;
}

/* テキストは右側で残り幅いっぱい。順序は タイトル → 日付 → 著者（PHP側の並び） */
.mign-block-section.mign-article-embed .news-card__title-block {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  gap: 8px;
  justify-content: center;
}

/* 著者バイライン（連名＋アイコン、折り返し対応） */
.mign-block-section.mign-article-embed .news-card__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 0;
}

.mign-block-section.mign-article-embed .news-card__author-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mign-block-section.mign-article-embed .news-card__author-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.mign-block-section.mign-article-embed .news-card__author-name {
  font-family: var(--font-family-sans-jp, "Ryo Gothic PlusN");
  font-size: var(--font-size-xs, 12px);
  font-weight: 400;
  line-height: 130%;
  color: var(--color-warm-950, #1a171c);
}

/* 狭い画面では縦積み（画像を上に全幅）に切り替え、画像が潰れないようにする */
@media (max-width: 600px) {
  .mign-block-section.mign-article-embed .news-card .news-card__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .mign-block-section.mign-article-embed .news-card__media {
    width: 100%;
  }
}

/* エディタのプレビュー時だけ出る案内文 */
.mign-article-embed__notice {
  margin: 0;
  padding: 16px;
  font-family: var(--font-family-sans-jp, "Ryo Gothic PlusN");
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary, #5b575c);
  background: var(--color-surface-card, #f5f4f2);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  text-align: center;
}