/* =====================================================================
   smacznejkawusi.pl, strona główna (landing), treść unikalna dla index.php
   Rama (header/footer/pasek oferty/.blok) siedzi w assets/css/wspolne.css.
   Kolory/kontury/cienie/komponenty bazowe: design/tokens.css.
   Referencja wizualna: design/makieta.html.
   ===================================================================== */

/* ---------- hero ---------- */
.hero{padding:52px 0 56px;position:relative;overflow:hidden}
.hero .kontener{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;position:relative}
.hero h1{font-size:clamp(42px,6vw,72px);color:var(--czerwien);margin:10px 0 0}
.hero .lead{font-size:16px;font-weight:500;margin:18px 0 24px;max-width:42ch}
.hero-akcje{display:flex;gap:14px;flex-wrap:wrap}

.karty-hero{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px;margin-bottom:12px}
.hero-karta{padding:16px}
.hero-karta h3{font-size:19px;margin:8px 0 6px}
.hero-karta p{font-size:14px}
.hero-karta a{display:inline-block;margin-top:10px;font-weight:700;color:var(--czerwien);text-underline-offset:3px}
.ikonka{width:26px;height:26px}

.ramka-foto{position:relative;padding:0 22px 22px 0}
.ramka-foto .tlo{position:absolute;left:-14px;top:16px;width:100%;height:100%;background:var(--mieta);border:var(--kontur)}
.ramka-foto .srodek{position:relative;background:var(--papier);border:var(--kontur);padding:14px}
.ramka-foto .zdjecie{aspect-ratio:1;background:var(--musztarda);border:var(--kontur);display:grid;place-items:center;text-align:center;overflow:hidden}
.ramka-foto .zdjecie span{font-size:13px;font-weight:600;max-width:64%}
.ramka-foto .zdjecie img{width:100%;height:100%;object-fit:cover;display:block}
.podpis-foto{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-weight:700}
.podpis-foto .cena{font-family:var(--display);font-size:22px;color:var(--czerwien)}
.kropki{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:14px}
.kropki i{width:13px;height:13px;border-radius:50%;border:var(--kontur);background:var(--mieta);display:block}
.kropki i.akt{background:var(--czerwien)}

/* ---------- liczby ---------- */
.liczby{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.liczba{padding:16px 16px 14px}
.liczba b{display:block;font-family:var(--display);font-size:34px;color:var(--czerwien);line-height:1}
.liczba span{font-size:13px;font-weight:600}

/* ---------- sklep ---------- */
.produkty{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.produkt{display:flex;flex-direction:column}
.produkt .foto{aspect-ratio:1;border-bottom:var(--kontur);border-top-left-radius:var(--promien);border-top-right-radius:var(--promien);
  display:grid;place-items:center;text-align:center;padding:10px;font-size:12px;font-weight:600;overflow:hidden}
.produkt .foto:has(img){padding:0}
.produkt .foto img{width:100%;height:100%;object-fit:cover;display:block}
.produkt:nth-child(1) .foto{background:var(--mieta)}
.produkt:nth-child(2) .foto{background:var(--musztarda)}
.produkt:nth-child(3) .foto{background:var(--losos)}
.produkt:nth-child(4) .foto{background:var(--mieta)}
.produkt .tresc{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.produkt h3{font-size:18px}
.produkt p{font-size:13px;font-weight:500;flex:1}
.produkt .dol{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.cena{font-family:var(--display);font-size:22px}

/* ---------- generator (pas-zajawka) ---------- */
.generator{background:var(--mieta);border-top:var(--kontur);border-bottom:var(--kontur)}
.generator .siatka{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.plotno{aspect-ratio:1;border:var(--kontur-gruby);box-shadow:var(--cien-duzy);
  display:grid;place-items:center;position:relative;overflow:hidden}
.plotno img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- galeria (zajawka) ---------- */
.galeria-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.galeria-siatka figure{margin:0;padding:8px}
.galeria-siatka .kadr{aspect-ratio:1;border:var(--kontur);overflow:hidden}
.galeria-siatka .kadr img{width:100%;height:100%;object-fit:cover;display:block}
.galeria-siatka figcaption{font-size:12px;font-weight:700;padding-top:7px}
.galeria-siatka figure:nth-child(odd){transform:rotate(-1.4deg)}
.galeria-siatka figure:nth-child(even){transform:rotate(1.2deg)}

.naglowek-bloku .cta-grupa{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- domena: opis dla kupujących ---------- */
.opis-domeny{padding:24px 26px;margin-bottom:22px}
.opis-domeny > p{font-size:14.5px;font-weight:500}
.opis-domeny h3{font-size:19px;margin:22px 0 10px}
.opis-domeny h3:first-child{margin-top:0}
.opis-domeny a{color:var(--atrament);text-underline-offset:3px}
.opis-domeny a:hover{color:var(--czerwien)}
.punkty{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.punkty li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;font-weight:500}
.punkty b{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--musztarda);
  border:var(--kontur);border-radius:50%;font-family:var(--display);font-size:14px;font-weight:400}

/* ---------- domena: statystyki Google Trends ---------- */
.panel-danych{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;margin-top:20px}
.panel{padding:18px}
.panel h3{font-size:20px;margin-bottom:4px}
.panel .pod{font-size:12px;font-weight:600;color:#6B5A44;margin-bottom:14px}

.wykres{width:100%;height:190px;display:block}

.zapytania{list-style:none;margin:0;padding:0}
.zapytania li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed #D9C7A6;font-size:14px}
.zapytania li:last-child{border-bottom:0}
.zapytania .fraza{flex:1;font-weight:600}
.zapytania .slupek{width:74px;height:9px;border:1.5px solid var(--atrament);background:var(--papier);flex:none}
.zapytania .slupek i{display:block;height:100%;background:var(--mieta)}
.zmiana{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border:1.5px solid var(--atrament);flex:none}
.zmiana.wzrost{background:var(--czerwien)}
.zmiana.plus{background:var(--mieta)}
.zmiana.minus{background:var(--papier)}

.regiony{list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:600}
.regiony li{display:grid;grid-template-columns:1fr 68px;gap:10px;align-items:center;padding:5px 0}
.regiony .slupek{height:11px;border:1.5px solid var(--atrament);background:var(--papier)}
.regiony .slupek i{display:block;height:100%;background:var(--musztarda)}

.zrodlo{font-size:12px;font-weight:500;margin-top:14px;color:#6B5A44}

/* ---------- domena: licznik ---------- */
.licznik-boks{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 18px;margin-top:20px}
.licznik-tytul{font-family:var(--display);font-size:20px}
.licznik-opis{font-size:13px;font-weight:500;margin-top:2px}
.licznik{display:flex;gap:5px}
.licznik i{font-family:var(--display);font-style:normal;font-size:28px;line-height:1;background:var(--atrament);color:var(--mieta);
  border:var(--kontur);padding:5px 9px}

/* ---------- domena: kontakt ---------- */
.kontakt{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:26px}
.formularz{padding:20px}
.formularz h3{font-size:26px;margin-bottom:6px}
.formularz-lead{font-size:14px;font-weight:500}
.pole{margin-top:14px}
.pole label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.pole input,.pole select,.pole textarea{
  width:100%;font-family:var(--tekst);font-size:15px;padding:11px 12px;background:var(--papier);
  border:var(--kontur);border-radius:var(--promien);color:var(--atrament);box-sizing:border-box}
.pole textarea{min-height:120px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;box-shadow:var(--cien-maly)}
.pulapka{position:absolute;left:-9999px}
.zgoda{font-size:12px;font-weight:500;margin-top:12px;color:#6B5A44}
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.komunikat{font-size:14px;font-weight:700;padding:10px 12px;border:var(--kontur);border-radius:var(--promien);margin:0 0 14px}
.komunikat-ok{background:var(--mieta)}
.komunikat-blad{background:var(--czerwien)}
.komunikat[hidden]{display:none}

.bok{display:flex;flex-direction:column;gap:20px}
.bok .panel h3{font-size:20px;margin-bottom:8px}
.bok p{font-size:14px;font-weight:500}
.mail{display:inline-block;font-family:var(--display);font-size:clamp(18px,2.2vw,24px);background:var(--musztarda);
  border:var(--kontur);box-shadow:var(--cien-maly);padding:8px 12px;margin:10px 0 4px;text-decoration:none;color:var(--atrament);word-break:break-all}

/* ---------- modal-żart (prawdziwy overlay, domyślnie ukryty) ---------- */
.scena{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.72);padding:44px 20px;
  display:grid;place-items:center;overflow-y:auto}
.scena[hidden]{display:none}
.modal{max-width:460px;padding:26px;text-align:center;position:relative}
.modal h3{font-size:30px;color:var(--czerwien);margin-bottom:10px}
.modal p{font-size:15px;font-weight:500;margin-bottom:18px}
.modal .zamknij{position:absolute;top:-14px;right:-14px;width:32px;height:32px;background:var(--musztarda);
  border:var(--kontur);font-family:var(--display);font-size:16px;line-height:1;display:grid;place-items:center;cursor:pointer}

@media(max-width:920px){
  .hero .kontener,.generator .siatka{grid-template-columns:1fr}
  .produkty,.galeria-siatka,.liczby{grid-template-columns:repeat(2,1fr)}
  .panel-danych,.kontakt,.dwa{grid-template-columns:1fr}
  .ramka-foto{padding:0 14px 14px 0}
}