/* ============================================================
   hpk fallback.css — 入力が少ないときの見え方を守るための追加分。

   方針: 「値が入っているときには一致も見た目も変えない」こと。
   そのため、ここに置くのは
     - 未入力でしか付かないクラス（.hero.no-photo）
     - 想定枚数より少ないときにだけ当たる :has() セレクタ
   だけにしてある。base.css / designs/*.css は無改修で流用する。

   ⚠️ 枚数調整の :has() は**必ずメディアクエリの中に閉じる**こと。
   :has() は詳細度が高く（0,3,1）、base.css のレスポンシブ指定（0,1,0）に
   常に勝ってしまうため、素で書くとスマホでも PC の列数が適用されて
   写真が3〜4列に潰れる（2026-07-27 の多角検証で発覚）。
   base.css のブレークポイント: 900px（SNS 3列・ヘッダー変形）/ 780px（本文1列・ギャラリー2列）/ 480px（SNS 2列）
   ============================================================ */

/* ---- 未入力のフォールバック（画面幅によらない） ---- */

/* 写真の無いヒーロー。白背景に白文字で読めなくなるのを防ぐ。 */
.hero.no-photo { background: linear-gradient(165deg, #2a2521 0%, #14110f 100%); }
.hero.no-photo .hero-overlay { opacity: 0.3; }

/* 写真が壊れている・未設定のときに alt テキストがはみ出さないように。 */
.hero-media img, .intro-photos img, .gallery-grid img, .ms-item img, .info-photo img, .sns-cell img {
  max-width: 100%;
}

/* Google フォームの埋め込み（base.css には .gform-mock しか無いので、実物用の体裁をここで持つ）。 */
.gform-embed {
  margin-top: 28px;
  padding: 18px;
  background: var(--theme-bg);
  border: 1px solid var(--theme-line);
  border-radius: var(--radius);
}
.gform-embed iframe {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
}

/* ---- 枚数が少ないときの列数調整（PC のみ。SP は base.css に任せる） ---- */

@media (min-width: 781px) {
  /* 紹介セクションに写真が無いとき、2カラムの右半分が空くのを防ぐ。 */
  .intro-grid:has(> .intro-text:only-child) {
    grid-template-columns: minmax(0, var(--wrap-narrow));
    justify-content: center;
  }

  /* おすすめメニューが1品だけのとき、3カラムに置き去りにならないように。 */
  .menu-showcase:has(> .ms-item:only-child) {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
  }

  /* お品書きのカテゴリが1つだけのとき。 */
  .menu-groups:has(> .menu-group:only-child) {
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
  }

  /* ギャラリーの枚数が少ないとき、4カラムに散らばらないように。 */
  .gallery-grid:has(> figure:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid:has(> figure:only-child) {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }

  /* 4 で割ると 1 枚だけ余る枚数（5・9枚）は 3 列にして、余りを 2 枚以上にする。
     7 枚は 4 列（4+3）のままで収まりが良いので触らない。 */
  .gallery-grid:has(> figure:nth-child(5):last-child),
  .gallery-grid:has(> figure:nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  /* スマホは base.css がギャラリー2列。写真が1枚だけのときは左半分に小さく出てしまうので
     ここだけ1列に戻す（他の枚数は base.css の2列のままが正しい）。 */
  .gallery-grid:has(> figure:only-child) { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  /* SNS は既定 6 列（900px 以下は base.css が 3 列、480px 以下が 2 列）。 */
  .sec-sns .sns-grid:has(> .sns-cell:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .sec-sns .sns-grid:has(> .sns-cell:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .sec-sns .sns-grid:has(> .sns-cell:nth-child(7):last-child) { grid-template-columns: repeat(4, 1fr); }
  .sec-sns .sns-grid:has(> .sns-cell:only-child) {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
  }
}