/* Doradca Domów Pasywnych – wersja 1 (nowoczesna)
   Siatka: lewa kolumna 50% z panelem ze szkła (z marginesem), tło sticky z motywem w prawym dolnym rogu.
   Krój: Archivo (zmienny, osie wagi i szerokości) – nagłówki grube i zwężone, akapity cienkie. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(../fonts/archivo.woff2) format('woff2')}

:root{
  --color-brand-night:#0b1114;
  --color-ink:#f3f6f7;
  --color-ink-2:#c3ced3;
  --color-line:rgb(255 255 255 / .2);
  --color-accent:#a9d2de;

  --glass-dark:rgb(14 20 24 / .3);
  --glass-light:rgb(250 250 247 / .4);
  --glass-border:rgb(255 255 255 / .18);

  --font-sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --text-display:clamp(2.5rem,8.6vw,4.5rem);
  --text-h2:clamp(2.25rem,1.5rem + 2.3vw,3.75rem);
  --text-lead:clamp(1.125rem,1rem + .45vw,1.4375rem);
  --text-body:clamp(.96875rem,.94rem + .12vw,1.0625rem);
  --text-small:.75rem;

  --edge:clamp(.75rem,1.8vw,2rem);            /* margines poddruku od krawędzi */
  --inset:clamp(1.25rem,4vw,4.5rem);           /* odstęp tekstu od krawędzi poddruku */
  --pad-y:clamp(5rem,11svh,8.5rem);
  --bar:calc(3.5rem + env(safe-area-inset-bottom));
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--color-brand-night)}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);font-weight:280;line-height:1.65;color:var(--color-ink);background:var(--color-brand-night);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;padding-bottom:var(--bar)}
img,svg{display:block;max-width:100%}
img{height:auto}
p,ul,dl,dd,h1,h2,h3,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
strong{font-weight:700;font-stretch:85%}
sub{font-size:.68em;line-height:0;vertical-align:-.25em}
::selection{background:var(--color-accent);color:var(--color-brand-night)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:1px}
.sec--light :focus-visible{outline-color:#1d4c5a}

.skip{position:fixed;left:1rem;top:1rem;z-index:100;padding:.75rem 1rem;background:var(--color-ink);color:var(--color-brand-night);font-weight:600;text-decoration:none;transform:translateY(-160%);transition:transform .2s var(--ease-out)}
.skip:focus{transform:none}

/* ---------- sekcje ---------- */
.sec{position:relative;display:grid;min-height:100svh;isolation:isolate}
.sec>*{grid-area:1/1}
.sec__bg{position:sticky;top:0;align-self:start;height:calc(100svh - var(--bar));overflow:hidden;z-index:-1}
.sec__bg picture,.sec__bg img{width:100%;height:100%}
.sec__bg img{object-fit:cover;object-position:right bottom;transform-origin:85% 100%}

/* poddruk: szkło z marginesem od krawędzi */
.sec__panel{position:relative;width:100%;align-self:start;padding:calc(var(--edge) + var(--pad-y) * .6) calc(var(--edge) + var(--inset)) calc(var(--inset) + 1.5rem);margin-bottom:max(42svh,17rem)}
.sec__panel::before{content:"";position:absolute;inset:var(--edge) var(--edge) 0;z-index:-1;background:var(--glass-dark);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(44px) saturate(1.35) brightness(.96);backdrop-filter:blur(44px) saturate(1.35) brightness(.96);box-shadow:inset 0 1px 0 rgb(255 255 255 / .1)}
.sec__inner{container-type:inline-size}

.sec--light{color:#0f171b;--color-ink-2:#222c31;--color-line:rgb(15 23 27 / .2);--color-accent:#1d4c5a;--glass-border:rgb(255 255 255 / .45)}
.sec--light .sec__panel::before{background:var(--glass-light);-webkit-backdrop-filter:blur(44px) saturate(1.2) brightness(1.04);backdrop-filter:blur(44px) saturate(1.2) brightness(1.04)}

/* ---------- typografia ---------- */
.hero{margin-bottom:clamp(2.75rem,6svh,4.5rem)}
.hero-title{font-size:var(--text-display);font-weight:800;font-stretch:75%;line-height:.92;letter-spacing:-.005em;text-wrap:balance}
/* H1 w jednej linii: tekst ma 10.99em szerokości, więc 8.9cqi zawsze mieści się w kolumnie. Na wąskim telefonie łamiemy na 2 linie, żeby H1 nie był mniejszy od H2 */
@media (min-width:40em){.hero-title{font-size:min(var(--text-display),8.9cqi);white-space:nowrap}}
.hero-lead{margin-top:clamp(1.1rem,2.4svh,1.6rem);font-size:calc(var(--text-lead) * 1.25);font-weight:220;line-height:1.32;color:var(--color-ink-2);text-wrap:balance}

.h-section{font-size:min(var(--text-h2),9.2cqi);font-weight:800;font-stretch:75%;line-height:.95;letter-spacing:-.003em;white-space:nowrap}
.h-small{font-size:calc(var(--text-lead) * 1.1);font-weight:800;font-stretch:80%;line-height:1.15;margin-bottom:1.25rem;text-wrap:balance}


.lead{font-size:var(--text-lead);font-weight:220;line-height:1.35;color:var(--color-ink-2);text-wrap:pretty}
.h-section+.lead,.h-section+.intro{margin-top:clamp(1.5rem,3svh,2rem)}

.prose{display:grid;gap:1.1em;margin-top:clamp(2rem,5svh,3rem)}
.prose p{text-wrap:pretty}

/* ---------- dane kontaktowe z ikonami ---------- */
.contact-list{display:flex;flex-wrap:wrap;gap:1rem 2.25rem;margin-top:clamp(1.75rem,4svh,2.5rem)}
.contact-list li{display:flex;align-items:center;gap:.85rem;min-height:44px}
.contact-list__icon{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--color-line);border-radius:0}
.contact-list__icon svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.contact-list__label{display:block;font-size:var(--text-small);font-weight:400;line-height:1.25;color:var(--color-ink-2)}
.contact-list__thin{font-weight:250;font-stretch:100%}
.contact-list__value{display:block;font-weight:700;font-stretch:85%;line-height:1.3;font-variant-numeric:tabular-nums}
a.contact-list__value{display:inline;font-size:1.0625rem;letter-spacing:.01em}

.contact-list--lg{flex-direction:column;gap:1.25rem;margin-top:2rem}
.contact-list--lg .contact-list__icon{width:3.25rem;height:3.25rem}
.contact-list--lg .contact-list__icon svg{width:1.35rem;height:1.35rem}
.contact-list--lg .contact-list__value{font-size:var(--text-lead)}
.contact-list--lg a.contact-list__value{font-size:calc(var(--text-lead) * 1.2)}

/* ---------- listy ---------- */
.dash{display:none}
.rows,.stack{border-bottom:1px solid var(--color-line)}
.rows li,.stack li{display:grid;gap:.3rem;padding:.95rem 0;border-top:1px solid var(--color-line)}
.rows strong,.stack strong{display:block}
.rows strong::first-letter{text-transform:uppercase}
.rows span,.stack span{color:var(--color-ink-2);text-wrap:pretty}
.stack{margin:clamp(2.5rem,6svh,3.5rem) 0}
.stack li{padding:1.4rem 0}
.stack strong{font-size:1.1875rem;font-weight:800;font-stretch:80%}

/* ilustracja 5 zasad */
.intro{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(1.25rem,3.5vw,2.5rem)}
.intro .figure-mini{order:-1}
.figure-mini{width:clamp(9rem,34vw,14rem)}
.figure-mini figcaption{margin-top:.6rem;font-size:var(--text-small);font-weight:400;line-height:1.35;color:var(--color-ink-2)}
.zoom{position:relative;display:block;border-radius:50%;cursor:zoom-in}
.zoom img{transition:transform .5s var(--ease-out),opacity .3s}

/* certyfikaty – dyskretny rząd */
.certs{display:flex;gap:1rem;margin-top:clamp(2rem,5svh,3rem)}
.cert{border-radius:0;width:clamp(5.5rem,20vw,7rem);outline-offset:4px}
.cert img{width:100%;filter:saturate(.85);opacity:.92}

/* certyfikaty pod hasłem w sekcji 1 – mniejsze */
.hero .certs{margin-top:clamp(1.5rem,3.5svh,2.25rem)}
.hero .cert{display:block;width:clamp(4.5rem,15vw,5.75rem)}
.cert--partner img{filter:none;opacity:1}

/* logo partnera (Reynaers) w miejscu dawnych certyfikatów */
.partner{margin-top:clamp(2rem,5svh,3rem);width:clamp(5.5rem,20vw,7rem)}
.partner img{width:100%}

/* kontakt w treści */
.cta{margin-top:clamp(3rem,7svh,4.5rem);padding-top:clamp(2rem,4svh,2.75rem);border-top:1px solid var(--color-line)}
.cta>p{color:var(--color-ink-2);margin-top:-.25rem}

.link{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.1em;transition:background-size .45s var(--ease-out),color .3s}

@media (hover:hover){
  .link:hover{background-size:0 1px;background-position:100% 100%}
  a.contact-list__value:hover{color:var(--color-accent)}
  .zoom:hover img{transform:scale(1.04)}
  .cert:hover img{opacity:1;filter:none}
}

/* ---------- stopka ---------- */
.site-footer{position:relative;z-index:5;margin-top:-3rem;height:3rem;display:flex;align-items:center;justify-content:flex-end;padding:0 calc(var(--edge) + 1rem);font-size:.6875rem;font-weight:400;letter-spacing:.01em;color:rgb(243 246 247 / .8)}
.site-footer .link{display:inline-flex;align-items:center;min-height:24px;background:none;padding-bottom:0}
@media (hover:hover){.site-footer .link:hover{color:var(--color-accent)}}

/* ---------- pasek „Zadzwoń” (mobile/tablet) ---------- */
.callbar{position:fixed;inset:auto 0 0;z-index:30;display:flex;align-items:center;gap:.65rem;height:var(--bar);padding:0 calc(var(--edge) + 1rem) env(safe-area-inset-bottom);background:var(--color-brand-night);color:var(--color-ink);text-decoration:none;border-top:1px solid rgb(255 255 255 / .1);font-weight:650;font-stretch:85%}
.callbar .icon{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;flex:none}
.callbar__num{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--color-ink-2);font-weight:400;font-stretch:100%}
.callbar:active{background:#141d22}

/* ---------- lightbox ---------- */
.lightbox{padding:0;border:0;background:transparent;max-width:min(92vw,46rem);max-height:92svh;overflow:visible}
.lightbox::backdrop{background:rgb(6 10 12 / .86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox__img{width:auto;max-width:min(92vw,46rem);max-height:86svh;object-fit:contain}
.lightbox__close{position:absolute;right:0;top:-3.25rem;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgb(255 255 255 / .35);background:transparent;color:#fff;cursor:pointer}
.lightbox__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ================= DESKTOP: 2 kolumny ================= */
@media (min-width:64em) and (orientation:landscape){
  /* desktop: motyw jest na prawej połowie, poddruk może być prawie przezroczysty */
  :root{--bar:0px;--text-display:clamp(3.1rem,5vw,4.75rem);--glass-dark:rgb(14 20 24 / .16);--glass-light:rgb(250 250 247 / .26)}
  .callbar{display:none}

  .sec>.sec__bg{height:100svh}
  .sec__panel{width:50%;min-height:100svh;margin-bottom:0;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--edge) + var(--pad-y)) calc(var(--inset) * .85) calc(var(--edge) + var(--pad-y)) calc(var(--edge) + var(--inset))}
  .sec__panel::before{inset:var(--edge) 0 var(--edge) var(--edge)}

  .rows li{grid-template-columns:minmax(11rem,44%) 1fr;gap:1.5rem;align-items:baseline}
  .site-footer{padding-right:calc(var(--edge) + 1.25rem)}
}
@media (max-height:44em) and (orientation:landscape){
  :root{--pad-y:4.5rem}
}

/* ---------- ruch (tylko gdy użytkownik nie ogranicza animacji) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise-in{from{opacity:0;transform:translateY(3rem)}to{opacity:1;transform:none}}
  @keyframes rise{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}
  @keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}}
  @keyframes veil{from{opacity:0}to{opacity:1}}

  .sec:first-child .sec__panel::before{animation:veil 1.1s var(--ease-out) both}
  .sec:first-child .sec__inner{animation:rise-in 1.3s var(--ease-out) .1s both}
  .sec:first-child .sec__bg img{animation:settle 2.4s var(--ease-out) both}

  .js [data-reveal]{transition:opacity 1.3s var(--ease-out),transform 1.3s var(--ease-out)}
  .js [data-reveal]:not(.is-in){opacity:0;transform:translateY(3rem)}

  @supports (animation-timeline:view()){
    .sec{view-timeline:--sec block}
    .sec:not(:first-child) .sec__bg img{animation:settle linear both;animation-timeline:--sec;animation-range:entry 0% entry 100%}
  }

  .lightbox[open]{animation:rise .45s var(--ease-out)}
  .lightbox[open]::backdrop{animation:veil .35s ease-out}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* przeglądarki bez backdrop-filter: pełniejszy poddruk (bez rozmycia lekki poddruk byłby nieczytelny) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sec__panel::before{background:rgb(10 16 19 / .78)}
  .sec--light .sec__panel::before{background:rgb(246 247 243 / .88)}
}

@media print{
  .sec__bg,.callbar,.lightbox{display:none!important}
  body,.sec--light{color:#000;background:#fff}
  .sec__panel::before{display:none}
}