/* =================================================================
 * c-blog-card — ブログカード（相互リンク）
 * Figma: 5371:86474 内「45 ブログカード」
 *
 *   サムネイル（左）＋ タイトル / 本文抜粋 / サイト名orURL（右）の横並びカード。
 *   サムネイル比率: 1:1（square・200×200）/ 16:9（wide・320×180）
 *
 * 色: 本文/タイトル #333（--color-text-default）/ サイト名 #787878（--color-text-sub）
 *     リンクアイコン Key #FF6243 / カード枠 #D9D9D9（--color-border）
 *
 * 使い方: front.components.blog-card（Blade）経由
 * =================================================================*/

.c-blog-card {
  display: flex;
  align-items: center;
  gap: 40rem;                                  /* Figma: サムネ〜本文 40px */
  width: 100%;                                /* Figma: セクション幅100% */
  margin-block: 40rem;                        /* Figma: ブログカードの前後40px余白 */
  padding: var(--space-5);                    /* 24px */
  border: 1px solid var(--color-border);      /* #D9D9D9 */
  border-radius: var(--radius-lg);            /* 16px */
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base) var(--easing-default);
}
a.c-blog-card:hover,
a.c-blog-card:focus-visible {
  box-shadow: var(--shadow-card);
}

/* ---------- サムネイル ---------- */
.c-blog-card__thumb {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);            /* 16px */
  background: var(--color-bg-02);
}
.c-blog-card--square .c-blog-card__thumb { width: 200rem; aspect-ratio: 1 / 1; }   /* 1:1 */
.c-blog-card--wide   .c-blog-card__thumb { width: 320rem; aspect-ratio: 16 / 9; }  /* 16:9 */

.c-blog-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* サムネイル未指定時のプレースホルダ（Figma: グラデ地 + ロゴ + キャプション） */
.c-blog-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);                        /* 12px */
  /* Figma の「bg pattern color」は変数バインドなし。コーラル→イエローの近似グラデ */
  background: linear-gradient(100deg, #FBB0A3 0%, #FCE4A6 100%);
}
.c-blog-card__placeholder-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 20rem;
  background: var(--color-white);
  border-radius: var(--radius-pill);
}
.c-blog-card__placeholder-logo img { display: block; width: 120rem; height: auto; }
.c-blog-card--wide .c-blog-card__placeholder-logo img { width: 160rem; }
.c-blog-card__placeholder-text {
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: var(--fs-body-xs);               /* 12px */
  letter-spacing: var(--letter-spacing-small);
}

/* ---------- 本文側 ---------- */
.c-blog-card__body {
  flex: 1 1 auto;
  min-width: 0;                               /* line-clamp 用に縮小許可 */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                        /* 8px */
}
.c-blog-card__title {
  margin: 0;
  color: var(--color-text-default);
  font-family: var(--font-jp);
  font-size: var(--fs-h5-pc);                 /* 20px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);                /* 1.5 */
  letter-spacing: var(--letter-spacing-heading);
}
.c-blog-card__text {
  margin: 0;
  color: var(--color-text-default);
  font-family: var(--font-jp);
  font-size: var(--fs-body);                  /* 16px */
  line-height: var(--lh-body);                /* 1.75 */
  letter-spacing: var(--letter-spacing-body);
  /* 行数で省略（…） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-blog-card--square .c-blog-card__text { -webkit-line-clamp: 4; }
.c-blog-card--wide   .c-blog-card__text { -webkit-line-clamp: 3; }

.c-blog-card__site {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                        /* 8px */
  margin-top: var(--space-1);                 /* 4px */
}
.c-blog-card__site-icon {
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  background-color: var(--color-key);         /* オレンジのチェーンアイコン */
  -webkit-mask: url("/img/common/icons/link-chain.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-chain.svg") no-repeat center / contain;
}
.c-blog-card__site-name {
  color: var(--color-text-sub);               /* #787878 */
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);               /* 14px */
  letter-spacing: var(--letter-spacing-small);
}

/* ---------- SP（<=1024px）: サムネイルを上に積む ---------- */
@media (max-width: 1023.98px) {
  .c-blog-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);                      /* 16px */
  }
  .c-blog-card--square .c-blog-card__thumb,
  .c-blog-card--wide   .c-blog-card__thumb { width: 100%; }
  .c-blog-card--square .c-blog-card__thumb { aspect-ratio: 16 / 9; }  /* SP は横長で省スペース */
}