/* =========================================================
    Component: Card Standard
    File: assets/css/3_components/feature-card-standard.css
   ========================================================= */

/* --- 1. 共通ベース（PC・SP共通） --- */
.c-cardStandard {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}

/* 画像エリア */
.c-cardStandard .c-cardStandard__img {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--wan-r-md); /* 8px */
  overflow: hidden;
  margin-bottom: var(--wan-s-3); /* 12px */
}

.c-cardStandard .c-cardStandard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タグの配置（画像右上） */
.c-cardStandard .c-cardStandard__tagArea {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* コンテンツエリア */
.c-cardStandard .c-cardStandard__content {
  display: flex;
  flex-direction: column;
}

/* メタ情報（エリア名） */
.c-cardStandard .c-cardStandard__meta {
  display: flex;
  align-items: center;
  order: 2;
  margin-bottom: var(--wan-s-2); /* 8px */
}

/* タイトル */
.c-cardStandard .c-cardStandard__title {
  font-size: var(--wan-f-size-lg);
  font-weight: var(--wan-f-weight-bold);
  line-height: var(--wan-f-lh-relaxed);
  color: var(--wan-color-text, #333333);
  order: 1;
  margin-bottom: var(--wan-s-2); /* 8px */
}

/* 日付エリア */
.c-cardStandard .c-cardStandard__dateArea {
  display: block;
  order: 3;
}

/* --- 3. PC専用デザイン（769px以上） --- */
@media screen and (min-width: 769px) {
  .c-cardStandard:hover {
    opacity: 0.8;
    transform: translateY(-2px);
  }
}