/* ===================================================
   PALACE — Dining Page Styles
   =================================================== */

body { background: #faf9f7; }

/* ── Force nav to dark mode (no hero image) ───── */
.nav-main {
    background: var(--white) !important;
    box-shadow: 0 1px 0 var(--border) !important;
}
.nav-main .nav-center > li > a,
.nav-main .nav-lang,
.nav-main .nav-lang-sep,
.nav-main .nav-social-links a,
.nav-main .nav-home-link {
    color: rgba(0,0,0,0.55) !important;
}
.nav-main .nav-home-link { border-left-color: rgba(0,0,0,0.15) !important; }
.nav-main .nav-center > li > a:hover { color: var(--dark) !important; }
.nav-main .nav-social-links a:hover  { color: var(--dark) !important; }
.nav-main .nav-lang.active           { color: var(--dark) !important; }
.nav-main .nav-logo-img              { filter: none !important; }
.nav-main .nav-book-btn {
    background: var(--red) !important;
    color: var(--white) !important;
    border-color: var(--red) !important;
}
.nav-main .hamburger span { background: var(--dark) !important; }

/* ── Page top spacing (account for fixed header) ── */
.dining-page-top {
    padding-top: calc(72px + 56px);
}

/* ── Page Intro ─────────────────────────────────── */
.dining-intro {
    text-align: center;
    padding: 72px 28px 64px;
    max-width: 760px;
    margin: 0 auto;
}

.dining-intro .section-label {
    display: block;
    margin-bottom: 18px;
    color: rgba(30,20,10,0.55);
    letter-spacing: 0.02em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 300;
    text-transform: uppercase;
}

.dining-intro h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 4px;
    -webkit-font-smoothing: antialiased;
}
.dining-intro-sub {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 300;
    font-style: italic;
    color: var(--gold, #C4A35A);
    margin-bottom: 28px;
    display: block;
}

.dining-intro p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: rgba(30,20,10,0.55);
    max-width: 580px;
    margin: 0 auto;
}

.dining-intro-rule {
    width: 48px;
    height: 1px;
    background: var(--gold);
    margin: 32px auto 0;
}

/* ── Dish Sections ──────────────────────────────── */
.dining-dishes {
    width: 100%;
    overflow: hidden;
}

.dining-dish {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 540px;
}

/* Odd dishes: image left, text right */
/* Even dishes: image right, text left */
.dining-dish:nth-child(even) .dining-dish-image { order: 2; }
.dining-dish:nth-child(even) .dining-dish-content { order: 1; }

/* Force image left regardless of nth-child */
.dining-dish-force-left .dining-dish-image { order: 1 !important; }
.dining-dish-force-left .dining-dish-content { order: 2 !important; }

/* ── Editorial image offsets ── */

/* Parallax dishes (odd): narrower image column */
.dining-dish:nth-child(odd) {
    grid-template-columns: 2fr 3fr;
}

/* Left images (odd): inset from left page edge */
.dining-dish:nth-child(odd) .dining-dish-image {
    margin-left: 5vw;
}

/* Right images (even): inset from right, asymmetric vertical breathing */
.dining-dish:nth-child(even) .dining-dish-image {
    margin-right: 5vw;
    margin-top: 56px;
    margin-bottom: 40px;
}

/* Non-parallax left images: vertical breathing */
.dining-dish:nth-child(odd) .dining-dish-image:not(.js-image-parallax) {
    margin-top: 48px;
    margin-bottom: 48px;
}

/* ── Image side ─────────────────────────────────── */
.dining-dish-image {
    position: relative;
    min-height: 560px;
    overflow: hidden;
}

/* Image fills container absolutely */
.dining-dish-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Parallax disabled */
.dining-dish-image.js-image-parallax {
    height: auto;
    align-self: stretch;
    margin-top: 0;
    margin-bottom: 0;
    will-change: auto;
    transform: none !important;
}

.dining-dish-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 80px;
    background: #faf9f7;
}

.dining-dish-number {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.4);
    margin-bottom: 20px;
}

.dining-dish-content h2 {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 300;
    color: var(--dark);
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin-bottom: 24px;
}

.dining-dish-content h2 em {
    font-style: italic;
    font-weight: 300;
    color: var(--dark);
}

.dining-dish-rule {
    width: 36px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 24px;
    flex-shrink: 0;
}

.dining-dish-content p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: rgba(30,20,10,0.55);
    margin-bottom: 28px;
}

.dining-dish-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.dining-dish-tag {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
}

.dining-dish-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    text-decoration: none;
    border-bottom: 1px solid var(--dark);
    padding-bottom: 3px;
    transition: color 0.2s, border-color 0.2s;
    width: fit-content;
}

.dining-dish-cta:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.dining-dish-cta svg {
    transition: transform 0.2s;
}

.dining-dish-cta:hover svg {
    transform: translateX(4px);
}

/* ── Restaurant Info Banner ─────────────────────── */
.dining-info-banner {
    background: var(--dark);
    color: var(--white);
    padding: 72px 28px;
    text-align: center;
}

.dining-info-banner .section-label {
    color: rgba(255,255,255,0.5);
    display: block;
    margin-bottom: 18px;
}

.dining-info-banner h2 {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 300;
    color: var(--white);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.dining-info-banner p {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.85;
    max-width: 560px;
    margin: 0 auto 48px;
}

.dining-hours {
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}

.dining-hour-item {
    text-align: center;
}

.dining-hour-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-light);
    display: block;
    margin-bottom: 8px;
}

.dining-hour-time {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    color: var(--white);
    display: block;
}

.dining-hour-note {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
    display: block;
}

.dining-info-rule {
    width: 1px;
    height: 56px;
    background: rgba(255,255,255,0.18);
    margin: 0;
    align-self: center;
}

.dining-info-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── In-view reveal — exact Sacher pattern ─────────
      Elements start offset + invisible and animate in
      when they enter the viewport (.js-in-view → .in-view) ── */
.ui-show-in-view {
    transition: transform 3s cubic-bezier(.215, .61, .355, 1),
                opacity   2s cubic-bezier(.215, .61, .355, 1);
    transform: translateY(30px);
    opacity: 0;
}

@media (min-width: 980px) {
    .ui-show-in-view {
        transform: translateY(70px);
        opacity: 0;
    }
}

.ui-show-in-view.in-view {
    opacity: 1;
    transform: none;
}

/* Text panel reveals with slight delay */
.dining-dish-content.ui-show-in-view {
    transition-delay: 0.2s;
}

/* ── Intro reveal (slide up + subtle fade) ──────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ── Food gallery section ────────────────────────── */
.dining-gallery-section {
    background: #f5f0e8;
    padding: 80px 0 100px;
}
.dining-gallery-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}
.dining-gallery-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 1px;
    color: rgba(30,20,10,0.75);
    margin: 0 0 48px;
    text-align: center;
}
.dining-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.dining-gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e8e4dc;
}
.dining-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .dining-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dining-gallery-inner { padding: 0 20px; }
    .dining-gallery-section { padding: 60px 0 80px; }
}
@media (max-width: 480px) {
    .dining-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ── Cină duo image layout ───────────────────────── */
.dining-dish-image-duo {
    overflow: visible;
}
.dining-dish-image-duo img {
    position: absolute;
    inset: auto;
    object-fit: cover;
}
.dining-dish-image-duo .cina-main {
    left: 0; top: 0;
    width: 82%;
    height: 100%;
}
.dining-dish-image-duo .cina-secondary {
    right: -24px;
    bottom: 48px;
    width: 50%;
    height: 52%;
    border: 5px solid #f5f0e8;
    box-shadow: -6px 8px 28px rgba(0,0,0,0.2);
    z-index: 2;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
    .dining-dish,
    .dining-dish:nth-child(odd) {
        grid-template-columns: 1fr;
        min-height: unset;
        padding-bottom: 48px;
    }

    .dining-dish .dining-dish-image { order: 2; }
    .dining-dish .dining-dish-content { order: 1; }

    .dining-dish-image {
        min-height: 300px;
    }

    .dining-dish-image-duo {
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 20px !important;
        min-height: auto !important;
        height: auto !important;
        align-self: auto !important;
    }
    .dining-dish-image-duo .cina-main,
    .dining-dish-image-duo .cina-secondary {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 260px !important;
        border: none !important;
        box-shadow: none !important;
        z-index: auto !important;
    }

    .dining-dish-image.js-image-parallax {
        min-height: 240px;
    }

    /* Reset editorial offsets on mobile */
    .dining-dish:nth-child(odd),
    .dining-dish:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .dining-dish:nth-child(odd) .dining-dish-image,
    .dining-dish:nth-child(even) .dining-dish-image {
        height: auto;
        align-self: stretch;
        margin: 0;
    }

    .dining-dish-content {
        padding: 40px 28px 0;
    }

    .dining-hours {
        gap: 36px;
    }

    .dining-info-rule {
        display: none;
    }
}

@media (max-width: 860px) {
    .dining-page-top {
        padding-top: calc(72px + 16px);
    }
    .dining-intro {
        padding: 24px 20px 40px;
    }
    .dining-dish-content {
        text-align: center;
        align-items: center;
    }
    .dining-dish-rule {
        margin-left: auto;
        margin-right: auto;
    }
    .dining-dish-tags {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .dining-intro {
        padding: 16px 20px 32px;
    }

    .dining-dish-image {
        min-height: 260px;
    }

    .dining-dish-content {
        padding: 32px 20px 0;
    }
}

/* =============================================
   MENIU RESTAURANT
   ============================================= */
.menu-section {
    background: #faf9f7;
    padding: 90px 28px;
}

.menu-inner {
    max-width: 760px;
    margin: 0 auto;
}

.menu-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    text-align: center;
    color: var(--dark);
    margin-bottom: 52px;
}

/* Tab Buttons */
.menu-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 48px;
}

.menu-tab {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.18);
    color: rgba(0,0,0,0.45);
    padding: 10px 22px;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 2px;
}

.menu-tab:hover {
    border-color: #C4A35A;
    color: #C4A35A;
}

.menu-tab.active {
    background: #C4A35A;
    border-color: #C4A35A;
    color: #fff;
}

/* Category panels */
.menu-category {
    display: none;
}

.menu-category.active {
    display: block;
}

/* Menu list */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--dark);
    white-space: nowrap;
    flex-shrink: 0;
}

.menu-dots {
    flex: 1;
    border-bottom: 1.5px dotted rgba(0,0,0,0.18);
    margin: 0 14px;
    position: relative;
    top: -4px;
}

.menu-weight {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #C4A35A;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .menu-section {
        padding: 60px 20px;
    }
    .menu-name {
        white-space: normal;
        font-size: 1rem;
    }
}