/* Sushi Panda — Lounas, local preview design pass.
   Page-specific layer on top of style.css + pages.css. Same tokens,
   Manrope only, black canvas, accent reserved for interaction/today. */

/* ---------- Intro ---------- */
.lunch-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(32px,5vw,80px)}
.lunch-intro .intro-copy{max-width:31em}
.lunch-facts{display:flex;flex-wrap:wrap;gap:20px 44px;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.lunch-facts div{display:flex;flex-direction:column;gap:6px}
.lunch-facts dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.lunch-facts dd{margin:0;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:36px}
.page-intro .intro-actions .button{margin-top:0}
.lunch-hero{margin:0}
.lunch-hero img{width:100%;height:auto}

/* ---------- Sections ---------- */
.lunch-section{padding:0 var(--pad-inline) clamp(64px,8vw,112px)}
.lunch-heading{align-items:flex-end;padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.lunch-heading .eyebrow{margin-bottom:16px}
.section-lede{max-width:38em;margin-top:18px;font-size:16px;line-height:1.7;color:var(--text-2)}
.price-tag{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.price{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-label{font-size:14px;color:var(--text-3)}

/* ---------- Week: 3 + 2 editorial grid ---------- */
.week{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(16px,2.2vw,28px);margin:0;padding:0;list-style:none}
.day{grid-column:span 2;min-width:0}
.day:nth-child(n+4){grid-column:span 3}
.day-photo{margin:0;aspect-ratio:16/9;overflow:hidden;background:#0c0c0b}
.day-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media (hover:hover){.day:hover .day-photo img{transform:scale(1.03)}}
.day-meta{display:flex;align-items:center;gap:12px;margin-top:16px}
.day h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.today{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--accent);color:#000;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Bentobox ---------- */
.bento-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.bento{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px);border:1px solid var(--line);border-radius:20px}
.bento-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:544/257;margin:0 0 28px;overflow:hidden}
.bento-photo img{width:100%;height:100%;object-fit:contain}
.diet{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.bento h3{margin-top:8px;font-size:clamp(1.375rem,2.1vw,1.75rem);line-height:1.2;letter-spacing:-.02em}
.bento-items{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.bento-items li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.item-name{font-size:16px;font-weight:500;line-height:1.45}
.item-qty{font-size:14px;line-height:1.6;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.item-detail{grid-column:1/-1;margin-top:4px;font-size:14px;line-height:1.55;color:var(--text-2)}
.bento-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:auto;padding-top:28px}
.bento-foot>span:first-child{font-size:14px;color:var(--text-3)}
.price-pending{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px dashed var(--line-strong);border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2)}

/* ---------- Phone ordering ---------- */
.phone-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.5vw,56px);margin:0;padding:0;list-style:none}
.phone-row{display:flex;flex-direction:column;gap:14px;height:100%;padding:22px 0 30px;border-top:1px solid var(--line);transition:border-color .3s var(--ease)}
.phone-place{display:flex;flex-direction:column;gap:6px}
.phone-city{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.phone-name{font-size:15px;line-height:1.5;color:var(--text-2)}
.phone-number{font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:transparent;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.phone-row:hover{border-color:var(--text-2)}
.phone-row:hover .phone-number{color:var(--accent);text-decoration-color:currentColor}
#tilaa{padding-bottom:var(--section-y)}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .lunch-intro{grid-template-columns:1fr;gap:36px}
  .lunch-hero{max-width:640px}
  .phone-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Mobile ---------- */
@media (max-width:700px){
  .lunch-facts{gap:16px 28px;margin-top:24px;padding-top:20px}
  .lunch-facts dd{font-size:16px}
  .intro-actions{margin-top:28px;gap:8px 28px}

  .lunch-section{padding-bottom:56px}
  .lunch-heading{padding-top:48px}
  .lunch-heading .eyebrow{margin-bottom:12px}
  .section-lede{margin-top:14px;font-size:15px;line-height:1.65}
  .price-tag{flex-direction:row;align-items:baseline;gap:12px;text-align:left}
  .price{font-size:28px}

  /* Week becomes a swipe rail; the next card peeks to signal scrolling. */
  .week{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .week::-webkit-scrollbar{display:none}
  .day,.day:nth-child(n+4){grid-column:auto;scroll-snap-align:start}
  .day-meta{margin-top:12px}
  .day h3{font-size:17px}

  .bento-grid{grid-template-columns:1fr;gap:16px}
  .bento{padding:20px;border-radius:16px}
  .bento-photo{margin-bottom:20px}

  .phone-list{grid-template-columns:1fr}
  .phone-row{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
  .phone-list li:last-child .phone-row{border-bottom:1px solid var(--line)}
  .phone-place{gap:4px;min-width:0}
  .phone-city{font-size:11px}
  .phone-name{font-size:14px}
  .phone-number{font-size:18px}
  #tilaa{padding-bottom:72px}
}
@media (max-width:420px){
  .intro-actions .button{width:100%}
}
@media (max-width:360px){
  .phone-row{flex-direction:column;align-items:flex-start;gap:10px}
}

.lunch-week { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lunch-week th, .lunch-week td { padding: 16px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.lunch-week thead th { color: var(--text-3); font-size: 14px; font-weight: 500; }
.lunch-week th:first-child { padding-left: 0; }
@media (max-width: 480px) {
  .lunch-week th, .lunch-week td { padding: 12px 4px; font-size: 14px; overflow-wrap: anywhere; }
}