/* =========================================================
   Słota Schody — statyczna wersja HTML
   Kolorystyka: czerń + #e30613 (czerwień)
   Chrome (pasek, nagłówek, stopka, social, cookies) wstrzykuje script.js
   ========================================================= */

:root{
  --black:     #0e0e0e;   /* czerń — nagłówek, stopka, hero */
  --black-2:   #191919;
  --red:       #e30613;   /* akcent marki */
  --red-dark:  #b70510;   /* hover */
  --white:     #ffffff;
  --paper:     #ffffff;   /* tło treści */
  --soft:      #f4f4f4;   /* jasny pas sekcji */
  --line:      #e4e4e4;
  --line-dark: #2a2a2a;
  --ink:       #171717;   /* tekst */
  --ink-soft:  #666666;   /* tekst wygaszony */

  --max:    1180px;
  --radius: 3px;
  --shadow: 0 10px 30px rgba(0,0,0,.12);

  --ff-head: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{ margin:0; font-family:var(--ff-body); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red-dark); text-decoration:none; }
a:hover{ color:var(--red); }

h1,h2,h3,h4{ font-family:var(--ff-head); font-weight:700; line-height:1.12; color:var(--black); margin:0 0 .5em; letter-spacing:-.01em; }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.6rem); }
h3{ font-size:1.3rem; }

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }
.section{ padding:72px 0; }
.section--soft{ background:var(--soft); }
.section--dark{ background:var(--black); color:#e8e8e8; }
.section--dark h2{ color:#fff; }
.section__lead{ max-width:66ch; color:var(--ink-soft); font-size:1.05rem; }

/* akcent kreski pod nagłówkami sekcji */
.section > .container > h2:first-child::after,
.h-accent::after{ content:""; display:block; width:56px; height:4px; background:var(--red); margin-top:14px; }

/* ---- przyciski ---- */
.btn{ display:inline-block; padding:14px 28px; border-radius:var(--radius); font-weight:600; cursor:pointer; border:2px solid transparent; transition:background .18s, color .18s, border-color .18s; }
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--red-dark); color:#fff; }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.btn--ghost:hover{ background:#fff; color:var(--black); }
.btn--dark{ background:var(--black); color:#fff; }
.btn--dark:hover{ background:var(--red); color:#fff; }

/* =========================================================
   Górny pasek + język
   ========================================================= */
.topbar{ background:#fff; color:#555; font-size:.9rem; border-bottom:1px solid var(--line); }
.topbar .container{ position:relative; display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:center; padding:9px 20px; }
.topbar a{ color:#333; }
.topbar a:hover{ color:var(--red); }
.topbar__spacer{ display:none; }
.topbar__lang{ position:absolute; right:20px; top:50%; transform:translateY(-50%); display:flex; gap:8px; align-items:center; }
.topbar__lang img{ width:24px; height:auto; border-radius:2px; }
.topbar__item{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width:700px){ .topbar .container{ justify-content:flex-start; } .topbar__lang{ position:static; transform:none; margin-left:auto; } }

/* =========================================================
   Nagłówek / nawigacja  (czarny)
   ========================================================= */
.header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:3px solid var(--red); box-shadow:0 2px 10px rgba(0,0,0,.05); }
.header .container{ display:flex; align-items:center; gap:20px; padding:12px 20px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:104px; width:auto; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav a{ color:#171717; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:1.25rem; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--red); }
.nav .btn{ padding:10px 20px; }
.nav__toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.nav__toggle span{ display:block; width:26px; height:2px; background:#171717; margin:5px 0; transition:.2s; }

@media (max-width:900px){
  .nav__toggle{ display:block; }
  .nav{ position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:3px solid var(--red); box-shadow:0 8px 16px rgba(0,0,0,.08); max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .nav.is-open{ max-height:440px; }
  .nav a{ padding:14px 20px; border-top:1px solid var(--line); }
  .nav .btn{ margin:12px 20px; text-align:center; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; color:#fff; }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.30) 100%); }
.hero__inner{ position:relative; padding:120px 0 130px; }
.hero__eyebrow{ display:inline-block; font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--red); padding:6px 12px; border-radius:var(--radius); margin:0 0 18px; }
.hero h1{ color:#fff; font-size:clamp(2.2rem, 5vw, 3.8rem); max-width:16ch; margin:0 0 22px; }
.hero p{ max-width:52ch; font-size:1.1rem; color:#ececec; margin:0 0 30px; }

/* =========================================================
   O firmie + cechy
   ========================================================= */
.about{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.about img{ border-radius:var(--radius); box-shadow:var(--shadow); }
@media (max-width:860px){ .about{ grid-template-columns:1fr; gap:28px; } }

.features{ list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; }
.features li{ position:relative; padding-left:38px; }
.features li::before{ content:""; position:absolute; left:0; top:3px; width:24px; height:24px; border-radius:50%; background:var(--red);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/15px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/15px no-repeat; }
@media (max-width:600px){ .features{ grid-template-columns:1fr; } }

/* =========================================================
   Podgląd zdjęć na stronie głównej
   ========================================================= */
.grid-photos{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.grid-photos a{ display:block; overflow:hidden; border-radius:var(--radius); aspect-ratio:1/1; background:var(--soft); }
.grid-photos img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.grid-photos a:hover img{ transform:scale(1.06); }
@media (max-width:900px){ .grid-photos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .grid-photos{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   Opinie
   ========================================================= */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review{ background:none; border:0; padding:14px 16px; text-align:center; }
.review__q{ display:inline-block; margin-bottom:10px; }
.review__q svg{ width:42px; height:42px; fill:var(--red); }
.review p{ margin:0 0 16px; color:var(--ink-soft); }
.review__author{ font-family:var(--ff-head); font-weight:700; color:var(--black); }
@media (max-width:860px){ .reviews{ grid-template-columns:1fr; } }

/* =========================================================
   Kafelki kategorii
   ========================================================= */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat{ display:block; border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--line); transition:border-color .18s, transform .18s; }
.cat:hover{ border-color:var(--red); transform:translateY(-3px); }
.cat__img{ aspect-ratio:4/3; overflow:hidden; background:var(--soft); }
.cat__img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.cat:hover .cat__img img{ transform:scale(1.05); }
.cat__title{ padding:15px 18px; font-family:var(--ff-head); font-weight:700; color:var(--black); font-size:1.02rem; }
@media (max-width:1000px){ .cats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cats{ grid-template-columns:1fr; } }

/* =========================================================
   Galeria numerowana + lightbox
   ========================================================= */
.gallery-intro{ background:var(--black); color:#eaeaea; border-left:4px solid var(--red); padding:16px 20px; border-radius:var(--radius); max-width:74ch; margin:0 0 34px; }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery__item{ cursor:pointer; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.gallery__item:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.gallery__thumb{ position:relative; aspect-ratio:11/10; background:var(--soft); overflow:hidden; }
.gallery__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gallery__item:hover .gallery__thumb img{ transform:scale(1.06); }
.gallery__num{ position:absolute; left:0; bottom:0; min-width:38px; height:34px; padding:0 10px; display:flex; align-items:center; justify-content:center; background:var(--red); color:#fff; font-family:var(--ff-head); font-weight:700; font-size:1rem; border-top-right-radius:var(--radius); }
.gallery-empty{ background:var(--soft); border:1px dashed var(--line); border-radius:var(--radius); padding:36px; text-align:center; color:var(--ink-soft); }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

.lightbox{ position:fixed; inset:0; z-index:200; display:none; background:rgba(0,0,0,.94); }
.lightbox.is-open{ display:flex; align-items:center; justify-content:center; }
.lightbox__img{ max-width:90vw; max-height:82vh; border-radius:var(--radius); }
.lightbox__cap{ position:absolute; top:18px; left:0; right:0; text-align:center; color:#fff; font-weight:600; }
.lightbox__cap b{ color:var(--red); font-family:var(--ff-head); }
.lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:0; width:52px; height:52px; border-radius:50%; font-size:1.6rem; cursor:pointer; }
.lightbox__btn:hover{ background:var(--red); }
.lightbox__prev{ left:18px; } .lightbox__next{ right:18px; }
.lightbox__close{ position:absolute; top:14px; right:18px; background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; }
.lightbox__close:hover{ color:var(--red); }
@media (max-width:560px){ .lightbox__btn{ width:42px; height:42px; } }

/* =========================================================
   Pasek CTA (telefon)
   ========================================================= */
.cta-band{ background:var(--black); color:#e8e8e8; text-align:center; border-top:3px solid var(--red); border-bottom:3px solid var(--red); }
.cta-band .container{ padding:54px 20px; }
.cta-band h2{ color:#fff; margin-bottom:6px; }
.cta-band__phone{ display:inline-block; margin-top:6px; font-family:var(--ff-head); font-size:clamp(2rem,5vw,3rem); color:var(--red); font-weight:700; }

/* =========================================================
   Pływający pasek social
   ========================================================= */
.social-rail{ position:fixed; left:0; top:150px; z-index:60; display:flex; flex-direction:column; gap:0; }
.social-rail a{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#fff; transition:filter .18s; }
.social-rail a:hover{ filter:brightness(1.12); }
.social-rail svg{ width:22px; height:22px; fill:#fff; }
.social-rail .s-fb{ background:#1877F2; }
.social-rail .s-ig{ background:#E1306C; }
.social-rail .s-tt{ background:#111111; }
.social-rail .s-map{ background:#2AA84A; }
@media (max-width:640px){
  .social-rail{ left:0; right:0; top:auto; bottom:0; flex-direction:row; }
  .social-rail a{ flex:1; }
}

/* =========================================================
   Stopka
   ========================================================= */
.footer{ background:var(--soft); color:#3a3a3a; padding:56px 0 22px; border-top:3px solid var(--red); }
.footer a{ color:#171717; } .footer a:hover{ color:var(--red); }
.footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; }
.footer h4{ color:#111; font-size:1.05rem; margin-bottom:14px; }
.footer__logo{ height:140px; width:auto; margin-bottom:16px; }
.footer__soc{ display:flex; gap:12px; margin-top:16px; }
.footer__soc a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#e2e2e2; border-radius:50%; transition:background .18s; }
.footer__soc a:hover{ background:var(--red); }
.footer__soc svg{ width:20px; height:20px; fill:#333; transition:fill .18s; }
.footer__soc a:hover svg{ fill:#fff; }
.footer__bottom{ margin-top:38px; padding-top:18px; border-top:1px solid var(--line); font-size:.88rem; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; color:#777; }
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr; gap:26px; } }

/* =========================================================
   Cookies
   ========================================================= */
.cookies{ position:fixed; left:16px; right:16px; bottom:16px; z-index:120; background:var(--black); color:#e6e6e6; padding:16px 20px; border-radius:var(--radius); border:1px solid var(--line-dark); box-shadow:var(--shadow); display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:center; }
.cookies.is-hidden{ display:none; }
.cookies p{ margin:0; font-size:.9rem; max-width:70ch; }
.cookies .btn{ padding:9px 22px; }
@media (max-width:640px){ .cookies{ bottom:64px; } }

/* nagłówek podstrony */
.pagehead{ background:var(--soft); color:var(--ink); border-bottom:1px solid var(--line); }
.pagehead .container{ padding:44px 20px; }
.pagehead h1{ margin:0; color:var(--black); font-size:clamp(2rem,4vw,3rem); }
.pagehead h1::after{ content:""; display:block; width:56px; height:4px; background:var(--red); margin-top:14px; }
.crumbs{ font-size:.9rem; color:var(--ink-soft); margin-bottom:10px; }
.crumbs a{ color:var(--ink-soft); } .crumbs a:hover{ color:var(--red); }

/* =========================================================
   Sekcja „Schody Słota / Naturalne, piękne, trwałe" + panel z telefonem
   ========================================================= */
.promo{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.promo__eyebrow{ color:var(--red); font-family:var(--ff-head); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 12px; }
.promo__text h2{ text-transform:uppercase; letter-spacing:.01em; margin:0 0 20px; }
.promo__text p{ color:var(--ink-soft); font-size:1.05rem; max-width:60ch; margin:0; }
.promo__cta{ background:var(--red); color:#fff; padding:48px 44px; border-radius:3px;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.6px); background-size:15px 15px; }
.promo__cta p{ text-transform:uppercase; font-weight:600; letter-spacing:.02em; font-size:1.15rem; line-height:1.4; margin:0 0 18px; }
.promo__cta hr{ border:0; border-top:2px solid rgba(255,255,255,.55); width:70%; margin:0 0 22px; }
.promo__phone{ display:inline-block; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:clamp(2.2rem,4.5vw,3.2rem); letter-spacing:.01em; }
.promo__phone:hover{ color:#fff; opacity:.92; }
@media (max-width:820px){ .promo{ grid-template-columns:1fr; gap:28px; } .promo__cta{ padding:36px 28px; } }

/* =========================================================
   Wierne odwzorowanie starej strony — dodatkowe klasy
   ========================================================= */

/* hero — trójwierszowy tytuł */
.hero__title{ display:block; text-transform:uppercase; font-family:var(--ff-head); line-height:1.04; margin:0 0 28px; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.hero__title .l1{ display:block; font-size:clamp(1.4rem,3vw,2.2rem); font-weight:600; color:#fff; letter-spacing:.05em; }
.hero__title .l2{ display:block; font-size:clamp(2.5rem,6.5vw,4.4rem); font-weight:700; color:var(--red); }
.hero__title .l3{ display:block; font-size:clamp(2.5rem,6.5vw,4.4rem); font-weight:700; color:#fff; }
.btn--chev{ text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; }
.btn--chev span{ color:var(--red); font-weight:700; margin-left:6px; }
.btn--chev:hover span{ color:var(--black); }

/* sekcje z delikatną fakturą drewna (jasne) */
.section--wood{ background:#f5f4f1; background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),repeating-linear-gradient(90deg,#efece6 0 2px,#f5f4f1 2px 7px); }

/* intro — wyśrodkowany akapit */
.intro{ text-align:center; }
.intro p{ max-width:82ch; margin:0 auto; color:#4a4a4a; font-size:1.05rem; }

/* sekcja wyśrodkowana */
.sec-center{ text-align:center; }
.sec-center h2::after{ display:none; }
.sec-center__lead{ max-width:72ch; margin:0 auto; color:var(--ink-soft); font-size:1.05rem; }
.slota__rule{ display:block; width:60px; height:3px; background:var(--red); margin:0 auto 20px; }
.sec-center h2{ text-transform:uppercase; letter-spacing:.02em; }

/* cechy — 2×2 z czerwoną ikoną */
.feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px 56px; }
.feat{ display:flex; gap:18px; align-items:flex-start; }
.feat__ic{ flex:none; }
.feat__ic svg{ width:40px; height:40px; fill:var(--red); }
.feat p{ margin:0; color:#333; }
@media (max-width:700px){ .feat-grid{ grid-template-columns:1fr; gap:24px; } }

/* siatka zdjęć na całą szerokość */
.home-gallery{ padding:0; }
.home-gallery__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.home-gallery__grid a{ display:block; overflow:hidden; aspect-ratio:1/1; background:var(--soft); }
.home-gallery__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.home-gallery__grid a:hover img{ transform:scale(1.06); }
@media (max-width:900px){ .home-gallery__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .home-gallery__grid{ grid-template-columns:repeat(2,1fr); } }

/* na małych ekranach zmniejszamy powiększone logo, żeby nie dominowało */
@media (max-width:900px){
  .brand img{ height:64px; }
  .nav a{ font-size:1.1rem; }
}
@media (max-width:600px){
  .footer__logo{ height:100px; }
}