/* Návody a dokumentace na stránce grilu.

   Roman 16. 9. 2026 s odkazem na weber.com/CZ/cs/navody-k-obsluze:
   „udělej to tak, že je ke každému grilu někam dáš, aby si je člověk
   mohl prohlédnout… hlavně to nemůže být čudlík hozený přes grafiku,
   ale zakomponovat do grafiky tak, aby to působilo profesionálně
   a symetricky."

   Proto to není tlačítko navíc, ale další sekce v řadě za Parametry:
   stejné H2, stejná šířka, stejný rytmus jako Popis a Parametry.
   Dlaždice stojí ve dvou stejně širokých sloupcích a mají shodnou výšku,
   takže sekce drží symetrii i s lichým počtem návodů.

   Vlastní soubor, protože je to vlastní sekce — produkt-seo.css zůstává
   beze změny. */

.produkt-seo-navody { margin-top: 42px; }
.produkt-seo-navody h2 { margin: 0 0 4px; font-size: 22px; }

.navody-uvod { margin: 0 0 18px; color: #666; font-size: 13.5px; }

.navody-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.navod {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid #e3e3e3;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.navod:hover {
  border-color: var(--red, #c8102e);
  box-shadow: 0 6px 18px rgb(0 0 0 / .07);
  transform: translateY(-1px);
}

.navod:focus-visible { outline: 2px solid var(--red, #c8102e); outline-offset: 2px; }

/* Znak dokumentu s ohnutým rohem — kreslený, ne obrázek: na každé
   velikosti je ostrý a nic se kvůli němu nestahuje. */
.navod-znak {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  border: 1.5px solid var(--red, #c8102e);
  border-top-right-radius: 10px;
  color: var(--red, #c8102e);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.navod b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; }

/* Velikost souboru patří dopředu: u příručky, která má 47 MB, je slušnost
   říct to dřív, než ji někdo začne stahovat na telefonu. */
.navod span { display: block; margin-top: 3px; color: #777; font-size: 12.5px; }

.navod-sipka { color: var(--red, #c8102e); font-size: 13px; font-weight: 800; white-space: nowrap; }

.navody-zdroj { margin: 14px 0 0; color: #888; font-size: 12px; }

@media (max-width: 760px) {
  .navody-mrizka { grid-template-columns: 1fr; }
  /* Na úzké obrazovce se šipka nevejde vedle názvu; odkaz zůstává celý
     klikací, takže se bez ní obejde. */
  .navod { grid-template-columns: 40px minmax(0, 1fr); }
  .navod .navod-sipka { display: none; }
}