/*
 * menu-page.css — layout for the online menu (carte) and the product detail sheet.
 * Colours come from the shared tokens in styles.css; menu-specific tokens live here.
 */

:root {
    /* fixed image frames — photos are fitted with object-fit: cover, never stretched */
    --ratio-food: 800 / 491;
    --ratio-square: 1 / 1;
    --ratio-category: 3 / 4;

    /* menu surfaces - warmer Stich wie die Token in styles.css */
    --card-bg: #151210;
    --card-bg-raised: #1e1a16;
    --card-border: #2c2621;
    /* --placeholder-bg steht in styles.css */

    /* selection states */
    --pick-on: #22c55e;
    --pick-on-soft: rgba(34, 197, 94, 0.14);
    --pick-off: #3a3a3a;

    --radius-card: 0.85rem;
    --radius-chip: 0.7rem;
    --tap-min: 48px;
}

/* ============================================================
   Page head
   ============================================================ */

.carte-head {
    text-align: center;
    padding: 2.2rem 1rem 1.2rem;
}

.carte-title {
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--white);
    margin: 0;
}

/* ============================================================
   Category navigation — sticky bar, scrollable on phones
   ============================================================ */
.cat-nav {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--card-border);
    padding: 0.7rem 0;
}

/* width:max-content + auto margins zentriert zuverlaessig, solange die Kacheln
   passen, und laesst sie darunter ganz normal seitlich scrollen. */
.cat-nav-track {
    display: flex;
    gap: 0.7rem;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1rem 0.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cat-nav-track::-webkit-scrollbar { display: none; }

.cat-tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 6.5rem;
    min-height: var(--tap-min);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-chip);
    background: var(--card-bg);
    color: var(--white);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}

.cat-tile-media {
    aspect-ratio: var(--ratio-category);
    width: 100%;
    position: relative;
    background: var(--placeholder-bg);
}

.cat-tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.55rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
}

.cat-tile[aria-current="true"] {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
    transform: translateY(-2px);
}

.cat-tile[aria-current="true"] .cat-tile-label {
    color: var(--white);
    background: linear-gradient(to top, var(--brand) 0%, rgba(196, 61, 24, 0.85) 55%, rgba(196, 61, 24, 0) 100%);
}

/* ============================================================
   Product grids — one ratio per grid, never mixed
   ============================================================ */
.carte-section { padding: 2.2rem 0 0.6rem; }

.carte-section[hidden] { display: none; }

.carte-section-title {
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    font-weight: 800;
    color: var(--white);
    margin: 0 0 1.1rem;
    padding: 0 1rem;
    text-align: center;
}

.product-grid {
    display: grid;
    gap: 1rem;
    padding: 0 1rem;
}

.product-grid.is-food  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.product-grid.is-drink { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
    .product-grid.is-food  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-grid.is-drink { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .product-grid.is-food  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-grid.is-drink { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.product-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.product-card:hover,
.product-card:focus-visible {
    border-color: var(--white);
    transform: translateY(-3px);
}

.product-media {
    width: 100%;
    position: relative;
    background: var(--placeholder-bg);
}

.product-grid.is-food  .product-media { aspect-ratio: var(--ratio-food); }
.product-grid.is-drink .product-media { aspect-ratio: var(--ratio-square); }

.product-body {
    padding: 0.85rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.product-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.25;
}

/* composition: exactly one line, ellipsis on overflow, never wraps */
.product-compo {
    font-size: 0.78rem;
    color: var(--text-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.15rem;
    margin: 0;
}

.product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.7rem;
}

.product-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
}

/* Die Hauptaktion der Karte. Bleibt ein span, weil .product-card selbst ein
   <button> ist - ein Button im Button waere ungueltiges HTML. Sie sieht aber
   wie eine Schaltflaeche aus, denn vorher war sie grauer Text und damit das
   leiseste Element auf der Karte. */
.product-action {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
    background: var(--brand);
    border-radius: 0.45rem;
    padding: 0.6rem 1rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover .product-action,
.product-card:focus-visible .product-action {
    background: var(--brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 61, 24, 0.4);
}

/* .media-img und .media-placeholder stehen jetzt in styles.css - die
   Startseite braucht sie ebenfalls und laedt menu-page.css nicht. */

/* ============================================================
   Zeilenlayout auf dem Handy

   Mit dem grossen Bild im Format 800:491 war eine Karte rund 500 px hoch -
   bei 844 px Sichthoehe also anderthalb Produkte pro Bildschirm. Wer wissen
   wollte, was es gibt, hat sehr lange gescrollt.

   Unter 40rem steht das Bild links als Quadrat, Text und Preis rechts. Damit
   passen fuenf bis sechs Produkte auf einen Bildschirm. Die grossen Fotos
   verlieren nichts: sie kommen im Detail-Blatt gross zur Geltung, dort wo die
   Entscheidung faellt.

   Getraenke bleiben unangetastet - die stehen schon zweispaltig und kompakt.
   ============================================================ */
@media (max-width: 39.99rem) {
    .product-grid.is-food {
        gap: 0.7rem;
    }

    .product-grid.is-food .product-card {
        flex-direction: row;
        align-items: stretch;
    }

    .product-grid.is-food .product-media {
        aspect-ratio: var(--ratio-square);
        width: 6.5rem;
        flex: 0 0 6.5rem;
    }

    .product-grid.is-food .product-body {
        padding: 0.6rem 0.75rem 0.65rem;
        gap: 0.25rem;
        min-width: 0;
    }

    .product-grid.is-food .product-name {
        font-size: 0.95rem;
    }

    /* In einer 17rem breiten Spalte zeigt eine Zeile mit Auslassungspunkten
       nur noch drei Woerter. Zwei Zeilen sind hier das Minimum, das die
       Angabe ueberhaupt brauchbar macht. */
    .product-grid.is-food .product-compo {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.74rem;
        line-height: 1.3;
        min-height: 0;
    }

    .product-grid.is-food .product-foot {
        padding-top: 0.4rem;
        gap: 0.5rem;
    }

    .product-grid.is-food .product-price {
        font-size: 1rem;
    }

    .product-grid.is-food .product-action {
        font-size: 0.68rem;
        padding: 0.5rem 0.7rem;
        min-height: 2.25rem;
    }
}

/* ============================================================
   Detail sheet — fullscreen on phones, centred panel from 720px
   ============================================================ */
.detail-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.72);
}

.detail-sheet.is-open { display: block; }

.detail-panel {
    position: absolute;
    inset: 0;
    background: var(--black);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 720px) {
    .detail-panel {
        top: 3vh;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(920px, 94vw);
        max-height: 94vh;
        border: 1px solid var(--card-border);
        border-radius: 1rem;
    }
}

.detail-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--dark-gray);
}

.detail-thumb {
    width: 4.4rem;
    flex: 0 0 auto;
    aspect-ratio: var(--ratio-food);
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--placeholder-bg);
}

.detail-thumb-frame { position: absolute; inset: 0; }

.detail-heading { flex: 1; min-width: 0; }

/* Der Titel wird beim Oeffnen programmatisch fokussiert, damit Vorleseprogramme
   dort einsteigen. Der Rahmen soll dabei nur bei Tastaturbedienung erscheinen. */
.detail-name:focus { outline: none; }

.detail-name:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 3px;
}

.detail-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--white);
    margin: 0;
    line-height: 1.2;
}

.detail-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
}

.detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1rem 1.4rem;
    -webkit-overflow-scrolling: touch;
}

.detail-step { margin-bottom: 1.9rem; }

.step-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 0.3rem;
}

.step-hint {
    font-size: 0.78rem;
    color: var(--text-gray);
    margin: 0 0 0.8rem;
}

.step-title.is-centered,
.step-hint.is-centered { text-align: center; }

/* sauce groups side by side */
.sauce-columns {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .sauce-columns.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sauce-columns.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   Option chips (breads, sauces, ingredients)
   ============================================================ */
.chip-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 720px) { .chip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chip-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* inside a sauce column the chips stay denser */
.sauce-columns .chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--tap-min);
    padding: 0.4rem 0.25rem 0.55rem;
    background: var(--card-bg);
    border: 2px solid var(--pick-off);
    border-radius: var(--radius-chip);
    color: var(--text-gray);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.chip-media {
    width: 100%;
    aspect-ratio: var(--ratio-square);
    position: relative;
    border-radius: 0.45rem;
    overflow: hidden;
    background: var(--placeholder-bg);
}

.chip-label {
    font-size: 0.68rem;
    line-height: 1.2;
    text-align: center;
    color: inherit;
    word-break: break-word;
}

.chip-extra {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--pick-on);
}

.chip[aria-pressed="true"],
.chip[aria-checked="true"] {
    border-color: var(--pick-on);
    background: var(--pick-on-soft);
    color: var(--white);
}

/* ingredients start selected; deselected ones stay visible but muted */
.chip.is-removed {
    opacity: 0.4;
    border-color: var(--pick-off);
    background: var(--card-bg);
}

.chip:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.chip:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* ============================================================
   Footer of the detail sheet: quantity + actions
   ============================================================ */
.detail-foot {
    border-top: 1px solid var(--card-border);
    background: var(--dark-gray);
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    overflow: hidden;
}

.qty-btn {
    width: var(--tap-min);
    height: var(--tap-min);
    background: var(--medium-gray);
    color: var(--white);
    border: none;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}

.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.qty-value {
    min-width: 2.4rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--white);
}

.btn-add {
    flex: 1;
    min-width: 12rem;
    min-height: var(--tap-min);
    background: var(--brand);
    color: var(--white);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.btn-add:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-back {
    min-height: var(--tap-min);
    padding: 0 1.1rem;
    background: transparent;
    color: var(--text-gray);
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

/* Voreinstellung ist ein neutraler Hinweis. Erst wenn jemand den gesperrten
   Knopf antippt, wird daraus eine Fehlermeldung - sonst stehen hier zwei
   verschiedene Rottoene direkt nebeneinander (Warnung und Hauptknopf) und
   bedeuten nicht dasselbe. */
.detail-warning {
    flex-basis: 100%;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-gray);
    min-height: 1.1rem;
}

.detail-warning.is-error {
    color: var(--danger);
}

/* Gedaempft, solange noch etwas fehlt - aber bewusst nicht disabled, sonst
   bliebe ein Tipp darauf folgenlos und unerklaert. */
.btn-add.is-incomplete {
    background: var(--medium-gray);
    color: var(--text-gray);
}

/* ============================================================
   Cart line options (set by app.js)
   ============================================================ */
.cart-item-options {
    font-size: 0.72rem;
    color: var(--text-gray);
    line-height: 1.35;
    margin-top: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-action,
    .cat-tile,
    .chip { transition: none; }
}