/* ==========================================
   dish_list（メニュー一覧）専用スタイル
   - PC(>=1025px): 画像 左 / テキスト 右（デフォルト）
   - Tablet & Mobile(<=1024px): テキスト 左 / 画像 右
   - grid-area 固定でズレ防止
   ========================================== */

.dish-list-actions {
  margin-bottom: 12px;
}

/* 一覧：縦リスト */
.dish-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dish-card {
  display: block;
}

.dish-card-body {
  min-width: 0;
}

/* 画像サイズ：元(96px)の2倍（全デバイス共通） */
:root {
  --dish-thumb: 192px;
}

/* =========================
   dish-head（grid固定）
   ========================= */
.dish-head {
  display: grid;
  align-items: start;
  column-gap: 12px;
  row-gap: 6px;

  /* PC（デフォルト）：画像 左 / テキスト 右 */
  grid-template-columns: var(--dish-thumb) 1fr;
  grid-template-areas:
    "thumb title"
    "thumb body";
}

/* Tablet & Mobile：<=1024px（style.css と完全一致）
   テキスト 左 / 画像 右 */
@media (max-width: 1024px) {
  .dish-head {
    /* テキスト側の最大幅を制限して画像が右に行き過ぎないように */
    grid-template-columns: minmax(0, 560px) var(--dish-thumb);
    justify-content: start;

    grid-template-areas:
      "title thumb"
      "body  thumb";
  }
}

/* =========================
   grid-area 固定（超重要）
   ========================= */
.dish-thumb { grid-area: thumb; }
.dish-title { grid-area: title; }
.dish-bodytext { grid-area: body; min-width: 0; }

/* サムネ */
.dish-thumb {
  width: var(--dish-thumb);
  height: var(--dish-thumb);
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff7cc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: block;
}

.dish-thumb-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dish-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.dish-thumb-placeholder-text {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
}

/* タイトル */
.dish-title {
  margin: 0;
  line-height: 1.2;
  font-size: 1.15rem;
}

.dish-title a {
  text-decoration: none;
}

.dish-title a:hover {
  text-decoration: underline;
}

/* メタ情報 */
.dish-meta {
  margin: 0 0 4px 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.92rem;
}

.dish-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dish-meta-label {
  color: #665000;
  opacity: 0.9;
}

/* 食材 */
.dish-ingredients {
  margin: 0 0 4px 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.92rem;
}

.dish-ingredients-label {
  color: #665000;
  opacity: 0.9;
}

.dish-ingredients-items {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dish-ingredient-item,
.dish-ingredient-more {
  display: inline;
}

.dish-ingredient-item + .dish-ingredient-item::before,
.dish-ingredient-more::before {
  content: " • ";
  color: rgba(0, 0, 0, 0.45);
}

.dish-ingredients--empty {
  color: rgba(0, 0, 0, 0.5);
}

/* メモ */
.dish-memo {
  margin: 0 0 4px 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.92rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dish-recipe {
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.92rem;
}

/* ボタン行 */
.dish-card-footer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}