/*
 * Ekran wejscia "wiem, czego szukam": dwie grupy substancji, kazda w siatce
 * kafli. Uklad i nazewnictwo kafla przeniesione z siatki substancji na
 * stronie glownej (glowna.css, klasy .hp-sub*): kompaktowy, poziomy kafel
 * bez wielkiego obrazu, bo przy 94 substancjach i osiemnastu zdjeciach
 * duzy obraz dla trzech czwartych pozycji nie niesie zadnej informacji
 * (ten sam pomiar co w glowna.html, komentarz przy hpKafelSubstancji).
 * Klasy tutaj maja wlasny prefiks (wst-), bo ten plik nie jest importowany
 * na stronie glownej i odwrotnie - nie ma powodu dzielic arkusza.
 */

.wst-grupa{margin-top:38px}
.wst-grupa:first-child{margin-top:8px}
.wst-grupa-glowa{margin-bottom:6px}
.wst-grupa-glowa h2{font-size:1.14rem}
.wst-grupa-lead{font-size:.86rem;color:var(--cichy);margin:4px 0 16px;max-width:64ch}

.wst-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px}
.wst-siatka-ukryta{margin-top:8px}

.wst-kafel{padding:0;overflow:hidden;display:flex;flex-direction:row;align-items:center;gap:11px;
  text-align:left;font:inherit;color:inherit;
  background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);text-decoration:none;
  transition:border-color .16s,transform .16s}
.wst-kafel:hover{border-color:var(--atrament);transform:translateY(-2px)}
.wst-kafel:focus-visible{outline:2px solid var(--lazur);outline-offset:2px}

.wst-obraz{display:block;width:44px;height:44px;flex-shrink:0;margin:8px 0 8px 8px;border-radius:6px;
  object-fit:cover;object-position:center;background-color:var(--papier-2)}
/* Kafel bez zdjecia (trzy z czterech substancji, 17.09): kropka w kolorze
   kategorii, zeby siatka miala rytm, a nie wyglad brakujacej grafiki. Ta sama
   szostka tel co .hp-sub-bg-- w glowna.css, tu z wlasnym prefiksem. */
.wst-bg{background:linear-gradient(135deg,var(--papier-2),var(--atrament-2) 190%)}
.wst-bg--witamina{background:linear-gradient(135deg,var(--uwaga-tlo),var(--uwaga) 165%)}
.wst-bg--mineral{background:linear-gradient(135deg,var(--lazur-tlo),var(--lazur) 165%)}
.wst-bg--aminokwas{background:linear-gradient(135deg,var(--zielen-tlo),var(--zielen) 165%)}
.wst-bg--roslinny{background:linear-gradient(135deg,var(--zielen-tlo),var(--lazur) 175%)}
.wst-bg--kwas-tluszczowy{background:linear-gradient(135deg,var(--stop-tlo),var(--stop) 165%)}
.wst-bg--inne{background:linear-gradient(135deg,var(--papier-2),var(--atrament-2) 190%)}

.wst-tresc{padding:9px 12px 9px 0;display:flex;flex-direction:column;flex:1;min-width:0}
.wst-tresc b{overflow-wrap:anywhere;font-size:.88rem;color:var(--atrament)}
.wst-tresc span{font-size:.74rem;color:var(--cichy);margin-top:3px}

.wst-wiecej{display:block;margin:10px 0 0;padding:9px 16px;font:inherit;font-size:.8rem;font-weight:600;
  color:var(--lazur);background:transparent;border:1px solid var(--kreska);border-radius:var(--r);cursor:pointer;
  transition:border-color .16s,background .16s}
.wst-wiecej:hover{border-color:var(--lazur);background:var(--lazur-tlo)}

@media (max-width:560px){.wst-siatka{grid-template-columns:1fr;gap:6px}}