/*
Theme Name: eSTOLARZ
Theme URI: https://estolarz.pl
Author: eSTOLARZ
Description: Motyw blokowy marki eSTOLARZ - meble na wymiar. Jedna strona zlozona z wzorcow, paleta i typografia sterowane z theme.json.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: estolarz
Tags: one-page, block-theme, business, full-site-editing
*/

/* --- zgodnosc z blokami WordPressa --------------------------------------- */
/* Bloki core/group nie moga dokladac wlasnych marginesow ani szerokosci,
   bo cala siatke trzyma ponizszy arkusz. */
.wp-block-group{ margin-block:0; }
.wp-block-heading{ margin:0; }
main.wp-block-group{ display:block; }
.wp-site-blocks > *{ margin-block:0; }
.is-layout-flow > *{ margin-block:0; }

/* --- pasek administratora ------------------------------------------------ */
/* Naglowek jest position:fixed, wiec bez tego chowa sie pod paskiem WP
   i naklada sie na tresc (widoczne tylko dla zalogowanych). */
body.admin-bar .nav{ top:32px; }
body.admin-bar{ scroll-padding-top:8rem; }
@media screen and (max-width:782px){
  body.admin-bar .nav{ top:46px; }
}

/* ==========================================================================
   eSTOLARZ - arkusz stylów
   Tokeny nazwane jak presety WordPressa (--wp--preset--*), żeby po wgraniu
   theme.json ten sam plik działał w motywie bez zmian. Patrz WORDPRESS.md.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENY */
:root{
  /* paleta z księgi znaku eSTOLARZ 2026 */
  --wp--preset--color--brand:   #332d29; /* Brąz      */
  --wp--preset--color--accent:  #82705d; /* Jasny brąz */
  --wp--preset--color--sand:    #c5b5a4; /* Beż       */
  --wp--preset--color--ink:     #191a1c; /* Grafit    */
  /* pochodne */
  --wp--preset--color--cream:   #f6f2ed;
  --wp--preset--color--cream-2: #ece5dc;

  /* aliasy */
  --c-brand:   var(--wp--preset--color--brand);
  --c-accent:  var(--wp--preset--color--accent);
  --c-sand:    var(--wp--preset--color--sand);
  --c-ink:     var(--wp--preset--color--ink);
  --c-cream:   var(--wp--preset--color--cream);
  --c-cream-2: var(--wp--preset--color--cream-2);

  /* akcent przyciemniony do małego tekstu - kontrast 5,7:1 na kremie
     (czysty #82705d daje 4,26:1 i nie przechodzi AA) */
  --c-accent-ink: #6d5c4b;
  /* #6f665e dawał 4,50:1 na tle kremowym-2, czyli dokładnie na granicy */
  --c-muted: #6b625a;

  /* --- kolory przycisków (nadpisywalne z panelu WordPressa) ------------- */
  --btn-tlo:            var(--c-brand);
  --btn-tekst:          var(--c-cream);
  --btn-tlo-hover:      var(--c-accent-ink);
  --btn-jasny-tlo:      var(--c-cream);
  --btn-jasny-tekst:    var(--c-brand);
  --btn-jasny-tlo-hover: var(--c-sand);

  /* obwódka focus dopasowana do tła: akcent na jasnym, beż na ciemnym */
  --c-focus: var(--c-accent);
  --c-line:  rgba(51,45,41,.14);
  --c-line-light: rgba(197,181,164,.22);

  /* typografia */
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-h1:   clamp(2.5rem, 5.6vw, 4.6rem);
  --fs-h2:   clamp(1.85rem, 3.4vw, 3rem);
  --fs-h3:   clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: clamp(1rem, 1.02vw, 1.0625rem);
  --fs-small: .875rem;

  /* geometria */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  --kontener: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --sekcja: clamp(4.25rem, 7vw, 6.75rem);

  --cien: 0 20px 50px -30px rgba(51,45,41,.45);
  --cien-mocny: 0 30px 70px -35px rgba(51,45,41,.6);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.77,0,.175,1);
  interpolate-size: allow-keywords;
}

/* --------------------------------------------------------------- 2. RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--c-ink);
  background:var(--c-cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.1; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--c-focus); outline-offset:3px; border-radius:2px; }
.section--dark, .hero, .cta, .stopka, .lightbox{ --c-focus: var(--c-sand); }

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--c-brand); color:var(--c-sand);
  padding:.7rem 1.1rem; border-radius:var(--r-sm); text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus-visible{ top:1rem; }

/* ------------------------------------------------------------ 3. UKŁAD */
.container{ width:100%; max-width:var(--kontener); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sekcja); }
.section--cream{ background:var(--c-cream); }
.section--cream2{ background:var(--c-cream-2); }
.section--dark{ background:var(--c-brand); color:var(--c-sand); }

.section__head{ max-width:52rem; margin-bottom:clamp(2.25rem,4vw,3.5rem); }
.section__title{ font-size:var(--fs-h2); }
.section__lead{ margin-top:1rem; font-size:var(--fs-lead); color:var(--c-muted); max-width:58ch; }
.section--dark .section__lead{ color:rgba(197,181,164,.82); }

.eyebrow{
  margin:0 0 .9rem; font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent-ink);
  display:flex; align-items:center; gap:.65rem;
}
.eyebrow::before{ content:""; width:1.75rem; height:1px; background:currentColor; opacity:.6; }
.eyebrow--light{ color:var(--c-sand); }

/* ---------------------------------------------------------- 4. PRZYCISKI */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:var(--r-pill);
  font-size:.9375rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active{ transform:scale(.97); transition-duration:.1s; }
.btn--primary{ background:var(--btn-tlo); color:var(--btn-tekst); }
.btn--ghost{ border-color:rgba(246,242,237,.55); color:var(--c-cream); background:transparent; }
.btn--light{ background:var(--btn-jasny-tlo); color:var(--btn-jasny-tekst); box-shadow:0 10px 30px -18px rgba(0,0,0,.6); }

/* Przycisk stojacy na zdjeciu ma byc jasny niezaleznie od tego, jaka klase ma
   w tresci. Strona zlozona wczesniejsza wersja motywu ma w bazie btn--primary
   i sama podmiana plikow by tego nie zmienila, wiec dobieramy sie kontekstem. */
.hero__actions .btn--primary,
.cta .btn--primary{
  background:var(--btn-jasny-tlo);
  color:var(--btn-jasny-tekst);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{ background:var(--btn-tlo-hover); transform:translateY(-2px); }
  .btn--ghost:hover{ background:rgba(246,242,237,.12); border-color:var(--c-cream); transform:translateY(-2px); }
  .btn--light:hover{ background:var(--btn-jasny-tlo-hover); transform:translateY(-2px); }
  .hero__actions .btn--primary:hover,
  .cta .btn--primary:hover{ background:var(--btn-jasny-tlo-hover); color:var(--btn-jasny-tekst); transform:translateY(-2px); }
}

.link-arrow{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; text-decoration:none; color:var(--c-accent-ink);
}
.link-arrow::before{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform .25s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover::before{ transform:scaleX(1); }
  .link-arrow:hover::after{ transform:translateX(4px); }
}

/* ------------------------------------------------------------ 5. NAWIGACJA */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background-color .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  width:100%; max-width:var(--kontener); margin-inline:auto;
  padding:1.05rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__logo{ display:block; flex:none; }
.nav__logo-img{ width:auto; height:clamp(24px,2.4vw,30px); }
.nav__logo-img--dark{ display:none; }

.nav.is-scrolled{
  background:rgba(246,242,237,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--c-line);
  box-shadow:0 6px 24px -14px rgba(51,45,41,.45), 0 1px 2px rgba(51,45,41,.06);
}
.nav.is-scrolled .nav__logo-img--light{ display:none; }
.nav.is-scrolled .nav__logo-img--dark{ display:block; }

.nav__menu{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.25rem); }
.nav__list{ display:flex; gap:clamp(.9rem,1.8vw,1.75rem); }
.nav__link{
  position:relative; font-size:.9375rem; text-decoration:none; color:var(--c-cream);
  padding-block:.25rem; transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__link.is-active::after{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){ .nav__link:hover::after{ transform:scaleX(1); } }
.nav.is-scrolled .nav__link{ color:var(--c-ink); }
.nav.is-scrolled .nav__link.is-active{ color:var(--c-accent-ink); }
.nav__cta{ padding:.62rem 1.2rem; font-size:.875rem; background:var(--btn-jasny-tlo); color:var(--btn-jasny-tekst); }
@media (hover:hover) and (pointer:fine){ .nav__cta:hover{ background:var(--btn-jasny-tlo-hover); color:var(--btn-jasny-tekst); } }
.nav.is-scrolled .nav__cta{ background:var(--btn-tlo); color:var(--btn-tekst); }
.nav.is-scrolled .nav__cta:hover{ background:var(--btn-tlo-hover); }

.nav__toggle{
  display:none; align-items:center; gap:.6rem;
  background:none; border:0; padding:.4rem .2rem; cursor:pointer;
  font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-cream);
}
.nav.is-scrolled .nav__toggle{ color:var(--c-ink); }
.nav__toggle-bars{ position:relative; width:22px; height:2px; background:currentColor; }
.nav__toggle-bars::before,.nav__toggle-bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor;
  transition:transform .3s var(--ease), opacity .2s linear;
}
.nav__toggle-bars::before{ top:-7px; }
.nav__toggle-bars::after{ top:7px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:960px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:2rem; padding:6rem var(--gutter) 3rem;
    background:var(--c-brand); color:var(--c-sand);
    opacity:0; visibility:hidden; transform:translateY(-1.5rem);
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
  }
  .nav.is-open .nav__menu{ opacity:1; visibility:visible; transform:none; z-index:1; }
  .nav__logo,.nav__toggle{ position:relative; z-index:2; }
  .nav.is-open{ background:var(--c-brand); border-bottom-color:transparent; }
  .nav.is-open .nav__toggle,.nav.is-open .nav__link{ color:var(--c-sand); }
  .nav.is-open .nav__logo-img--light{ display:block; }
  .nav.is-open .nav__logo-img--dark{ display:none; }
  .nav__list{ flex-direction:column; gap:1.1rem; }
  .nav__link{ font-size:1.5rem; font-weight:600; }
  .nav__cta{ font-size:1rem; padding:.85rem 1.6rem; background:var(--c-sand); color:var(--c-brand); }
  .nav__menu{ overflow-y:auto; }
  .nav.is-scrolled .nav__cta{ background:var(--c-brand); color:var(--c-cream); }
  .nav.is-open.is-scrolled .nav__cta{ background:var(--c-sand); color:var(--c-brand); }
}

/* ---------------------------------------------------------------- 6. HERO */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:min(100svh,860px); padding-block:9rem clamp(3rem,7vh,5rem);
  color:var(--c-cream); overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(25,26,28,.55) 0, rgba(25,26,28,.18) 120px, transparent 200px),
    linear-gradient(175deg, rgba(25,26,28,.28) 0%, rgba(25,26,28,.12) 34%, rgba(51,45,41,.74) 100%);
}
.hero__inner{ max-width:var(--kontener); }
.hero__title{ font-size:var(--fs-h1); max-width:16ch; text-wrap:balance; }
.hero__lead{ margin-top:1.6rem; font-size:var(--fs-lead); max-width:46ch; color:rgba(246,242,237,.9); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 0; }
.hero__scroll{
  position:absolute; left:50%; bottom:1.75rem; translate:-50% 0;
  width:1px; height:3rem; display:block;
}
.hero__scroll-line{ display:block; width:1px; height:100%; background:rgba(246,242,237,.45); overflow:hidden; }
.hero__scroll-line::after{
  content:""; display:block; width:1px; height:40%; background:var(--c-cream);
  animation:scrollhint 2.4s var(--ease) infinite;
}
@keyframes scrollhint{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(250%);} }

/* --------------------------------------------------------------- 7. INTRO */
.intro__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){ .intro__grid{ grid-template-columns:1.05fr .95fr; } }
.intro__title{ font-size:var(--fs-h2); max-width:19ch; }
.intro__body{ margin-top:1.25rem; color:var(--c-muted); max-width:52ch; }
.intro__quote{
  margin:1.75rem 0; padding-left:1.25rem; border-left:2px solid var(--c-accent);
  font-size:clamp(1.25rem,2vw,1.6rem); font-weight:600; line-height:1.35;
  letter-spacing:-.01em; color:var(--c-brand);
}
.intro__figure{ margin:0; }
.intro__caption{ margin-top:.9rem; font-size:var(--fs-small); color:var(--c-muted); }

.img-placeholder{
  display:grid; place-items:center; border-radius:var(--r-lg);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(130,112,93,.07) 14px 28px),
    var(--c-cream-2);
  border:1px dashed rgba(130,112,93,.4);
  color:var(--c-muted);
}
.img-placeholder--portrait{ aspect-ratio:4/5; max-height:32rem; }
.img-placeholder--dark{
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(197,181,164,.07) 14px 28px),
    rgba(197,181,164,.06);
  border-color:rgba(197,181,164,.35); color:rgba(197,181,164,.7);
}
.img-placeholder__note{ font-size:var(--fs-small); letter-spacing:.04em; }

/* ----------------------------------------------------------- 8. STATEMENT */
.statement__inner{ max-width:44rem; margin-inline:auto; text-align:center; }
.statement__title{ font-size:var(--fs-h2); text-wrap:balance; }
.statement__body{ margin-top:1.25rem; font-size:var(--fs-lead); color:var(--c-muted); }

/* -------------------------------------------------------------- 9. PROCES */
.proces__grid{ display:grid; gap:clamp(2.25rem,5vw,4rem); grid-template-columns:1fr; }
@media (min-width:900px){ .proces__grid{ grid-template-columns:.85fr 1.15fr; } }
@media (min-width:900px){
  .proces__head{ position:sticky; top:7rem; align-self:start; }
}
.proces__title{ font-size:var(--fs-h2); max-width:14ch; }
.proces__claim{
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--c-line-light);
  font-size:var(--fs-h3); font-weight:600; line-height:1.35; color:var(--c-cream);
}
.proces__krok{
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(1rem,2.5vw,2rem);
  padding-block:clamp(1.4rem,2.4vw,1.9rem);
  border-top:1px solid var(--c-line-light);
  transition:background-color .3s var(--ease);
}
.proces__lista > li:last-child{ border-bottom:1px solid var(--c-line-light); }
@media (hover:hover) and (pointer:fine){
  .proces__krok:hover{ background:rgba(197,181,164,.05); }
}
.proces__numer{
  grid-row:span 2; font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:600;
  color:var(--c-sand); opacity:.62; line-height:1.1; font-variant-numeric:tabular-nums;
}
.proces__nazwa{ font-size:var(--fs-h3); color:var(--c-cream); }
.proces__opis{ margin:.4rem 0 0; color:rgba(197,181,164,.8); max-width:48ch; }

/* ------------------------------------------------------------ 10. FILARY */
.dlaczego__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .dlaczego__grid{ grid-template-columns:1fr 1fr; } }
.filar{ padding-top:1.6rem; border-top:1px solid var(--c-line); }
.filar__ikona{ width:34px; height:34px; color:var(--c-accent); margin-bottom:1.1rem; }
.filar__tytul{ font-size:var(--fs-h3); }
.filar__opis{ margin-top:.55rem; color:var(--c-muted); max-width:44ch; }

/* -------------------------------------------------------- 11. PORÓWNANIE */
.porownanie{ margin-bottom:clamp(3rem,6vw,5rem); }
.porownanie__head{ margin-bottom:1.5rem; }
.porownanie__tytul{ font-size:var(--fs-h3); }
.porownanie__hint{ margin:.4rem 0 0; font-size:var(--fs-small); color:var(--c-muted); }

.porownanie__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.porownanie__tab{
  padding:.5rem 1rem; border-radius:var(--r-pill);
  border:1px solid var(--c-line); background:transparent;
  font-size:.8125rem; font-weight:600; cursor:pointer; color:var(--c-muted);
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .1s var(--ease);
}
.porownanie__tab:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .porownanie__tab:hover{ border-color:var(--c-accent); color:var(--c-accent-ink); }
}
.porownanie__tab.is-active{ background:var(--btn-tlo); border-color:var(--btn-tlo); color:var(--btn-tekst); }

.compare{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--cien);
  touch-action:pan-y; user-select:none; background:var(--c-cream-2);
}
.compare picture{ position:absolute; inset:0; }
.compare__img{ width:100%; height:100%; object-fit:cover; }
.compare__img--przed{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); will-change:clip-path; }
.compare__label{
  position:absolute; bottom:1rem; z-index:3;
  padding:.35rem .8rem; border-radius:var(--r-pill);
  background:rgba(25,26,28,.55); color:var(--c-cream);
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .25s var(--ease);
}
.compare__label--l{ left:1rem; }
.compare__label--r{ right:1rem; }
/* Uchwyt jest szeroki na cały kadr, więc translateX w procentach odnosi się
   do szerokości porównania - przesuwamy jeden transform, bez dotykania layoutu. */
.compare__handle{
  position:absolute; inset:0; width:100%; z-index:4; pointer-events:none;
  transform:translateX(var(--pos)); will-change:transform;
}
.compare__handle::before{
  content:""; position:absolute; top:0; bottom:0; left:-1px;
  width:2px; background:var(--c-cream); box-shadow:0 0 0 1px rgba(25,26,28,.18);
}
.compare__handle::after{
  content:"‹ ›";
  position:absolute; top:50%; left:0; translate:-50% -50%;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--c-cream); box-shadow:0 6px 18px rgba(25,26,28,.28);
  font-size:1.05rem; font-weight:700; letter-spacing:.1em; color:var(--c-brand);
  white-space:nowrap; line-height:1;
}
.compare__range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize; appearance:none; background:transparent;
}
.compare__range::-webkit-slider-thumb{ appearance:none; width:48px; height:100%; }
.compare__range::-moz-range-thumb{ width:48px; height:100%; border:0; }
.compare:focus-within .compare__handle::after{
  box-shadow:0 6px 18px rgba(25,26,28,.28), 0 0 0 3px var(--c-accent);
}

/* ------------------------------------------------------------ 12. GALERIA */
.galeria{
  display:grid; gap:clamp(.75rem,1.4vw,1.1rem);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  grid-auto-rows:12rem;
}
.galeria__item{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-md); grid-row:span 2; background:var(--c-cream);
  text-decoration:none; color:var(--c-cream);
}
.galeria__item--wysoki{ grid-row:span 3; }
.galeria__item picture{ display:block; width:100%; height:100%; }
.galeria__item img{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.galeria__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(25,26,28,.72) 0%, rgba(25,26,28,.12) 42%, transparent 68%);
  opacity:0; transition:opacity .25s var(--ease);
}
.galeria__item:focus-visible img{ transform:scale(1.045); }
.galeria__item:focus-visible::after{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .galeria__item:hover img{ transform:scale(1.045); }
  .galeria__item:hover::after{ opacity:1; }
}
.galeria__meta{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:2;
  display:flex; flex-direction:column; gap:.15rem;
  opacity:0; transform:translateY(.6rem);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.galeria__item:focus-visible .galeria__meta{ opacity:1; transform:none; }
@media (hover:hover) and (pointer:fine){
  .galeria__item:hover .galeria__meta{ opacity:1; transform:none; }
}
@media (hover:none){
  .galeria__meta{ opacity:1; transform:none; }
  .galeria__item::after{ opacity:1; }
}
.galeria__kat{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-sand); }
.galeria__nazwa{ font-size:1.0625rem; font-weight:600; }

/* ---------------------------------------------------------- 13. MATERIAŁY */
.materialy__grid{ display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .materialy__grid{ grid-template-columns:1.1fr .9fr; } }
.materialy__title{ font-size:var(--fs-h2); max-width:17ch; }
.materialy__body{ margin-top:1.25rem; color:var(--c-muted); max-width:54ch; }
.materialy__foto{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--cien); }
.materialy__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:900px){ .materialy__foto img{ aspect-ratio:1/1; } }

.probki{
  display:grid; gap:clamp(.75rem,1.5vw,1.25rem);
  grid-template-columns:repeat(2,1fr);
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
@media (min-width:700px){ .probki{ grid-template-columns:repeat(4,1fr); } }
.probki__item img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-md); }
.probki__nazwa{ display:block; margin-top:.7rem; font-size:var(--fs-small); font-weight:600; color:var(--c-muted); }

/* --------------------------------------------------------------- 13b. SKLEP */
.sklep__siatka{
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .sklep__siatka{ grid-template-columns:1fr 1fr; } }

.produkt{
  display:flex; flex-direction:column;
  background:var(--c-cream); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--cien);
}
.produkt__foto{ position:relative; }
.produkt__foto img,
.produkt__foto .img-placeholder{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:0; border-left:0; border-right:0; border-top:0;
}
.produkt__tresc{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(1.25rem,2.5vw,1.75rem);
}
.produkt__nazwa{ font-size:var(--fs-h3); }
.produkt__opis{ margin-top:.6rem; color:var(--c-muted); font-size:.9375rem; }
.produkt__cena{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  margin:1.1rem 0 0; padding-top:1.1rem; border-top:1px solid var(--c-line);
}
.produkt__kwota{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; }
.produkt__vat{ font-size:.8125rem; color:var(--c-muted); }
.produkt__akcja{
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  margin:1.25rem 0 0; padding-top:0;
}
.produkt__kup{ flex:none; }

.sklep__zaufanie{
  display:grid; gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:1fr;
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.75rem,3vw,2.25rem);
  border-top:1px solid var(--c-line);
}
@media (min-width:760px){ .sklep__zaufanie{ grid-template-columns:repeat(3,1fr); } }
.sklep__punkt{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem;
  align-items:start; font-size:.875rem; color:var(--c-muted); line-height:1.6;
}
.sklep__punkt svg{ width:22px; height:22px; color:var(--c-accent); margin-top:.15rem; }
.sklep__punkt strong{ color:var(--c-ink); font-weight:600; }

/* -------------------------------------------------------------- 14. O NAS */
.onas__grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:900px){
  .onas__grid{ grid-template-columns:.8fr 1.2fr; }
  .onas__media{ position:sticky; top:7rem; align-self:start; }
}
.onas__text > p{ color:rgba(197,181,164,.82); max-width:56ch; }
.onas__title{ font-size:var(--fs-h2); color:var(--c-cream); max-width:18ch; }
.onas__sub{ margin-top:1rem; font-size:var(--fs-h3); font-weight:600; color:var(--c-sand) !important; }
.onas__cytat{
  margin:2rem 0; padding:1.5rem 0 1.5rem 1.5rem;
  border-left:2px solid var(--c-sand);
}
.onas__cytat p{
  margin:0; font-size:clamp(1.4rem,2.6vw,2.1rem); font-weight:600;
  line-height:1.25; letter-spacing:-.02em; color:var(--c-cream);
}
.onas__cytat cite{ display:block; margin-top:.7rem; font-style:normal; font-size:var(--fs-small); color:rgba(197,181,164,.82); }
.onas__triada{
  margin-top:2.25rem; font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:600;
  letter-spacing:-.02em; color:var(--c-cream) !important;
}
.onas__podpis{ margin-top:.35rem; color:rgba(197,181,164,.82) !important; }
.onas__stopka{
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--c-line-light);
  font-size:var(--fs-small);
}

/* -------------------------------------------------------------- 15. WYCENA */
.wycena__grid{ display:grid; gap:clamp(1.75rem,3.5vw,3rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .wycena__grid{ grid-template-columns:1.45fr .55fr; } }

.formularz{
  display:grid; gap:1.1rem 1.25rem; grid-template-columns:1fr;
  background:var(--c-cream); padding:clamp(1.5rem,3vw,2.5rem);
  border-radius:var(--r-lg); box-shadow:var(--cien);
}
@media (min-width:640px){ .formularz{ grid-template-columns:1fr 1fr; } }
.pole--szerokie,.formularz__akcje,.formularz__status,.formularz__hp{ grid-column:1/-1; }
.formularz__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.pole{ display:flex; flex-direction:column; gap:.4rem; }
.pole__label{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--c-muted); }
.pole__input{
  width:100%; padding:.8rem .95rem;
  border:1px solid var(--c-line); border-radius:var(--r-sm);
  background:var(--c-cream-2); color:var(--c-ink);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.pole__input:hover{ border-color:rgba(51,45,41,.28); }
.pole__input:focus{ outline:none; border-color:var(--c-accent); background:#fffdfa; box-shadow:0 0 0 3px rgba(130,112,93,.14); }
textarea.pole__input{ resize:vertical; min-height:7rem; }
.pole__input[aria-invalid="true"]{ border-color:#a4483a; background:#fbf1ee; }
.pole__err{ font-size:.78rem; color:#a4483a; min-height:0; }
.pole__err:empty{ display:none; }

.zgoda{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem; align-items:start; }
.zgoda__box{ width:1.1rem; height:1.1rem; margin-top:.25rem; accent-color:var(--c-brand); }
.zgoda__label{ font-size:.8125rem; line-height:1.5; color:var(--c-muted); }
.zgoda__label a{ color:var(--c-accent-ink); }
.zgoda .pole__err{ grid-column:2; }

.formularz__akcje{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.35rem; }
.formularz__info{ margin:0; font-size:var(--fs-small); color:var(--c-muted); }
.formularz__status{ margin:0; font-size:.9375rem; }
.formularz__status:empty{ display:none; }
.formularz__status[data-state="ok"]{
  padding:.9rem 1.1rem; border-radius:var(--r-sm);
  background:rgba(130,112,93,.12); color:var(--c-brand); font-weight:600;
}
.formularz__status[data-state="err"]{ color:#a4483a; font-weight:600; }
.formularz.is-sending .btn{ opacity:.6; pointer-events:none; }

.kontakt{ padding:clamp(1.5rem,3vw,2rem); border:1px solid var(--c-line); border-radius:var(--r-lg); }
.kontakt__tytul{ font-size:var(--fs-h3); }
.kontakt__lista{ margin:1.25rem 0 0; }
.kontakt__wiersz{ padding-block:.8rem; border-top:1px solid var(--c-line); }
.kontakt__wiersz dt{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-muted); }
.kontakt__wiersz dd{ margin:.25rem 0 0; font-weight:600; }
.kontakt__wiersz a{ text-decoration:none; }
.kontakt__wiersz a:hover{ color:var(--c-accent-ink); }
.kontakt__social{ display:flex; gap:1rem; margin:1.25rem 0 0; }
.kontakt__social a{ font-size:var(--fs-small); font-weight:600; color:var(--c-accent-ink); text-decoration:none; }
.kontakt__social a:hover{ text-decoration:underline; }

/* ----------------------------------------------------------------- 16. FAQ */
.faq__inner{ max-width:52rem; margin-inline:auto; }
.faq__item{ border-top:1px solid var(--c-line); }
.faq__lista > .faq__item:last-child{ border-bottom:1px solid var(--c-line); }
.faq__pytanie{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding-block:1.15rem; cursor:pointer; list-style:none;
  font-size:clamp(1rem,1.3vw,1.125rem); font-weight:600;
  transition:color .25s var(--ease);
}
.faq__pytanie::-webkit-details-marker{ display:none; }
.faq__pytanie:hover{ color:var(--c-accent-ink); }
.faq__pytanie::after{
  content:""; flex:none; width:14px; height:14px; margin-top:.35rem;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .2s var(--ease);
}
.faq__item[open] .faq__pytanie::after{ transform:rotate(135deg); }
.faq__pytanie:active{ opacity:.7; }
.faq__odpowiedz{ padding-bottom:1.3rem; color:var(--c-muted); max-width:62ch; }
@supports selector(::details-content){
  .faq__item::details-content{
    block-size:0; overflow:hidden;
    transition-property:block-size, content-visibility;
    transition-duration:.28s;
    transition-timing-function:var(--ease);
    transition-behavior:allow-discrete;
  }
  .faq__item[open]::details-content{ block-size:auto; }
}

/* ----------------------------------------------------------------- 17. CTA */
.cta{
  position:relative; display:grid; place-items:center;
  min-height:clamp(20rem,42vw,26rem); padding-block:clamp(3.5rem,7vw,5rem);
  text-align:center; color:var(--c-cream); overflow:hidden; isolation:isolate;
}
.cta__media{ position:absolute; inset:0; z-index:-2; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 50% 52%, rgba(28,24,21,.74) 0%, rgba(28,24,21,.58) 100%);
}
.cta__title{ font-size:var(--fs-h2); max-width:18ch; margin-inline:auto; text-wrap:balance; }
.cta__inner p{ margin-top:1.75rem; }

/* -------------------------------------------------------------- 18. STOPKA */
.stopka{ background:var(--c-ink); color:var(--c-sand); padding-top:clamp(3rem,5vw,4.5rem); }
.stopka__grid{
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:480px){ .stopka__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .stopka__grid{ grid-template-columns:1.6fr repeat(3,1fr); } }
.stopka__logo{ width:auto; height:28px; }
.stopka__opis{ margin-top:1.1rem; font-size:var(--fs-small); color:rgba(197,181,164,.7); max-width:34ch; }
.stopka__naglowek{ font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(197,181,164,.75); margin-bottom:1rem; }
.stopka__kol ul{ display:grid; gap:.55rem; }
.stopka__kol a{ text-decoration:none; font-size:.9375rem; transition:color .2s var(--ease); }
.stopka__kol a:hover{ color:var(--c-cream); text-decoration:underline; }
.stopka__kol li{ font-size:.9375rem; color:rgba(197,181,164,.8); }
.stopka__dol{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  padding-block:1.4rem; border-top:1px solid rgba(197,181,164,.16);
  font-size:var(--fs-small); color:rgba(197,181,164,.76);
}
.stopka__dol p{ margin:0; }
.stopka__prawne{ display:flex; gap:1.25rem; }
.stopka__prawne a{ text-decoration:none; }
.stopka__prawne a:hover{ text-decoration:underline; }

/* ------------------------------------------------------------ 19. LIGHTBOX */
.lightbox{
  width:min(94vw,1200px); max-width:none; max-height:92vh;
  padding:0; border:0; border-radius:var(--r-md);
  background:transparent; color:var(--c-cream); overflow:visible;
}
.lightbox{
  opacity:0; transform:scale(.97);
  transition-property:opacity, transform, overlay, display;
  transition-duration:.15s;
  transition-timing-function:var(--ease);
  transition-behavior:allow-discrete;
}
.lightbox[open]{ opacity:1; transform:none; transition-duration:.22s; }
@starting-style{ .lightbox[open]{ opacity:0; transform:scale(.97); } }

.lightbox::backdrop{
  background:rgba(20,18,16,0); backdrop-filter:blur(4px);
  transition-property:background-color, overlay, display;
  transition-duration:.15s;
  transition-timing-function:var(--ease);
  transition-behavior:allow-discrete;
}
.lightbox[open]::backdrop{ background:rgba(20,18,16,.9); transition-duration:.22s; }
@starting-style{ .lightbox[open]::backdrop{ background:rgba(20,18,16,0); } }
.lightbox__figure{ margin:0; }
.lightbox__img{ width:100%; max-height:82vh; object-fit:contain; border-radius:var(--r-md); background:var(--c-brand); }
.lightbox__caption{ margin-top:.85rem; text-align:center; font-size:var(--fs-small); color:rgba(246,242,237,.75); }
.lightbox__zamknij,.lightbox__nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid rgba(246,242,237,.28); background:rgba(25,26,28,.55);
  color:var(--c-cream); font-size:1.5rem; line-height:1; cursor:pointer;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox__zamknij:active,.lightbox__nav:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){
  .lightbox__zamknij:hover,.lightbox__nav:hover{ background:rgba(25,26,28,.85); }
}
.lightbox__zamknij{ top:-1rem; right:-1rem; font-size:1.7rem; }
.lightbox__nav--prev{ left:-1.25rem; top:50%; translate:0 -50%; }
.lightbox__nav--next{ right:-1.25rem; top:50%; translate:0 -50%; }
@media (max-width:720px){
  .lightbox__zamknij{ top:-3rem; right:0; }
  .lightbox__nav--prev{ left:.35rem; }
  .lightbox__nav--next{ right:.35rem; }
}

/* ------------------------------------------------------------ 20. ANIMACJE */
.js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--index,0) * 60ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }




/* ========================================================================== */
/* 21. TELEFON - korekty dla wąskich ekranów                                   */
/* ========================================================================== */
@media (max-width:699px){

  /* Zakładki realizacji: pasek przewijany w poziomie zamiast trzech rzędów
     chipów. Ujemny margines wypuszcza pasek do krawędzi ekranu, padding
     trzyma pierwszy i ostatni chip w linii z treścią. */
  .porownanie__tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter) .4rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .porownanie__tabs::-webkit-scrollbar{ display:none; }
  .porownanie__tab{
    flex:none;
    scroll-snap-align:start;
    padding:.75rem 1.1rem;   /* cel dotykowy ~44 px */
  }

  /* 16:9 na telefonie daje pasek wysoki na 200 px - za mało, żeby zobaczyć
     różnicę między projektem a wizualizacją. */
  .compare{ aspect-ratio:4/3; }
  .compare__label{ bottom:.7rem; font-size:.7rem; padding:.3rem .65rem; }
  .compare__label--l{ left:.7rem; }
  .compare__label--r{ right:.7rem; }

  /* Galeria: proporcje kafla zamiast wierszy siatki. W jednej kolumnie
     span 3 dawał kafel wysoki na 590 px - czyli cały ekran na jedno zdjęcie. */
  .galeria{ grid-auto-rows:auto; }
  .galeria__item,
  .galeria__item--wysoki{ grid-row:auto; }
  .galeria__item{ aspect-ratio:4/3; }
  .galeria__item--wysoki{ aspect-ratio:3/4; }

  /* Przyciski hero na pełną szerokość - dwa różnej długości wyglądały niechlujnie */
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }

  /* mniej powietrza nad hero, żeby nagłówek nie uciekał poniżej zgięcia */
  .hero{ padding-block:7rem 3.5rem; }

  /* karta kontaktowa i formularz - spójny oddech */
  .kontakt__wiersz{ padding-block:.7rem; }
}

@media (max-width:420px){
  .porownanie__tytul{ font-size:1.0625rem; }
  .probki{ gap:.6rem; }
  .probki__nazwa{ font-size:.8125rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-property:opacity, background-color, color, border-color !important;
    transition-duration:.18s !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__scroll{ display:none; }
  .lightbox,.lightbox[open]{ transform:none !important; }
}