/* Słój — Pracownia stolarska, Poznań Jeżyce
   Custom layer on top of Tailwind CDN. Dark / moody.
   Palette: węgiel #1a1715 · krem #e8e0d4 · miodowy dąb #b3823f · dym #3a352f
*/

:root{
  --wegiel:#1a1715;
  --krem:#e8e0d4;
  --dab:#b3823f;
  --dab-ciemny:#8d6326;
  --dym:#3a352f;
  --linia:rgba(232,224,212,.12);
}

html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }

/* ---- Pełna szerokość: brak kontenera, płynne marginesy ---- */
.shell{
  width:100%;
  padding-inline:clamp(1.25rem, 4.5vw, 6rem);
}
.shell-narrow{
  width:100%;
  max-width:64rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4.5vw, 6rem);
}
/* miękki ogranicznik długości wiersza dla akapitów w pełnej szerokości */
.measure{ max-width:46ch; }
.measure-lg{ max-width:60ch; }

body{
  background:var(--wegiel);
  color:var(--krem);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}

/* ---- Typografia ---- */
.font-display{
  font-family:'Oswald','Inter',sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  line-height:.96;
  text-transform:uppercase;
}
.font-cond{
  font-family:'Oswald',sans-serif;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.kicker{
  font-family:'Oswald',sans-serif;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--dab);
}

/* ---- Linki / hover ---- */
a{ color:inherit; }
.link-underline{
  position:relative;
}
.link-underline::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:0; height:1px; background:var(--dab);
  transition:width .35s ease;
}
.link-underline:hover::after{ width:100%; }

/* ---- Przyciski ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Oswald',sans-serif; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; font-size:.78rem;
  padding:.95rem 1.7rem;
  border:1px solid var(--dab);
  color:var(--krem);
  background:transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--dab); color:var(--wegiel); }
.btn-solid{ background:var(--dab); color:var(--wegiel); border-color:var(--dab); }
.btn-solid:hover{ background:transparent; color:var(--krem); }

/* ---- Nagłówek / nawigacja ---- */
.nav-shell{
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.nav-shell.scrolled{
  background:rgba(20,18,16,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linia);
}

/* logo — słoje / pierścienie */
.logo-ring{
  width:30px; height:30px; flex:0 0 auto;
}

/* ---- Hero ---- */
.hero-vignette::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(16,14,12,.92) 0%, rgba(16,14,12,.35) 45%, rgba(16,14,12,.55) 100%);
  pointer-events:none;
}

.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Karta realizacji ---- */
.case-img{
  filter:saturate(.9) brightness(.92);
  transition:transform .9s cubic-bezier(.16,1,.3,1), filter .6s ease;
}
.case:hover .case-img{ transform:scale(1.045); filter:saturate(1) brightness(1); }

.meta-row{
  border-top:1px solid var(--linia);
}
.meta-row dt{ color:var(--dab); }

/* ---- Swiper ---- */
.swiper{ overflow:visible; }
.swiper-slide{ height:auto; }
.swiper-btn{
  width:48px; height:48px; border:1px solid var(--linia);
  display:flex; align-items:center; justify-content:center;
  color:var(--krem); transition:border-color .3s ease, background .3s ease;
}
.swiper-btn:hover{ border-color:var(--dab); background:rgba(179,130,63,.1); }
.swiper-btn[aria-disabled="true"]{ opacity:.3; pointer-events:none; }

/* ---- Proces — etapy ---- */
.etap-num{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:clamp(3rem,7vw,5.5rem);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(179,130,63,.5);
}

/* ---- Sekcje / linie ---- */
.hr-dab{ height:1px; background:var(--linia); border:0; }

.section-pad{ padding-top:clamp(4.5rem,9vw,8.5rem); padding-bottom:clamp(4.5rem,9vw,8.5rem); }

/* ---- FAQ ---- */
details.faq{ border-bottom:1px solid var(--linia); }
details.faq summary{
  list-style:none; cursor:pointer; padding:1.4rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary .plus{ transition:transform .3s ease; color:var(--dab); flex:0 0 auto; }
details.faq[open] summary .plus{ transform:rotate(45deg); }
details.faq .faq-body{ padding-bottom:1.4rem; color:rgba(232,224,212,.74); max-width:60ch; }

/* ---- Formularz ---- */
.field{
  width:100%; background:transparent;
  border:1px solid var(--linia);
  color:var(--krem);
  padding:.9rem 1rem; font-size:.95rem;
  transition:border-color .3s ease;
}
.field:focus{ outline:none; border-color:var(--dab); }
.field::placeholder{ color:rgba(232,224,212,.4); }
label .lbl{
  font-family:'Oswald',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  font-size:.7rem; color:rgba(232,224,212,.6);
}

/* ---- Stopka ---- */
.footer-link:hover{ color:var(--dab); }

/* ---- Drobne ---- */
::selection{ background:var(--dab); color:var(--wegiel); }
.text-muted{ color:rgba(232,224,212,.62); }
.text-faint{ color:rgba(232,224,212,.44); }

/* ---- Pasek zaufania (band pod hero) ---- */
.band{ background:var(--dym); border-block:1px solid var(--linia); }
.band .stat-num{
  font-family:'Oswald',sans-serif; font-weight:600; line-height:.9;
  font-size:clamp(2.4rem,5vw,4rem); color:var(--krem);
}
.band .stat-lbl{ color:rgba(232,224,212,.6); font-size:.85rem; }

/* ---- Usługi / cennik orientacyjny ---- */
.price-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem;
  padding:1.6rem 0; border-bottom:1px solid var(--linia);
  transition:padding-left .35s cubic-bezier(.16,1,.3,1);
}
.price-row:hover{ padding-left:.6rem; }
.price-row .pr-name{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:clamp(1.15rem,2.4vw,1.6rem); }
.price-row .pr-dots{ flex:1 1 40px; min-width:30px; border-bottom:1px dotted rgba(232,224,212,.25); transform:translateY(-.35rem); }
.price-row .pr-cost{ font-family:'Oswald',sans-serif; color:var(--dab); white-space:nowrap; letter-spacing:.04em; font-size:clamp(1rem,2vw,1.35rem); }
.price-row .pr-note{ flex-basis:100%; color:rgba(232,224,212,.55); font-size:.92rem; line-height:1.5; }

/* ---- Opinie (karty) ---- */
.review{
  background:var(--wegiel); border:1px solid var(--linia); padding:clamp(1.5rem,3vw,2.4rem);
  display:flex; flex-direction:column; gap:1.1rem; height:100%;
}
.review blockquote{ color:var(--krem); line-height:1.55; font-size:1.05rem; }
.review .stars{ color:var(--dab); letter-spacing:.2em; font-size:.85rem; }
.review figcaption{ color:rgba(232,224,212,.55); font-size:.88rem; margin-top:auto; }

/* obraz pełnej szerokości z miękkim wejściem */
.media-cover{ filter:saturate(.92) brightness(.94); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .case-img{ transform:none !important; }
}