/* ============================================================
   menu-index.css
   撮影メニュー一覧（親ページ /menu/ ＝ page-menu.php）専用。
   is_page('menu') のときだけ enqueue される（functions.php）。
   トップの代表7枚（top.css の .mgrid/.mi）とは別系統＝自己完結。
   デザイントークンは global.css の :root を使用。

   デザイン＝「雑誌の目次型」（第一原案 f1 を採用）：
   写真をカード全面に敷き、下部にすりガラスの文字パネルを重ね、
   通し番号（01,02…）＋金のヘアライン1本＋明朝見出しで誌面感を出す。
   通し番号は CSS カウンタで自動採番（HTML・データ不要）。
   モバイルファースト：SPは2列・説明文は隠して写真優先、@600で説明文復帰。
   ============================================================ */

.mindex-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホから2列 */
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mi; /* 通し番号 */
}

/* ── カード（写真全面＋下部パネル。比率3:4で揃える） ── */
.mindex-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(184, 151, 90, .18);
  box-shadow: 0 2px 14px rgba(28, 28, 28, .05);
  counter-increment: mi;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.mindex-card > a {
  display: block;
  position: relative;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.mindex-card:hover,
.mindex-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(28, 28, 28, .12);
  border-color: var(--gold-lt);
}
/* 人気カードは金枠で強調 */
.mindex-card.is-popular {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(184, 151, 90, .18);
}

/* ── サムネイル（カード全面） ── */
.mindex-thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mindex-thumb .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.mindex-card:hover .mindex-thumb .img-cover,
.mindex-card:focus-within .mindex-thumb .img-cover {
  transform: scale(1.05);
}

/* 写真未提供メニューはテーマ色プレースホルダ（壊れ画像回避） */
.mindex-card--noimg .mindex-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-dk), var(--gold-lt));
}
.mindex-noimg {
  font-family: var(--en);
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: capitalize;
  color: rgba(255, 255, 255, .92);
}

/* 人気バッジ（すりガラス＋金枠） */
.mindex-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(6px) saturate(1.3);
  backdrop-filter: blur(6px) saturate(1.3);
  border: 1px solid rgba(184, 151, 90, .55);
  color: var(--gold-dk);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(28, 28, 28, .1);
}

/* ── 文字パネル（下部・すりガラス） ── */
.mindex-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 9px 11px 11px;
  background: linear-gradient(to top,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 255, 255, .92) 62%,
    rgba(255, 255, 255, .32) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, .6);
}

/* 英字キッカー（先頭に通し番号を金の明朝で） */
.mindex-en {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.mindex-en::before {
  content: counter(mi, decimal-leading-zero);
  font-family: var(--jp);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  flex: none;
}

/* 明朝見出し（上に金のヘアライン1本） */
.mindex-title {
  font-family: var(--jp);
  font-size: 1.04rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--charcoal);
  margin: 0 0 3px;
  padding-top: 4px;
  text-wrap: balance;
  border-top: 1px solid rgba(184, 151, 90, .32);
}

/* 長い名称（例：フォトウェディング）はSPの狭い2列で折り返すため一段小さく＋字間を詰める。
   短い名称は通常サイズのまま（PHPで mb_strlen>=7 のカードに .mindex-card--longtitle を付与）。 */
.mindex-card--longtitle .mindex-title { font-size: .92rem; letter-spacing: -.01em; }

/* 説明文：SPは写真優先で隠す（@600で復帰・2行クランプ） */
.mindex-lead {
  font-size: .71rem;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--text2);
  margin: 0 0 6px;
  display: none;
  -webkit-line-clamp: 1; /* カードのleadは1行で固定＝パネル高さを全カード均一に（@600で表示・はみ出しは…） */
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mindex-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold-dk);
  transition: color var(--t), gap var(--t);
}
/* 生の「→」を文言に溶接せず擬似要素で付与（ai-tells-checklist.md 手癖12）。間隔は既存の gap で確保。 */
.mindex-more::after { content: "→"; transition: transform var(--t); }
.mindex-card:hover .mindex-more,
.mindex-card:focus-within .mindex-more {
  color: var(--gold);
  gap: 8px;
}

/* ── タブレット以上（説明文を復帰、級数を一段上げる） ── */
@media (min-width: 600px) {
  .mindex-grid { gap: 24px; }
  .mindex-body {
    padding: 12px 15px 14px;
    background: linear-gradient(to top,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .9) 64%,
      rgba(255, 255, 255, .3) 100%);
    -webkit-backdrop-filter: blur(9px) saturate(1.4);
    backdrop-filter: blur(9px) saturate(1.4);
  }
  .mindex-en {
    gap: 9px;
    font-size: .65rem;
    letter-spacing: .22em;
    margin-bottom: 3px;
    white-space: normal;
    overflow: visible;
  }
  .mindex-en::before { font-size: 1.32rem; letter-spacing: .05em; }
  .mindex-title {
    font-size: 1.16rem;
    letter-spacing: .06em;
    line-height: 1.45;
    padding-top: 6px;
    margin: 0 0 5px;
  }
  /* タブレット以上はカード幅に余裕があるので長い名称も通常サイズに戻す */
  .mindex-card--longtitle .mindex-title { font-size: 1.16rem; letter-spacing: .06em; }
  .mindex-lead {
    display: -webkit-box;
    font-size: .8rem;
    line-height: 1.7;
    letter-spacing: .03em;
    margin: 0 0 9px;
  }
  .mindex-more { gap: 7px; font-size: .79rem; letter-spacing: .08em; }
  .mindex-badge {
    top: 12px;
    left: 12px;
    font-size: .62rem;
    letter-spacing: .14em;
    padding: 5px 11px;
  }
  .mindex-noimg { font-size: 1.5rem; }
}

/* ── PC（3列・見出しをわずかに伸びやかに） ── */
@media (min-width: 960px) {
  .mindex-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .mindex-en::before { font-size: 1.5rem; }
  .mindex-title { letter-spacing: .05em; }
  .mindex-lead { line-height: 1.75; }
}