/* =================================================================
 * c-card / c-card-grid — カードリスト（2〜4列表示）
 * Figma: スタイルガイド「リンク」5494:296695（27 カードリスト）
 *        スタイルガイド Wireframe-27 5824:100558（項目27 PC/SP・通常/枠付き）
 *
 * 既存のページ専用 .work-card（works/index.css）/ .product-card
 * （products/index.css）を正として、ページ非依存の共通形に正規化したもの。
 *
 * グリッド枠（CSSクラスのみ・blade なし。c-figure-grid と同じ運用）:
 *   <ul class="c-card-grid c-card-grid--cols-4"> … <li><article class="c-card"> … </ul>
 *
 * カード本体（front.components.card で出力）バリアント:
 *   --work    : 製作事例（説明＋クライアント名＋カテゴリタグ）
 *   --product : 製品一覧（製品名＋区分タグ）
 *   --lineup  : ラインナップ（型番＋メッキ/サイズ＋環境マーク）
 * =================================================================*/

/* ---------- グリッド枠 ---------- */
.c-card-grid {
  display: grid;
  gap: 56rem 24rem;            /* 行 56px / 列 24px（Figma） */
  width: 100%;                 /* flex 親（例: .frame-41 は align-items:center）内でも全幅に伸ばす */
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-card-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-card-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-card-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
  .c-card-grid--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .c-card-grid { gap: 32rem 16rem; }
  .c-card-grid--cols-3,
  .c-card-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- カード本体 ---------- */
.c-card {
  margin: 0;
  padding: 0;
}

.c-card__link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rem;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ---------- 画像エリア ---------- */
.c-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 307 / 230;
  padding: 16rem;
  box-sizing: border-box;
  background-color: var(--color-white);
  border-radius: 24rem;
  overflow: hidden;                  /* hover時のscale(1.1)を媒体内にクリップ */
}
.c-card__img {
  width: 180rem;
  height: 180rem;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);   /* 4px */
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 指示 5693:90668: hover時に画像 1.1x 拡大 */
.c-card__link:hover .c-card__img { transform: scale(1.1); }

/* 指示 5693:90577 / 90669: 製品名・事例カードタイトルは hover で左→右へ 1px アンダーラインがスライドイン (0.3s ease-in-out) */
.c-card__title {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s ease-in-out;
}
.c-card__link:hover .c-card__title { background-size: 100% 1px; }
/* 枠付きバリアント（Figma 5824:100558 運用ルール:「白背景に背景色が白の
 * 画像を配置する場合は、画像に 1px のボーダーを付与」）。線色 = Neutral 04 */
.c-card--bordered .c-card__img {
  border: 1px solid var(--color-border);
}
.c-card__img-placeholder {
  font-size: var(--fs-body-sm);
  color: var(--color-text-sub);
}
/* 右下のリンクアイコン（↗ 固定色なので img のまま）
   サイズは Figma カード一覧（5494:296695）の配置実寸 18px に合わせる
   （link-icon コンポ実体は 14px だが、カード内インスタンスは ~18px で配置）。 */
.c-card__link-icon {
  position: absolute;
  right: 12rem;
  bottom: 12rem;
  width: 18rem;
  height: 18rem;
  object-fit: contain;
}

/* ---------- 本文 ---------- */
.c-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;                          /* Figma: title↔sub(client/spec)=8px。tags/marks の余白は variant 別に付与 */
  width: 100%;
}
.c-card__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);          /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.8;                   /* Figma カードリスト: leading 1.8 */
  color: var(--color-text-default);
}
.c-card__client {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);       /* 14px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.8;                   /* Figma: leading 1.8 */
  color: var(--color-secondary);
}
.c-card__spec {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);          /* Figma lineup spec: 16px #333 regular */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.8;
  color: var(--color-text-default);
}

/* ---------- カテゴリタグ ---------- */
.c-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
  width: 100%;
}
.c-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: 3rem 12rem;
  box-sizing: border-box;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-xs);       /* 12px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.5;                   /* Figma 製品カテゴリー: leading 1.5 */
  color: var(--color-text-sub);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12rem;
  max-width: 100%;                    /* カード幅を超えないよう制限 */
  white-space: normal;                /* 長いカテゴリ名は折り返す（旧: Figma nowrap） */
  overflow-wrap: anywhere;            /* 区切りのない長文字列でもはみ出さず折り返す（モダン） */
  word-break: break-word;             /* 旧iOS Safari等 anywhere 非対応環境のフォールバック */
}
/* 事業区分バッジ（製品検索結果カード等。色は inquiry.css と統一） */
.c-card__tag--division-parts,
.c-card__tag--division-oem,
.c-card__tag--division-experience-gift,
.c-card__tag--division-jewelry {
  color: var(--color-white);
  border-color: transparent;
}
.c-card__tag--division-parts           { background-color: #649fd4; }
.c-card__tag--division-oem             { background-color: #46b5c3; }
.c-card__tag--division-experience-gift { background-color: #00889a; }
.c-card__tag--division-jewelry         { background-color: #8e7cc3; }

/* インタビューカテゴリー: セカンダリ塗り */
.c-card__tag--interview {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
/* 公開範囲カテゴリー（限定公開）: 濃色ピル */
.c-card__tag--limited {
  min-height: 32rem;
  padding: 6rem 14rem;
  font-size: var(--fs-body-sm);       /* 14px */
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-neutral-01);
  border-color: var(--color-neutral-01);
  border-radius: var(--radius-pill);
}

/* ---------- 環境マーク（ラインナップ） ---------- */
.c-card__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  width: 100%;
}
.c-card__mark {
  width: 52rem;
  height: 52rem;
  box-sizing: border-box;
  padding: 8rem;
  object-fit: contain;
  background: var(--color-white);
  border: 1px solid var(--color-bg-disabled);   /* Neutral04 @ 88% */
  border-radius: var(--radius-md);               /* 8px */
  display: block;
}

/* ---------- variant 別レイアウト（Figma カードリスト準拠） ----------
 * body は gap8（title↔client/spec=8px）を基準に、各 variant で
 * タグ/マークまでの余白とインデント・整列を Figma 実寸へ合わせる。 */
/* work: client↔tags = 8(gap)+8 = 16px（タグは左寄せ・gap10 のまま） */
.c-card--work .c-card__tags { margin-top: 8rem; }
/* product / lineup: 本文を 8px インデント（Figma px8） */
.c-card--product .c-card__body,
.c-card--lineup  .c-card__body { padding-left: 8rem; padding-right: 8rem; }
/* product: タグは左寄せ・gap12、title↔tags = 8+4 = 12px（Figma 人気/新着製品カード） */
.c-card--product .c-card__tags { justify-content: flex-start; gap: 12rem; margin-top: 4rem; }
/* lineup: spec↔marks = 8+4 = 12px */
.c-card--lineup .c-card__marks { margin-top: 4rem; }

/* =================================================================
 * c-card-legend — 環境マークの凡例（ラインナップ一覧の下）
 * Figma: リンク 5494:297052（凡例「環境マークについて」）
 * =================================================================*/
.c-card-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12rem 32rem;
  padding: 12rem 32rem;
  background: var(--color-bg-02);
  border-radius: var(--radius-lg);   /* 16px */
}
.c-card-legend__title {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-xs);      /* 12px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.8;
  color: var(--color-text-sub);      /* #787878 */
  white-space: nowrap;
}
/* タイトルと項目の縦区切り（48px） */
.c-card-legend__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 48rem;
  background: var(--color-border);   /* #D9D9D9 */
}
.c-card-legend__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rem 32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-card-legend__item {
  display: flex;
  align-items: center;
  gap: 8rem;
}
.c-card-legend__mark {
  flex: 0 0 auto;
  width: 44rem;
  height: 44rem;
  box-sizing: border-box;
  padding: 8rem;
  object-fit: contain;
  background: var(--color-white);
  border: 1px solid var(--color-bg-disabled);
  border-radius: var(--radius-md);
  display: block;
}
.c-card-legend__label {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-xs);      /* 12px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.5;
  color: var(--color-text-sub);      /* #787878 */
}
@media (max-width: 1023.98px) {
  .c-card-legend { gap: 12rem 16rem; padding: 12rem 16rem; }
  .c-card-legend__divider { display: none; }
}

/* ---------- SP（1023.98px 以下） ---------- */
@media (max-width: 1023.98px) {
  /* Figma SP カード media (4555:336426 等): 171×127 内に 110×110 画像。
     padding 16rem では 110+32=142 が aspect-ratio 算出の 128 を上回り縦overflow するため、
     縦 padding を 8rem に縮めて aspect-ratio が高さを支配するようにする。 */
  .c-card__media {
    border-radius: var(--radius-lg);   /* 16px */
    padding: 8rem 16rem;
  }
  .c-card__img   { width: 110rem; height: 110rem; }
  .c-card__link-icon { width: 14rem; height: 14rem; }
  .c-card__title { letter-spacing: 0.05em; line-height: 1.8; }
  .c-card__tag {
    min-height: 22rem;
    font-size: 11rem;
    line-height: 1.5;
  }
  /* 公開範囲カテゴリー（限定公開）も SP では他カテゴリータグと同寸へ
     (Figma 4555:336436 公開範囲カテゴリー 70×22) */
  .c-card__tag--limited {
    min-height: 22rem;
    padding: 3rem 12rem;
    font-size: 11rem;
    line-height: 1.5;
  }
  .c-card__mark { width: 44rem; height: 44rem; }
}