/* v4 — PRZENIESIENIE. Generowane przez _scripts/buduj_landing_v4.py.
   Tu wyłącznie układ strony: przypięcia, szerokości, siatki sekcji.
   Wygląd komponentów: komponenty.css + komponenty-zero.css. */
html{scroll-behavior:smooth}
body{overflow-x:clip}
img{max-width:100%;display:block;height:auto}

/* matryca — pełna szerokość i wysokość okna */
#ak27-benefit-matrix-8{max-width:none;margin:0}
#ak27-benefit-matrix-8 .benefit-matrix{min-height:100svh}

/* pasek nawigacji na pełną szerokość, jak w v3 — logo stoi na marginesie strony,
   a ta sama linia (--krawedz) prowadzi wszystkie sekcje */
/* runda 20: .mega .wrap przeniesione do komponenty-zero.css — skrót padding:0 … zerował tu górny i dolny margines mega menu */
.pasek > .wrap{max-width:none;padding:0 var(--margines)}

/* edycja 2027 — wysokość rodziny deklaracji (--oddech). Cyfra ma stałe 1,8 × wysokości sekcji,
   więc na każdym ekranie widać tę samą część znaku, a przesuwa się w tempie przewijania jak obraz w tle */
#ak27-edition-overview-scroll-mark{display:block;position:relative;height:var(--oddech);
  min-height:0;padding:0;overflow:hidden}
#ak27-edition-overview-scroll-mark .eo-scena{position:relative;height:100%;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rynna);align-items:center;padding:0 var(--krawedz)}
#ak27-edition-overview-scroll-mark .mark{position:absolute;top:0;left:31%;font-size:calc(var(--oddech) * 1.8)}
#ak27-edition-overview-scroll-mark .facts{grid-column:8 / 13;position:relative;max-width:none}

/* poznaj go od środka — pełny ekran pod paskiem: nagłówek u góry, opis po lewej, książka wypełnia resztę.
   Szerokość książki wynika z miejsca w obu osiach (jednostki kontenera), format 1,463 zostaje */
/* runda 10: --papier = okładka wystająca spod kartek, węższa (Kasia: „pod spodem ten kwadrat mniejszy”);
   dolny oddech sekcji należy do białego pola „Co jest w środku” (--ie-dol), więc sekcja kończy się bez beżowego pasa */
#ak27-interior-explorer{--ie-pad:clamp(24px,4svh,56px);--papier:clamp(13px,1.1vw,19px);--ie-ster:64px;--ie-dol:clamp(72px,8vw,120px);
  display:block;box-sizing:border-box;padding:var(--ie-pad) var(--krawedz) 0}
/* runda 7: ekran książki to wewnętrzna siatka — elementy wnętrza pod spodem nie zabierają jej wysokości */
#ak27-interior-explorer .ie-ekran{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:var(--rynna);
  align-items:stretch;min-height:calc(var(--ekran) - 2 * var(--ie-pad))}
/* elementy wnętrza — pole marginesu należy do strzałek, jak w opiniach */
#ak27-interior-explorer .ie-elementy .szyna-ramka{position:relative;margin-inline:calc(-1 * var(--krawedz))}
#ak27-interior-explorer .elementy-tor{padding:0 var(--krawedz);scroll-padding-inline:var(--krawedz)}
#ak27-interior-explorer .ie-elementy .strzalki{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;padding:0 max(0px,calc((var(--krawedz) - 44px) / 2));pointer-events:none}
#ak27-interior-explorer .ie-elementy .strzalki button{pointer-events:auto}
#ak27-interior-explorer .ie-elementy .strzalki[hidden]{display:none}
#ak27-interior-explorer .ie-naglowek{max-width:none;margin:0 0 clamp(16px,2.4svh,32px)}
#ak27-interior-explorer .ie-uklad{max-width:none;margin:0;min-height:0;display:grid;
  grid-template-columns:clamp(240px,18vw,460px) minmax(0,1fr);gap:clamp(32px,3.5vw,72px);align-items:stretch}
/* runda 11 (Kasia: „poznaj go od środka — popraw górny margines, jest za duży”): opis wyśrodkowany w pionie zostawiał
   ok. 220 px pustego pola nad licznikiem — teraz licznik stoi na wysokości górnej krawędzi strony w książce */
/* runda 15 (Kasia: „przenieśmy opis na środek — wyśrodkuj w pionie, bo teraz źle się to czyta podczas przeglądania”):
   kolumna opisu ma wysokość książki (dolny margines = sterowanie pod książką), opis stoi na jej środku */
#ak27-interior-explorer .explorer-copy{align-self:stretch;display:grid;align-items:center;padding:0 0 calc(var(--ie-ster) + 20px)}
/* runda 13 (Kasia: „Cele na rok… jest za wysoko — wyrównaj do górnej krawędzi książki”): górna krawędź wersalików tytułu
   = górna krawędź okładki, niezależnie od kroju i interlinii (text-box przycina pusty naddatek nad literami) */
/* wydłużenia i znaki diakrytyczne (l, k, ó, ś) wystają ok. 2 px ponad wersaliki — 2 px w dół stawia najwyższy tusz na linii okładki */
#ak27-interior-explorer .explorer-copy h3.podtytul{text-box:trim-start cap alphabetic;margin-top:2px}
#ak27-interior-explorer .explorer-copy > *{grid-area:1 / 1;align-self:center}
#ak27-interior-explorer .ec-miara{visibility:hidden;pointer-events:none}
#ak27-interior-explorer .ie-makieta{container-type:size;min-height:0;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:flex-end;
  --ie-w:min(100cqw,calc((100cqh - var(--ie-ster) - 2 * var(--papier)) * 1.463 + 2 * var(--papier)))}
/* runda 12 (Kasia: „górna krawędź nadal za duża, ma być taka sama jak po lewej, prawej i u dołu”): z boków i u dołu 6 px
   marginesu zajmuje stos kartek, więc widoczne złoto miało 11,5 px u góry i ok. 6 px z pozostałych stron (pomiar 1512 @2x) */
#ak27-interior-explorer .book-stage{flex:none;width:var(--ie-w);aspect-ratio:auto;padding:max(2px,calc(var(--papier) - var(--stos,6px))) var(--papier) var(--papier);overflow:visible}
#ak27-interior-explorer .ie-ster{width:var(--ie-w);display:flex;align-items:center;justify-content:space-between;margin-top:20px}
@supports not (width:1cqw){#ak27-interior-explorer .book-stage,#ak27-interior-explorer .ie-ster{width:100%}}

/* szyny — nagłówek na krawędzi logo, strzałki na wysokości środka nagłówka */
.rail-naglowek{max-width:none;margin:0 0 clamp(28px,3vw,44px);padding:0 var(--krawedz);display:flex;
  align-items:center;justify-content:space-between;gap:24px}
#spec-track,#opinie-tor{padding:0 var(--krawedz)}

/* co dostajesz — runda 5: kafle 3:4 o 1/3 wysokości toru z rundy 4 (221/258/360 px przy 1512/1920/2560),
   sekcja według treści w rytmie szyn; kafle rozłożone od linii do linii krawędzi, więc strzałki znikają */
/* weryfikacja: rozkład od linii do linii dawał „wyspy” (odstęp ≈ kafel) — kafle stoją od linii logo w rytmie szyn;
   dolny oddech mniejszy, bo następna biała sekcja zaczyna się własnym paddingiem nagłówka */
#ak27-specification-rail{display:block;height:auto;padding:clamp(72px,8vw,120px) 0 clamp(40px,4.5vw,72px)}
#ak27-specification-rail .rail-naglowek{margin-bottom:clamp(24px,3.2svh,44px)}
#spec-track{--spec-h:clamp(180px,calc((var(--ekran) - 2 * clamp(40px,6svh,88px) - 69px - clamp(24px,3.2svh,44px)) / 3),380px);
  align-items:flex-start;justify-content:flex-start}
#spec-track .spec-item{flex:0 0 auto;height:var(--spec-h);width:auto;min-width:0;aspect-ratio:3/4;box-sizing:border-box}
/* runda 6 (Kasia: „dodaj kolejne kafle, w sumie ma być ich 8”): osiem równych kolumn od linii do linii —
   przy 1512 / 1920 / 2560 kafel 3:4 wychodzi ≈ 152 / 199 / 279 px szerokości, blisko 1/3 wysokości z rundy 4 */
@media(min-width:861px){
  #spec-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  #spec-track .spec-item{height:auto;width:auto}
}
@media(min-width:1280px){#spec-track{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* 4 × 2 na laptopach i tabletach: kafle 3:4 przerastały okno (sekcja wyższa niż 768 px) — tu 4:3 */
@media(min-width:861px) and (max-width:1279px){#spec-track .spec-item{aspect-ratio:4/3}}

/* siatki M° i C° — dwie kolumny, dopóki w trzech karta byłaby węższa niż 308 px
   (licznik ilości i „Dodaj do koszyka” w jednym rzędzie; Kasia, runda 6: „tak, zrób 2 kolumny wtedy”) */
/* próg 1870, nie 1830: przy 1830 treść karty miała 306,1 px wobec potrzebnych 306 — zero zapasu na pasek przewijania i skalę.
   Poniżej ok. 1185 px (iPad) karta nadal jest za wąska na jeden rząd — akcja świadomie schodzi w dwa pełne rzędy */
@media(min-width:861px) and (max-width:1869px){
  #ak27-collection-product-grid-left-intro .product-grid,
  #ak27-collection-product-grid-right-intro .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* C° ma 3 karty: trzecia stoi w kolumnie przy panelu C°, zamiast zostawiać pustą komórkę obok litery */
  #ak27-collection-product-grid-right-intro .product-grid > .karta:last-child:nth-child(odd){grid-column:2}
}

/* kto korzysta i „co mówicie” — pięć kart w widoku, minimalny margines od krawędzi okna (runda 5: nie przyklejone).
   Runda 41: flex zamiast siatki pięciu kolumn. Przy dziesięciu kartach siatka zawijała je w drugi rząd,
   tor nigdzie nie wystawał, więc strzałki same się chowały (Kasia: „5 sekcji ze strzałkami prawo lewo”). */
#people-tor,#dla-kogo-tor{display:flex;flex-wrap:nowrap;gap:clamp(8px,.7vw,12px);
  padding:0 var(--rynna);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--rynna);scrollbar-width:none}
#people-tor::-webkit-scrollbar,#dla-kogo-tor::-webkit-scrollbar{display:none}
@media(min-width:861px){
  /* basis liczony od wnętrza toru (procent pomija padding), więc pięć kart mieści się co do piksela */
  #people-tor > .people-card,#dla-kogo-tor > .people-card{
    flex:0 0 calc((100% - 4 * clamp(8px,.7vw,12px)) / 5);scroll-snap-align:start}
}

/* opinie — strzałki po bokach toru, w polu marginesu, na wysokości środka kart */
#ak27-testimonial-rail .szyna-ramka{position:relative}
#ak27-testimonial-rail .strzalki{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;padding:0 max(0px,calc((var(--krawedz) - 44px) / 2));pointer-events:none}
#ak27-testimonial-rail .strzalki button{pointer-events:auto}
#ak27-testimonial-rail .strzalki[hidden]{display:none}

/* rozszerz perspektywę — dużo oddechu nad i pod (runda 5 odwraca „produkty zaraz pod spodem” z rundy 1) */
#ak27-companion-products-focus{padding-top:clamp(120px,12vw,220px);padding-bottom:clamp(120px,12vw,220px)}
#ak27-companion-products-focus header{margin-bottom:clamp(56px,6vw,96px)}

/* wybierz spośród — oddech nad i pod jak w sekcjach treściowych, świat kolekcji na wysokość ekranu */
#ak27-collection-selector .sekcja-naglowek{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(32px,3.4vw,56px)}
#ak27-collection-selector .collection-world{min-height:var(--ekran)}
#ak27-collection-selector .kolekcje-nota{padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(72px,8vw,120px)}

/* moduły 27–29 — jawnie odsunięte z przepływu */

@media(max-width:860px){
  #ak27-edition-overview-scroll-mark .mark{left:50%}
  #ak27-edition-overview-scroll-mark .facts{grid-column:1 / -1;align-self:center}
  #ak27-interior-explorer{display:block;min-height:0;padding:clamp(56px,10vw,88px) var(--krawedz) 0;--ie-dol:clamp(56px,10vw,88px)}
  #ak27-interior-explorer .ie-ekran{display:block;min-height:0}
  #ak27-interior-explorer .ie-elementy .strzalki{padding:0 4px}
  #ak27-interior-explorer .ie-uklad{grid-template-columns:minmax(0,1fr)}
  #ak27-interior-explorer .explorer-copy{padding-bottom:0}
  /* runda 6: 9 rozkładówek = 9 kresek; strzałki + kreski (≈376 px) nie mieściły się w 350 px i pchały stronę w bok */
  #ak27-interior-explorer .ie-ster .kroki{gap:4px}
  #ak27-interior-explorer .ie-makieta{container-type:normal;--ie-w:100%}
  #ak27-specification-rail{padding:clamp(56px,12vw,88px) 0}
  #spec-track{justify-content:flex-start}
  /* 2,3 kafla na ekranie: przy 3 etykieta „106 rozkładówek” wystawała z kafla, a wartość była mniejsza od etykiety */
  #spec-track .spec-item{height:auto;flex:0 0 calc((100% - 2 * clamp(12px,1.4vw,20px)) / 2.3)}
  /* telefon: strzałki opinii zostają (Kasia: przewijanie kontekstowe), mniejsze, na brzegach kart */
  #ak27-testimonial-rail .strzalki{padding:0 4px}
  /* jeden gest = jedna karta; „proximity” zostawiało szynę między kartami (weryfikacja rundy 7) */
  #opinie-tor{scroll-snap-type:x mandatory}
  #opinie-tor .opinia{scroll-snap-stop:always}
  /* runda 30 (weryfikacja): tory zdjęć jak opinie — „proximity” zatrzymywało tor z kartą uciętą w połowie */
  #people-tor,#dla-kogo-tor{scroll-snap-type:x mandatory}
  #people-tor .people-card,#dla-kogo-tor .people-card{scroll-snap-stop:always}
  #ak27-companion-products-focus{padding-top:clamp(88px,20vw,120px);padding-bottom:clamp(88px,20vw,120px)}
  #ak27-collection-selector .collection-world{min-height:0}
  #ak27-benefit-matrix-8 .benefit-matrix{min-height:0}
  #people-tor,#dla-kogo-tor{display:flex;padding:0 var(--krawedz);overflow-x:auto}
}