/* =========================================================
   restaurant.css  —  restaurant cards + restaurant rows
   Needs: lb-base.css (tokens)
   Markup:  <a class="resto"> .resto__cover > (.resto__logo | .resto__logo-fallback)
            + .resto__status + .resto__eta ; .resto__body > .resto__name / .resto__meta / .resto__delivery
            <a class="rrow"> list row (e.g. "restaurants with this offer")
   ========================================================= */

/* ---------- Restaurant card ---------- */
.resto {
  width: 230px; min-width: 230px; max-width: 230px; flex: 0 0 230px;
  background: var(--card); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.resto:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.resto__cover {
  position: relative; width: 100%; height: 155px; min-height: 155px; max-height: 155px; overflow: hidden;
  background: linear-gradient(135deg, var(--leaf-100), var(--mango-soft));
  display: grid; place-items: center;
}
.resto__logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.resto__logo.img--failed { display: none; }
.resto__logo-fallback {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 30px; font-weight: 900;
  background: var(--leaf-100); color: var(--leaf);
}
.resto__logo-fallback--hidden { display: none; }
.resto__logo.img--failed + .resto__logo-fallback--hidden { display: grid; }
.resto__initial { font-family: var(--font-head); font-size: 52px; font-weight: 800; color: var(--leaf-700); opacity: .55; }

.resto__eta { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.resto__status { position: absolute; top: 10px; right: 10px; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.95); }
.resto__status--open { color: #16834a; }
.resto__status--closed { color: var(--chili); }

.resto__body { padding: 12px 14px 14px; }
.resto__name {
  width: 100%; margin: 0; min-height: 44px; max-height: 44px;
  font-size: 16px; font-weight: 700; line-height: 22px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.resto__meta { margin-top: 3px; font-size: 13px; color: var(--ink-2); display: flex; gap: 10px; flex-wrap: wrap; }
.resto__delivery { margin-top: 7px; }

.skel--resto { width: 230px; height: 230px; }

/* ---------- Restaurant row (lists / modals) ---------- */
.rlist { display: flex; flex-direction: column; gap: 10px; }
.rrow { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); border: 1.5px solid var(--line); transition: border-color .15s; }
.rrow:hover { border-color: var(--leaf-600); }
.rrow__logo { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; background: var(--leaf-100); flex: none; display: grid; place-items: center; font-weight: 800; color: var(--leaf-700); }
.rrow__logo img { width: 100%; height: 100%; object-fit: cover; }
.rrow__name { font-weight: 700; }
.rrow__meta { font-size: 12px; color: var(--ink-3); }

@media (max-width: 560px) {
  .resto { width: 190px; min-width: 190px; max-width: 190px; flex-basis: 190px; }
  .resto__cover { height: 125px; min-height: 125px; max-height: 125px; }
  .skel--resto { width: 190px; }
}