@import url('../../css/menu-drilldown.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

/* ============================================================
   CLASSIC DINING (2026-09-29) — built for Блинный домик, open to all.
   Fine Dining's structure (one wide photo category per row) on a light
   page. Category name sits ABOVE its photo; inside a category the name
   leads the page and dishes use Classic's photo-on-top grid cards.
   Colours are Classic's (DesignController::LAYOUT_DEFAULT_COLORS).
   Display face must carry Cyrillic — Fine Dining's Cinzel does not.
   ============================================================ */

:root {
    --ym-primary: #ff6b35;
    --ym-primary-dark: #d9542a;
    --ym-ink: #1a1a2e;
    --ym-muted: #5b6270;
    --ym-bg: #f7f7f9;
    --ym-card: #ffffff;
    --ym-border: #ececf0;
    --ym-radius: 16px;
    --ym-radius-sm: 10px;
    --ym-shadow: 0 4px 16px rgba(20, 20, 40, .08);
    --ym-shadow-lg: 0 -8px 30px rgba(20, 20, 40, .18);

    --cg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cg-font-display: 'Playfair Display', Georgia, serif;

    --cg-hero-min: 260px;
    --cg-hero-pad: 26px 22px 28px;
    --cg-hero-name-size: 28px;
    --cg-hero-name-weight: 600;
    --cg-hero-name-spacing: .02em;
    --cg-logo-size: 56px;
    --cg-logo-radius: 14px;

    --cg-cols: 1;
    --cg-cols-wide: 2;
    --cg-gap: 20px;
    --cg-cat-ratio: 21 / 9;
    --cg-cat-name-size: 20px;
    --cg-cat-name-weight: 600;
    --cg-cat-name-align: center;
    --cg-cat-name-transform: uppercase;
    --cg-cat-name-spacing: .1em;

    --cg-pill-active-bg: var(--ym-primary);
    --cg-pill-active-ink: #ffffff;
    --cg-section-title-size: 26px;
    --cg-section-title-weight: 600;
}

.ym-lang-menu a.active { background: rgba(255, 107, 53, .10); }

/* ---------- Category cards: name ABOVE the photo ---------- */
.ym-cg-cat { display: flex; flex-direction: column; }
.ym-cg-cat-name { order: -1; margin: 0 2px 9px; }

/* ---------- Inside a category: its name leads the page ---------- */
[data-ym-view="cat"] .ym-section-title { display: block; }
.ym-section-title { text-align: center; text-transform: uppercase; letter-spacing: .1em; margin: 20px 0 14px; }

/* ---------- Dish cards: Classic's photo-on-top grid ---------- */
.ym-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 480px) {
    .ym-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ym-card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--ym-border); }
.ym-card-img { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; background: var(--ym-bg); }
.ym-card-img.placeholder { font-size: 32px; background: rgba(0, 0, 0, .04); }
.ym-card-body { padding: 10px 12px 12px; }
.ym-card-name { font-family: var(--cg-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ym-card-desc { font-size: 12px; -webkit-line-clamp: 1; }
.ym-card-price { font-weight: 700; padding-top: 6px; }
.ym-badges { margin-top: 8px; }
.ym-badge { border-radius: 999px; }

/* ordering.js pins the add button to the card's bottom-right corner, which
   here is the price row under the photo — keep the price clear of it. */
.ym-card:has(.ym-ord-add) .ym-card-price { padding-right: 40px; }