/*
Theme Name: toki_tcd069-child
Theme URI:  (※任意のURL)
Description: toki_tcd069の子テーマです。
Author: Fuka Adachi
Author URI: http://example.com/
Template: toki_tcd069
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mychildtheme
*/

/* ここから下に独自のCSSを記述します */

/* メニューボタンエリアの余白 */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 40px auto;
    max-width: 900px;
}

/* ボタンの基本設定 */
.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 4px;
    transition: 0.3s;
    background-color: #333;
}

/* 各ボタンの色（TOKIに合わせた落ち着いた色） */
.menu-btn.pizza { background-color: #a52a2a; } /* ブラウンレッド */
.menu-btn.pasta { background-color: #556b2f; } /* オリーブ */
.menu-btn.side  { background-color: #b8860b; } /* ダークゴールデン */
.menu-btn.drink { background-color: #4682b4; } /* スチールブルー */

/* ホバー効果 */
.menu-btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* スマホ表示 */
@media (max-width: 600px) {
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .menu-btn {
        height: 80px;
    }
}

/*メニューページ*/
.menu-category-title {
    font-size: 36px !important;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 80px auto 40px; /* 前のセクションとしっかり余白を取る */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 見出しの下に装飾線を引く */
.menu-category-title::after {
    content: '';
    width: 60px;
    height: 1px;
    background: #ccc;
    margin-top: 20px;
}

/* メニュー用グリッド */
.menu-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 40px; /* 縦横の余白を少し広めに */
    margin: 50px auto;
    max-width: 1100px; /* 全体の幅を900pxから1100pxに拡大 */
}

.menu-list-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 下の線はデザインに合わせてお好みで */
    border-bottom: none; 
}

/* 画像エリアのサイズを大きくする */
.menu-list-img {
    width: 100%;
    /* 高さを200pxから350pxにアップ（または aspect-ratio を使用） */
    height: 280px; 
    background: #f0f0f0;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px; /* 角を少し丸くするとおしゃれ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 軽く影をつけると立体感が出ます */
}

/* 画像を枠いっぱいに表示し、マウスを置いた時に少しズームする演出 */
.menu-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.menu-list-item:hover .menu-list-img img {
    transform: scale(1.05); /* ホバーで少しだけ拡大 */
}

/* テキスト部分の調整 */

/* infoの箱自体も縦並びのFlexboxにする */
.menu-list-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 親(item)の中で残りの高さをすべて埋める */
}

.menu-list-name {
    font-size: 22px; /* 少し大きく */
    margin-bottom: 8px;
}

.menu-list-desc {
    font-size: 14px;
    margin-bottom: 15px;
}

.menu-list-price {
    margin-top: auto !important;    /* 優先的に下に押し下げる */
    margin-bottom: 0 !important;    /* テーマの 2em の余白を消す */
    font-size: 26px;
}

/* スマホ表示では画像が大きすぎないよう調整 */
@media (max-width: 768px) {
    .menu-list-grid {
        grid-template-columns: 1fr; /* 縦1列（箱自体は100%） */
        gap: 30px; /* メニュー間の余白を少し詰める */
        margin: 30px auto;
        padding: 0 15px;
    }

    .menu-list-item {
        flex-direction: row; /* ★ここがポイント：横並びに変更 */
        align-items: flex-start;
        gap: 15px; /* 画像とテキストの間の余白 */
    }

    .menu-list-img {
        overflow: hidden;
        position: relative; /* 子要素の基準にする */
        width: 140px;  /* スマホでの画像の横幅を固定 */
        height: 100px; /* 正方形にする */
        flex-shrink: 0; /* 画像が潰れないように固定 */
        margin-bottom: 0; /* 縦並びの時の余白を消す */
        border-radius: 4px;
    }

/* ★ここが重要：中の画像に対する設定 */
    .menu-list-img img {
        width: 100% !important;     /* 横幅を親いっぱいに */
        height: 100% !important;    /* 縦幅を親いっぱいに */
        object-fit: cover !important; /* ★縦横比を維持したまま、隙間なく埋める */
        display: block;             /* 下の隙間（フォントのベースライン）を消す */
    }


    .menu-list-info {
        flex-grow: 1; /* 残りの幅をテキストエリアに */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* 料理名：スマホに合わせて少し小さく */
    .post_content h3.menu-list-name {
        margin: 0 0 10px 0 !important; /* 親テーマのマージンをリセットし、下だけ空ける */
        padding: 0 !important;         /* 親テーマのパディングを強制リセット */
    }

    /* 説明文：さらに小さくして行数を制限する場合 */
    .menu-list-desc {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 10px !important;
        /* もし3行以上になったら「...」で省略したい場合は以下を有効に */
        /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; */
    }

    /* 価格：文字サイズを調整 */
    .menu-list-price {
        font-size: 16px;
    }
    
    .menu-category-title {
        font-size: 26px;
        margin: 60px auto 30px;
    }
}