/* ==========================================================================
   STRONA GŁÓWNA
   Wczytywana wyłącznie na stronie startowej (inc/enqueue.php → mp_ekran()).
   Wartości przepisane z podglądu handoff/podglad-html/index.html; wszystkie
   kolory idą przez tokeny --mp-* ze style.css. Odcienie, których w tokenach
   nie ma, siedzą niżej jako zmienne lokalne — surowych wartości w regułach
   nie ma nigdzie.
   ========================================================================== */

.mp-glowna{
  /* Odcienie występujące wyłącznie na tej podstronie. */
  --g-hero-tlo:#F7F3F0;       /* tło pierwszego ekranu — korekta, punkt 7 */
  --g-atrament-wzoru:#2E2218; /* wybrana zakładka — punkt 3; napis --mp-paper 13,64:1 */
  --g-zakladka:#7F7265;       /* napis nieaktywnej zakładki; 4,52:1 na --mp-cream */
  --g-hero-em:#8E7856;        /* kursywa w H1; 3,83:1 na --g-hero-tlo — próg
                                 dla tekstu wielkiego (40–108 px) to 3:1 */
  --g-rule:#B7A894;           /* kreski przy nadtytule w hero */
  --g-rule-band:#C4B7A6;      /* kreski na pasach --mp-band */
  --g-rule-stone:#B8AC9C;     /* kreski na pasie --mp-stone */
  --g-siatka:#E9E2D8;         /* spoiny siatki kolekcji */
  --g-kafel:#FBF8F4;          /* tło kafla kolekcji */
  --g-kadr:#F4F0EA;           /* tło kadru ilustracji */
  --g-licznik:#9C8C71;        /* wielka liczba „06” nad kolekcjami */
  --g-tag:#D2C9BC;            /* obwódka etykiet przy biogramie */
  --g-linia-kontakt:#E2DAD0;  /* linie w sekcji kontaktu */
  --g-social-hover:#E4DFD8;
}

/* --------------------------------------------------------------------------
   ELEMENTY WSPÓLNE SEKCJI
   -------------------------------------------------------------------------- */

/* Nadtytuł: kreska + wersalik. W hero kreski są po obu stronach. */
.mp-glowna-oko{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 0 22px;
}
.mp-glowna-oko i{ width:32px; height:1px; background:var(--mp-rule); display:block; flex:0 0 auto; }
.mp-glowna-oko span{
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-glowna-oko--srodek{ justify-content:center; margin-bottom:clamp(18px,2vw,28px); }
.mp-glowna-oko--srodek i{ width:36px; background:var(--g-rule); }
.mp-glowna-oko--srodek span{ line-height:1.6; }
.mp-glowna-oko--band i{ background:var(--g-rule-band); }
.mp-glowna-oko--stone i{ background:var(--g-rule-stone); }

.mp-glowna-naglowek--srodek{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:clamp(28px,3.6vw,46px);
}
/* 30 px do paska zakładek — jak we wzorze (.aa-sub). */
.mp-glowna-wyroznione .mp-glowna-naglowek--srodek{ margin-bottom:30px; }
.mp-glowna-naglowek--rzad{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,3.4vw,44px);
}
.mp-glowna-naglowek--szeroki{ gap:28px; margin-bottom:clamp(28px,3.8vw,50px); }

.mp-glowna-naglowek__oko{
  margin:0 0 18px; font:400 11px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-glowna-naglowek__tytul{
  margin:0; font:300 clamp(30px,4.2vw,54px)/1.06 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-glowna-naglowek__tytul--duzy{ font-size:clamp(32px,4.6vw,62px); line-height:1.08; }
.mp-glowna-naglowek__tytul em{ font-style:italic; color:var(--mp-focus); }
.mp-glowna-naglowek__lead{
  margin:16px 0 0; max-width:500px;
  font:300 14px/1.85 var(--mp-sans); color:var(--mp-body);
  letter-spacing:.004em; text-wrap:pretty;
}
.mp-glowna-naglowek__lead--szeroki{ max-width:520px; }

/* Przyciski i odnośniki tekstowe. */
.mp-glowna-btn{
  background:var(--mp-ink); color:var(--mp-paper);
  padding:19px 38px; min-height:var(--mp-tap);
  display:inline-flex; align-items:center; justify-content:center;
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase;
}
.mp-glowna-btn:hover{ background:var(--mp-strong); color:var(--mp-paper); }

.mp-glowna-btn-obwodka{
  border:1px solid var(--mp-rule); padding:18px 40px; min-height:var(--mp-tap);
  display:inline-flex; align-items:center; justify-content:center;
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--mp-ink); transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.mp-glowna-btn-obwodka:hover{
  background:var(--mp-ink); color:var(--mp-paper); border-color:var(--mp-ink);
}

.mp-glowna-link{
  display:inline-flex; align-items:flex-end; min-height:var(--mp-tap);
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--mp-body); border-bottom:1px solid var(--g-rule); padding-bottom:7px;
}
.mp-glowna-link:hover{ color:var(--mp-ink); border-bottom-color:var(--mp-ink); }
.mp-glowna-link--ciemny{ color:var(--mp-ink); border-bottom-color:var(--mp-rule); padding-bottom:8px; }

.mp-glowna-wiecej{
  display:flex; justify-content:center; margin:clamp(34px,4.4vw,58px) 0 0;
}

/* Siatki kafli. Trzy kolumny na monitorze, dwie na telefonie — próg 860 px
   odpowiada przełącznikowi mobile z podglądu. Wariant czterokolumnowy
   dziedziczy po .mp-grid--4 ze style.css, tutaj tylko odstępy z makiety. */
.mp-glowna-siatka4{ gap:clamp(26px,3vw,44px) clamp(14px,2.2vw,32px); }
/* minmax(0,1fr) — powód przy .mp-grid--4 w style.css (punkt 8). */
.mp-glowna-siatka3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);
  list-style:none; margin:0; padding:0;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* Jednolite tło bez zdjęć (korekta z 10 września 2026, punkt 7): napisy
   z plakatów kolażu wchodziły na nadtytuł i tytuł. 22 px pod nawigacją, jak
   we wzorze (punkt 6) — cały pierwszy ekran, ze strzałką, mieści się w oknie
   wysokim na 780 px. Odstępy wewnątrz są ściągnięte z tego samego powodu:
   przy samych 22 px strzałka wychodziła 10–35 px poza kadr. */
.mp-glowna-hero{
  position:relative; overflow:hidden; background:var(--g-hero-tlo);
  padding:22px 0 clamp(66px,10vw,156px);
}
.mp-glowna-hero__tresc{
  position:relative; max-width:var(--mp-max); margin:0 auto;
  padding-inline:var(--mp-gut);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.mp-glowna-hero__tytul{
  margin:0; font:300 clamp(40px,7.4vw,108px)/.95 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-glowna-hero__tytul em{ font-style:italic; color:var(--g-hero-em); }
.mp-glowna-hero__lead{
  margin:clamp(18px,2vw,28px) 0 0; max-width:540px;
  font:300 clamp(14px,1.1vw,16px)/1.85 var(--mp-sans);
  color:var(--mp-body); text-wrap:pretty;
}
.mp-glowna-hero__akcje{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(14px,2.2vw,30px); margin-top:clamp(22px,2.2vw,32px);
}
/* Strzałka zachęcająca do przewijania — czysta ozdoba, pusty kontener.
   Bez napisu (9-pikselowe „Scroll” wzoru nie spełnia kontrastu) i bez
   pulsowania w nieskończoność, którego nie da się zatrzymać (WCAG 2.2.2).
   Kreska 28 px i 12 px nad nią: z 32 px i 16–24 px zapas pod strzałką
   wynosił przy 1536×780 tylko 11 px, a przy 1280×720 wychodziła 1 px poza
   kadr. Teraz 27 i 13 px — nagłówek (obszar D) ma o tyle luzu. Margines
   stały, nie w vw: ułamek piksela przesuwałby wszystkie sekcje poniżej
   i psuł zrzuty wzorca (glowna-1-1) w sekcjach bez zmian. */
.mp-glowna-hero__przewin{
  position:relative; display:block; flex:0 0 auto;
  width:1px; height:28px; margin:12px auto 0;
  background:var(--mp-focus);
}
.mp-glowna-hero__przewin::after{
  content:''; position:absolute; left:-3px; bottom:0; width:6px; height:6px;
  border-right:1px solid var(--mp-focus); border-bottom:1px solid var(--mp-focus);
  transform:rotate(45deg);
}

/* Kaskadowe wejście pierwszego ekranu (punkt 8): nadtytuł, tytuł, podtytuł,
   przyciski, strzałka — każdy z przezroczystości i 16 px niżej, w 0,6 s,
   co 100 ms. Samo CSS, bez obserwatora i bez skryptu: fill-mode both
   trzyma element niewidocznym do jego kolejki, a potem zostawia na miejscu.

   Reguła istnieje wyłącznie przy braku prośby o ograniczenie ruchu.
   Globalne „reduce” w style.css skraca czas animacji, ale nie opóźnienie —
   gdyby animacja była zawsze, a wyłączana dopiero tam, tytuł i tak czekałby
   niewidoczny swoje 100–400 ms.

   UWAGA, ZANIM ZACZNIESZ TO NAPRAWIAĆ. Runda 2 korekty (punkt 7) wróciła
   z zarzutem „treść pojawia się bez animacji — dwa zrzuty w odstępie dwóch
   sekund są identyczne”. Zrzuty są identyczne dlatego, że KASKADA KOŃCZY SIĘ
   W 1,06 s od pierwszej odsłony, a nie dlatego, że jej nie ma. Zmierzone
   24 września 2026 w każdej klatce odświeżania: nadtytuł wychodzi
   z przezroczystości w 114 ms i ma pełne krycie w 665, tytuł 215 → 766,
   podtytuł 315 → 866, przyciski 414 → 965, strzałka 514 → 1066 ms;
   34 klatki ruchu i 16,0 px przesunięcia na każdy element. To samo przy
   390 px i w WebKicie.

   Z tych liczb KONTRAKTEM są trzy: 16 px, 0,6 s i odstęp 100 ms — stoją
   w regule niżej i odtwarzają się co do jednego wszędzie. Momenty startu,
   momenty pełnego krycia i liczba klatek są ORIENTACYJNE: zależą od chwili
   pierwszej odsłony i od obciążenia maszyny (ten sam pomiar powtórzony tego
   samego dnia dał start 132–527 ms, a na innej maszynie 157–559 ms i 23
   klatki zamiast 34). Inna liczba w tych trzech miejscach nie jest
   regresją. Klatki: docs/zrzuty/glowna-kaskada-wejscia.png,
   pomiar od nowa: node narzedzia/glowna-kaskada.js pomiar, opis
   z przypadkami brzegowymi (powrót „Wstecz”, wolne łącze, karta w tle):
   docs/STRONA-GLOWNA-ELEMENTOR.md, sekcja „Kaskada wejścia”. */
@keyframes mpWejscie{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  .mp-glowna-hero .mp-glowna-oko,
  .mp-glowna-hero__tytul,
  .mp-glowna-hero__lead,
  .mp-glowna-hero__akcje,
  .mp-glowna-hero__przewin{ animation:mpWejscie .6s ease both; }
  .mp-glowna-hero__tytul{ animation-delay:.1s; }
  .mp-glowna-hero__lead{ animation-delay:.2s; }
  .mp-glowna-hero__akcje{ animation-delay:.3s; }
  .mp-glowna-hero__przewin{ animation-delay:.4s; }
}

/* --------------------------------------------------------------------------
   O PRACOWNI
   -------------------------------------------------------------------------- */

.mp-glowna-pracownia{ background:var(--mp-cream); padding:clamp(56px,8vw,130px) 0; }
.mp-glowna-pracownia__uklad{
  max-width:var(--mp-max); margin:0 auto; padding-inline:var(--mp-gut);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(40px,6vw,96px); align-items:center;
}
.mp-glowna-pracownia__tytul{
  margin:0 0 26px; font:300 clamp(32px,4.4vw,60px)/1.08 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-glowna-pracownia__tytul em{ font-style:italic; color:var(--mp-focus); }
.mp-glowna-pracownia__akapit{
  margin:0 0 20px; max-width:560px;
  font:300 15px/1.88 var(--mp-sans); color:var(--mp-body-2);
  letter-spacing:.004em; text-wrap:pretty;
}
.mp-glowna-pracownia__akapit:last-of-type{ margin-bottom:26px; }

.mp-glowna-liczby{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--mp-line); border-left:1px solid var(--mp-line);
  list-style:none; margin:0; padding:0;
}
.mp-glowna-liczby li{
  border-right:1px solid var(--mp-line); border-bottom:1px solid var(--mp-line);
  padding:clamp(22px,3vw,44px) clamp(16px,2.2vw,32px);
}
.mp-glowna-liczby__wartosc{
  display:block; font:300 clamp(32px,4vw,54px)/1 var(--mp-serif);
  color:var(--mp-deep);
}
.mp-glowna-liczby__etykieta{
  display:block; margin-top:12px;
  font:400 11px/1.6 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-body);
}

/* --------------------------------------------------------------------------
   WYRÓŻNIONE PLAKATY — zakładki Bestsellery / Nowości / Wyróżnione
   -------------------------------------------------------------------------- */

/* Biały pas pod produktami (korekta z 10 września 2026, punkt 2) — ten sam
   efekt co w katalogu: biały kafel bez ramki na białej stronie, oddzielony
   tylko cieniem. Górny odstęp jest nowy: dotąd sekcja nie miała go wcale,
   bo ciągnęła kremowe tło „O pracowni”, a na białym pasie nadtytuł
   dotykałby krawędzi. Wartość jak w Kompletach. */
.mp-glowna-wyroznione{ background:var(--mp-white); padding:clamp(52px,7.5vw,112px) 0 clamp(56px,8vw,124px); }

/* Zakładki (punkt 3): wyśrodkowane, co 36 px, wersaliki 12 px z rozstrzeleniem,
   cienka ramka na jasnym tle; wybrana — ciemne tło #2E2218 z jasnym napisem.
   Pasek ma atrybut hidden, dopóki skrypt go nie odsłoni — bez skryptu
   przyciski nic by nie robiły. Własne display pokonałoby hidden, stąd
   :not([hidden]). Odstępy 30 px nad paskiem i 44 px pod nim — jak we wzorze.
   Odstęp 36 px obowiązuje na każdej szerokości; trzy przyciski przestają
   się mieścić w jednym rzędzie dopiero poniżej 537 px i wtedy zawijają się
   dwa plus jeden, każdy rząd wyśrodkowany. */
.mp-glowna-zakladki__lista:not([hidden]){
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:12px 36px; margin:0 0 44px;
}
/* Nieaktywny napis #7F7265, nie #96887A z tabeli wzoru: tamten ma na tle
   zakładki 3,34:1 przy tekście 12 px. To najbliższy odcień tej samej barwy,
   który przechodzi 4,5:1 (4,52). Wysokość 44 px — cel dotykowy.
   Ramka --mp-rule (#CFC3B2, 1,74:1 na bieli), nie --mp-line jak linia wzoru
   (rgba(90,80,71,.11) ≈ 1,2:1): na białym pasie ramka 1,26:1 znikała
   i przycisk rozpoznawało się wyłącznie po napisie. Ten sam token ma
   przycisk „Filtry” w sklepie (.mp-filters-toggle) — ta sama kontrolka:
   wersaliki 11–12 px z rozstrzeleniem w cienkiej ramce. */
.mp-glowna-zakladki__tab{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--mp-tap); margin:0; padding:0 24px;
  border:1px solid var(--mp-rule); border-radius:0; background:var(--mp-cream);
  font:400 12px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--g-zakladka); white-space:nowrap; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Stany wypisane jawnie: style.css zeruje tło, kolor i ramkę każdego
   przycisku przy :hover i :focus (reset Hello Elementora maluje je na
   magentę), a tamta reguła ma tę samą szczegółowość. */
.mp-glowna-zakladki__tab:hover,
.mp-glowna-zakladki__tab:focus{
  background:var(--mp-cream); color:var(--g-atrament-wzoru); border-color:var(--mp-rule-mocny);
}
.mp-glowna-zakladki__tab[aria-selected="true"],
.mp-glowna-zakladki__tab[aria-selected="true"]:hover,
.mp-glowna-zakladki__tab[aria-selected="true"]:focus{
  background:var(--g-atrament-wzoru); border-color:var(--g-atrament-wzoru); color:var(--mp-paper);
}
/* Obwódka fokusu w kolorze tokenu (--mp-focus, 4,47:1 na białym pasie).
   Reset Hello Elementora maluje ją na czarno regułą
   [tabindex]:not([tabindex="-1"]):focus-visible o szczegółowości (0,3,0),
   która wygrywa z :focus-visible ze style.css (0,1,0) — stąd dwie klasy
   i pseudoklasa: ta sama szczegółowość, późniejszy arkusz. */
.mp-glowna-zakladki__lista .mp-glowna-zakladki__tab:focus-visible{
  outline:2px solid var(--mp-focus); outline-offset:3px;
}
/* Blok zawierający dla nagłówka, który skrypt chowa klasą screen-reader-text
   (position:absolute) — inaczej zaczepiałby się o początek strony. */
.mp-glowna-zakladki__panel{ position:relative; }
/* Bez skryptu trzy listy stoją jedna pod drugą, każda z nagłówkiem. Przy
   działających zakładkach widać jedną, więc odstęp jest tylko w tym widoku. */
.mp-glowna-zakladki:not(.mp-glowna-zakladki--js) .mp-glowna-zakladki__panel + .mp-glowna-zakladki__panel{
  margin-top:clamp(44px,5vw,72px);
}
.mp-glowna-zakladki__naglowek{
  margin:0 0 28px; text-align:center;
  font:300 clamp(24px,2.4vw,32px)/1.2 var(--mp-serif); color:var(--mp-ink);
}

/* Galeria zakładek — kafel bierze kadr 5:7 ze style.css (runda 2, punkt 1).
   Do 23 września kafel miał tu stałą wysokość 300 px przy szerokości 285 px
   (proporcja 0,95), a plakat był w nim wyśrodkowany i ograniczony do 1/1,04
   boku: zajmował 206 z 285 px i zostawiał po bokach 78 px pustego pola.
   Teraz kafel ma proporcję plakatu, a obraz wypełnia kadr — nie ma czego
   ograniczać, więc znika i ta wysokość, i ograniczenie do 96%.

   Skutek uboczny powiększenia o 4%: plakat wypełnia kadr, więc przy
   najechaniu wychodzi poza niego o 2% z każdej strony i kadr go tam przycina
   (overflow:hidden). Tak działa wzór aboutanatomy.com i tak samo zachowuje
   się kafel w katalogu — plakat na chwilę „podchodzi”, a nie „oddycha”
   w pustym polu, którego już nie ma.

   Szerokość kafla (285 px przy 1440 px okna) jest podstawą atrybutu `sizes`
   plakatów w template-parts/glowna/zakladki.php — zmiana siatki tutaj
   wymaga zmiany tam. */

/* Dwa ruchy naraz, jak we wzorze: cała karta unosi się o 6 px w 0,3 s,
   a plakat w środku rośnie o 4% wolniej, w 0,6 s — karta reaguje od razu,
   plakat „oddycha” spokojnie. Tylko tam, gdzie jest kursor (na dotyku
   efekt „przyklejałby się” po stuknięciu), i tylko bez prośby o ograniczenie
   ruchu. Ten sam efekt przy fokusie z klawiatury. Najechanie liczone na
   całym kaflu.

   Od 23 września to samo zachowanie ma sekcja „Dwa plakaty, jedna opowieść”
   (runda 2, punkt 2): dotąd po najechaniu na komplet pogłębiał się wyłącznie
   cień (0,45 → 0,5), a cienia w spoczynku już nie ma. Układ trzy w rzędzie
   zostaje bez zmian. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mp-glowna-zakladki .mp-card__link,
  .mp-glowna-komplety .mp-card__link{ transition:transform .3s ease; }
  .mp-glowna-zakladki .mp-card .mp-card__link .mp-card__media .mp-card__img,
  .mp-glowna-komplety .mp-card .mp-card__link .mp-card__media .mp-card__img{ transition:transform .6s ease; }
  .mp-glowna-zakladki .mp-card:hover .mp-card__link,
  .mp-glowna-zakladki .mp-card__link:focus-visible,
  .mp-glowna-komplety .mp-card:hover .mp-card__link,
  .mp-glowna-komplety .mp-card__link:focus-visible{ transform:translateY(-6px); }
  .mp-glowna-zakladki .mp-card:hover .mp-card__link .mp-card__media .mp-card__img,
  .mp-glowna-zakladki .mp-card__link:focus-visible .mp-card__media .mp-card__img,
  .mp-glowna-komplety .mp-card:hover .mp-card__link .mp-card__media .mp-card__img,
  .mp-glowna-komplety .mp-card__link:focus-visible .mp-card__media .mp-card__img{ transform:scale(1.04); }
}

/* --------------------------------------------------------------------------
   KOLEKCJE
   -------------------------------------------------------------------------- */

.mp-glowna-kolekcje{ background:var(--mp-cream); padding:clamp(56px,8vw,124px) 0; }
.mp-glowna-kolekcje .mp-glowna-oko{ margin-bottom:20px; }
.mp-glowna-kolekcje__licznik{
  margin:0; font:300 clamp(38px,5vw,72px)/1 var(--mp-serif);
  color:var(--g-licznik);
}
.mp-glowna-kolekcje__siatka{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--g-siatka); border:1px solid var(--g-siatka);
  list-style:none; margin:0; padding:0;
}
.mp-glowna-kolekcje__siatka > li{ display:flex; }

.mp-glowna-seria{
  background:var(--g-kafel); display:flex; flex-direction:column;
  width:100%; transition:background-color .25s ease;
}
.mp-glowna-seria:hover{ background:var(--mp-white); }
.mp-glowna-seria__kadr{
  position:relative; display:block; aspect-ratio:16/11;
  overflow:hidden; background:var(--g-kadr);
}
/* Zdjęcie aranżacji serii od klientki (korekta z 10 września 2026) wypełnia
   kadr: pliki mają proporcję ok. 1,55, kadr 16/11 = 1,45, więc cover ucina
   po ok. 3% z boków — żadna rama plakatu nie wypada w tym pasie. Zapasowy
   plakat produktu (seria bez zdjęcia) jest pionowy i zostaje wpisany
   w całości, jak dotąd. */
.mp-glowna-seria__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.mp-glowna-seria__img--plakat{ object-fit:contain; padding:6%; }
.mp-glowna-seria__opis{
  padding:clamp(20px,2.2vw,32px); display:flex; flex-direction:column;
  gap:11px; flex:1;
}
.mp-glowna-seria__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mp-glowna-seria__numer{
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-glowna-seria__licznik{ font:300 12px/1 var(--mp-sans); color:var(--mp-muted); }
.mp-glowna-seria__nazwa{
  font:400 clamp(18px,1.6vw,23px)/1.25 var(--mp-serif); color:var(--mp-ink);
}
.mp-glowna-seria__tekst{
  font:300 13px/1.75 var(--mp-sans); color:var(--mp-body); text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   KOMPLETY
   -------------------------------------------------------------------------- */

/* Biały pas pod produktami — jak w zakładkach wyżej (punkt 2). */
.mp-glowna-komplety{ background:var(--mp-white); padding:clamp(52px,7.5vw,112px) 0; }

/* --------------------------------------------------------------------------
   O AUTORCE
   -------------------------------------------------------------------------- */

.mp-glowna-autorka{ background:var(--mp-stone); padding:clamp(56px,8vw,124px) 0; }
/* Duży prostokątny portret wypełnia wysokość kolumny tekstu (korekta
   z 10 września 2026, punkt 10): wiersz siatki rozciąga oba pudełka,
   a zdjęcie wpisuje się w pudełko portretu przez cover. Dotąd był to mały
   okrągły kadr, pod którym zostawała pusta przestrzeń obok sześciu akapitów. */
.mp-glowna-autorka__uklad{
  max-width:var(--mp-max); margin:0 auto; padding-inline:var(--mp-gut);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,5vw,84px); align-items:stretch;
}
.mp-glowna-autorka__portret{ position:relative; overflow:hidden; min-height:0; background:var(--mp-stone); }
.mp-glowna-autorka__portret img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Poniżej 1200 px rozciągnięty portret miałby proporcję 0,5–0,7 i cover
   ucinałby 17–43% kadru (zmierzone: 1199 px → 16,6%, 1024 → 30,2%,
   861 → 42,6%) — tekst rośnie w pionie szybciej, niż portret traci
   szerokość. Portret zostaje więc obok tekstu, ale we własnej proporcji
   6:7 i u góry kolumny, jak w sekcji „creator” wzoru (align-items:start,
   stała proporcja). Kolumny równe, żeby portret został duży: przy 1199 px
   ma 510×595 przy kolumnie tekstu 623, przy 1024 — 435×508. Na telefonie
   (≤860 px, blok na końcu pliku) staje nad tekstem. */
@media (max-width:1199px){
  .mp-glowna-autorka__uklad{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .mp-glowna-autorka__portret{ aspect-ratio:6/7; }
}
.mp-glowna-autorka__tytul{
  margin:0; font:300 clamp(34px,4.4vw,58px)/1.02 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-glowna-autorka__rola{
  margin:15px 0 0; font:400 11px/1 var(--mp-sans); letter-spacing:.19em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-glowna-autorka__tresc{
  display:flex; flex-direction:column; gap:19px;
  margin:30px 0 28px; max-width:660px;
}
.mp-glowna-autorka__tresc > *{ margin:0; }
.mp-glowna-autorka__tresc p,
.mp-glowna-autorka__tresc li{
  font:300 15px/1.88 var(--mp-sans); color:var(--mp-body-3);
  letter-spacing:.004em; text-wrap:pretty;
}
.mp-glowna-autorka__tresc h2,
.mp-glowna-autorka__tresc h3,
.mp-glowna-autorka__tresc h4{
  font-family:var(--mp-serif); font-weight:300; color:var(--mp-ink);
  font-size:clamp(20px,2.2vw,26px); line-height:1.24;
}
.mp-glowna-autorka__tresc a{ color:var(--mp-bronze); text-decoration:underline; }

.mp-glowna-autorka__tagi{
  display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0;
}
.mp-glowna-autorka__tagi li{
  border:1px solid var(--g-tag); padding:11px 16px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body-3);
}

/* --------------------------------------------------------------------------
   OFERTA DLA FIRM
   -------------------------------------------------------------------------- */

.mp-glowna-firmy{ background:var(--mp-cream); padding:clamp(52px,7.5vw,112px) 0; }
.mp-glowna-firmy__karta{
  border:1px solid var(--mp-line-2); background:var(--mp-warm);
  padding:clamp(30px,4.4vw,66px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(26px,3.6vw,60px); align-items:center;
  transition:border-color .25s ease;
}
.mp-glowna-firmy__karta:hover{ border-color:var(--mp-rule); }
.mp-glowna-firmy__tytul{
  margin:0 0 16px; font:300 clamp(28px,3.6vw,46px)/1.1 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-glowna-firmy__tytul em{ font-style:italic; color:var(--mp-focus); }
.mp-glowna-firmy__lead{
  margin:0 0 24px; max-width:440px;
  font:300 15px/1.8 var(--mp-sans); color:var(--mp-body-2); text-wrap:pretty;
}
.mp-glowna-firmy__cta{
  display:inline-block;
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--mp-ink); border-bottom:1px solid var(--mp-rule); padding-bottom:8px;
}
.mp-glowna-firmy__liczby{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--mp-line-2); border:1px solid var(--mp-line-2);
}
.mp-glowna-firmy__komorka{ background:var(--mp-cream); padding:clamp(20px,2.4vw,34px); }
.mp-glowna-firmy__wartosc{
  display:block; font:300 clamp(30px,3.4vw,44px)/1 var(--mp-serif);
  color:var(--mp-deep);
}
.mp-glowna-firmy__etykieta{
  display:block; margin-top:11px;
  font:400 11px/1.6 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-body);
}

/* --------------------------------------------------------------------------
   KONTAKT
   -------------------------------------------------------------------------- */

.mp-glowna-kontakt{ background:var(--mp-band); padding:clamp(56px,8vw,116px) 0; }
.mp-glowna-kontakt .mp-glowna-oko{ margin-bottom:20px; }
.mp-glowna-kontakt__tytul{
  margin:0 0 clamp(30px,4vw,52px);
  font:300 clamp(32px,4.4vw,58px)/1.05 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-glowna-kontakt__tytul em{ font-style:italic; color:var(--mp-focus); }
.mp-glowna-kontakt__uklad{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(32px,4.5vw,80px);
}
.mp-glowna-kontakt__dane{ display:flex; flex-direction:column; margin:0; }
.mp-glowna-kontakt__dane > div{
  display:flex; align-items:baseline; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--g-linia-kontakt);
}
.mp-glowna-kontakt__dane dt{
  flex:0 0 128px; font:400 11px/1.4 var(--mp-sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-glowna-kontakt__dane dd{
  margin:0; font:300 15px/1.6 var(--mp-sans); color:var(--mp-deep);
}
.mp-glowna-kontakt__dane dd a{ color:var(--mp-deep); border-bottom:1px solid var(--g-linia-kontakt); }
.mp-glowna-kontakt__dane dd a:hover{ color:var(--mp-ink); border-bottom-color:var(--mp-ink); }

.mp-glowna-kontakt__podtytul{
  margin:0 0 22px; font:400 clamp(20px,1.8vw,26px)/1.3 var(--mp-serif); color:var(--mp-ink);
}
.mp-glowna-kontakt__socjale{
  display:flex; flex-direction:column; gap:1px;
  background:var(--g-linia-kontakt); border:1px solid var(--g-linia-kontakt);
  list-style:none; margin:0; padding:0;
}
.mp-glowna-kontakt__socjale a,
.mp-glowna-kontakt__pusty{
  background:var(--mp-stone); display:flex; align-items:center; gap:16px;
  padding:18px 20px; min-height:var(--mp-tap);
}
.mp-glowna-kontakt__socjale a:hover{ background:var(--g-social-hover); }
.mp-glowna-kontakt__znak{
  background:var(--mp-ink); color:var(--mp-paper);
  width:30px; height:30px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font:400 11px/1 var(--mp-sans);
}
.mp-glowna-kontakt__nazwa{ flex:1; font:300 14px/1 var(--mp-sans); color:var(--mp-deep); }
.mp-glowna-kontakt__strzalka{ font:300 14px/1 var(--mp-sans); color:var(--mp-body); }

/* --------------------------------------------------------------------------
   TELEFON — próg 860 px, tak samo jak przełącznik „mobile” w podglądzie
   -------------------------------------------------------------------------- */

@media (max-width:860px){
  /* minmax(0,1fr) w siatce kafli — powód przy .mp-grid--4 w style.css
     (punkt 8). Siatka serii zostaje przy `1fr`: nie jest siatką kafli
     produktu, punkt 8 jej nie dotyczy, a zmiana bez potrzeby przeliczyłaby
     kadry zdjęć aranżacji. */
  .mp-glowna-siatka3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-glowna-kolekcje__siatka{ grid-template-columns:repeat(2,1fr); }

  .mp-glowna-naglowek--rzad{ align-items:flex-start; }
  .mp-glowna-kontakt__dane dt{ flex-basis:104px; }

  /* Kafel zakładek nie ma już tutaj osobnej wysokości (było: 220 px).
     Kadr 5:7 ze style.css liczy ją z szerokości kolumny, więc plakat
     wypełnia kafel na każdej szerokości okna — próg 860 px zostaje tylko
     w atrybucie `sizes` w zakladki.php, gdzie siatka zmienia się
     z czterech kolumn na dwie. */

  /* Portret autorki nad tekstem, we własnej proporcji (sekcja O AUTORCE). */
  .mp-glowna-autorka__uklad{ grid-template-columns:minmax(0,1fr); }
  .mp-glowna-autorka__portret{ width:100%; max-width:480px; }
}

@media (max-width:520px){
  .mp-glowna-liczby{ grid-template-columns:1fr 1fr; }
  .mp-glowna-kontakt__dane > div{ flex-direction:column; gap:8px; }
  .mp-glowna-kontakt__dane dt{ flex-basis:auto; }
}