/* Strony wyrobów i hub /wedliny/: kafel „czy można jeść bez gotowania”, oś procesu, karty wyrobów */

/* Kafel bezpieczeństwa pod schematem */
.gotowy { margin: var(--gap) 0 0; padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--border); border-left: 5px solid var(--muted); background: var(--surface); display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.gotowy p { margin: 0; }
.gotowy-q { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; grid-column: 1 / -1; }
.gotowy-a { font: 800 19px var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.gotowy-t { color: var(--muted); font-size: 14.5px; }
.gotowy-tak { border-left-color: #2f8f4e; } .gotowy-tak .gotowy-a { color: #2f8f4e; }
.gotowy-nie { border-left-color: var(--accent); } .gotowy-nie .gotowy-a { color: var(--accent); }
.gotowy-zalezy { border-left-color: #c58a12; } .gotowy-zalezy .gotowy-a { color: #a87410; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gotowy-tak .gotowy-a { color: #6cc98b; }
  :root:not([data-theme="light"]) .gotowy-zalezy .gotowy-a { color: #e3b04b; }
}
:root[data-theme="dark"] .gotowy-tak .gotowy-a { color: #6cc98b; }
:root[data-theme="dark"] .gotowy-zalezy .gotowy-a { color: #e3b04b; }
.rola { color: var(--muted); font-weight: 500; font-size: 13px; }

/* Oś procesu: numerowane kroki z linią łączącą */
.proces { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: k; }
.proces li { counter-increment: k; position: relative; padding: 0 0 18px 44px; }
.proces li::before { content: counter(k); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 800; display: grid; place-items: center; }
.proces li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.proces b { display: block; font-size: 16px; line-height: 30px; }
.proces-par { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.proces p { margin: 0; }

/* Hub: karty wyrobów */
.wyr-grupa { margin-top: 36px; }
.wyr-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.wyr-karta { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.wyr-karta:hover { border-color: var(--accent); box-shadow: var(--cien); color: var(--text); }
.wyr-karta .mini { grid-row: span 2; width: 96px; height: auto; display: block; align-self: center; }
.wyr-karta .mini-baza { fill: var(--surface-2); stroke: var(--border); stroke-width: 6; }
.wyr-karta .mini-on { fill: var(--accent); }
.wyr-karta .mini-linia { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; }
.wyr-tyt b { display: block; font: 800 18px var(--font-display); letter-spacing: -.01em; }
.wyr-tyt span { font-size: 13px; color: var(--muted); }
.got-znak { justify-self: start; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.got-tak { color: #2f8f4e; } .got-nie { color: var(--accent); background: var(--accent-soft); } .got-zalezy { color: #a87410; }
.wyr-opis { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }

@media (max-width: 960px) { .wyr-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .wyr-karty { grid-template-columns: 1fr; }
  .gotowy { grid-template-columns: 1fr; }
  .gotowy-a { white-space: normal; }
}