/* hurtowniadrewna.pl — projekt "Naturalny, ciepły" (reskin 2026-07)
   Paleta i komponenty wg makiet 1A/2A/2B/3A; kolory tekstu drobnego
   przyciemnione/rozjaśnione do WCAG AA (wyliczone w kontrast.py). */

:root{
  --krem:#F4EEE1; --krem-pas:#EBE3D2; --biel:#fff;
  --ziel:#1E3A2B; --ziel-noc:#16281D; --tekst:#4A5A4B; --tekst-mute:#5B6A5C;
  --rdza:#B06B3A; --rdza-tekst:#905830; --rdza-jasna:#c29757; --mikro:#636756;
  --ramka:#E7DCC6; --ramka-mocna:#D8CDB6; --linia:#E0D7C4;
  --stopka-tekst:#9BA48D; --stopka-jasna:#B7BEA9;
  --r-karta:16px; --r-foto:11px; --r-przycisk:13px;
  --font-body:Arial,Helvetica,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'Cascadia Mono',monospace;
  /* aliasy legacy — inline style w treści (kontakt/) używa tych zmiennych */
  --font-display:var(--font-body); --bone:var(--ziel); --stencil:var(--rdza);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--krem);color:var(--tekst);
  font:16px/1.6 var(--font-body);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--rdza);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
@media(min-width:1000px){.wrap{padding:0 40px}}

/* ---------- nagłówki-display ---------- */
.display{font-weight:800;color:var(--ziel);letter-spacing:-.03em;line-height:1.06;margin:8px 0 18px}
.display em{font-style:normal;color:var(--rdza)}
h1.display,.hero-h1{font-size:clamp(30px,5.2vw,54px)}
h2.display{font-size:clamp(24px,3.4vw,32px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--rdza-tekst);text-transform:uppercase}
.eyebrow::before{content:"●";font-size:8px;color:var(--rdza)}

/* ---------- pasek górny ---------- */
.pasek-gorny{background:var(--ziel-noc);color:var(--stopka-jasna);font-size:13px}
.pasek-gorny .wrap{display:flex;gap:18px;align-items:center;padding-top:8px;padding-bottom:8px}
.pasek-gorny a{font-weight:700;color:#EDE7D6}
.pasek-godziny{color:var(--stopka-jasna)}
.pasek-link{margin-left:auto}
@media(max-width:479px){.pasek-godziny{display:none}}

/* ---------- header ---------- */
header.glowny{background:var(--krem);border-bottom:1px solid var(--linia);position:relative}
header.glowny .wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:11px;min-width:0}
.logo-square{width:40px;height:40px;border-radius:11px;background:var(--ziel);color:#F4EEE1;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:0 0 auto}
.logo-text{font-weight:800;font-size:21px;color:var(--ziel);letter-spacing:-.02em;line-height:1}
.logo-text small{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--rdza-tekst);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.cta-header{margin-left:auto;padding:12px 18px;background:var(--ziel);color:#F4EEE1;
  border-radius:var(--r-przycisk);font-weight:700;font-size:14px;white-space:nowrap;flex:0 0 auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.menu a{font-weight:600;font-size:15px;color:#3A4A3B;padding:6px 0;display:inline-block}
.menu a:hover{color:var(--ziel)}
/* dropdown "Oferta" — desktop hover/focus, bez JS */
.ma-podmenu>a::after{content:" ▾";font-size:10px;color:var(--rdza-tekst)}
.podmenu{display:none;position:absolute;top:100%;left:0;z-index:50;background:var(--biel);
  border:1px solid var(--ramka);border-radius:var(--r-karta);padding:20px 24px;
  grid-template-columns:repeat(3,max-content);gap:18px 30px;
  box-shadow:0 22px 50px rgba(20,40,29,.14)}
@media(min-width:850px){
  .ma-podmenu{position:relative}
  .ma-podmenu:hover .podmenu,.ma-podmenu:focus-within .podmenu{display:grid}
}
.podmenu-grupa{min-width:130px}
.podmenu-naglowek{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--mikro);text-transform:uppercase;margin-bottom:7px}
.podmenu a{display:block;padding:4px 0;font-size:14px;font-weight:600;color:#3A4A3B;white-space:nowrap}
.podmenu a:hover{color:var(--rdza-tekst)}
.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.menu-burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto;cursor:pointer}
.menu-burger span{width:24px;height:3px;background:var(--ziel);border-radius:2px;transition:transform .2s,opacity .2s}
@media(max-width:849px){
  .menu-burger{display:flex}
  .cta-header{display:none}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--krem);
    border-bottom:1px solid var(--linia);z-index:40;box-shadow:0 18px 40px rgba(20,40,29,.12)}
  .menu ul{flex-direction:column;gap:0;padding:8px 18px 14px}
  .menu a{display:block;padding:13px 0;font-size:17px;border-top:1px solid var(--linia)}
  .menu li:first-child a{border-top:0}
  /* w panelu mobilnym podmenu zawsze rozwinięte, wcięte */
  .podmenu{display:block;position:static;border:0;box-shadow:none;border-radius:0;padding:0 0 6px 14px}
  .podmenu a{padding:8px 0;font-size:15px;border-top:0;white-space:normal}
  .podmenu-naglowek{margin:10px 0 2px}
  .menu-toggle:checked~.menu{display:block;max-height:calc(100vh - 110px);overflow:auto}
  .menu-toggle:checked~.menu-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-toggle:checked~.menu-burger span:nth-child(2){opacity:0}
  .menu-toggle:checked~.menu-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 120% at 0% 0%,#EFE7D6 0%,var(--krem) 55%)}
.hero .wrap{display:grid;gap:30px;padding-top:40px;padding-bottom:44px}
@media(min-width:1000px){.hero .wrap{grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  padding-top:56px;padding-bottom:56px}}
.hero-coords{display:block;font-family:var(--font-mono);font-size:12px;color:var(--mikro);
  letter-spacing:.06em;grid-column:1/-1;margin-bottom:4px}
.stempel{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
  font-weight:700;letter-spacing:.1em;color:var(--rdza-tekst);background:var(--biel);
  border:1px solid var(--ramka);padding:7px 13px;border-radius:999px;text-transform:uppercase}
.stempel::before{content:"●";font-size:8px;color:var(--rdza)}
.hero-lead{font-size:18px;line-height:1.55;max-width:540px;margin:0 0 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-cta>div{background:var(--biel);border:1px solid var(--ramka);border-radius:var(--r-karta);
  padding:14px 20px;min-width:220px}
.cta-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--mikro);text-transform:uppercase;margin-bottom:6px}
.tel-display{font-weight:800;font-size:clamp(21px,2.6vw,27px);color:var(--ziel);letter-spacing:-.01em;white-space:nowrap}
.cta-mail{font-weight:700;font-size:17px;color:var(--rdza-tekst);word-break:break-all}
.tel-display:hover,.cta-mail:hover{opacity:.75}
.hero-photo{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--ramka-mocna)}
.hero-img{width:100%;object-fit:cover}
.hero-tag{position:absolute;left:14px;bottom:14px;font-family:var(--font-mono);font-size:12px;
  color:#5a4a33;background:rgba(244,238,225,.92);padding:7px 11px;border-radius:8px}

/* ---------- pas informacyjny ---------- */
.info-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:34px}
.info-cell{background:var(--biel);border:1px solid var(--ramka);border-radius:var(--r-karta);
  padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.info-cell .label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--mikro);text-transform:uppercase}
.info-cell .value{font-weight:800;font-size:16px;color:var(--ziel)}
@media(max-width:719px){.info-strip .wrap{grid-template-columns:1fr}}

/* ---------- sekcje wspólne ---------- */
.segmenty,.dlaczego,.faq{padding:34px 0 46px}
.zasieg{background:var(--krem-pas);padding:44px 0}
@media(min-width:1000px){.zasieg .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px}}
.zasieg p{margin:0 0 14px;line-height:1.6}
.zasieg strong{color:var(--ziel)}
.zasieg-mapa-tagi{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.zasieg-tag{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ziel);
  background:var(--biel);border:1px solid var(--ramka-mocna);padding:7px 13px;border-radius:999px}

/* ---------- segmenty i karty kategorii ---------- */
.segment{margin-top:30px}
.segment-header{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.segment-num{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--rdza-tekst)}
.segment-name{font-weight:800;font-size:19px;color:var(--ziel);letter-spacing:-.02em}
.kategorie{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.kategorie{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kategorie{grid-template-columns:repeat(4,1fr)}}
.stencil-cat{background:var(--biel);border:1px solid var(--ramka);border-radius:var(--r-karta);
  padding:16px;display:flex;flex-direction:column;gap:9px;transition:border-color .15s,transform .15s}
.stencil-cat:hover{border-color:var(--rdza);transform:translateY(-2px)}
.cat-thumb{display:block;border-radius:var(--r-foto);overflow:hidden;border:1px solid var(--ramka)}
.cat-thumb img{width:100%;object-fit:cover}
.cat-num{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--rdza-tekst)}
.cat-name{font-weight:700;font-size:16px;line-height:1.2;color:var(--ziel)}
.cat-desc{font-size:13px;line-height:1.45;color:var(--tekst-mute)}

/* ---------- atuty ---------- */
.atuty{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
@media(min-width:560px){.atuty{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.atuty{grid-template-columns:repeat(4,1fr)}}
.atut{background:var(--biel);border:1px solid var(--ramka);border-radius:var(--r-karta);padding:20px}
.atut-num{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--rdza-tekst)}
.atut-title{font-weight:700;font-size:18px;color:var(--ziel);line-height:1.2;margin:11px 0 6px}
.atut-desc{font-size:14px;line-height:1.5;color:var(--tekst-mute)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;margin-top:8px;max-width:860px}
.faq-item{background:var(--biel);border:1px solid var(--ramka);border-radius:var(--r-karta);padding:18px 20px}
.faq-q{font-weight:700;font-size:16px;color:var(--ziel);margin-bottom:6px}
.faq-a{font-size:14.5px;line-height:1.55;color:var(--tekst)}

/* ---------- ciemne pasy CTA ---------- */
.cta-wielkie,.cta-blok{background:var(--ziel);color:#EDE7D6;padding:46px 0;margin-top:10px}
.cta-wielkie .eyebrow,.cta-blok .eyebrow{color:var(--rdza-jasna)}
.cta-wielkie .eyebrow::before,.cta-blok .eyebrow::before{color:var(--rdza-jasna)}
.cta-wielkie .display,.cta-blok .display{color:#F4EEE1}
.cta-wielkie .display em,.cta-blok .display em{color:var(--rdza-jasna)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:baseline;margin-top:6px}
.cta-wielkie .tel-display,.cta-blok .tel-display{color:#F4EEE1;font-size:clamp(24px,3.4vw,34px)}
.cta-wielkie .cta-mail,.cta-blok .cta-mail{color:var(--rdza-jasna);border-bottom:2px solid var(--rdza-jasna);padding-bottom:3px}

/* ---------- podstrony ---------- */
.hero.podstrona .wrap{display:block;padding-top:34px;padding-bottom:38px}
.hero.podstrona .hero-lead{max-width:680px}
.hero-photo-pod{border-radius:20px;overflow:hidden;border:1px solid var(--ramka-mocna);margin-top:26px}
.hero-img-pod{width:100%;object-fit:cover}
.okruszki{font-family:var(--font-mono);font-size:12px;color:var(--mikro);letter-spacing:.04em}
.okruszki .wrap{padding-top:20px}
.okruszki a{border-bottom:1px solid var(--ramka-mocna)}
.okruszki a:hover{color:var(--ziel)}
.okruszki [aria-current]{color:var(--ziel);font-weight:700}
article.tresc{padding:8px 0 44px}
article.tresc .wrap>*{max-width:760px}
article.tresc h2{font-weight:800;font-size:clamp(21px,2.6vw,26px);color:var(--ziel);
  letter-spacing:-.02em;margin:38px 0 12px}
article.tresc p{margin:0 0 14px;line-height:1.65}
article.tresc ul{margin:0 0 18px;padding-left:22px}
article.tresc li{margin-bottom:9px;line-height:1.6}
article.tresc li::marker{color:var(--rdza)}
article.tresc strong{color:var(--ziel)}
article.tresc a{color:var(--rdza-tekst);font-weight:700}

/* powiązane — ciemne karty (wzór "Zastosowania") */
.powiazane{padding:40px 0 52px}
.powiazane-list{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:720px){.powiazane-list{grid-template-columns:repeat(3,1fr)}}
.powiazane .stencil-cat{background:var(--ziel);border-color:transparent}
.powiazane .stencil-cat:hover{border-color:var(--rdza-jasna);transform:translateY(-2px)}
.powiazane .cat-num{color:var(--rdza-jasna)}
.powiazane .cat-name{color:#F4EEE1;font-size:19px}
.powiazane .cat-desc{color:var(--stopka-jasna)}

/* ---------- stopka ---------- */
footer.glowny{background:var(--ziel-noc);color:var(--stopka-tekst);font-size:14px;margin-top:26px}
footer.glowny .wrap{padding-top:38px;display:grid;gap:30px}
@media(min-width:850px){footer.glowny .wrap{grid-template-columns:1.1fr 2fr .6fr}}
footer.glowny .wrap:last-child{display:block;padding-top:0}
footer.glowny h3{color:#F4EEE1;font-size:16px;font-weight:700;margin:0 0 12px}
footer.glowny h4{color:#EDE7D6;font-size:13px;font-weight:700;margin:0 0 8px;letter-spacing:.02em}
footer.glowny ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer.glowny a:hover{color:#F4EEE1}
footer.glowny p{margin:0 0 12px;line-height:1.55}
footer.glowny strong{color:#EDE7D6}
.footer-kontakt p{margin-bottom:14px}
.footer-mapa{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:560px){.footer-mapa{grid-template-columns:repeat(3,1fr)}}
.footer-bottom{border-top:1px solid #24412F;margin-top:30px;padding:16px 0 26px;
  font-family:var(--font-mono);font-size:12px;color:var(--stopka-tekst)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}