@charset "utf-8";
/* ============================================================
   プログラム一覧カード CSS（/nature/program/ 用）※更新版
   子テーマ移行版：astra-child/css/program-list-card.css
   旧WPCode「Wooプログラム一覧カードCSS」（ID 34885）

   変更点：
   - .ymnh-tour-card__duration を右上→左上に移動
   - .ymnh-tour-card__status（SOLD OUT / 受付終了バッジ）を新規追加、右上に配置
     ※現行のカードコンポーネント（2026-10-16版）はこのバッジを出力しないため、
       このルールは現在未使用（将来バッジを復活させる場合に備えて残置）
============================================================ */

/* ymnh-* トークンが未定義の場合のみ有効化してください
:root {
  --ymnh-deep-forest: #004038;
  --ymnh-forest-hover: #0A6B5A;
  --ymnh-forest-pale: #E0F0ED;
  --ymnh-leaf-green: #558B2F;
  --ymnh-leaf-pale: #EAF3DC;
  --ymnh-amber: #EF8D1D;
  --ymnh-amber-pale: #FDF3E2;
  --ymnh-text-primary: #484848;
  --ymnh-text-sub: #6B6B6B;
  --ymnh-text-hint: #8C8C8C;
  --ymnh-border: #D0D0D0;
  --ymnh-bg: #F5F3EF;
  --ymnh-surface: #FFFFFF;
}
*/

/* ===== グリッド（枚数が少なくても中央揃え） ===== */
.ymnh-tour-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.ymnh-tour-grid > .ymnh-tour-card {
  flex: 1 1 280px;   /* 最小280px、余白があれば広がる */
  max-width: 370px;  /* 広がりすぎ防止 */
  min-width: 0;
}

/* 過去プログラム（小さめカード） */
.ymnh-tour-grid--past {
  gap: 18px;
}
.ymnh-tour-grid--past > .ymnh-tour-card {
  flex: 1 1 200px;
  max-width: 260px;
}
/* 過去プログラム：スマホは2列 */
@media (max-width: 600px) {
  .ymnh-tour-grid--past {
    gap: 12px;
  }
  .ymnh-tour-grid--past > .ymnh-tour-card {
    flex: 0 0 calc((100% - 12px) / 2);  /* 2列ぴったり */
    max-width: none;
  }
  .ymnh-tour-card--past .ymnh-tour-card__body {
    padding: 10px;
  }
  .ymnh-tour-card--past .ymnh-tour-card__title {
    font-size: 13px;
  }
}
/* ===== 共通カード ===== */
.ymnh-tour-card {
  position: relative; /* stretched-link の基準 */
  display: flex;
  flex-direction: column;
  background: var(--ymnh-surface);
  border: 0.5px solid var(--ymnh-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 12px rgba(51,65,80,.06), 0 14px 30px rgba(51,65,80,.08);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ymnh-tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(51,65,80,.09), 0 20px 40px rgba(51,65,80,.12);
}

/* カード全体を覆う透明リンク（stretched link）
   カード本体は <article> のまま。クリック領域だけをこのリンクが担う。 */
.ymnh-tour-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ymnh-tour-card__link:focus-visible {
  outline: 2px solid var(--ymnh-deep-forest);
  outline-offset: -2px;
}

/* 「？」の見た目自体は既存の .ym-grade-info がそのまま担う。
   ここで指定するのは重なり順（z-index）だけ。 */
.ymnh-tour-card .ym-grade-info {
  z-index: 2;
}

.ymnh-tour-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ymnh-deep-forest);
}
.ymnh-tour-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 期間バッジ：左上 */
.ymnh-tour-card__duration {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ymnh-leaf-green);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 4px;
}

/* ステータスバッジ（SOLD OUT / 受付終了）：右上 */
.ymnh-tour-card__status {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 4px;
}
.ymnh-tour-card__status--soldout {
  background: var(--ymnh-amber-pale);
  color: #A05800;
}
.ymnh-tour-card__status--closed {
  background: var(--ymnh-text-hint);
  color: #fff;
}

.ymnh-tour-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 7px 12px;
}
.ymnh-tour-card__price {
  font-size: 15px;
  font-weight: 700;
}
.ymnh-tour-card__capacity {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}
.ymnh-tour-card__capacity svg { width: 13px; height: 13px; }

.ymnh-tour-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.ymnh-tour-card__date {
  display: flex;
  align-items: flex-start;   /* center → flex-start：アイコンを1行目に揃える */
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;          /* 折り返し時の行間を明示 */
  color: var(--ymnh-text-sub);
}
/* 日程アイコン：1行目の高さの中央に揃える（文字サイズを変えても追従） */
.ymnh-tour-card__date > i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 1.5em;          /* line-height（1.5）と同じ高さにする */
  line-height: 1;
}
.ymnh-tour-card__date svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;     /* (1.5em - 1em) ÷ 2 */
}
/* 「ほか○日程」 */
.ymnh-tour-card__more-dates {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ymnh-deep-forest);
  background: var(--ymnh-forest-pale);
  border-radius: 4px;
}
.ymnh-tour-card__title {
  font-size: 17px;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--ymnh-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ymnh-tour-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ymnh-tour-card__area,
.ymnh-tour-card__grade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: .02em;
}
.ymnh-tour-card__area {
  background: var(--ymnh-forest-pale);
  color: var(--ymnh-deep-forest);
}
.ymnh-tour-card__area svg { width: 11px; height: 11px; }

.ymnh-tour-card__grade {
  background: var(--ymnh-leaf-pale);
  color: var(--ymnh-leaf-green);
  font-weight: 700;
}

.ymnh-tour-card__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ymnh-text-sub);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ymnh-tour-card__cta {
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ymnh-leaf-green);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 9999px;
  transition: background .2s ease;
}
.ymnh-tour-card:hover .ymnh-tour-card__cta {
  background: var(--ymnh-forest-hover);
}
.ymnh-tour-card__cta svg { width: 12px; height: 12px; }

/* ===== 過去プログラムカード（簡易版） ===== */
.ymnh-tour-card--past .ymnh-tour-card__body {
  padding: 12px;
  gap: 4px;
}
.ymnh-tour-card--past .ymnh-tour-card__title {
  font-size: 14px;
  -webkit-line-clamp: 2;
}
.ymnh-tour-card--past .ymnh-tour-card__date {
  font-size: 11px;
  font-weight: 400;
  color: var(--ymnh-text-hint);
}
.ymnh-tour-card--past .ymnh-tour-card__date svg { width: 12px; height: 12px; }
.ymnh-tour-card--past:hover {
  transform: translateY(-3px);
}