/* ============================================================
   KARTUL — menu-offer block ("daily special", home page)

   Compact list of picked dishes, styled to sit quietly with the manifesto
   text — NOT the full menu page treatment (that lives in menu.css, which
   this page never loads). Every rule here is scoped under
   .block-menu-offer so it costs nothing elsewhere and can never leak into
   /menu.

   The home page's content lives in ONE viewport (.stage is height:100vh,
   overflow:hidden) with no vertical scroll room, so this block must stay
   short: a handful of rows, small type, photo off by default.
   ============================================================ */

.block-menu-offer {
    /* ========== TUNE HERE ========================================== */
    --bmo-size: var(--measure, 14.5px);   /* row text size — matches body copy */
    --bmo-gap: .6em;                      /* space between dish rows */
    --bmo-heading-size: 1.1em;            /* heading size */
    --bmo-photo-size: 40px;               /* thumbnail side, when shown */
    --bmo-was-color: currentColor;        /* struck-through regular price */
    --bmo-note-opacity: .6;               /* note / description line */
    --bmo-max-height: 46vh;               /* hard cap so it can't blow the viewport */
    --bmo-featured-multi-name-size: clamp(16px, 4.2vw, 28px); /* fits narrow home columns */

    /* Client's brief: "all side margin 8px" — read as the panel's inner
       inset (the padding around the heading/rows), since the block is now
       a coloured card and text sitting flush against its own edge would
       look cramped/unfinished. A small OUTER margin is added too (same
       8px, vertical-only) so the panel doesn't touch a neighbouring block
       stacked in the same column — columns/rows get no gap of their own
       from style.css's grid (row-gap: 0), so without this a second block
       under this one would visually collide with the panel edge. No
       horizontal outer margin: the column width itself already provides
       the side gap (--col-gap in style.css). */
    --offer-pad: 8px;
    --offer-margin: 8px 0;

    /* ---- background palette (Task 2) ----------------------------------
       Editor-chosen PANEL background, split warm / cool + a neutral. Each
       one is paired here with a fixed foreground (--offer-fg-*) used only
       on the block's own content elements below (heading/body) — never on
       an element carrying a .c-*/.t-* class, so the house colour system's
       specificity rule (editor's .c-* pick always wins on the element it
       sits on) is untouched. This is how contrast is guaranteed: whatever
       "Colour" the editor picks for the heading/lead text, the dish rows
       underneath always fall back to a colour chosen to read on that
       specific background, not to whatever the editor happened to also
       pick for the accent text. Values chosen/checked for >=4.5:1 against
       their paired foreground. */
    --offer-bg-warm-ochre:       #e8b23c; --offer-fg-warm-ochre:       #111111;
    --offer-bg-warm-terracotta:  #a84f24; --offer-fg-warm-terracotta:  #ffffff;
    --offer-bg-warm-paper:       #f3e7d0; --offer-fg-warm-paper:       #111111;
    --offer-bg-cool-forest:      #234f39; --offer-fg-cool-forest:      #ffffff;
    --offer-bg-cool-mint:        #cfe8dc; --offer-fg-cool-mint:        #111111;
    --offer-bg-cool-ink:         #1b1b1b; --offer-fg-cool-ink:         #ffffff;
    /* ================================================================ */

    font-family: "Kommuna", "Courier New", monospace;
    padding: var(--offer-pad);
    margin: var(--offer-margin);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* NOTE: no `color` here on purpose — this element also carries the
       editor's .c-*/.t-* picks (see the snippet), and type-styles.css
       relies on normal (non-:where()) specificity for that choice to win.
       Setting `color` here would just be a same-specificity coin-flip
       against .c-ink-paper etc. depending on stylesheet order. Absent any
       colour class this naturally falls back to the inherited body ink,
       which is the safe default anyway. */
}

/* ---- background panel colours (Task 2) ----
   Only the background-color lives on .block-menu-offer itself (fine —
   that's not `color`/`font-size`, so it can't fight the editor's .c-*/
   .t-* pick). The paired foreground is applied one level down, to the
   heading and body wrappers — neither carries a .c-*/.t-* class — so it
   simply overrides the colour those elements would otherwise inherit
   from the .c-* class up on the root, guaranteeing legible dish-row text
   no matter which text "Colour" the editor chose. "None" adds no class
   and so changes nothing from today's transparent look. */
.block-menu-offer.bg-offer-warm-ochre      { background-color: var(--offer-bg-warm-ochre); }
.block-menu-offer.bg-offer-warm-terracotta { background-color: var(--offer-bg-warm-terracotta); }
.block-menu-offer.bg-offer-warm-paper      { background-color: var(--offer-bg-warm-paper); }
.block-menu-offer.bg-offer-cool-forest     { background-color: var(--offer-bg-cool-forest); }
.block-menu-offer.bg-offer-cool-mint       { background-color: var(--offer-bg-cool-mint); }
.block-menu-offer.bg-offer-cool-ink        { background-color: var(--offer-bg-cool-ink); }

.block-menu-offer.bg-offer-warm-ochre      :is(.block-menu-offer-heading, .block-menu-offer-body) { color: var(--offer-fg-warm-ochre); }
.block-menu-offer.bg-offer-warm-terracotta :is(.block-menu-offer-heading, .block-menu-offer-body) { color: var(--offer-fg-warm-terracotta); }
.block-menu-offer.bg-offer-warm-paper      :is(.block-menu-offer-heading, .block-menu-offer-body) { color: var(--offer-fg-warm-paper); }
.block-menu-offer.bg-offer-cool-forest     :is(.block-menu-offer-heading, .block-menu-offer-body) { color: var(--offer-fg-cool-forest); }
.block-menu-offer.bg-offer-cool-mint       :is(.block-menu-offer-heading, .block-menu-offer-body) { color: var(--offer-fg-cool-mint); }
.block-menu-offer.bg-offer-cool-ink        :is(.block-menu-offer-heading, .block-menu-offer-body) { color: var(--offer-fg-cool-ink); }

.block-menu-offer-heading {
    font-size: var(--bmo-heading-size);
    font-weight: 700;
    margin: 0 0 .5em;
}

.block-menu-offer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bmo-gap);
    font-size: var(--bmo-size);
    max-height: var(--bmo-max-height);
    overflow-y: auto;
}

.block-menu-offer-item {
    display: flex;
    align-items: flex-start;
    gap: .6em;
}

.block-menu-offer-photo {
    flex: 0 0 auto;
    width: var(--bmo-photo-size);
    height: var(--bmo-photo-size);
    object-fit: cover;
    border-radius: 2px;
}

.block-menu-offer-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* dotted leader between name and price — same idea as the menu page's
   m-leader, but scoped and sized down for this block */
.block-menu-offer-row {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.block-menu-offer-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.block-menu-offer-leader {
    flex: 1 1 auto;
    min-width: 8px;
    margin: 0 5px;
    border-bottom: 2px dotted currentColor;
    opacity: .8;
    position: relative;
    top: -3px;
}

.block-menu-offer-price {
    flex: 0 0 auto;
    white-space: nowrap;
}

.block-menu-offer-was {
    opacity: .6;
    color: var(--bmo-was-color);
    margin-right: .4em;
    text-decoration: line-through;
}

.block-menu-offer-note {
    opacity: var(--bmo-note-opacity);
    font-size: .9em;
    margin-top: .1em;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 780px) {
    .block-menu-offer {
        --bmo-max-height: none;
        --offer-margin: 1.25em 0;
    }
    .block-menu-offer .block-menu-offer-list {
        overflow-y: visible;
        max-height: none;
    }
    .page-home .block-menu-offer {
        margin-top: 0.5em;
    }
}

/* ---------- featured layout (one dish on photo) ---------- */
.block-menu-offer--featured {
    position: relative;
    min-height: clamp(160px, 28vh, 260px);
    background-image: var(--bmo-featured-bg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 1em 1.4em;
    margin: var(--offer-margin);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.block-menu-offer--featured-no-photo {
    background-color: var(--offer-bg-cool-forest);
}

.block-menu-offer-featured-label {
    position: absolute;
    top: var(--offer-pad);
    right: var(--offer-pad);
    left: var(--offer-pad);
    max-width: none;
    font-size: 0.9em;
    opacity: 0.95;
    text-align: right;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.block-menu-offer-featured-body {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 92%;
    min-width: 0;
}

.block-menu-offer-featured-name {
    margin: 0 0 0.25em;
    overflow-wrap: anywhere;
}

.block-menu-offer-featured-price {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35em;
}

.block-menu-offer-featured-note {
    margin: 0;
    opacity: 0.85;
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

.block-menu-offer--featured-multi {
    align-items: stretch;
    justify-content: flex-start;
    padding: 2.4em var(--offer-pad) 1em;
    min-height: 0;
    height: auto;
}

.block-menu-offer--featured-multi .block-menu-offer-featured-body {
    text-align: left;
    max-width: 100%;
    width: 100%;
}

.block-menu-offer-list--in-featured {
    max-height: none;
    overflow: visible;
    width: 100%;
    min-width: 0;
    font-size: var(--bmo-featured-multi-name-size);
}

.block-menu-offer-list--in-featured .block-menu-offer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12em;
}

.block-menu-offer-list--in-featured .block-menu-offer-name {
    flex: 0 1 auto;
    width: 100%;
    line-height: 1.1;
}

.block-menu-offer-list--in-featured .block-menu-offer-name:is(.t-display, .t-poster) {
    font-size: var(--bmo-featured-multi-name-size);
}

.block-menu-offer-list--in-featured .block-menu-offer-leader {
    display: none;
}

.block-menu-offer-list--in-featured .block-menu-offer-price {
    white-space: normal;
}

@media (max-width: 780px) {
    .block-menu-offer--featured {
        min-height: clamp(140px, 36vw, 220px);
    }
}