/*
  THE LUNCH BREAK look. Edit freely: this file is only loaded for styling, nothing depends on class names outside it
  except the three hooks at the top. See docs/lunch-break.md.

  Hooks: body[data-office="lunch"] is set by the page while the office is closed or quiet; #lunch is the panel the HTML
  fragment (/lunch/lunch.html) is loaded into; #floor is the canvas, which is dimmed and emptied.
*/

/* the dimmed, empty office */
body[data-office="lunch"] #floor { filter: brightness(0.56) saturate(0.6); transition: filter 1.6s ease; }
body[data-office="lunch"] .side { display: none; }
body[data-office="lunch"] .tag { visibility: hidden; }

/* the product panel takes the side column; it scrolls in place, the page itself does not */
.lunch { display: none; min-height: 0; min-width: 0; }
body[data-office="lunch"] .lunch { display: block; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.3rem; }
.lunch[hidden] { display: none !important; }

.lunch-page { display: flex; flex-direction: column; gap: 0.9rem; }

.lunch-hero {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 159, 28, 0.5);
  border-radius: 0.6rem;
  background: linear-gradient(135deg, rgba(255, 159, 28, 0.14), rgba(8, 15, 27, 0.9) 60%);
  box-shadow: 0 0 1.6rem rgba(255, 159, 28, 0.12);
}
.lunch-kicker { margin: 0 0 0.25rem; color: var(--orange); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.lunch-hero h2 { margin: 0 0 0.4rem; color: var(--ink); font-size: 1.5rem; line-height: 1.15; }
.lunch-lede { margin: 0; color: var(--dim); font-size: 0.9rem; line-height: 1.5; }

.lunch-block {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--panel);
}
.lunch-block h3 { margin: 0 0 0.5rem; color: var(--mint); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.lunch-block p { margin: 0; color: var(--ink); font-size: 0.88rem; line-height: 1.55; }

.lunch-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.lunch-list li { color: var(--dim); font-size: 0.86rem; line-height: 1.5; padding-left: 1rem; position: relative; }
.lunch-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0.5rem var(--cyan); }
.lunch-list b { color: var(--ink); font-weight: 700; }

.lunch-shot { margin: 0 0 0.8rem; }
.lunch-shot:last-child { margin-bottom: 0; }
.lunch-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.45rem; background: #02040a; }
.lunch-shot figcaption { margin-top: 0.35rem; color: var(--dim); font-size: 0.76rem; line-height: 1.45; }

.lunch-foot { color: var(--dim); font-size: 0.72rem; text-align: center; padding: 0.2rem 0 0.6rem; }

/* phone: the dimmed office on top, the product page below it, the whole page scrolls */
@media (max-width: 899px) {
  body[data-office="lunch"] .lunch { overflow: visible; padding-right: 0; }
}