/* ============================================================
   base.css — wspólny szkielet strony jakobczak.art
   BRAMA + TRZY ŚWIATY. Jeden szkielet, trzy skóry.
   Zero brązu w kompozycji. Tekst = grafit, kolor niosą zdjęcia.
   Komponenty (brama, hero świata, kafle, półka) dokładane
   w kolejnych krokach; tu żyje fundament i tokeny.
   ============================================================ */

:root{
  /* ---- PALETA BAZOWA (wspólna dla bramy i wszystkich światów) ---- */
  --papier:#F6F2EA;          /* papier — tło bramy i światów */
  --mleko:#E9E1D3;           /* mleko — ciche tło sekcji */
  --piasek:#D8CBB9;          /* piasek — cieplejszy detal/tło */
  --karta:#FBF9F4;           /* powierzchnia karty na papierze */

  /* tekst: grafit, NIGDY brąz */
  --grafit:#3A4147;          /* tekst główny */
  --grafit-mid:rgba(58,65,71,.72);   /* tekst drugorzędny */
  --grafit-dim:rgba(58,65,71,.54);   /* tekst przygaszony */
  --grafit-faint:rgba(58,65,71,.40); /* podpisy, meta */
  --line:rgba(58,65,71,.14);         /* kreski/obrysy */
  --line-soft:rgba(58,65,71,.08);

  /* ---- AKCENTY ŚWIATÓW — jedyne źródło prawdy (ZATWIERDZONE) ---- */
  --akcent-kamera-i-swiatlo:#4E6E7E;   /* stalowy błękit */
  --akcent-naturalne-tkaniny:#8E9B87;  /* szałwia */
  --akcent-outdoor:#55663F;            /* leśny mech */

  /* Akcent generyczny — nadpisywany przez słownik świata.
     Na bramie / stronach neutralnych = grafit (nie brąz). */
  --akcent:var(--grafit);
  --akcent-cicho:rgba(58,65,71,.10); /* tło akcentu, nadpisywane per świat */

  /* Tła świata — na neutralnych stronach = papier/mleko.
     Słownik świata nadpisuje na własną „skórę". */
  --swiat-tlo:var(--papier);
  --swiat-mleko:var(--mleko);
  --swiat-scrim:rgba(58,65,71,.06);

  /* ---- TYPOGRAFIA ---- */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;

  /* ---- WYMIARY ---- */
  --gap:20px;                /* margines boczny min */
  --maxw:1180px;             /* kontener bramy/świata */
  --measure:62ch;            /* szerokość kolumny tekstu */
  --radius:16px;
  --radius-sm:10px;
  --shadow-rest:0 1px 1px rgba(58,65,71,.11),0 10px 24px -12px rgba(58,65,71,.28);
  --shadow-lift:0 3px 5px rgba(58,65,71,.13),0 26px 52px -18px rgba(58,65,71,.40);
}

/* ---- RESET ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  background:var(--swiat-tlo);
  color:var(--grafit);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* ---- FOCUS — akcent świata, dostępny na papierze ---- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--akcent);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* ---- KONTENER ---- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gap);
}

/* ---- TYPOGRAFIA POMOCNICZA ---- */
.serif{font-family:var(--serif);font-weight:300;}
.eyebrow{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--grafit-faint);
}

/* Klasa pomocnicza: element dziedziczy akcent aktywnego świata */
.akcent{color:var(--akcent);}

/* ============================================================
   HEADER — jasny, na papierze, BEZ ciemnego pasa (brief)
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--gap);
  background:color-mix(in srgb,var(--swiat-tlo) 82%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.site-logo{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(.9rem,2.6vw,1rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--grafit);white-space:nowrap;
}
.site-nav{display:flex;align-items:center;gap:6px;}
.lang-toggle{display:flex;align-items:center;gap:2px;}
.lang-btn{
  min-width:42px;min-height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.1em;
  background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--grafit-dim);transition:color .2s,background .2s;
}
.lang-btn:hover{color:var(--grafit);background:var(--akcent-cicho);}
.lang-btn.active{color:var(--akcent);}
.lang-sep{color:var(--grafit-faint);font-size:.8rem;}

/* ============================================================
   STRONA GŁÓWNA (BRAMA) — wdrożenie handoff „Strona główna / kurtyna"
   (Claude Design). ŹRÓDŁO PRAWDY: paczka handoff — zastępuje wcześniejsze
   koncepcje kurtyny (2.0/3.0). Oświetlenie = reflektor + winieta + ziarno
   (bez słońca). Kurtyna zbiera się PRZY PRAWEJ krawędzi; Ludzik idzie przed
   krawędzią z ręką na tkaninie. Kurtyna rysowana per klatkę w js/brama-kurtyna.js.
   Klasy .home-* są samodzielne — nie ruszają .site-header/.site-footer światów.
   ============================================================ */
.home{
  min-height:100vh;background:var(--papier);
  display:flex;flex-direction:column;
  font-family:var(--sans);color:var(--grafit);
}

/* header / footer handoff */
.home-header,.home-footer{
  display:flex;align-items:center;justify-content:space-between;padding:26px 44px;
}
.home-header{border-bottom:1px solid rgba(58,65,71,0.10);}
.home-footer{
  border-top:1px solid rgba(58,65,71,0.10);margin-top:auto;
  font-size:12px;font-weight:300;letter-spacing:.08em;color:rgba(58,65,71,.5);
}
.home-logo{font-size:15px;font-weight:500;letter-spacing:.28em;color:var(--grafit);}
.home-lang{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em;}
.home-lang button{
  font-family:inherit;font-size:12px;letter-spacing:.16em;
  background:none;border:none;padding:4px 2px;cursor:pointer;color:rgba(58,65,71,.45);
}
.home-lang button.active{color:var(--grafit);font-weight:500;}
.home-lang .sep{color:rgba(58,65,71,.3);}

/* SCENA HERO — całość mieści się w jednym viewporcie (calc) */
.hero{position:relative;height:calc(100vh - 420px);min-height:360px;overflow:hidden;cursor:pointer;}
.hero-spot{
  position:absolute;left:50%;top:46%;width:1000px;height:560px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse closest-side,#FFFFFA 0%,rgba(255,254,246,.9) 35%,rgba(255,252,240,0) 100%);
  filter:blur(50px);pointer-events:none;
}
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 95% 85% at 50% 45%,rgba(58,65,71,0) 30%,rgba(74,86,94,.12) 52%,rgba(62,71,78,.26) 74%,rgba(48,55,61,.38) 100%);
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22 opacity=%220.5%22/%3E%3C/svg%3E');
  background-size:240px 240px;
}
.hero-inner{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 44px;
}
.hero-h1{
  margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(52px,6.5vw,94px);line-height:1.1;color:var(--grafit);text-wrap:balance;
}
.hero-h1 em{font-style:italic;color:#A8BCC4;}
.hero-cue{margin-top:38px;font-size:12px;font-weight:500;letter-spacing:.22em;color:rgba(58,65,71,.55);}
.hero-kurtyna{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none;}

/* KAFLE DZIAŁÓW */
.dzialy{padding:8px 44px 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;}
.kafel-wrap{filter:drop-shadow(0 14px 22px rgba(58,65,71,.22));}
.kafel-card{
  display:flex;flex-direction:column;height:170px;
  background:linear-gradient(180deg,#F6F2EA 0%,#E9E1D3 100%);
  border:1px solid rgba(58,65,71,.08);border-radius:10px;padding:18px 24px 16px;box-sizing:border-box;
  transition:transform .35s ease,box-shadow .35s ease;
}
@media (hover:hover){
  .kafel-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px -20px rgba(58,65,71,.4);}
}
/* dotyk: odczuwalne przyciśnięcie przy tapie (szybki press, płynny powrót) */
.kafel-card:active{transform:scale(.98);transition-duration:.1s;}
.kafel-ikona{display:flex;align-items:center;justify-content:center;height:68px;margin-top:2px;}
.kafel-tytul{
  margin:auto 0 0;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:23px;line-height:1.12;color:var(--grafit);align-self:flex-start;
}

/* wejście „stawianie na stole" — domyślnie WIDOCZNE (bez JS / powrót / reduced-motion);
   .intro chowa (snap), .intro.play animuje do stanu końcowego (delay per kafel z README).
   drop-shadow na wrapperze narasta dopiero w 2. połowie (filter delay). */
.dzialy.intro .kafel-wrap{
  opacity:0;transform:translateY(32px) scale(.94);
  filter:drop-shadow(0 2px 3px rgba(58,65,71,.05));transition:none;
}
.dzialy.intro.play .kafel-wrap{
  opacity:1;transform:none;filter:drop-shadow(0 14px 22px rgba(58,65,71,.22));
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .32s ease-out;
}
.dzialy.intro.play .kafel-wrap:nth-child(1){transition-delay:0s,0s,.3s;}
.dzialy.intro.play .kafel-wrap:nth-child(2){transition-delay:.14s,.14s,.44s;}
.dzialy.intro.play .kafel-wrap:nth-child(3){transition-delay:.28s,.28s,.58s;}

/* RWD: jedyne odstępstwo od prototypu — padding 44px to wartość desktopowa i na 390px
   przepełnia nagłówek/kafle; na mobile redukujemy poziomy padding (reszta 1:1 z handoffem) */
@media (max-width:767px){
  .home-header,.home-footer,.dzialy{padding-left:22px;padding-right:22px;}
  /* zawsze JEDNA kolumna (auto-fit dawał 2+1 przy ~600-767px) — kafle pełną szerokością */
  .dzialy{grid-template-columns:1fr;}
  /* hasło mniejsze na wąskim ekranie — czysto mija zebraną przy prawej kurtynę (bez kolizji) */
  .hero-h1{font-size:clamp(34px,8.5vw,48px);}
}
@media (prefers-reduced-motion:reduce){
  .dzialy.intro .kafel-wrap,.dzialy.intro.play .kafel-wrap{
    transition:none!important;opacity:1;transform:none;filter:drop-shadow(0 14px 22px rgba(58,65,71,.22));
  }
  .kafel-card{transition:none;}
}


/* ============================================================
   FOOTER — jasny
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  padding:clamp(28px,6vw,44px) var(--gap);
  max-width:var(--maxw);margin-inline:auto;
}
.site-footer-in{
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:baseline;justify-content:space-between;
}
.foot-name{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--grafit);}
.foot-name span{
  display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grafit-faint);margin-top:4px;
}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px;}
.foot-links a{
  display:inline-flex;align-items:center;min-height:42px;
  font-size:.86rem;color:var(--grafit-mid);transition:color .2s;
}
.foot-links a:hover{color:var(--akcent);}

/* ============================================================
   MOBILE (≤767px) — nadpisania na końcu, by wygrały kaskadę.
   ============================================================ */
@media (max-width:767px){
  .site-header{padding-top:10px;padding-bottom:10px;}
}

/* ============================================================
   ŚWIAT PIONU — szkielet (jeden, trzy skóry). Ruch oka wg Pack Hackera:
   PAS POWITALNY → SEKCJA → KARTY. Ale ZERO ocen — doradzamy „która dla kogo".
   Paleta/typografia ze słownika świata (--akcent, --swiat-tlo/-mleko).
   ============================================================ */
.swiat{
  --edge:clamp(20px,5vw,72px);
  background:var(--swiat-tlo);min-height:100svh;
  display:flex;flex-direction:column;
}
.swiat .site-header{
  padding-inline:var(--edge);
  background:color-mix(in srgb,var(--swiat-tlo) 82%,transparent);
}

/* PAS POWITALNY — 1/3 Ludzik na klimacie działu : 2/3 tekst dominuje */
.swiat-band{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line);}
@media (min-width:820px){.swiat-band{grid-template-columns:minmax(240px,1fr) 2fr;}}
.swiat-band-art{
  --ludzik-bg:var(--swiat-mleko);
  position:relative;overflow:hidden;background:var(--swiat-mleko);
  min-height:clamp(180px,24vh,240px);   /* zagęszczenie pionowe: niższy pas hero */
  border-right:1px solid var(--line);
}
.swiat-band-art .swiat-scena{position:absolute;inset:0;width:100%;height:100%;}
.swiat-band-tekst{
  display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.2vh,12px);
  padding:clamp(20px,3.4vw,44px) var(--edge);
}
.swiat-eyebrow{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grafit-faint);
}
.swiat-nazwa{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(2rem,4.8vw,3.1rem);line-height:1.03;letter-spacing:-.01em;color:var(--grafit);
}
.swiat-zdanie{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.02rem,1.9vw,1.3rem);line-height:1.28;color:var(--grafit-mid);max-width:42ch;
}

/* SEKCJA KATEGORII */
.swiat-sekcja{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(16px,2.6vh,30px) var(--edge) clamp(4px,1vh,10px);   /* odstępy sekcji -~45% */
}
.sekcja-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:clamp(10px,1.6vh,16px);
}
.sekcja-nazwa{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--grafit);}
.sekcja-pod{font-family:var(--sans);font-size:.92rem;color:var(--grafit-mid);}
.sekcja-wprzygotowaniu{
  margin-left:auto;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grafit-faint);
}
/* sekcja „w przygotowaniu" — maksymalnie zwarta: nagłówek + linia + etykieta, bez pustego pasa */
.swiat-sekcja--pusta{padding-top:clamp(10px,1.6vh,16px);padding-bottom:clamp(2px,.6vh,6px);}
.swiat-sekcja--pusta .sekcja-head{margin-bottom:0;padding-bottom:6px;}

/* KARTY PRODUKTÓW — packshot + nazwa + ETYKIETA SŁOWNA (NIGDY ocena/gwiazdka/procent) */
.karty{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.karta-prod{
  position:relative;display:flex;flex-direction:column;color:inherit;
  background:var(--karta);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-rest);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){.karta-prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}}
.karta-foto{aspect-ratio:16/10;background:var(--swiat-mleko);overflow:hidden;}   /* ciaśniejszy kadr → karta ~80% wys. */
.karta-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
@media (hover:hover){.karta-prod:hover .karta-foto img{transform:scale(1.04);}}
.karta-etykieta{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.03em;
  padding:5px 11px;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--akcent) 82%,#1E2A30);
  box-shadow:0 2px 8px -2px rgba(30,42,48,.55);
}
.karta-tresc{display:flex;flex-direction:column;gap:4px;padding:11px clamp(14px,2vw,18px) 12px;}
.karta-nazwa{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--grafit);}
.karta-link{margin-top:3px;display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:500;color:var(--akcent);}
.karta-link .arr{transition:transform .3s;}
@media (hover:hover){.karta-prod:hover .karta-link .arr{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){.karta-prod,.karta-foto img{transition:none;}}

/* MOBILE świata: pas na stos (Ludzik nad tekstem), karty pełną szerokością */
@media (max-width:819px){
  .swiat-band-art{border-right:none;border-bottom:1px solid var(--line);min-height:clamp(170px,26vh,230px);}
}
@media (max-width:520px){
  .karty{grid-template-columns:1fr;}
}