/* =====================================================================
   nadohled — sdílené "skeleton" načítání (shimmer vlna)
   ---------------------------------------------------------------------
   Používá se všude, kde se obsah teprve načítá z Firestoru. Cílem NENÍ
   jen hezčí čekání: dokud nemáme živá data, nesmí být na stránce
   vykreslená ani klikatelná žádná položka z kódu/cache — jinak uživatel
   na pomalém připojení klikne na restauraci, která už je vypnutá.

   Použití:
     <div class="sk sk-line"></div>          jeden řádek textu
     <div class="sk sk-line sk-w60"></div>   řádek na 60 % šířky
     <div class="sk sk-block"></div>         plocha (obrázek, karta)
     <img class="sk-img" onload="this.classList.remove('sk-img')">
     <div class="sk-host" aria-busy="true">  obal, ať to čtečky přeskočí
   ===================================================================== */

@keyframes ndSkShimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  150% 0; }
}

:root {
  --sk-base: #e7e2da;
  --sk-wave: rgba(255, 255, 255, .78);
  --sk-radius: 8px;
}

/* tmavé prostředí (dispečink, tmavé weby) */
@media (prefers-color-scheme: dark) {
  :root { --sk-base: #2b2622; --sk-wave: rgba(255, 255, 255, .09); }
}
:root[data-theme="dark"], .theme-dark, [data-sk-theme="dark"] {
  --sk-base: #2b2622;
  --sk-wave: rgba(255, 255, 255, .09);
}
:root[data-theme="light"] {
  --sk-base: #e7e2da;
  --sk-wave: rgba(255, 255, 255, .78);
}

.sk {
  position: relative;
  overflow: hidden;
  border-radius: var(--sk-radius);
  background-color: var(--sk-base);
  background-image: linear-gradient(100deg, transparent 18%, var(--sk-wave) 46%, transparent 74%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ndSkShimmer 1.4s ease-in-out infinite;
  /* skeleton nesmí jít kliknout, označit ani přečíst jako obsah */
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.sk * { visibility: hidden; }

/* tvary */
.sk-line   { height: 12px; margin: 6px 0; border-radius: 999px; }
.sk-line.sk-lg  { height: 18px; }
.sk-line.sk-sm  { height: 9px; }
.sk-block  { width: 100%; height: 100%; border-radius: inherit; }
.sk-circle { border-radius: 50%; }
.sk-chip   { height: 26px; width: 92px; border-radius: 999px; }

/* šířky pro nepravidelné odstavce, ať to nevypadá jako tabulka */
.sk-w90 { width: 90%; } .sk-w80 { width: 80%; } .sk-w70 { width: 70%; }
.sk-w60 { width: 60%; } .sk-w50 { width: 50%; } .sk-w40 { width: 40%; }
.sk-w30 { width: 30%; } .sk-w20 { width: 20%; }

/* rozfázování vlny, aby celá mřížka nepulzovala v jednom rytmu */
.sk-d1 { animation-delay: .12s; }
.sk-d2 { animation-delay: .24s; }
.sk-d3 { animation-delay: .36s; }
.sk-d4 { animation-delay: .48s; }
.sk-d5 { animation-delay: .60s; }

/* obal, který se má chovat jako "načítá se" */
.sk-host { pointer-events: none; }
.sk-host * { cursor: default !important; }

/* ---------------------------------------------------------------------
   Obrázek, který se teprve stahuje. Třídu odebereme v onload/onerror,
   takže shimmer běží přesně po dobu skutečného stahování.
   Na rozdíl od .sk tady NEVYPÍNÁME pointer-events — karta pod obrázkem
   musí zůstat klikatelná, jakmile jsou data restaurace ověřená.
   --------------------------------------------------------------------- */
.sk-img {
  background-color: var(--sk-base);
  background-image: linear-gradient(100deg, transparent 18%, var(--sk-wave) 46%, transparent 74%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ndSkShimmer 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   Hotové stavební bloky
   --------------------------------------------------------------------- */

/* karta restaurace (bento 1:1) */
.sk-rest-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.sk-rest-card .sk-rest-img { flex: 1; border-radius: 0; }
.sk-rest-card .sk-rest-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-rest-card .sk-rest-badge {
  position: absolute;
  top: 12px; left: 12px;
  height: 24px; width: 84px;
  border-radius: 999px;
}
.sk-rest-card .sk-rest-rating {
  position: absolute;
  top: 12px; right: 12px;
  height: 26px; width: 52px;
  border-radius: 12px;
}

/* řádkový pohled */
.sk-rest-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  pointer-events: none;
}
.sk-rest-row .sk-rest-thumb { width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; }
.sk-rest-row .sk-rest-lines { flex: 1; min-width: 0; }

/* položka menu / seznamu */
.sk-menu-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  pointer-events: none;
}
.sk-menu-item .sk-menu-thumb { width: 86px; height: 86px; border-radius: 12px; flex-shrink: 0; }
.sk-menu-item .sk-menu-lines { flex: 1; min-width: 0; }

/* hlavička sekce (město, kategorie) */
.sk-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.sk-section-head .sk-section-crest { width: 44px; height: 44px; flex-shrink: 0; }
.sk-section-head .sk-section-lines { flex: 1; max-width: 260px; }

/* nenápadná textová informace pod skeletonem */
.sk-note {
  text-align: center;
  font-size: 12.5px;
  opacity: .55;
  margin-top: 14px;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------
   Přístupnost: kdo si vypnul animace, dostane statickou šedou plochu.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sk, .sk-img {
    animation: none;
    background-image: none;
  }
}