/* ---------- kroje pisma: wlasne, nie z Google ----------
   Wczesniej szly z fonts.googleapis.com + fonts.gstatic.com. To dwie dodatkowe domeny,
   a kazda kosztuje na telefonie DNS + TCP + TLS (~3 obiegi, rzedu 200 ms kazda) — i to
   ZANIM w ogole ruszy pobieranie samego pliku, bo adres fontu jest dopiero w ich CSS.
   Teraz pliki leza obok strony i sa zapowiedziane przez <link rel=preload> w index.html,
   wiec zaczynaja sie sciagac razem z HTML-em.

   Jeden plik na rodzine zamiast czterech: to fonty zmienne, wiec wszystkie potrzebne
   grubosci (400/500/700) siedza w tym samym pliku — stad font-weight jako zakres.
   Podzial latin / latin-ext tez znika, a to on odpowiadal za drgniecie naglowka:
   podzbiory dochodzily w roznych momentach i tekst przeskakiwal miedzy krojami.

   ⚠️ Pliki sa okrojone do znakow, ktore moga wystapic: cale ASCII, Latin-1 i Latin
   Extended-A (czyli caly polski alfabet plus nazwy zapozyczone typu creme czy jalapeño)
   oraz typografia (– — … „ " • → €). Gdyby kiedys w tytule przepisu pojawil sie znak
   spoza tego zakresu, wyswietli sie krojem zapasowym — nie zniknie.
   Zestaw znakow i sposob pobrania: patrz komentarz w rozsmakowani-publikuj.sh. */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:100 900;   /* font zmienny — jeden plik obsluguje 500 i 700 */
  font-display:swap;
  src:url(fonty/fraunces.woff2) format("woff2");
}
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonty/outfit.woff2) format("woff2");
}

/* Rozsmakowani — kolory wzięte wprost z logo:
   śliwka z liter, krem z talerza, drewno z trzonka widelca, cytryna i natka z obwódki. */
:root{
  --sliwka-ciemna:#3A1529;
  --sliwka:#4E1E38;
  --sliwka-jasna:#7A3357;
  --krem:#FBF3E7;
  --krem-cien:#E8DAC6;
  --drewno:#A9714A;
  --cytryna:#F2B441;
  --natka:#7FA267;

  --r-duzy:18px;
  --r-maly:10px;
  --cien:0 6px 24px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sliwka-ciemna);
  color:var(--krem);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
}

/* ---------- nagłówek ---------- */
.naglowek{
  padding:28px 20px 22px;
  text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,var(--sliwka) 0%,var(--sliwka-ciemna) 70%);
}
.naglowek__logo{
  width:min(260px,62vw);
  height:auto;
  display:block;
  margin:0 auto 14px;
}
.naglowek__tytul{
  font-family:"Fraunces",Georgia,serif;
  font-weight:700;
  font-size:clamp(1.5rem,6vw,2.4rem);
  line-height:1.15;
  margin:0 0 6px;
  color:var(--krem);
}
.naglowek__lead{
  margin:0 auto 22px;
  max-width:34ch;
  color:var(--krem-cien);
  font-size:1rem;
}

/* ---------- wyszukiwarka: jedyny głośny element strony ---------- */
.szukaj{max-width:560px;margin:0 auto}
.szukaj__label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.szukaj__box{
  display:flex;align-items:center;gap:10px;
  background:var(--krem);
  border-radius:999px;
  padding:6px 8px 6px 18px;
  box-shadow:var(--cien);
}
.szukaj__ikona{
  width:22px;height:22px;flex:0 0 auto;
  fill:none;stroke:var(--sliwka);stroke-width:2.2;stroke-linecap:round;
}
.szukaj__pole{
  flex:1 1 auto;min-width:0;
  border:0;outline:0;background:transparent;
  font:500 1.05rem/1.4 "Outfit",sans-serif;
  color:var(--sliwka-ciemna);
  padding:12px 0;
}
.szukaj__pole::placeholder{color:#9C8875}
.szukaj__pole::-webkit-search-cancel-button{display:none}
.szukaj__czysc{
  flex:0 0 auto;border:0;cursor:pointer;
  width:38px;height:38px;border-radius:50%;
  background:var(--krem-cien);color:var(--sliwka);
  font-size:1rem;line-height:1;
}
.szukaj__licznik{
  margin:12px 0 0;
  font-size:.95rem;
  letter-spacing:.02em;
  color:var(--cytryna);
  font-weight:500;
}

/* ---------- siatka kafelków: pionowe 9:16, bo takie są rolki ---------- */
.siatka{
  list-style:none;
  margin:0 auto;
  padding:18px 14px 40px;
  max-width:1180px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 12px;
}
@media(min-width:640px){.siatka{grid-template-columns:repeat(3,1fr);gap:22px 18px;padding:24px 20px 56px}}
@media(min-width:980px){.siatka{grid-template-columns:repeat(4,1fr)}}

/* Zanim dojdzie dane.json, siatka jest pusta i ma zero wysokosci — stopka stoi wtedy
   tuz pod wyszukiwarka, a w chwili wstawienia kafelkow zeskakuje o pol ekranu.
   To bylo 90% calego przeskoku ukladu na tej stronie. Rezerwujemy jej miejsce z gory.
   Klase zdejmuje app.js po pierwszym rysowaniu — inaczej przy pustym wyniku szukania
   komunikat „nic takiego tu nie ma" wyladowalby ekran nizej. */
.siatka--start{min-height:100vh}

/* Wartownik konca listy: dotyka go pole widzenia -> app.js dokłada kolejna porcje
   kafelkow. Ma zajmowac caly wiersz i nic nie zaslaniac. */
.wartownik{grid-column:1/-1;height:1px;margin:0;padding:0;list-style:none}

.kafelek{display:flex;flex-direction:column;min-width:0}
.kafelek__media{
  position:relative;
  aspect-ratio:3/4;   /* tyle samo co miniatury z mini/ (320x427) — kadr sie zgadza */
  border-radius:var(--r-duzy);
  overflow:hidden;
  background:var(--sliwka);
  box-shadow:var(--cien);
}
.kafelek__foto,.kafelek__wideo{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.kafelek__play{
  position:absolute;inset:0;
  display:grid;place-items:center;
  border:0;cursor:pointer;
  background:rgba(58,21,41,.18);
  color:var(--krem);
}
.kafelek__play-tekst{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.kafelek__play-ikona{
  width:54px;height:54px;border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  background:var(--krem);
  display:grid;place-items:center;
  transition:transform .18s ease;
}
.kafelek__play-ikona::after{
  content:"";
  border-left:15px solid var(--sliwka);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  margin-left:4px;
}
.kafelek__play:hover .kafelek__play-ikona,
.kafelek__play:focus-visible .kafelek__play-ikona{transform:scale(1.08)}

.kafelek__tytul{
  font-family:"Fraunces",Georgia,serif;
  font-weight:500;
  font-size:1rem;
  line-height:1.25;
  margin:12px 2px 8px;
  color:var(--krem);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.kafelek__link{
  margin:auto 2px 0;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--cytryna);
  text-decoration:none;
  font-weight:700;font-size:.92rem;
  border-bottom:2px solid transparent;
  align-self:flex-start;
  padding-bottom:2px;
}
.kafelek__link::after{content:"→";transition:transform .16s ease}
.kafelek__link:hover,.kafelek__link:focus-visible{border-bottom-color:var(--cytryna)}
.kafelek__link:hover::after{transform:translateX(3px)}

/* ---------- stan pusty ---------- */
.pusto{
  text-align:center;padding:10px 24px 60px;color:var(--krem-cien);
  font-size:1.15rem;line-height:1.6;
}
.pusto span{display:block;margin-top:8px;font-size:.98rem;color:#B9A38F}
.pusto b{color:var(--cytryna);font-weight:700}

/* ---------- stopka ---------- */
.stopka{
  padding:22px 20px 34px;text-align:center;
  border-top:1px solid rgba(251,243,231,.12);
  color:#B9A38F;font-size:.9rem;
}
.stopka a{color:var(--drewno);text-decoration:underline;text-underline-offset:3px}

/* ---------- dostępność ---------- */
:focus-visible{outline:3px solid var(--cytryna);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ---------- podgląd filmu na pełnym ekranie ----------
   Film jest 9:16, kafelek 3:4 — w kafelku film byłby zasłonięty pasami.
   Na telefonie pełny ekran to i tak zachowanie znane z Instagrama. */
.podglad{
  position:fixed;inset:0;z-index:50;
  display:none;
  background:rgba(30,10,22,.94);
  padding:16px;
}
/* ⚠️ minmax(0,1fr) — bez tego wiersz z filmem nie potrafi się skurczyć i wypycha
   stopkę poza ekran. Wcześniej rezerwowałem sztywne 150 px na stopkę; przy tytule
   na trzy linijki to za mało i przycisk „Zobacz przepis" był ucięty u dołu.
   Teraz to siatka pilnuje proporcji: stopka bierze, ile potrzebuje, film resztę. */
.podglad[open]{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
  place-items:center;
  /* ⚠️ WBUDOWANA PRZEGLĄDARKA INSTAGRAMA — to stamtąd idzie CAŁY ruch z linku w bio.
     Ma własny dolny pasek, który NAKŁADA SIĘ na treść, a `position:fixed; inset:0`
     mierzy cały ekran razem z obszarem pod nim. Efekt: przycisk „Zobacz przepis"
     chowa się pod paskiem i wygląda, jakby go nie było.
     Stąd hojny dolny margines — 84 px to wysokość paska w aplikacjach Meta.
     `env(safe-area-inset-bottom)` sam z siebie NIE wystarcza, bo dotyczy wcięcia
     ekranu, a nie paska narzędzi przeglądarki. */
  padding:12px 12px max(84px,calc(env(safe-area-inset-bottom) + 68px));
  /* Ostatnia deska ratunku: gdyby mimo wszystko zabrakło miejsca, da się doscrollować
     do przycisku, zamiast zostać z niedostępnym elementem. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.podglad__wideo{
  max-width:100%;
  /* ⚠️ Twardy limit w jednostkach ekranu, NIE w procentach wiersza siatki.
     Procent zależy od tego, jak przeglądarka policzy wysokość — a wbudowana
     przeglądarka Instagrama liczy ją źle. 58vh działa niezależnie od tego.
     Filmy mają RÓŻNE proporcje (720x1280 i 1080x1920 to 9:16, ale 900x1200 to 3:4),
     więc te szersze same wypełniały kadr — limit wysokości ujednolica wygląd. */
  max-height:58vh;
  width:auto;height:auto;
  object-fit:contain;
  border-radius:var(--r-duzy);
  background:#000;
  box-shadow:var(--cien);
}
.podglad__stopka{text-align:center;max-width:520px;padding-bottom:8px;flex:0 0 auto}
.podglad__tytul{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.02rem;
  line-height:1.3;
  margin:0 0 12px;color:var(--krem);
  /* Najwyżej dwie linijki — długie nazwy przepisów potrafią mieć trzy i wtedy
     wypychały przycisk poza ekran telefonu. Pełny tytuł jest i tak na kafelku. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.podglad__przepis{
  display:inline-block;
  background:var(--cytryna);color:var(--sliwka-ciemna);
  font-weight:700;font-size:1rem;
  padding:13px 26px;border-radius:999px;
  text-decoration:none;
}
.podglad__zamknij{
  position:absolute;top:10px;right:10px;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(251,243,231,.16);color:var(--krem);font-size:1.3rem;line-height:1;
}


/* Pokazuje się TYLKO wtedy, gdy przeglądarka odmówiła odtwarzania z dźwiękiem.
   Wtedy rolka i tak leci — brakuje jedynie dźwięku, a to jedno stuknięcie stąd. */
.podglad__dzwiek{
  border:0;cursor:pointer;
  background:var(--krem);color:var(--sliwka-ciemna);
  font:700 .92rem "Outfit",sans-serif;
  padding:10px 18px;border-radius:999px;
  box-shadow:var(--cien);
}
.podglad__dzwiek[hidden]{display:none}