/* =========================================================
   xxxxnese — components/card.css
   .product-card / .business-card
   ---------------------------------------------------------
   現状2つの命名で共存。将来 .card に統合予定。
   hover挙動は共通ルールに集約済み。
   ========================================================= */

/* ---------- Product card ---------- */
.product-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden; /* 内側メディアの角を一緒に丸める */
}

/* カードhoverはProducts / Businessで完全統一（下部で共通定義） */

.product-card .media {
  border-bottom: 1px solid var(--color-line);
}

.product-card__body {
  padding: 32px 28px 40px;
}

.product-card__tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-style: normal;
  margin-bottom: 16px;
}

.product-card__title {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.product-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}

.product-card__text .muted {
  color: var(--color-muted);
  font-size: 13px;
}

/* product-card 内のリンク（onecart.tw / onecart.jp 等の自社プロダクトドメイン） */
.product-card__text a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.25s var(--ease);
}

.product-card__text a:hover {
  color: var(--color-accent);
}

/* ---------- Business card ---------- */
.business-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.business-card .media {
  border-bottom: 1px solid var(--color-line);
}

.business-card__body {
  padding: 32px 28px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.business-card__num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-style: normal;
  margin-bottom: 18px;
  font-feature-settings: "lnum" 1;
}

.business-card__title {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  line-height: 1.5;
}

.business-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
}

/* =========================================================
   Product / Business カード 共通hover
   ---------------------------------------------------------
   duration 設計:
     border-color  0.4s  ... 先行して枠線だけ変わる
     box-shadow    0.5s  ... 続いて影が広がる
     transform     0.6s  ... カード本体も画像も同一の 0.6s で lift & zoom
   ========================================================= */
.product-card,
.business-card {
  transition: border-color 0.4s var(--ease),
    transform 0.6s var(--ease),
    box-shadow 0.5s var(--ease);
}

.product-card:hover,
.business-card:hover {
  border-color: var(--color-line-strong);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.07);
}

/* 画像・プレースホルダー: カード本体と同じ 0.6s / 同じ easing で完全同期 */
.product-card .media__img,
.product-card .media__placeholder,
.business-card .media__img,
.business-card .media__placeholder {
  transition: transform 0.6s var(--ease);
}

.product-card:hover .media__img,
.product-card:hover .media__placeholder,
.business-card:hover .media__img,
.business-card:hover .media__placeholder {
  transform: scale(1.04);
}

/* =========================================================
   Responsive — card
   ========================================================= */

/* Mobile */
@media (max-width: 640px) {
  .product-card__body {
    padding: 24px 22px 28px;
  }

  .business-card__body {
    padding: 24px 22px 28px;
  }
}