/* Strona główna: układ portalowy (moduły z nagłówkami, blok otwierający, kolumna boczna). */

/* Pasek tematów */
.tematy { border-bottom: 1px solid var(--border); background: var(--surface); }
.tematy-in { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tematy-in b { font-size: 13px; color: var(--muted); white-space: nowrap; margin-right: 4px; }
.tematy-in a { white-space: nowrap; padding: 5px 13px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.tematy-in a:hover { background: var(--accent); color: var(--on-accent); }

.strona-h1 { padding: 28px 0 22px; }
.strona-h1 h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; }
.strona-h1 h1 em { font-style: normal; color: var(--accent); }
.strona-h1 p { color: var(--muted); margin: 8px 0 0; max-width: 65ch; font-size: 15.5px; }
.wyniki { background: var(--accent-soft); border-radius: var(--r); padding: 16px 20px; margin-bottom: 20px; }
.wyniki ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wyniki a { font-weight: 700; }

/* Blok otwierający: lead | najnowsze | boczna */
.lead { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3.4fr) minmax(0, 2.6fr); gap: 28px; }
.lead-glowny { display: grid; gap: 12px; align-content: start; text-decoration: none; color: var(--text); }
.lead-glowny h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.03em; transition: color .15s; }
.lead-glowny p { color: var(--muted); margin: 0; }
.lead-glowny:hover h2 { color: var(--accent); }
.kat-tag { font-size: 11.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.lista-wpisow { display: grid; gap: 0; }
.lista-wpisow a { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 12px 0; text-decoration: none; color: var(--text); }
.lista-wpisow a + a { border-top: 1px solid var(--border); }
.lista-wpisow .foto-slot { padding: 4px; } .lista-wpisow .foto-slot small { display: none; } .lista-wpisow .foto-slot span { font-size: 9px; }
.lista-wpisow b { display: block; font-size: 14.5px; line-height: 1.3; transition: color .15s; }
.lista-wpisow a:hover b { color: var(--accent); }
.boczna { display: grid; gap: 18px; align-content: start; }
.ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ranking li { counter-increment: r; }
.ranking a { display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; padding: 9px 0; text-decoration: none; color: var(--text); }
.ranking li + li a { border-top: 1px solid var(--border); }
.ranking a::before { content: counter(r); grid-row: span 2; font: 800 22px/1 var(--font-display); color: var(--accent); }
.ranking b { font-size: 15px; transition: color .15s; } .ranking a:hover b { color: var(--accent); }
.ranking span { font-size: 12.5px; color: var(--muted); }
.zrodlo { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.promo { display: grid; gap: 4px; padding: 18px; border-radius: var(--r); background: #1b1d21; color: #f1f2f4; text-decoration: none; position: relative; overflow: hidden; min-height: 150px; align-content: end; }
.promo svg { position: absolute; top: 10px; right: -24px; width: 80%; fill: rgba(255, 255, 255, .08); }
.promo b { font: 800 18px var(--font-display); position: relative; } .promo span { font-size: 13px; color: #ff8a83; font-weight: 700; position: relative; }
.promo:hover { color: #f1f2f4; } .promo:hover span { color: #fdfdfd; }

/* Kafle kategorii */
.kategorie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kat { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 18px 20px; border-radius: 18px; text-decoration: none; color: var(--text); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
.kat:hover { transform: translateY(-3px); box-shadow: var(--cien); color: var(--text); }
.kat b { font: 800 24px/1.05 var(--font-display); letter-spacing: -.03em; position: relative; z-index: 1; }
.kat small { font-size: 13px; font-weight: 700; color: var(--muted); position: relative; z-index: 1; }
.kat svg { position: absolute; right: -16%; bottom: -14%; width: 88%; height: auto; }
.kat .sil { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.kat-czerwony { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kat-czerwony:hover { color: var(--on-accent); }
.kat-czerwony small { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
.kat-czerwony .sil { fill: color-mix(in srgb, var(--on-accent) 16%, transparent); }
.kat-wkrotce { background: var(--surface-2); border-style: dashed; cursor: default; }
.kat-wkrotce:hover { transform: none; box-shadow: none; }

/* Mapa elementów */
.mapa { background: var(--surface); border-block: 1px solid var(--border); padding: 32px 0 36px; margin-top: 48px; }
.mapa .duo { gap: 40px; }
.mapa .duo-karta { background: none; border: 0; box-shadow: none; padding: 0; }
.mapa .duo-head h3 { font: 800 20px var(--font-display); letter-spacing: -.02em; }

/* Bloki kategorii: wołowina | wieprzowina */
.bloki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.el-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.el-lista a { display: grid; gap: 3px; padding: 12px 0; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
.el-lista b { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; transition: color .15s; }
.el-lista a:hover b { color: var(--accent); }
.el-lista span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* Bento narzędzi */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.bento > * { min-width: 0; }
.b-dobor { grid-column: span 7; grid-row: span 2; }
.b-ilosc, .b-temp { grid-column: span 5; }
.b-nazwy { grid-column: span 12; scroll-margin-top: 90px; }
.b-dobor { scroll-margin-top: 90px; }
.b-dobor .danie { grid-template-columns: 1fr 1fr; gap: 12px; }
.b-dobor .danie-kol { background: var(--surface-2); border: 0; padding: 14px 16px; }
.b-dobor .pigulki [role="tab"] { padding: 6px 13px; font-size: 13.5px; }
.tile-ciemny { --surface: #24272d; --surface-2: #2e3239; --text: #f1f2f4; --muted: #b3b9c3; --border: #3b3f47; --accent: #ff6b63; --accent-hover: #ff8a83; --on-accent: #17191c; background: #1b1d21; color: var(--text); border-color: #1b1d21; }

/* Porównania */
.vs-pas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.vs { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: grid; gap: 10px; align-content: start; }
.vs-nazwy { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.vs-nazwy a { font: 800 17px/1.15 var(--font-display); color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.vs-nazwy a:last-child { text-align: right; } .vs-nazwy a:hover { color: var(--accent); }
.vs-nazwy i { font: 800 12px var(--font-display); font-style: normal; color: var(--on-accent); background: var(--accent); width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; }
.vs p { margin: 0; font-size: 13.5px; color: var(--muted); }
.vs .vs-wniosek { color: var(--text); font-weight: 700; padding-top: 10px; border-top: 1px solid var(--border); }

/* Wędliny: siatka 3 kolumn, miniatura + opis */
.wyr-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.wyr-poz { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.wyr-poz .foto { width: 92px; }
.wyr-poz-t { display: grid; gap: 3px; justify-items: start; }
.wyr-poz b { font: 800 17px/1.15 var(--font-display); letter-spacing: -.02em; transition: color .15s; }
.wyr-poz:hover b { color: var(--accent); }
.wyr-poz-z { font-size: 13px; color: var(--muted); }
.wyr-poz .got-znak { margin-top: 3px; }

/* Kafel kategorii Wędliny: zdjęcie wyrobu zamiast sylwetki */
.kat-wedliny img { position: absolute; right: -10px; bottom: -10px; width: 58%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; opacity: .9; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.kat-wedliny:hover img { transform: scale(1.04); }

/* Sklepy: ciemny pas */
.ciemny-pas { background: #1b1d21; color: #f1f2f4; margin-top: 56px; padding: 52px 0; scroll-margin-top: 80px; }
.ciemny-pas .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ciemny-pas h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.ciemny-pas p { color: #b3b9c3; max-width: 48ch; margin: 14px 0 24px; }
.cechy { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cechy li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r); background: #24272d; }
.cechy b { display: block; font-size: 15.5px; } .cechy span { font-size: 13.5px; color: #b3b9c3; }
.cechy i { width: 42px; height: 42px; border-radius: 12px; background: #c8202a; color: #fdfdfd; display: grid; place-items: center; font: 800 15px var(--font-display); font-style: normal; }
.ciemny-pas + .stopka { margin-top: 0; }

@media (max-width: 1080px) {
  .lead { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .boczna { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .kategorie, .vs-pas, .wyr-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloki, .ciemny-pas .wrap { grid-template-columns: 1fr; gap: 32px; }
  .b-dobor, .b-ilosc, .b-temp { grid-column: span 12; grid-row: auto; }
}
@media (max-width: 680px) {
  .lead, .boczna, .el-lista, .vs-pas, .wyr-siatka, .b-dobor .danie { grid-template-columns: 1fr; }
  .kat { min-height: 120px; padding: 14px 16px; } .kat b { font-size: 20px; }
  .ciemny-pas { padding: 40px 0; }
}