/* ==========================================================================
   core.css — fundament ładowany na KAŻDEJ podstronie.
   Fonty, zmienne, reset, typografia, siatka, przyciski, elementy powtarzalne.
   Styl konkretnej podstrony trafia do osobnego pliku (np. home.css).
   ========================================================================== */

/* --- Safiro: font firmowy, 8 wag ---------------------------------------- */
/* TODO(wydajność): konwersja .otf → .woff2 da ~40% mniej bajtów.
   Wymaga narzędzia (fonttools/woff2_compress) — nie ma go w tym środowisku. */
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-SemiBoldItalic.otf') format('opentype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Safiro';src:url('../fonts/Safiro-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}

/* --- Space Grotesk: nadpisy, przyciski, chipy --------------------------- */
/* Font zmienny (jeden plik na podzbiór znaków obsługuje wagi 400–700).
   Self-hostowany zamiast Google Fonts: bez wycieku IP użytkownika do Google
   (RODO) i bez dodatkowego połączenia do obcego hosta. */
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Zmienne motywu ---------------------------------------------------- */
:root{
  --green:#164245;
  --green-900:#0e2b2d;
  --wood:#D48440;
  --wood-ink:#bd7130;
  --white:#ffffff;
  --ink:#1c2a29;
  --muted:#5f6d6c;
  --line:rgba(22,66,69,.12);
  --line-2:rgba(22,66,69,.22);
  --ph:#eef1f0;
  --maxw:1200px;
  --gut:clamp(20px,5vw,64px);
  --col-gap:clamp(24px,3vw,40px);   /* odstęp między kolumnami siatki .grid12 */
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --psb-navy:#164245;
  --psb-yellow:#ffc800;
}

/* --- Reset i baza ------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
/* Atrybut `hidden` musi zawsze ukrywać element.
   Przeglądarka daje mu `display:none` tylko z własnego arkusza, więc każda
   nasza reguła w rodzaju `.post-card{display:flex}` go przebija (ta sama waga,
   a nasz arkusz jest później) i element pozostaje widoczny. Bez tego filtr
   kategorii na /blog „nie działał": karty dostawały `hidden`, ale nadal było
   je widać. `!important` jest tu uzasadnione — `hidden` znaczy „nie renderuj". */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Odsunięcie celu zakotwiczenia od przyklejonego menu (76px) */
section[id]{scroll-margin-top:84px}
body{font-family:'Safiro',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.disp{font-family:'Safiro',sans-serif;line-height:1.05;letter-spacing:-.02em;color:var(--green);font-weight:600}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
::selection{background:var(--wood);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2.5px solid var(--wood);outline-offset:3px;border-radius:3px}

section{position:relative}
.pad{padding-block:clamp(28px,4vw,56px)}
/* Sekcja doklejona do poprzedniej — makiety wpisywały to jako style="padding-top:0". */
.pad--bez-gory{padding-top:0}
/* Blokada przewijania tła, gdy na wierzchu jest okno modalne albo powiększone
   zdjęcie. Makieta ustawiała to z JS przez `document.body.style.overflow`. */
.bez-przewijania{overflow:hidden}

/* --- Siatka 12-kolumnowa i tytuł sekcji --------------------------------
   Prymitywy układu, nie styl jednej podstrony — makiety powtarzają je
   identycznie na /technologia i na podstronie projektu, więc stoją tutaj. */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
.grid12--split{align-items:center}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
@media(max-width:860px){
  .grid12{grid-template-columns:1fr}
  .grid12>*{grid-column:1/-1}
}
.sec-title{font-size:clamp(1.75rem,3.2vw,2.4rem);margin-top:0}
/* Mniejszy wariant — makiety podstrony projektu wpisywały go w style="" */
.sec-title--sm{font-size:1.5rem}
/* Kreski rozdzielające sekcje. W makietach były wpisywane w atrybut style=""
   przy każdej sekcji osobno. */
.sep-top{border-top:1px solid var(--line)}
.sep-bottom{border-bottom:1px solid var(--line)}

/* --- Sekcja w kolorze marki -------------------------------------------- */
.green{background:var(--green);color:#fff}
.green h1,.green h2,.green h3{color:#fff}
.green .eyebrow{color:#e7c9a6}
.green .eyebrow::before{background:var(--wood)}
.green .sec-head p{color:rgba(255,255,255,.78)}

/* --- Animacja wejścia sekcji ------------------------------------------ */
/* Bez JS (.js nieustawione) treść jest od razu widoczna — istotne dla SEO
   i dla użytkowników z zablokowanym JS. */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* --- Nadpis sekcji ---------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:13px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--wood-ink);font-family:'Space Grotesk',sans-serif}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--wood);flex:none}
.sec-head{max-width:54ch}
.sec-head h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:18px}
.sec-head p{color:var(--muted);margin-top:18px;font-size:1.1rem}
.center{margin-inline:auto;text-align:center;max-width:none}
.center .eyebrow{justify-content:center}

/* --- Przyciski i odnośniki -------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1rem;padding:.85em 1.6em;border-radius:100px;transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--wood);color:#fff}
.btn-primary:hover{background:var(--wood-ink)}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--green);background:var(--green);color:#fff}
.btn-light{background:#fff;color:var(--green)}
.btn-light:hover{background:var(--wood);color:#fff}
/* Wariant na ciemnym hero — używa go strona główna i Poradnik */
.btn-hero-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-hero-ghost:hover{background:#fff;color:var(--green);border-color:#fff}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.link-more{font-family:'Safiro',sans-serif;font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:.4em;transition:gap .18s,color .18s}
.link-more:hover{gap:.75em;color:var(--wood-ink)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media(max-width:600px){.btn{font-size:.95rem}}

/* --- Chip (etykieta: materiał, technologia, lokalizacja) -------------- */
/* Używany na /technologia (nazwy płyt) i /realizacje (technologia, miasto). */
.chip{font-family:'Safiro',sans-serif;font-size:.78rem;font-weight:600;color:var(--wood-ink);border:1px solid var(--line-2);padding:3px 11px;border-radius:100px;white-space:nowrap}

/* --- Zaślepka obrazu (gdy brak zdjęcia) ------------------------------- */
.ph{background:var(--ph);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;position:relative}
.ph.dark{background:#123536;color:rgba(255,255,255,.45)}
.ph span{padding:6px 12px;border:1px solid currentColor;border-radius:100px;opacity:.7}

/* --- Rozwijane sekcje (FAQ, zgody, stopka) ---------------------------- */
details{border-bottom:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Safiro',sans-serif;font-weight:600;font-size:1.16rem;color:var(--green)}
summary::-webkit-details-marker{display:none}
/* Treść rozwinięta — reguła globalna, tak jak w makietach. Korzysta z niej
   zarówno FAQ na stronie głównej, jak i specyfikacja drewna na /technologia. */
details .ans{padding:0 0 28px;color:var(--muted);font-size:1rem;max-width:72ch}
details .ans a{color:var(--green);border-bottom:1px solid var(--wood)}

/* --- Wyróżnienie w tekście ------------------------------------------- */
.mark{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:1.06em;color:#fff;background-image:linear-gradient(120deg,var(--wood),var(--wood));background-repeat:no-repeat;background-size:100% 22%;background-position:0 92%;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}