/*
 * Klasy specyficzne dla strony roslin i skladnikow, ktorych nie ma w
 * styl.css ani substancja.css (uzyty tu tez dla .karta-pole, .karta-lista,
 * .oswiadczenie, .chip-cel, .head-substancja, .karta-slot, .src-pelna).
 */

/* Kafel jest teraz <div>, nie <a> (zlecenie 23.09: liczba produktow ma byc
   wlasnym linkiem, a HTML nie pozwala zagniezdzic <a> w <a>). position:relative
   niesie ::after stretched-linku ponizej, wiec caly kafel zostaje klikalny do
   karty rosliny dokladnie tak jak dotad. */
.kafel-roslina{position:relative;text-decoration:none}
.kafel-roslina-link{color:inherit;text-decoration:none;display:block}
.kafel-roslina-link::after{content:"";position:absolute;inset:0}
.kafel-roslina-link:focus-visible{outline:2px solid var(--lazur);outline-offset:2px}

/* Miniatura na kaflu (polecenie Bartosza 24.09). Ten sam rozmiar i to samo
   zrodlo (tlo, nie <img>) co miniatura kafla celu w styl.css, tylko wlasna
   regula, bo tamta jest scoped do .cele-siatka-kafli. Kolor tla pod obrazem
   jest widoczny, dopoki plik sie nie wczyta: bez niego kafel migal biala
   dziura przy kazdym przewinieciu listy szescdziesieciu pozycji. */
.kafel-roslina .kafel-cel-glowa{display:flex;align-items:flex-start;gap:11px;min-width:0}
.kafel-roslina .kafel-roslina-tekst{min-width:0}
/* Obwodka jest tu konieczna, nie ozdobna: czesc zdjec to biały proszek albo
   biala kapsulka na bialym tle (kreatyna, melatonina, inozytol, L-teanina),
   wiec bez niej kafel wyglada, jakby obraz sie nie wczytal. inset box-shadow
   zamiast border, zeby nie zmieniac wyliczonego pola 56 px. */
.kafel-roslina .kafel-cel-obraz{width:56px;height:56px;flex:0 0 56px;border-radius:var(--r);
  background-color:var(--papier-2);background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px var(--kreska)}

/* Na telefonie regula ogolna .kafel-cel (styl.css) rezerwuje pierwsza kolumne
   40 px na obraz bedacy BEZPOSREDNIM dzieckiem kafla. Tutaj miniatura siedzi
   w linii z nazwa wewnatrz linku, wiec ta kolumna zostalaby pusta, a nazwa
   dostalaby o 50 px mniej. Kafel rosliny wraca wiec do jednej kolumny, a sama
   miniatura schodzi do 40 px, czyli do rozmiaru, ktory tamta kolumna
   zakladala. Dwie klasy (0,2,0) biją regule ogolna (0,1,0) niezaleznie od
   kolejnosci plikow. */
@media (max-width:560px){
  .kafel-cel.kafel-roslina{grid-template-columns:1fr;
    grid-template-areas:"nazwa" "opis" "liczba"}
  .kafel-roslina .kafel-roslina-link{grid-area:nazwa}
  .kafel-roslina .kafel-cel-obraz{width:40px;height:40px;flex:0 0 40px}
  .kafel-roslina .kafel-cel-glowa{gap:9px}
}

/* Zbiorcza atrybucja zdjec pod siatka: warunek licencji CC BY i CC BY-SA,
   ktorego nie da sie spelnic na kaflu szerokim na 240 px (patrz notaZdjec w
   roslinne.html). Domyslnie zwiniete, bo to nota prawna, nie tresc strony. */
.rosl-zdjecia-zrodla{margin-top:20px;font-size:.8rem;color:var(--cichy)}
.rosl-zdjecia-zrodla summary{cursor:pointer;font-weight:600;color:var(--atrament-2)}
.rosl-zdjecia-zrodla .nota{margin:8px 0 6px}
.rosl-zdjecia-lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 18px;line-height:1.5}
.rosl-zdjecia-lista a{color:var(--lazur)}

/* Nazwa lacinska przeniesiona pod nazwe polska (zlecenie 23.09: dotad w
   naglowku kafla, gdzie lamala go na dwie linie), wlasny wiersz mniejszym
   stopniem. Archivo nie ma odmiany pochylej, wiec przegladarka pochylalaby
   litery mechanicznie, co przy polskich ogonkach psuje ksztalty znakow (ten
   sam problem co h1 i, h2 i, h3 i w styl.css) - wyroznienie zostaje kolorem. */
.kafel-roslina-lacinska{display:block;margin-top:2px;font-size:.78rem;color:var(--cichy);font-weight:400}
.kafel-roslina-lacinska i{font-weight:600;color:var(--lazur)}

/* Wolumen wyszukiwan (Google Ads) i liczba produktow (nasz katalog) to
   odpowiedzi na dwa rozne pytania: dotad stane jednym zdaniem z kropka jako
   rownorzedne, teraz kazde we wlasnym wierszu (zlecenie 23.09, pkt 4). */
.kafel-roslina .kafel-cel-opis{display:flex;flex-direction:column;gap:3px}
.rosl-wolumen{color:var(--cichy)}
.rosl-produkty{color:var(--atrament-2)}
/* Link produktow stoi NAD stretched linkiem kafla (z-index), wiec zostaje
   klikalny osobno mimo ze caly kafel tez jest klikalny (patrz komentarz przy
   .kafel-roslina-link::after wyzej). */
.rosl-produkty-link{position:relative;z-index:1;color:var(--lazur);font-weight:600;text-decoration:none}
.rosl-produkty-link:hover{text-decoration:underline}

/* Piec stopni osi dowodu (D27) plus stan "jeszcze nie zebralismy zrodel":
   rzadkosc dowodu, nigdy "dobry/zly produkt" - stad wlasna paleta zamiast
   .tag.ok/.tag.blok, ktore w reszcie serwisu mowia o werdykcie produktu. */
.tag-dowod{display:inline-block;max-width:100%;box-sizing:border-box;padding:2px 8px;
  border-radius:var(--r);font-size:.68rem;font-weight:600;line-height:1.35}
.tag-dowod.n5,.tag-dowod.n4{background:var(--zielen-tlo);color:var(--zielen)}
.tag-dowod.n3{background:var(--lazur-tlo);color:var(--lazur)}
.tag-dowod.n2{background:var(--uwaga-tlo);color:var(--uwaga)}
.tag-dowod.n1,.tag-dowod.n0{background:var(--papier-2);color:var(--cichy)}

.karta-pole .tag-dowod{margin-bottom:8px}

/* Plakietka skrocona na kaflu listy (zlecenie 23.09, pkt 2): dzis stalo tu
   zdanie w foncie 0,6rem, nieczytelne. Wiekszy i pogrubiony wariant tej samej
   klasy .tag-dowod, wylacznie na liscie - karta pojedynczej rosliny i sekcja
   dowodow uzywaja .tag-dowod bez tego modyfikatora, z pelnym zdaniem. */
.tag-dowod-kafel{position:relative;z-index:1;font-size:.76rem;padding:3px 9px;cursor:help}

/* Pasek narzedzi nad lista: szukajka i sortowanie obok siebie na desktopie,
   jedno pod drugim na telefonie (kolejnosc DOM juz to daje, patrz flex-wrap). */
.rosl-narzedzia{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;margin-bottom:14px}
.rosl-narzedzia .szukajka{flex:1 1 260px;margin-bottom:0}
.tbar-sort{display:flex;flex-direction:column;gap:6px}

/* Pasek filtrow sily dowodu (zlecenie 23.09, pkt 1): kolor odpowiada
   plakietce tego samego poziomu na kaflu, zeby zwiazek miedzy klikniecem a
   efektem byl czytelny bez czytania etykiety. Wlasna klasa (nie .filtr-chip
   ze styl.css), bo tamten czerwony kolor przy aria-pressed jest zarezerwowany
   dla WYKLUCZANIA skladnikow (D22) - to tu zwykly, kumulujacy sie wybor. */
.rosl-filtry{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rosl-filtr{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border-radius:var(--r);font:inherit;font-size:.81rem;font-weight:600;cursor:pointer;
  border:1px solid var(--kreska);background:var(--papier);color:var(--atrament-2)}
.rosl-filtr .num{font-family:var(--dane);font-weight:600;opacity:.75}
.rosl-filtr:hover{border-color:var(--atrament)}
.rosl-filtr.n5[aria-pressed="true"],.rosl-filtr.n4[aria-pressed="true"]{
  background:var(--zielen-tlo);border-color:var(--zielen);color:var(--zielen)}
.rosl-filtr.n3[aria-pressed="true"]{background:var(--lazur-tlo);border-color:var(--lazur);color:var(--lazur)}
.rosl-filtr.n2[aria-pressed="true"]{background:var(--uwaga-tlo);border-color:var(--uwaga);color:var(--uwaga)}
.rosl-filtr.n1[aria-pressed="true"]{background:var(--atrament);border-color:var(--atrament);color:var(--karta)}
.rosl-filtr-wyczysc{font-size:.79rem;color:var(--lazur);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:6px 4px}

/* Legenda pelnych brzmien, zwinieta domyslnie: raz dla calej strony zamiast
   zdania w kazdym z szescdziesieciu kafli (zlecenie 23.09, pkt 2). */
.rosl-legenda{margin-bottom:22px;font-size:.85rem}
.rosl-legenda summary{cursor:pointer;color:var(--lazur);font-weight:600;padding:4px 0}
.rosl-legenda-wiersz{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-top:1px solid var(--kreska);color:var(--atrament-2);line-height:1.45}
.rosl-legenda-wiersz .tag-dowod{flex:0 0 auto}

.rosl-pusto{padding:28px 20px;text-align:center;color:var(--cichy);background:var(--karta);
  border:1px solid var(--kreska);border-radius:var(--r)}

@media (max-width:560px){
  .rosl-narzedzia{flex-direction:column;align-items:stretch}
  /* flex-basis:260px w .rosl-narzedzia .szukajka liczy sie na osi GLOWNEJ:
     w wierszu (desktop) to szerokosc, ale po zmianie na column wyzej staje
     sie wysokoscia, wiec bez tego resetu pole szukajki rozciagalo sie na
     260px pustej wysokosci (znalezione Playwrightem, 23.09). */
  .rosl-narzedzia .szukajka{flex:none}
}


/* Zdjecie gatunku na karcie rosliny. Kwadrat, bo takie sa pliki z Commons po
   przycieciu, i waski, bo to ilustracja przy tekscie, nie bohater strony. */
.rosl-foto{margin:0 0 24px;max-width:320px}
.rosl-foto img{display:block;width:100%;height:auto;border:1px solid var(--kreska);
  border-radius:var(--r);background:var(--papier-2)}
.rosl-foto figcaption{margin-top:7px;font-size:.69rem;line-height:1.45;color:var(--cichy)}
.rosl-foto figcaption a{color:var(--cichy);text-decoration:underline;text-underline-offset:2px}
.rosl-foto figcaption a:hover{color:var(--lazur)}