/* Prezentacja audytu Manufaktury. Język wizualny raportów Lemon Solutions (raport roczny Piwnej 47):
   Poppins, żółty #FFBE3B, krem #FFF4DA, okładka z kołami, etykiety z żółtą kreską, ciemny blok komentarza.
   Slajd ma stałe 1600 x 900 i skaluje się do okna (deck.js). Raport dla lokalu to osobny dokument A4 (.dokument). */
:root {
  --zolty: #FFBE3B; --krem: #FFF4DA; --jasny: #FFE3A3; --kolo1: #FFD271; --kolo2: #FFCB5C;
  --tekst: #1C1C1C; --szary: #6B6B6B; --kreska: #ECECEC; --tlo: #F5F5F5;
  --ok: #2E7D32; --ok-tlo: #E7F5EA; --zle: #C62828; --zle-tlo: #FDECEC; --sr: #A35F00; --sr-tlo: #FFF1D6;
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tekst); }
a { color: inherit; }
img { display: block; }

/* ------------------------------------------------------------------ prezentacja */
body.prezentacja { background: #121212; overflow: hidden; }
.scena { position: fixed; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: center center; }
.slajd { position: absolute; inset: 0; width: 1600px; height: 900px; background: #fff; overflow: hidden; padding: 64px 88px 96px; display: none; }
.slajd.aktywny { display: block; }
.slajd .stopka { position: absolute; left: 88px; right: 88px; bottom: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--szary); }
.slajd .stopka b { color: var(--tekst); letter-spacing: .08em; font-weight: 800; }
.slajd.zolty .stopka, .slajd.ciemny .stopka { color: inherit; opacity: .75; }
.slajd.zolty .stopka b, .slajd.ciemny .stopka b { color: inherit; }
.postep { position: fixed; left: 0; bottom: 0; height: 5px; background: var(--zolty); transition: width .2s; z-index: 5; }
.nawigacja { position: fixed; right: 16px; top: 12px; display: flex; gap: 8px; z-index: 6; opacity: .25; transition: opacity .2s; }
.nawigacja:hover { opacity: 1; }
.nawigacja button, .nawigacja a { font: 600 13px Poppins, sans-serif; background: #2a2a2a; color: #fff; border: 0; padding: 8px 12px; cursor: pointer; text-decoration: none; }
.robocza { position: fixed; left: 16px; top: 12px; z-index: 6; font: 600 12px Poppins, sans-serif; background: #C62828; color: #fff; padding: 4px 10px; opacity: .85; }

.slajd.zolty { background: var(--zolty); }
.slajd.krem { background: var(--krem); }
.slajd.ciemny { background: var(--tekst); color: #fff; }
.kolo { position: absolute; border-radius: 50%; pointer-events: none; }

.etykieta { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font-size: 17px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--szary); }
.etykieta::before { content: ""; width: 40px; height: 6px; background: var(--zolty); flex-shrink: 0; }
.ciemny .etykieta { color: var(--zolty); }
.zolty .etykieta { color: var(--tekst); }
.zolty .etykieta::before { background: var(--tekst); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 84px; line-height: 1.04; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 50px; line-height: 1.12; font-weight: 800; letter-spacing: -.005em; max-width: 1340px; }
h3 { font-size: 26px; line-height: 1.25; font-weight: 700; }
.lead { font-size: 27px; line-height: 1.5; max-width: 1180px; }
.maly { font-size: 18px; line-height: 1.5; color: var(--szary); }
.ciemny .maly { color: #BDBDBD; }
.liczba { font-weight: 800; font-variant-numeric: tabular-nums; }
.tn { font-variant-numeric: tabular-nums; }

.siatka { display: grid; gap: 24px; }
.k2 { grid-template-columns: 1fr 1fr; } .k3 { grid-template-columns: repeat(3, 1fr); } .k4 { grid-template-columns: repeat(4, 1fr); } .k5 { grid-template-columns: repeat(5, 1fr); }
.karta { border: 2px solid var(--kreska); padding: 28px 30px; background: #fff; }
.karta.krem { background: var(--krem); border-color: var(--krem); }
.karta.gora { border-top: 6px solid var(--zolty); }
.karta h3 { margin-bottom: 10px; }
.karta p { font-size: 20px; line-height: 1.5; }
.kafel .wartosc { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kafel .opis { margin-top: 12px; font-size: 15px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--szary); }
.kafel .pod { margin-top: 10px; font-size: 18px; line-height: 1.45; color: var(--szary); }
.ikona { width: 52px; height: 52px; border-radius: 50%; background: var(--zolty); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ikona svg { width: 26px; height: 26px; }

.pigulka { display: inline-block; padding: 6px 18px; border-radius: 999px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.w-destynacja { background: var(--ok-tlo); color: var(--ok); }
.w-posrodku { background: var(--sr-tlo); color: var(--sr); }
.w-lokalizacja { background: var(--zle-tlo); color: var(--zle); }
.pasek-destynacja { background: var(--ok); } .pasek-posrodku { background: #E8A33A; } .pasek-lokalizacja { background: var(--zle); }

.cytat { border-left: 6px solid var(--zolty); background: var(--krem); padding: 18px 24px; font-size: 20px; line-height: 1.5; font-style: italic; }
.cytat small { display: block; margin-top: 8px; font-style: normal; font-size: 15px; font-weight: 700; color: var(--szary); }
.ciemny .cytat { background: #2a2a2a; color: #fff; }

.przycisk { display: inline-flex; align-items: center; gap: 14px; background: var(--zolty); color: var(--tekst); font-size: 24px; font-weight: 800; padding: 20px 34px; text-decoration: none; border: 3px solid var(--zolty); }
.przycisk:hover { background: var(--tekst); color: var(--zolty); }
.przycisk.obrys { background: transparent; border-color: var(--tekst); }
.zolty .przycisk { background: var(--tekst); color: var(--zolty); border-color: var(--tekst); }
.ciemny .przycisk.obrys { border-color: #fff; color: #fff; }

/* paski ocen: skala 1 do 5 */
.paski { display: grid; gap: 14px; }
.pasek { display: grid; grid-template-columns: 300px 1fr 70px; align-items: center; gap: 18px; font-size: 19px; }
.pasek .tor { position: relative; height: 18px; background: var(--tlo); }
.pasek .wyp { position: absolute; left: 0; top: 0; bottom: 0; background: var(--zolty); }
.pasek .wyp.slaby { background: #E57373; }
.pasek .znacznik { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--tekst); }
.pasek .w { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.foto { width: 100%; height: 100%; object-fit: cover; background: var(--tlo); }
.foto-ramka { position: relative; overflow: hidden; background: var(--tlo); }
.foto-ramka figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: rgba(28,28,28,.78); color: #fff; font-size: 15px; line-height: 1.35; }
.znaczek { position: absolute; left: 12px; top: 12px; padding: 4px 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.znaczek.atut { background: var(--ok-tlo); color: var(--ok); }
.znaczek.problem { background: var(--zle-tlo); color: var(--zle); }
.znaczek.klimat, .znaczek.jedzenie { background: var(--krem); color: var(--tekst); }

table.tabela { width: 100%; border-collapse: collapse; font-size: 19px; }
.tabela th { text-align: left; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--szary); padding: 0 12px 12px; border-bottom: 2px solid var(--tekst); }
.tabela td { padding: 13px 12px; border-bottom: 1px solid var(--kreska); vertical-align: top; }
.tabela .p { text-align: right; }

.plansza { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.plansza a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; text-decoration: none; border: 2px solid var(--kreska); padding: 22px 16px 22px 22px; background: #fff; position: relative; }
.plansza a:hover { border-color: var(--tekst); }
.plansza a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; }
.plansza a.w-destynacja::before { background: var(--ok); } .plansza a.w-posrodku::before { background: #E8A33A; } .plansza a.w-lokalizacja::before { background: var(--zle); }
.plansza a.w-destynacja, .plansza a.w-posrodku, .plansza a.w-lokalizacja { color: var(--tekst); background: #fff; }
.plansza .nr { font-size: 14px; font-weight: 700; color: var(--szary); }
.plansza .nazwa { font-size: 19px; font-weight: 800; line-height: 1.15; }
.plansza .wynik { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.lista li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; font-size: 22px; line-height: 1.45; }
.lista li .num { width: 48px; height: 48px; border-radius: 50%; background: var(--zolty); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; color: var(--tekst); }
.ciemny .lista li { color: #fff; }

.priorytet { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; background: var(--tekst); color: #fff; }
.priorytet.p-teraz { background: var(--zle); }
.priorytet.p-30 { background: #E8A33A; color: var(--tekst); }
.priorytet.p-90 { background: var(--szary); }

.pole-wyniku { display: flex; align-items: baseline; gap: 10px; }
.pole-wyniku .liczba { font-size: 120px; line-height: .9; }
.pole-wyniku .z5 { font-size: 30px; font-weight: 700; color: var(--szary); }

/* ------------------------------------------------------------------ raport dla lokalu (A4) */
body.dokument-tlo { background: #F4F4F4; }
.pasek-druku { max-width: 960px; margin: 0 auto; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--szary); }
.pasek-druku button { font: 700 13px Poppins, sans-serif; background: var(--tekst); color: #fff; border: 0; padding: 8px 14px; cursor: pointer; }
.dokument { max-width: 960px; margin: 0 auto 40px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dokument .okladka { position: relative; overflow: hidden; background: var(--zolty); padding: 48px 56px 52px; }
.dokument .okladka h1 { font-size: 60px; margin-top: 36px; position: relative; }
.dokument .okladka p { position: relative; }
.dokument .tresc { padding: 8px 56px 48px; }
.dokument .etykieta { font-size: 11px; margin: 40px 0 16px; }
.dokument .etykieta::before { width: 24px; height: 4px; }
.dokument p, .dokument li { font-size: 15px; line-height: 1.6; }
.dokument .wstep { border-left: 4px solid var(--zolty); background: var(--krem); padding: 20px 22px; margin-top: 32px; }
.dokument .siatka { gap: 12px; }
.dokument .karta { padding: 18px 20px; border-width: 1px; }
.dokument .karta h3 { font-size: 16px; }
.dokument .kafel .wartosc { font-size: 34px; }
.dokument .kafel .opis { font-size: 10px; margin-top: 6px; }
.dokument .pasek { grid-template-columns: 210px 1fr 48px; font-size: 13px; gap: 12px; }
.dokument .pasek .tor { height: 12px; }
.dokument .pasek .znacznik { top: -4px; bottom: -4px; width: 2px; }
.dokument .paski { gap: 9px; }
.dokument table.tabela { font-size: 14px; }
.dokument .tabela th { font-size: 10px; }
.dokument .tabela td { padding: 10px 8px; }
.dokument .cytat { font-size: 14px; padding: 14px 16px; }
.dokument .galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dokument .galeria .foto-ramka { aspect-ratio: 4 / 3; }
.dokument .galeria figcaption { font-size: 11px; padding: 6px 8px; }
.dokument .ciemny-blok { background: var(--tekst); color: #fff; padding: 28px 30px; margin-top: 40px; }
.dokument .ciemny-blok .etykieta { color: var(--zolty); margin-top: 0; }
.dokument .ciemny-blok p, .dokument .ciemny-blok li { color: #fff; }
.dokument footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--kreska); margin-top: 40px; padding-top: 14px; font-size: 11px; color: var(--szary); }
.blok { break-inside: avoid; }

@media print {
  body.prezentacja { background: #fff; overflow: visible; }
  .scena { position: static; transform: none !important; width: auto; height: auto; }
  .slajd { position: relative; display: block !important; page-break-after: always; break-after: page; }
  .nawigacja, .postep, .robocza, .pasek-druku { display: none !important; }
  body.dokument-tlo { background: #fff; }
  .dokument { box-shadow: none; margin: 0; max-width: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page prezentacja { size: 1600px 900px; margin: 0; }
body.prezentacja .slajd { page: prezentacja; }
@page { size: A4; margin: 14mm 0; }
@page :first { margin-top: 0; }