/* menu.css */

/* ========================================
   メニューセクション
======================================== */
.p-menu {
    padding-left: 48px;
}

.p-menu__block {
    margin-bottom: 0;
}

/* Lunch / Dinner の各コースをまとめる単位 */
.p-menu__course {
    margin-bottom: 48px;
}

/* 「Lunch」「Dinner」見出し */
.p-menu__heading {
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    margin-bottom: 22px;
}

/* 価格テキスト */
.p-menu__price {
    font-family: var(--font-jp);
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.8;
    margin-bottom: 16px;
}

.p-menu__price--en {
    font-family: var(--font-en);
    font-size: 14px;
    color: #1a1a1a;
}

/* 注記リスト */
.p-menu__notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p-menu__note {
    font-family: var(--font-jp);
    font-size: 0.8rem;
    color: #1a1a1a;
    line-height: 1.6;
}

.p-menu__note--en {
    font-family: var(--font-en);
    font-size: 14px;
    color: #1a1a1a;
}

/* 料理写真 */
.p-menu__img {
    max-width: 483px;
    margin-bottom: 40px;
}

.p-menu__img img {
    display: block;
    width: 100%;
    height: auto;
}

/* セパレーター */
.p-menu__separator {
    width: 100%;
    max-width: 520px;
    height: 1px;
    background-color: rgba(26, 26, 26, 0.25);
    margin: 60px 0;
}

/* ========================================
   レスポンシブ（PC：769px以上）
   Lunch列／Dinner列で横並び。各列はJP→区切り線→ENの縦並び
   （Lunch列・Dinner列それぞれに区切り線が入る）。写真2枚はさらに右へ。
   .p-menu__block は display:contents で読み上げ順・JP/EN別のスタイルは
   保持しつつ、中の .p-menu__course をグリッドの直接の子として配置する
======================================== */
@media screen and (min-width: 769px) {
    .p-menu {
        /* 写真幅：1440px時に237px。画面幅に応じて伸びる */
        --photo-w: clamp(237px, 16.5vw, 360px);
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        grid-template-rows: auto auto auto;
        column-gap: 32px;
    }

    .p-menu__block,
    .p-menu__block--en {
        display: contents;
    }

    /* Lunch列 */
    .p-menu__course--lunch:not(.p-menu__course--en) {
        grid-column: 1;
        grid-row: 1;
        margin-top: 56px;
    }

    .p-menu__course--lunch.p-menu__course--en {
        grid-column: 1;
        grid-row: 3;
    }

    /* Dinner列 */
    .p-menu__course--dinner:not(.p-menu__course--en) {
        grid-column: 2;
        grid-row: 1;
        margin-top: 56px;
    }

    .p-menu__course--dinner.p-menu__course--en {
        grid-column: 2;
        grid-row: 3;
    }

    /* 区切り線：Lunch・Dinner列の両方にまたがる形で1本。
       上のコース（margin-bottom:48px）に対して線自体の上余白は詰める */
    .p-menu__separator {
        grid-column: 1 / 3;
        grid-row: 2;
        margin-top: 0;
        margin-bottom: 40px;
    }

    /* 写真列：ENの行の下端付近に写真の下端を揃える（2枚まとめて下揃え）。
       たれ写真の下オフセットは「小どんぶり写真の高さ＋余白」を計算で出しているため
       写真幅が変わっても間隔が保たれる */
    .p-menu__img--tare {
        grid-column: 3;
        grid-row: 1 / 4;
        align-self: end;
        margin-bottom: calc(var(--photo-w) * 0.5838 + 48px);
    }

    .p-menu__img--donburi {
        grid-column: 3;
        grid-row: 1 / 4;
        align-self: end;
        margin-bottom: 24px;
    }

    .p-menu__img {
        width: var(--photo-w);
        max-width: none;
    }
}

/* ========================================
   レスポンシブ（768px以下）
======================================== */
@media screen and (max-width: 768px) {
    .p-menu {
        padding-left: 0;
    }

    .p-menu__course {
        margin-bottom: 56px;
    }

    .p-menu__heading {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .p-menu__price {
        font-size: 18px;
    }

    .p-menu__price--en {
        font-size: 18px;
    }

    .p-menu__note {
        font-size: 16px;
    }

    .p-menu__img {
        max-width: 100%;
        margin-bottom: 56px;
    }

    .p-menu__separator {
        max-width: 100%;
        margin: 80px 0;
    }
}