/* Steaky: stránka receptov. Stavia na steaky.css (farby, lišta, tlačidlo, pätička). */
.stk-rec :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.stk-rec a { color: inherit; }
.stk-rec .stk-bar__nav a { white-space: nowrap; }
.stk-rec__k { font: 500 .76rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.stk-rec__hero { display: grid; gap: 1.2rem; justify-items: center; text-align: center; padding: calc(var(--bar) + clamp(2.5rem, 8vw, 5rem)) var(--gutter) clamp(2.5rem, 7vw, 4rem); }
.stk-rec__hero h1 { max-width: 14ch; font: 600 clamp(2.7rem, 9vw, 5.4rem)/.96 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.stk-rec__hero > p:not(.stk-rec__k) { max-width: 36rem; color: var(--dim); font-size: 1.1rem; }
.stk-rec__jump { display: grid; gap: 1px; width: min(100%, 60rem); margin-top: 1rem; background: var(--ash); border: 1px solid var(--ash); }
.stk-rec__jump a { display: grid; gap: .3rem; padding: 1rem 1.1rem; background: var(--ink); text-decoration: none; text-align: left; font: 600 1.25rem/1.15 var(--serif); transition: background .2s; }
.stk-rec__jump a:hover { background: var(--coal); }
.stk-rec__jump span { font: 500 .72rem var(--sans); letter-spacing: .2em; color: var(--ember); }
@media (min-width: 560px) { .stk-rec__jump { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stk-rec__jump { grid-template-columns: repeat(4, 1fr); } }

.stk-rec__item { display: grid; gap: 1.8rem; padding: clamp(2.5rem, 7vw, 5rem) 0; border-top: 1px solid var(--ash); scroll-margin-top: var(--bar); }
.stk-rec__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.stk-rec__body { display: grid; gap: 1rem; padding-inline: var(--gutter); }
.stk-rec__item h2 { font: 600 clamp(2.2rem, 6.4vw, 3.6rem)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.stk-rec__sub { font: italic 500 clamp(1.2rem, 3.4vw, 1.5rem)/1.3 var(--serif); color: var(--gold); }
.stk-rec dl { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; padding-block: .9rem; border-block: 1px solid var(--ash); }
.stk-rec dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.stk-rec dd { font: 600 1.25rem var(--serif); }
.stk-rec__cols { display: grid; gap: 1.8rem; margin-top: .6rem; }
.stk-rec__cols h3 { margin-bottom: .8rem; font: 500 .76rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.stk-rec__cols ul { list-style: none; display: grid; }
.stk-rec__cols ul li { padding: .5rem 0; border-bottom: 1px solid var(--ash); }
.stk-rec__cols ol { list-style: none; display: grid; gap: 1rem; counter-reset: s; }
.stk-rec__cols ol li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; }
.stk-rec__cols ol li::before { content: counter(s); font: 600 1.7rem/1 var(--serif); color: var(--gold); }
@media (min-width: 900px) {
  .stk-rec__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-inline: var(--gutter); max-width: 1320px; margin-inline: auto; }
  .stk-rec__item:nth-of-type(even) figure { order: 2; }
  .stk-rec__item figure { position: sticky; top: calc(var(--bar) + 1.5rem); }
  .stk-rec__item img { aspect-ratio: 4 / 5; }
  .stk-rec__body { padding-inline: 0; }
}
@media (min-width: 1100px) { .stk-rec__cols { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2.4rem; } }
.stk-rec__end { display: grid; gap: 1.4rem; justify-items: center; text-align: center; padding: clamp(3rem, 8vw, 5rem) var(--gutter); border-top: 1px solid var(--ash); color: var(--dim); }
.stk-rec__end a:not(.stk-btn) { color: var(--gold); text-underline-offset: 3px; }