/* FoodHeaven - vzhlad prevzaty 1:1 z navrhu C (_zdroj/protoR.src.html).
   Menit tento subor znamena menit vzhlad webu - rob to len po dohode.
   Vypusteny bol len "shell prototypu" (lista s tabmi na prezeranie navrhu). */

/* Fonty su lokalne - definicie su v public/css/fonty.css (generuje scripts/fonty.js). */

:root{
  --cream:#FDFAF4;
  --paper:#FFFFFF;
  --pink:#F7EBF0;
  --pink-deep:#F0DAE4;
  --ink:#241E1B;
  --muted:#6E635C;
  --line:#E8DED3;
  --accent:#B4005E;
  --accent-hi:#F00090;
  --magenta-soft:#C63C8B;
  --magenta-tint:#F9E7F1;
  --logo-y:#FFC010;
  --logo-b:#0090D0;
  /* Chybová hláška vo formulári. Zámerne nie --accent: magenta je na webe
     farba nadpisov a tlačidiel, takže by chyba splynula so zvyškom stránky
     namiesto toho, aby si ju človek všimol. */
  --cervena:#C0261B;
  /* --shell bola plocha OKOLO mockupu v prototype; na webe je pozadie --cream */
  --shell:#EFE8DE;
  --shell-line:#DFD5C7;

  /* dva fonty: Fraunces na nadpisy, Inter na vsetko ostatne */
  --f-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --f-ui:"Inter",-apple-system,Segoe UI,sans-serif;
  --f-body:"Inter",-apple-system,Segoe UI,sans-serif;

  /* Najvacsia sirka celej stranky. Nad nou uz hero fotka len chudne na vysku. */
  --max-strana:1600px;
}

*{box-sizing:border-box;}
[hidden]{display:none!important;}
/* Pozadie musi mat aj html: telo stranky je na sirokom monitore uzsie nez
   okno a plocha po bokoch berie farbu prave odtialto. */
html{background:var(--cream);}
body{
  margin:0 auto;background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* Pasy cez celu sirku (hero, blok O mne, paticka) sa na sirokom monitore
     rozlievali donekonecna – hero fotka mala pri 2560 px pomer 4:1 a nebolo
     na nej co rozoznat. Cela stranka ma preto strop; do 1600 px sa nemeni
     nic, nad nim ostava po bokoch krémova plocha. */
  max-width:var(--max-strana);
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:3px solid var(--logo-b);outline-offset:2px;}

/* ============ STRANKA ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 34px;}
.narrow{max-width:900px;margin:0 auto;}

/* --- hlavicka: logo na stred, menu pod nim --- */
/* V prototype sa hlavicka lepila pod listu s tabmi (--barh bola jej vyska).
   Na ostrom webe ziadna taka lista nie je, takze sa lepi rovno na vrch. */
.siteheader{background:#fff;position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--line);}
.hd1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 0 14px;}
/* height:auto - inak by sa logo roztiahlo na vysku z atributu height. */
.hd1 .logo img{width:186px;height:auto;margin:0 auto;}
.hd1 .l{justify-self:start;display:flex;align-items:center;gap:12px;}
.hd1 .r{justify-self:end;display:flex;gap:9px;}
.hdback{display:none;align-items:center;gap:6px;font-family:var(--f-ui);font-size:12px;
  font-weight:600;color:var(--muted);white-space:nowrap;}
.hdback svg{width:16px;height:16px;flex:none;}
.hdback:hover{color:var(--accent);}
.siteheader[data-active="detail"] .hdback{display:inline-flex;}
.iconbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--ink);transition:border-color .15s ease,color .15s ease;}
.iconbtn:hover{border-color:var(--accent-hi);color:var(--accent);}
.iconbtn svg{width:17px;height:17px;}
.nav{display:flex;justify-content:center;gap:30px;padding:0 0 15px;flex-wrap:wrap;}
.nav a,.navlink{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);padding:5px 0;border-bottom:2px solid transparent;
  background:none;border-left:0;border-right:0;border-top:0;display:inline-flex;align-items:center;gap:6px;}
.nav a:hover,.navlink:hover,.navlink[aria-expanded="true"]{border-bottom-color:var(--accent-hi);}
.navitem{position:relative;}
.navlink .caret{width:11px;height:11px;transition:transform .18s ease;}
.navlink[aria-expanded="true"] .caret{transform:rotate(180deg);}
.submenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:70;width:250px;
  background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px rgba(36,30,27,.16);padding:8px;}
.submenu a{display:block;padding:9px 12px;font-family:var(--f-body);font-size:15px;
  text-transform:none;letter-spacing:0;font-weight:400;border:0;}
.submenu a:hover{background:var(--pink);}
.burger{display:none;}
.mobmenu{display:none;background:#fff;border-top:1px solid var(--line);padding:6px 0 18px;}
.mobmenu.open{display:block;}
.mobmenu a{display:block;padding:12px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.mobmenu .grp{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-hi);padding:16px 0 4px;}

/* --- typografia --- */
.eyebrow{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;letter-spacing:-.01em;margin:0;}
h1{font-size:clamp(32px,3.6vw,50px);line-height:1.06;}
h2{font-size:clamp(25px,2.6vw,35px);line-height:1.14;}
h3{font-size:20px;line-height:1.24;}
p{margin:0 0 16px;}
.lead{font-size:18px;color:var(--muted);}
.arrowlink{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);border-bottom:1.5px solid var(--accent-hi);
  padding-bottom:3px;display:inline-block;}
.arrowlink:hover{color:var(--accent-hi);}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-ui);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;background:var(--accent);color:#fff;border:0;
  padding:16px 30px;transition:.15s;}
.btn:hover{background:var(--accent-hi);}

/* --- hero: text v ruzovom bloku, fotka vedla --- */
.hero{display:grid;grid-template-columns:1fr 1.18fr;background:var(--pink);}
.hero-txt{padding:36px 60px 36px 34px;display:flex;flex-direction:column;justify-content:center;}
.hero-txt h1{margin-bottom:20px;}
.hero-txt h1 em{font-style:italic;color:var(--accent);}
.hero-txt p{max-width:34ch;color:var(--muted);margin-bottom:26px;}
/* Vyska pasu rastie so sirkou stranky, aby fotka neostala uzkym pruzkom:
   pri 1280 px vychadza povodnych 340 px, pri 1600 px uz 416 – teda pomer
   zhruba 2:1, na ktorom jedlo vidno. Vyssie sa nejde, pas by zatlacil
   zvysok stranky pod okraj obrazovky. */
.hero-img{position:relative;overflow:hidden;min-height:clamp(340px,26vw,430px);}
.hero-img img{width:100%;height:100%;object-fit:cover;}
/* Slider: fotky lezia cez seba a striedaju sa krytim. Ziadne posuvanie –
   pri fotke jedla je prelinanie pokojnejsie a nepotrebuje merat sirky.
   Prva fotka ma .je-vidno uz zo servera, takze aj bez JS je nieco vidiet.
   Vsetky snimky su absolutne, aby vysku pasu urcoval box a nie to, ci
   Zuzka nahrala fotku na sirku alebo na vysku. */
.hero-snimka{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.hero-snimka.je-vidno{opacity:1;}
.hero-bodky{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:9px;}
.hero-bodka{position:relative;width:9px;height:9px;padding:0;border:1px solid #fff;border-radius:999px;
  background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.35);}
.hero-bodka.je-vidno{background:#fff;}
/* Bodka je zámerne malá – tak je v návrhu a tak ostáva. Prstom sa ale 9 px
   trafiť nedá, preto má okolo seba neviditeľnú ťuknuteľnú plochu. Do šírky
   presne toľko, koľko je rozostup bodiek (9 px bodka + 9 px medzera), aby si
   susedné plochy nebrali kliknutia; do výšky 44 px, čo je bežné odporúčanie
   pre prst. Vzhľad sa tým nemení – plocha je priehľadná. */
.hero-bodka::after{content:"";position:absolute;left:50%;top:50%;
  width:18px;height:44px;transform:translate(-50%,-50%);}
@media (prefers-reduced-motion:reduce){
  .hero-snimka{transition:none;}
}

.hero-note{background:#fff;border-bottom:1px solid var(--line);}
.hero-note .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding-top:14px;padding-bottom:14px;
  font-family:var(--f-ui);font-size:13px;color:var(--muted);}
.hero-note b{font-family:var(--f-body);font-size:15px;color:var(--ink);font-weight:600;}
.hero-note .dot{width:7px;height:7px;background:var(--logo-y);border-radius:2px;display:inline-block;}

/* --- kruhove kategorie --- */
.cats{padding:56px 0 8px;}
.catrow{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;}
.cat{text-align:center;}
.cat .ph{aspect-ratio:1/1;border-radius:999px;overflow:hidden;background:var(--pink);
  outline:1px solid var(--line);outline-offset:5px;transition:outline-color .18s ease;}
.cat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.cat:hover .ph{outline-color:var(--accent-hi);}
.cat:hover .ph img{transform:scale(1.05);}
.cat .nm{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;margin-top:17px;}
.cat .ct{font-family:var(--f-ui);font-size:11px;color:var(--muted);letter-spacing:.02em;}

/* --- sekcie a mriezka receptov --- */
.sec{padding:60px 0;}
.sec.tight{padding:40px 0;}
.sechead{text-align:center;margin-bottom:36px;}
.sechead .rule{width:46px;height:2px;background:var(--accent-hi);margin:0 auto 16px;}
.sechead p{color:var(--muted);margin:8px auto 0;max-width:52ch;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px;}
.rc .ph{aspect-ratio:4/3;overflow:hidden;background:var(--pink);}
.rc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.rc:hover .ph img{transform:scale(1.04);}
.rc .kicker{font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 7px;}
.rc h3{margin-top:17px;transition:color .15s ease;}
.rc:hover h3{color:var(--accent);}
.rc .t{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);margin-top:7px;}
/* Čo v jedle nie je. Skryté všade okrem sekcie Pre alergikov – filtrovanie
   beží v prehliadači, takže značka je na karte vždy a rozhoduje len CSS.
   Tvarom je to zmenšený .fchip, aby to na stránke nebol nový prvok. */
.rcal{display:none;}
.grid.je-alergikov .rcal{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.rcal span{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);
  padding:5px 10px;}
.more-c{text-align:center;margin-top:44px;}

/* --- blok O mne: fotka vlavo do kraja, ruzovy blok vpravo --- */
.about{display:grid;grid-template-columns:1fr 1fr;background:var(--pink);align-items:stretch;}
.about .ph img{width:100%;height:100%;min-height:460px;object-fit:cover;}
.about .tx{padding:64px 60px;display:flex;flex-direction:column;justify-content:center;}
.about .tx p{color:var(--muted);}
.about .tx h2{max-width:17ch;margin-bottom:20px;}
.about .tx .arrowlink{margin-top:8px;}

/* --- pas s citatom --- */
.quote{background:var(--cream);padding:66px 0;text-align:center;}
.quote blockquote{margin:0 auto;max-width:26ch;font-family:var(--f-disp);font-weight:400;font-style:italic;
  font-size:clamp(22px,2.7vw,34px);line-height:1.26;color:var(--magenta-soft);}
.quote .sign{margin-top:22px;}
.hand-slot{font-family:var(--f-disp);font-style:italic;font-size:21px;color:var(--accent);
  border-bottom:1px dashed var(--pink-deep);padding-bottom:2px;}

/* --- instagram --- */
.igrow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.igtile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--pink);}
.igtile img{width:100%;height:100%;object-fit:cover;}
.igtile .rb{position:absolute;right:7px;top:7px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.igtile .rb svg{width:17px;height:17px;}

/* --- paticka --- */
.foot{background:#fff;border-top:1px solid var(--line);padding:44px 0 40px;text-align:center;}
.foot img.lg{width:158px;height:auto;margin:0 auto 22px;}
.foot .social{display:flex;justify-content:center;gap:10px;margin-top:24px;}
.social a{width:36px;height:36px;border:1px solid var(--line);border-radius:999px;display:grid;
  place-items:center;transition:border-color .15s ease,color .15s ease;}
.social a:hover{border-color:var(--accent-hi);color:var(--accent);}
.social svg{width:17px;height:17px;}
.foot .copy{max-width:62ch;margin:26px auto 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--muted);}
.foot .copy a{border-bottom:1px solid var(--accent-hi);white-space:nowrap;}

/* --- jednofarebne ikonky odkazov (O mne, Kontakt) ---
   Glyf je maska nad currentColor, nie <svg> v HTML. Duvod: obsah tychto
   stranok prechadza cez sanitize-html v admine, ktory <svg> nepusti – ikonky
   napisane priamo v HTML by po prvom ulozeni v /admin/stranky zmizli. */
.ikonky{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;}
.ikonka{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-ui);font-size:12px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);transition:.15s;}
.ikonka:hover{color:var(--accent-hi);}
.ikonka .ic{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;transition:border-color .15s ease;}
.ikonka:hover .ic{border-color:var(--accent-hi);}
.ikonka .ic:before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.ic-mail:before{-webkit-mask-image:url(/img/ic-mail.svg);mask-image:url(/img/ic-mail.svg);}
.ic-instagram:before{-webkit-mask-image:url(/img/ic-instagram.svg);mask-image:url(/img/ic-instagram.svg);}
.ic-facebook:before{-webkit-mask-image:url(/img/ic-facebook.svg);mask-image:url(/img/ic-facebook.svg);}
/* v bloku "Napis mi" na O mne su ikonky na stred, inde vlavo */
.mecta .ikonky{justify-content:center;}

/* ============ RECEPT ============ */
.rhead{text-align:center;padding:38px 0 30px;background:var(--magenta-tint);
  border-bottom:1px solid var(--pink-deep);}
.crumbs{font-family:var(--f-ui);font-size:12px;color:var(--muted);margin-bottom:13px;}
.crumbs b{font-weight:600;color:var(--ink);}
.crumbs a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.crumbs a:hover{color:var(--accent-hi);}
.rhead h1{max-width:20ch;margin:0 auto;}
.rmeta{display:flex;justify-content:center;flex-wrap:wrap;gap:0 34px;margin-top:22px;}
.rmeta div{text-align:center;}
.rmeta .k{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);}
.rmeta .v{font-family:var(--f-ui);font-size:15px;font-weight:600;}
.racts{display:flex;justify-content:center;gap:26px;margin-top:24px;flex-wrap:wrap;}
.act{background:none;border:0;border-bottom:1.5px solid var(--line);padding:0 0 4px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;transition:.15s;}
.act svg{width:15px;height:15px;}
.act:hover{border-bottom-color:var(--accent-hi);color:var(--accent);}
.act.on{border-bottom-color:var(--accent-hi);color:var(--accent);}

/* ustredna fotka – na stred, pevna sirka */
.rphoto{max-width:900px;margin:34px auto 0;}
/* height:auto je nutne. Atributy width/height na <img> prehliadac berie ako
   prezentacny pokyn pre CSS vysku, a ked je vyska definovana, aspect-ratio sa
   ignoruje. Fotka na vysku 2268x4032 by potom mala box 900x4032 namiesto
   900x600. V navrhu C atributy neboli, preto tam problem nebol. */
.rphoto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.rintro{max-width:660px;margin:34px auto 0;text-align:center;color:var(--muted);}

/* tabulka: ingrediencie vlavo, postup vpravo */
.rcard{max-width:1000px;margin:52px auto 0;border:1px solid var(--line);background:#fff;}
.rcard-h{border-bottom:1px solid var(--line);padding:22px 30px;display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;flex-wrap:wrap;}
.rcard-h h2{font-size:26px;}
.rcard-h .yield{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);}
.rgrid{display:grid;grid-template-columns:330px 1fr;}
.ingr{background:var(--pink);padding:30px;border-right:1px solid var(--line);}
.ingr h3,.steps h3{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;}
.ingr ul{list-style:none;margin:0;padding:0;}
.ingr li{padding:9px 0;border-bottom:1px solid var(--pink-deep);font-size:15.5px;line-height:1.45;}
.ingr li:last-child{border-bottom:0;}
/* Vytlacit a Zdielat su na konci ingrediencii, uz nie v ruzovej hlavicke.
   Stlpec ingrediencii ma ruzove pozadie, preto oddelovace v --pink-deep;
   bezna --line by sa na nom stratila. */
.ingr .racts{justify-content:flex-start;gap:12px 22px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--pink-deep);}
.ingr .act{border-bottom-color:var(--pink-deep);}
.steps{padding:30px 34px 34px;}
ol.st{list-style:none;counter-reset:s;margin:0;padding:0;}
ol.st li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:0 0 18px;}
ol.st li:before{content:counter(s);font-family:var(--f-disp);font-size:19px;font-weight:600;
  color:var(--accent);line-height:1.35;}
ol.st li p{margin:0;font-size:16px;line-height:1.6;}

.stepphotos{max-width:1000px;margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.stepphotos.one{grid-template-columns:1fr;max-width:620px;}
.stepphotos.one .slot{display:none;}
.stepphotos img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.stepphotos figcaption{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);margin-top:9px;}
.slot{border:1.5px dashed var(--pink-deep);background:#fff;aspect-ratio:3/2;padding:22px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;}
.slot .lab{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);}
.slot .desc{font-size:13.5px;line-height:1.5;color:var(--muted);}
.tipbox{max-width:1000px;margin:34px auto 0;background:#FFF7E4;border-left:3px solid var(--logo-y);
  padding:26px 30px;}
.tipbox h3{font-family:var(--f-disp);font-size:20px;margin:0 0 14px;text-transform:none;letter-spacing:0;color:var(--ink);}
.tipbox p{font-size:16px;}
.tipbox p:last-child{margin-bottom:0;}
.demo{max-width:1000px;margin:22px auto 0;font-family:var(--f-ui);font-size:12.5px;color:var(--muted);}
.demo button{font-family:var(--f-ui);font-size:12px;background:none;border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;}
.demo button:hover{border-color:var(--ink);}

/* poznamky dizajnera */
.notes{background:#F4EFE7;border-top:1px solid var(--line);padding:40px 0 46px;}
.notes h3{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.notes ul{margin:0;padding-left:20px;}
.notes li{font-size:15px;line-height:1.6;margin-bottom:11px;color:var(--muted);}
.notes li b{color:var(--ink);}

/* ============ RECEPTY + HLADANIE ============ */
.pagehead{background:var(--magenta-tint);border-bottom:1px solid var(--pink-deep);
  padding:44px 0 38px;text-align:center;}
.pagehead h1{margin-bottom:12px;}
.pagehead p{max-width:52ch;margin:0 auto;color:var(--muted);}
.searchbar{position:relative;max-width:520px;margin:26px auto 0;}
.searchbar svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);}
.searchbar input{width:100%;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--pink-deep);padding:14px 44px;}
.searchbar input::placeholder{color:#A0958D;}
.searchbar input:focus{outline:2px solid var(--accent-hi);outline-offset:-1px;}
.searchbar #qclear{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;background:none;font-size:22px;line-height:1;color:var(--muted);}
.filters{display:flex;justify-content:center;padding:26px 0 0;}
.secnote{padding:14px 0 0;}
.secnote p{max-width:60ch;margin:0 auto;text-align:center;font-size:14px;color:var(--muted);
  font-style:italic;}
.fchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.fchip{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;background:#fff;border:1px solid var(--line);color:var(--muted);
  padding:9px 16px;transition:.15s;display:inline-flex;align-items:center;cursor:pointer;}
.fchip:hover{border-color:var(--ink);color:var(--ink);}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.listwrap{padding-bottom:20px;}
.count{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);text-align:center;
  padding:26px 0 30px;}
.nores{text-align:center;padding:20px 0 40px;}
.nores h2{margin-bottom:10px;}
.nores p{color:var(--muted);max-width:44ch;margin:0 auto 18px;}
.pager a{display:inline-flex;align-items:center;justify-content:center;text-align:center;}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:40px 0 10px;}
.pager button,.pager a{font-family:var(--f-ui);font-size:13.5px;min-width:40px;height:40px;padding:0 13px;
  background:#fff;border:1px solid var(--line);color:var(--muted);}
.pager button:hover,.pager a:hover{border-color:var(--ink);color:var(--ink);}
.pager button[aria-current="true"],.pager a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.pager button[disabled],.pager a[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none;}

/* ============ O MNE ============ */
.mesplit{display:grid;grid-template-columns:1fr 1.25fr;gap:54px;align-items:start;}
.mesplit .slot.portrait{aspect-ratio:4/5;}
/* Pás s kuchyňou. Fotka má v HTML rozmery, aby sa pri lenivom načítaní
   nescvrkla na nulu – bez height:auto by ich ale brala doslova a na užšom
   okne by sa roztiahla do výšky. */
.kitchen img{width:100%;height:auto;}
/* Skutočný portrét z /admin/fotky. Tvar drží rovnaký ako sivá záložka z návrhu,
   ktorá je na jeho mieste, kým Zuzka fotku nenahrá. */
.mesplit .portrait{aspect-ratio:4/5;overflow:hidden;background:var(--pink);}
.mesplit .portrait img{width:100%;height:100%;object-fit:cover;}
.metx .lead-p{font-family:var(--f-disp);font-size:22px;line-height:1.42;margin-bottom:20px;}
.metx p{color:var(--muted);}
.metx .sign{margin-top:24px;}
.mestrip{background:var(--pink);padding:56px 0;}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.tcol h3{margin-bottom:10px;}
.tcol p{color:var(--muted);font-size:16px;margin:0;}
.narrow-tx{max-width:760px;}
.narrow-tx p{color:var(--muted);}
.slot.wide{aspect-ratio:auto;margin-top:26px;padding:26px 28px;}
.mecta{background:var(--magenta-tint);border-top:1px solid var(--pink-deep);
  padding:56px 0;text-align:center;}
.mecta p{color:var(--muted);max-width:46ch;margin:12px auto 26px;}
.mecta-note{max-width:52ch;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--pink-deep);
  font-size:14.5px;color:var(--muted);}
.mecta-note a{color:var(--accent);border-bottom:1px solid var(--accent-hi);white-space:nowrap;}
.related{grid-template-columns:repeat(4,1fr);}

/* ============ KONTAKT ============ */
.ktwo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.kcol h2{font-size:27px;margin-bottom:14px;}
.kcol p{color:var(--muted);}
.kcol .btn{margin-top:8px;}

/* ============ VARIANTY PISMA (nadpisy) ============ */
body[data-font="fraunces"]{--f-disp:"Fraunces",Georgia,serif;}
body[data-font="lora"]{--f-disp:"Lora",Georgia,serif;}
body[data-font="lora"] h1,body[data-font="lora"] h2{font-weight:600;letter-spacing:-.012em;}

/* --- Inter ma v kapitalkach tesnejsie znaky, preto siroksie prelozenie --- */
.eyebrow{letter-spacing:.215em;}
.nav a,.navlink{letter-spacing:.16em;}
.mobmenu a{letter-spacing:.15em;}
.mobmenu .grp,.slot .lab,.pk-lab{letter-spacing:.21em;}
.btn,.arrowlink{letter-spacing:.17em;}
.fchip{letter-spacing:.085em;padding-left:14px;padding-right:14px;}
.act{letter-spacing:.15em;}
.rmeta .k,.rcard-h .yield,.ingr h3,.steps h3{letter-spacing:.21em;}
.rc .kicker{letter-spacing:.21em;}
.picker{display:flex;align-items:center;gap:3px;background:var(--pink);border-radius:999px;padding:3px 3px 3px 11px;}
.pk-lab{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-right:4px;}
.picker button{font-family:var(--f-ui);font-size:12px;color:var(--muted);background:none;border:0;
  border-radius:999px;padding:5px 11px;}
.picker button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(36,30,27,.14);}

/* ============ DOPLNKY PRE OSTRY WEB ============ */
/* Tieto pravidla v navrhu neboli, lebo prototyp tieto stavy nemal.
   Su drzane v duchu navrhu - rovnake premenne, rovnaky rytmus. */

/* pruh nad draftom v admin nahlade */
.draftbar{background:var(--logo-y);color:var(--ink);font-family:var(--f-ui);
  font-size:13px;font-weight:600;text-align:center;padding:10px 20px;}

/* medzinadpis v ingredienciach ("Cesto:", "Plnka:") */
.ingr li.grp{list-style:none;margin-left:-1.2em;margin-top:14px;}
.ingr li.grp:first-child{margin-top:0;}

/* medzinadpis v postupe ("Gulas:", "Knedla:") – recepty, kde sa naraz varia
   dve jedla. Nie je to krok, tak nesmie dostat cislo ani zvysit pocitadlo:
   cislovanie ide cez podnadpis dalej (1..7, podnadpis, 8..12).
   Vzhlad je zamerne rovnaky ako medzinadpis v ingredienciach – tucne, pismo
   textu, aby obe polovice karty vyzerali ako jedna vec. */
ol.st li.grp{counter-increment:none;display:block;font-size:16px;padding:0 0 10px;
  margin-top:18px;}
ol.st li.grp:first-child{margin-top:0;}
ol.st li.grp:before{content:none;}

/* stranka 404 */
.notfound{text-align:center;padding:90px 20px 110px;}
.notfound h1{margin-bottom:12px;}
.notfound p{color:var(--muted);max-width:46ch;margin:0 auto 24px;}

/* ============ TABLET A MENSIE (<=1023px) ============
   Prevzate z navrhu C – v prototype to boli pravidla "body.tablet ...",
   ktorymi si prototyp simuloval tablet (ramec 834 px). Skutocny web ziadnu
   takuto triedu na <body> nedava, takze tu su prepisane na medialny dotaz.
   Menu sa pod 1024 px schovava do hamburgera – nav so siestimi polozkami
   by sa na tejto sirke zalamovalo do dvoch riadkov. */
@media (max-width:1023px){
  /* Len vodorovne! Prvky ako .hd1, .filters, .secnote alebo .listwrap su
     zaroven .wrap – skratka `padding` by im zmazala zvisle odsadenie. */
  .wrap{padding-left:24px;padding-right:24px;}
  .nav{display:none;}
  .burger{display:grid;}

  /* hlavna stranka */
  .hero,.about{grid-template-columns:1fr 1fr;}
  .hero-txt,.about .tx{padding:44px 34px;}
  .hero-img{min-height:280px;}
  .about .ph img{min-height:360px;}
  .catrow{grid-template-columns:repeat(3,1fr);gap:20px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:34px 22px;}
  .igrow{grid-template-columns:repeat(3,1fr);}

  /* zoznam receptov */
  .pagehead{padding:34px 0 30px;}

  /* detail receptu: mensia hlavicka, hustejsi text */
  .rhead{padding:19px 0 17px;}
  .rhead h1{font-size:27px;}
  .crumbs{font-size:11px;margin-bottom:9px;}
  .rmeta{margin-top:13px;gap:0 18px;}
  .rmeta .k{font-size:9px;letter-spacing:.14em;}
  .rmeta .v{font-size:13.5px;}
  .racts{margin-top:16px;gap:18px;}
  .act{font-size:10.5px;letter-spacing:.1em;}
  .rgrid{grid-template-columns:1fr;}
  .ingr{border-right:0;border-bottom:1px solid var(--line);}
  .ingr li{padding:6px 0;font-size:14.5px;line-height:1.35;}
  .steps h3{margin-bottom:13px;}
  ol.st li{padding-bottom:12px;gap:11px;grid-template-columns:26px 1fr;}
  ol.st li p{font-size:15px;line-height:1.45;}
  ol.st li:before{font-size:16px;line-height:1.3;}
  ol.st li.grp{font-size:15px;margin-top:14px;padding-bottom:8px;}
  .rcard-h{padding:16px 22px;}
  .rcard-h h2{font-size:21px;}
  .rintro{font-size:15.5px;line-height:1.55;}
  .related{grid-template-columns:1fr 1fr;}

  /* O mne a Kontakt */
  .mesplit{grid-template-columns:300px 1fr;gap:34px;}
  .three{grid-template-columns:1fr;gap:22px;}
  .ktwo{grid-template-columns:1fr;gap:36px;}
}

/* ============ MOBIL (<=640px) ============
   V prototype "body.mobile ..." (ramec 412 px). */
@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding-left:18px;padding-right:18px;}
  .hd1 .logo img{width:144px;}
  /* Na 375 px sa "Späť na recepty" (114 px), logo (144) a tri ikonky (138)
     do hlavičky nezmestia – logo by sa stlačilo na tretinu. Odkaz odchádza:
     hamburger je hneď vedľa a telefón má vlastné gesto späť. Logo tak ostane
     v tej veľkosti, akú mu dal návrh. */
  .siteheader[data-active="detail"] .hdback{display:none;}

  /* hlavna stranka */
  .hero,.about{grid-template-columns:1fr;}
  .hero-txt{padding:26px 18px 30px;order:2;}
  .hero-img{order:1;}
  .hero-img{min-height:0;aspect-ratio:3/2;}
  .about .ph img{min-height:0;aspect-ratio:4/3;}
  .about .tx{padding:28px 18px 34px;}
  .catrow{grid-template-columns:repeat(3,1fr);gap:12px;}
  .cat .nm{font-size:10px;margin-top:11px;letter-spacing:.09em;}
  .cat .ct{display:none;}
  .sec{padding:34px 0;}
  .quote{padding:34px 0;}
  .grid{grid-template-columns:1fr 1fr;gap:22px 12px;}
  .rc h3{font-size:16px;margin-top:11px;}
  .rc .kicker{margin:11px 0 5px;font-size:9.5px;}
  /* Karta má na mobile len ~164 px – tri štítky v rámčekoch by sa zalomili
     do troch riadkov a odtlačili mriežku. Bez rámčekov je z nich jeden riadok. */
  .grid.je-alergikov .rcal{gap:0 9px;margin-top:7px;}
  .rcal span{border:0;background:none;padding:0;letter-spacing:.07em;}
  .rcal span + span::before{content:"· ";}
  .igrow{grid-template-columns:repeat(3,1fr);gap:6px;}

  /* zoznam receptov */
  .pagehead{padding:26px 0 24px;}
  .searchbar{margin-top:18px;}
  .searchbar input{font-size:15px;padding:12px 40px;}
  .filters{padding-top:18px;}
  .fchip{font-size:10.5px;padding:8px 12px;}
  .count{padding:18px 0 20px;}

  /* detail receptu */
  .rhead h1{font-size:23px;line-height:1.12;}
  .rphoto{margin-top:18px;}
  .rintro{margin-top:22px;}
  .rcard{margin-top:30px;}
  .ingr{padding:22px;}
  .ingr .racts{gap:10px 16px;margin-top:18px;padding-top:14px;}
  .steps{padding:22px;}
  .stepphotos{grid-template-columns:1fr;}

  /* O mne a Kontakt */
  .mesplit{grid-template-columns:1fr;gap:24px;}
  .metx .lead-p{font-size:19px;}
  .mestrip{padding:32px 0;}
  .mecta{padding:34px 0;}
  .ktwo{gap:30px;}
  .kcol h2{font-size:22px;}

  /* paticka */
  .foot .copy{font-size:12.5px;margin-top:20px;}
}

/* ============ TLAC / ULOZENIE DO PDF ============ */
/* ----------------------------------------------------------------
   Ležiaci telefón. Návrh C počítal s portrétom; na 375 px výšky sú
   dve veci neúnosné:
     – lepiaca hlavička má 104 px, čiže 28 % obrazovky natrvalo,
     – hlavná fotka receptu je 499 px, teda vyššia než celé okno.
   Podmienka je na VÝŠKU okna, nie na šírku, takže portrét, tablet ani
   počítač sa toho nedotknú. Horná hranica šírky drží pravidlo mimo
   nízkych okien na počítači, kde lepiaca hlavička neprekáža.
   ---------------------------------------------------------------- */
@media (max-height:480px) and (max-width:1023px){
  /* Hlavička odscrolluje preč. Menu je potom o jeden pohyb ďalej,
     ale štvrtina obrazovky je späť. */
  .siteheader{position:static;}
  /* Fotka sa nesmie roztiahnuť cez celú obrazovku – výrez drží
     object-fit:cover z hlavného pravidla. */
  .rphoto img{aspect-ratio:auto;height:62vh;}
  .hero-img{min-height:200px;}
}

@media print{
  /* #detail, #home a #recipes boli obrazovky prototypu – na ostrom webe
     neexistujú. Rovnaký zámer plnia triedy skutočných sekcií: pri tlači
     receptu odpadne „Vyskúšaj aj tieto“ (.sec) a keby niekto tlačil zoznam
     alebo hlavnú stránku, odpadnú aj ich hlavičky, filtre a bloky. */
  .notes,.siteheader,.foot,.racts,.demo,.stepphotos .slot,
  .sec,.pagehead,.filters,.hero,.about,.quote,.igrow,
  .draftbar{display:none!important;}
  body{background:#fff!important;font-size:12pt;}
  .rhead{background:#fff!important;border-bottom:1px solid #ddd;padding:0 0 14pt;}
  .rphoto{max-width:420pt;margin-top:14pt;}
  .rphoto img{aspect-ratio:3/2;}
  .rcard{border:1px solid #ccc;margin-top:20pt;break-inside:avoid;}
  .ingr{background:#FAF2F6!important;}
  .tipbox{background:#FFFAF0!important;break-inside:avoid;}
  .rintro{margin-top:16pt;}
  ol.st li{break-inside:avoid;}
  @page{margin:14mm;}
}

/* ============ ZBER E-MAILOV ============
   Box na detaile receptu je zámerne postavený na tej istej konštrukcii ako
   .tipbox – svetlá plocha, pásik vľavo, nadpis vo Fraunces. Líši sa len farbou,
   aby vedľa seba pôsobili ako súrodenci a nie ako cudzí prvok. */
.nlbox{max-width:1000px;margin:34px auto 0;background:var(--pink);
  border-left:3px solid var(--accent);padding:26px 30px;}
.nlbox h3{font-family:var(--f-disp);font-size:20px;margin:0 0 14px;text-transform:none;
  letter-spacing:0;color:var(--ink);}
.nlbox p{font-size:16px;max-width:58ch;}
.nlbox p:last-child{margin-bottom:0;}
.nlform{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px;}
.nlform input[type=email]{flex:1 1 260px;min-width:0;font-family:var(--f-ui);font-size:15px;
  color:var(--ink);background:#fff;border:1px solid var(--pink-deep);padding:15px 16px;}
.nlform input[type=email]:focus{outline:2px solid var(--accent);outline-offset:-2px;
  border-color:var(--accent);}
.nlform .btn{border:0;}
.nlnote{font-family:var(--f-ui);font-size:12.5px;line-height:1.55;color:var(--muted);}
.nlnote a{border-bottom:1px solid var(--pink-deep);}
.nlnote a:hover{border-bottom-color:var(--accent);}
.nlchyba{font-family:var(--f-ui);font-size:13.5px;color:var(--cervena);margin-bottom:0;}
/* Pasca na roboty aj menovka pre čítačky – z obrazovky preč, ale nie display:none,
   to niektoré roboty rozpoznajú a pole preskočia. */
.nlhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.nlsr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* --- riadok v pätičke --- */
.foot .nlfoot{max-width:52ch;margin:0 auto 26px;padding-bottom:24px;
  border-bottom:1px solid var(--line);}
.foot .nlfoot p{font-family:var(--f-ui);font-size:13.5px;line-height:1.6;color:var(--muted);
  margin:0 0 12px;}
.foot .nlfoot form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.foot .nlfoot input[type=email]{flex:1 1 220px;min-width:0;font-family:var(--f-ui);font-size:14px;
  background:#fff;border:1px solid var(--line);padding:12px 14px;}
.foot .nlfoot input[type=email]:focus{outline:2px solid var(--accent);outline-offset:-2px;}
.foot .nlfoot .btn{padding:12px 20px;}

@media (max-width:700px){
  .nlbox{padding:22px 20px;margin-top:26px;}
  .nlbox p{font-size:15px;}
  .nlform{gap:8px;}
  .nlform input[type=email],.nlform .btn{flex:1 1 100%;}
  .nlform .btn{justify-content:center;}
}