/* ==========================================================================
   AlBasali — menu media (Phase 5B.2)
   Photographs are an aid. The name and the price stay the loudest things on
   the card, and a missing photograph must never look like a broken one.
   ========================================================================== */

/* ---------------------------------------------------------------- item photo
   One fixed ratio for every thumbnail, so a menu of mixed sources still reads
   as a single list rather than a ransom note. */
.mrow__thumb{width:88px;height:88px;flex:none;border-radius:var(--r-md)}
.mrow__thumb--photo{padding:0;background:var(--c-surface-muted)}
.mrow__thumb--photo::after{display:none}          /* no weave behind a real photo */
.mrow__thumb picture{display:block;width:100%;height:100%}
.mrow__img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-md)}

@media (max-width:359px){
  .mrow__thumb{width:76px;height:76px}
}
@media (min-width:768px){
  .mrow__thumb{width:120px;height:120px}
}

/* An illustrative image says so, quietly but permanently. */
.img-tag{
  position:absolute;inset-block-end:4px;inset-inline-start:4px;z-index:2;
  background:rgba(14,52,73,.82);color:var(--c-cream);
  font-size:10px;line-height:1;padding:3px 6px;border-radius:var(--r-sm);
  letter-spacing:.02em;
}

/* ---------------------------------------------------------------- section banner */
.cat-banner{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  aspect-ratio:16/9;max-height:190px;background:var(--c-navy-deep);
}
.cat-banner__img{width:100%;height:100%;object-fit:cover;display:block}
.cat-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,52,73,.92) 0%,rgba(14,52,73,.45) 46%,rgba(14,52,73,.05) 100%);
}
.cat-banner__label{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;
  padding:var(--s-4) var(--s-5);
  display:flex;align-items:baseline;gap:var(--s-2);
}
.cat-banner__label h2{color:var(--c-cream);font-size:24px;margin:0}
.cat-banner__label span{color:var(--c-gold);font-size:12px;letter-spacing:.08em}

@media (min-width:768px){ .cat-banner{max-height:240px} }

/* ---------------------------------------------------------------- category nav
   Sticky, horizontally scrollable, RTL-native. A phone user should reach the
   shrimp without scrolling past nine fish. */
.cat-nav{
  position:sticky;inset-block-start:0;z-index:20;
  display:flex;gap:var(--s-2);overflow-x:auto;
  padding-block:var(--s-2);margin-inline:calc(var(--s-5) * -1);
  padding-inline:var(--s-5);
  background:rgba(247,233,207,.94);backdrop-filter:blur(8px);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{
  flex:none;text-decoration:none;white-space:nowrap;
  font-size:15px;font-weight:600;color:var(--c-navy);
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--c-border);background:var(--c-surface-raised);
  min-height:var(--touch);display:flex;align-items:center;
}
.cat-nav a:hover,.cat-nav a:focus-visible{border-color:var(--c-border-gold)}

/* Anchors must not land under the sticky bar. */
.screen section[id]{scroll-margin-block-start:72px}

/* ---------------------------------------------------------------- home sections */
.showcase{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  aspect-ratio:16/10;background:var(--c-navy-deep);
}
.showcase img{width:100%;height:100%;object-fit:cover;display:block}
.showcase::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,52,73,.9) 0%,rgba(14,52,73,.35) 55%,transparent 100%);
}
.showcase__cap{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;padding:var(--s-4) var(--s-5);
}
.showcase__cap strong{display:block;color:var(--c-cream);font-family:var(--font-display);font-size:20px}
.showcase__cap span{color:var(--c-on-navy-2);font-size:14px}

/* ---------------------------------------------------------------- admin media */
.media-cell{display:flex;gap:var(--s-3);align-items:flex-start}
.media-thumb{
  width:72px;height:72px;flex:none;border-radius:var(--r-md);overflow:hidden;
  background:var(--c-surface-muted);border:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;
}
.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-meta{font-size:13px;color:var(--c-text-2);line-height:1.5}
.badge-status{
  display:inline-block;font-size:11px;padding:2px 7px;border-radius:var(--r-pill);
  border:1px solid var(--c-border);background:var(--c-surface-muted);color:var(--c-text-2);
}
.badge-status[data-s="official"]{background:var(--c-success-bg);color:var(--c-success);border-color:var(--c-success)}
.badge-status[data-s="illustrative"]{background:var(--c-warning-bg);color:var(--c-warning);border-color:var(--c-warning)}
.badge-status[data-s="admin_uploaded"]{background:var(--c-surface-muted);color:var(--c-navy);border-color:var(--c-border-gold)}

/* ---------------------------------------------------------------- staff identity
   Name, role, branch — stated once, plainly, where a supervisor will see it
   before they touch anything. */
.staff-id{display:flex;flex-direction:column;line-height:1.35}
.staff-id strong{font-size:15px;color:var(--c-navy)}
.staff-id span{font-size:13px;color:var(--c-text-2)}
.staff-id .tiny{font-size:12px;color:var(--c-text-3)}
.staff-id--bar{align-items:flex-end;text-align:end}
.staff-id--bar strong{color:var(--c-cream)}
.staff-id--bar span{color:var(--c-on-navy-2)}
.staff-id--bar .tiny{color:var(--c-gold)}
.admin .staff-id{
  margin-block-start:var(--s-3);padding-inline-start:var(--s-3);
  border-inline-start:3px solid var(--c-gold);
}

/* ---------------------------------------------------------------- instagram
   One outbound line under the dishes panel. It sits between two large images,
   so it stays a rule-with-text rather than another card competing with them. */
.ig-cta{
  display:flex;align-items:center;gap:var(--s-2);
  min-height:var(--touch);padding:10px var(--s-4);
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  background:var(--c-surface-raised);color:var(--c-navy);
  text-decoration:none;font-size:14px;font-weight:600;
}
.ig-cta svg{width:20px;height:20px;flex:none;color:var(--c-gold)}
.ig-cta__at{
  margin-inline-start:auto;font-weight:400;font-size:13px;
  color:var(--c-text-3);direction:ltr;unicode-bidi:isolate;
}
.ig-cta:hover,.ig-cta:focus-visible{border-color:var(--c-border-gold)}

@media (max-width:359px){
  /* The handle is the first thing to go when the line gets tight — the
     invitation is the message, the handle is a detail. */
  .ig-cta__at{display:none}
}

/* ---------------------------------------------------------------- floor rows */
.rowmeta{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-block-start:var(--s-2)}
.badge-onway{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--c-success-bg);color:var(--c-success);
  border:1px solid var(--c-success);border-radius:var(--r-pill);
  padding:3px 10px;font-size:13px;font-weight:700;
}
.badge-onway .tiny{color:var(--c-success);opacity:.75;font-weight:400}

/* Secondary by weight, never hidden: a customer who said they are coming may
   still need a message, and one who said nothing certainly might. */
.wa{
  display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding-inline:10px;border-radius:var(--r-pill);
  border:1px solid var(--c-border);background:var(--c-surface-raised);
  color:#128C7E;font-size:13px;font-weight:600;text-decoration:none;
}
.wa:hover,.wa:focus-visible{border-color:#128C7E}
.wa--quiet{color:var(--c-text-3);border-color:var(--c-border)}
.wa--quiet:hover{color:#128C7E}

/* ---------------------------------------------------------------- finished */
.qrow--done{opacity:.9}
.badge-rated{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--c-success-bg);color:var(--c-success);
  border:1px solid var(--c-success);border-radius:var(--r-pill);
  padding:3px 10px;font-size:13px;font-weight:700;
}
.btn--undo{color:var(--c-warning);border:1px solid var(--c-warning)}