/* ==========================================================================
   Menu pages (menu-pranzo.php / menu-cena.php)
   Extends styles.css + enhancements.css with page-specific layout.
   ========================================================================== */

.page-title em {
    color: var(--gold);
    font-style: normal;
    font-weight: 500
}

.menu-hero {
    position: relative;
    min-height: 420px;
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--midnight)
}

.menu-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .85
}

.menu-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(8, 9, 16, .94), rgba(8, 9, 16, .32)), linear-gradient(0deg, rgba(7, 8, 15, .91), transparent 55%)
}

.menu-hero-content {
    position: relative;
    padding: 140px 0 62px
}

.menu-hero-content .lead {
    max-width: 52ch;
    margin: 24px 0 0
}

.menu-price-bar {
    position: relative;
    padding: 56px 0;
    background: #0c0f1a;
    border-bottom: 1px solid var(--line)
}

.menu-price-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 32px;
    justify-content: space-between
}

.menu-price-block {
    display: flex;
    align-items: baseline;
    gap: 18px
}

.menu-price {
    color: var(--gold);
    font: 500 4rem/.8 'Cormorant Garamond', serif
}

.menu-price-note {
    font-size: .8rem;
    color: #c7c1b7
}

.menu-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    font-size: .78rem;
    color: #c7c1b7
}

.menu-meta strong {
    display: block;
    color: var(--gold);
    font: 500 .65rem Montserrat, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase
}

.menu-grid-section {
    position: relative;
    padding: 92px 0
}

.menu-grid-section--light {
    background: linear-gradient(180deg, #fbfaf7 0%, #f3efe7 34%, #edf2fb 100%);
    color: var(--ink)
}

.menu-grid-section--light .menu-item-list {
    color: #4c4844
}

.menu-grid-section--light .menu-item .num {
    color: #a08542
}

.menu-grid-section--light .menu-item {
    border-top: 1px solid #ded6c8
}

.menu-grid-section--light .index {
    color: #8a6f27
}

.menu-grid-section--dark {
    background: linear-gradient(180deg, #0e1220 0%, #141a2e 40%, #0b0e18 100%);
    color: var(--ivory)
}

.menu-grid-section--dark .menu-item-list {
    color: #c9c4bc
}

.menu-grid-section--dark .menu-item .num {
    color: var(--gold)
}

.menu-grid-section--dark .menu-item {
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.menu-grid-section--dark .index {
    color: var(--gold)
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 56px 70px;
    align-items: start
}

.menu-category .index {
    font: 500 .68rem Montserrat, sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase
}

.menu-category h2 {
    font: 600 2.6rem/1 'Cormorant Garamond', serif;
    margin: 8px 0 0
}

.menu-category .divider {
    width: 50px;
    height: 1px;
    background: var(--gold);
    margin: 18px 0 22px
}

.menu-item-list {
    padding: 0;
    list-style: none;
    font-size: .92rem;
    display: grid
}

.menu-item {
    display: flex;
    gap: 14px;
    padding: 9px 0
}

.menu-item .num {
    font: 500 .74rem Montserrat, sans-serif;
    min-width: 26px
}

.menu-switch-section .menu-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: end;
    justify-content: space-between
}

.menu-switch-title {
    font: 600 clamp(2.4rem, 4vw, 3.6rem)/.95 'Cormorant Garamond', serif;
    margin-top: 10px
}

.menu-switch-section p {
    max-width: 46ch;
    margin-top: 14px;
    text-wrap: pretty
}

@media(max-width:800px) {
    .menu-hero-content {
        padding: 100px 0 46px
    }

    .menu-grid-section {
        padding: 70px 0
    }
}