/* ============================================================
 * link-card.css — 本文内URLのカード型リンク（link-card.js が生成）
 *   .lc-card > .lc-thumb(img) + .lc-body(.lc-title/.lc-desc/.lc-site)
 * ============================================================ */
.lc-card {
  display: flex;
  align-items: stretch;
  width: 100%;           /* 左右マージンゼロ＝全幅（商品カードと同じ） */
  max-width: none;
  margin: 18px 0;        /* 上下のみ。左右余白なし */
  border: 1.5px solid var(--text);   /* 商品カード（.r2-shop-row）と同じ実線 */
  border-radius: 0;      /* 角丸なし */
  overflow: hidden;
  background: var(--bg2);
  color: var(--text);
  /* 本文中のリンク（.md-content a）の下線・アクセント色を継承しないよう打ち消す */
  text-decoration: none !important;
  transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
}
.lc-card:hover {
  border-color: var(--accent);   /* 商品カードと同じくホバーでアクセント色 */
  box-shadow: var(--shadow);
  opacity: 1 !important; /* .md-content a:hover の opacity 低下を打ち消す */
}
.lc-card .lc-title,
.lc-card .lc-desc,
.lc-card .lc-site {
  text-decoration: none;
}

/* サムネイル（OGP画像）。黄金比(約1.618:1)で固定 → 画像サイズに依存せず高さ一定。
   この枠の高さがカード全体の高さを決める（本文は下でクランプして収める）。 */
.lc-thumb {
  flex: 0 0 auto;
  width: 240px;
  aspect-ratio: 1.618 / 1;
  background: var(--bg3);
}
.lc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* はみ出し部分はトリミング */
}

/* 本文（タイトル / 説明 / サイト名）*/
.lc-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.lc-card.lc-noimg .lc-body {
  padding: 13px 15px;
}

.lc-title {
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lc-desc {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #6b7180;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lc-site {
  font-size: var(--fs-xs);
  color: #9aa0ad;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* モバイル */
@media (max-width: 560px) {
  /* 説明文を省くため本文の高さがタイトル行数で変わる。カード高さを固定し、
     サムネは「高さ基準」で黄金比に追従させる（幅が height×1.618 で決まる）。
     これで画像・タイトル行数に関係なく全カードが同じ高さになる。 */
  .lc-card { width: 100%; margin: 14px 0; height: 88px; }
  .lc-thumb { width: auto; height: 100%; aspect-ratio: 1.618 / 1; }
  .lc-body { padding: 10px 12px; gap: 4px; }
  .lc-title { font-size: var(--fs-sm); -webkit-line-clamp: 2; line-clamp: 2; }
  .lc-desc { display: none; } /* 横幅が狭い端末では説明は省きタイトル＋サイト名のみ */
}