/* ArchiSpa — arkusz wspólny dla trzech stron.
   Dwa motywy, przełączane ikoną w nagłówku i zapamiętywane w przeglądarce.
   Kolor wnoszą zdjęcia; chrom strony pozostaje cichy. */

:root{
  --max:1200px;
  --marg:clamp(20px,4vw,48px);
  --rytm:clamp(56px,7vw,104px);
}

/* ——— motyw ciemny (domyślny) ——— */
:root, :root[data-motyw="ciemny"]{
  --tlo:#0d0d0f;
  --tlo-uniesione:#141416;
  --tekst:#ece9e6;
  --tekst-2:rgba(236,233,230,.72);
  --tekst-3:rgba(236,233,230,.58);
  --linia:rgba(236,233,230,.13);
  --akcent:#c9a227;
  --poswiata:rgba(201,162,39,.10);
  --pasek-tlo:rgba(13,13,15,.82);
  --cien-luk:0 26px 46px rgba(0,0,0,.55);
  --logo-filtr:brightness(0) invert(1);
  --btn-tekst:#0d0d0f;
  --hover-tlo:rgba(236,233,230,.06);
}

/* ——— motyw jasny ——— */
:root[data-motyw="jasny"]{
  --tlo:#f4f1ec;
  --tlo-uniesione:#ffffff;
  --tekst:#17151a;
  --tekst-2:rgba(23,21,26,.72);
  --tekst-3:rgba(23,21,26,.66);
  --linia:rgba(23,21,26,.14);
  --akcent:#7a5d0e;
  --poswiata:rgba(1,1,128,.05);
  --pasek-tlo:rgba(244,241,236,.86);
  --cien-luk:0 22px 40px rgba(23,21,26,.28);
  --logo-filtr:none;
  --btn-tekst:#f4f1ec;
  --hover-tlo:rgba(23,21,26,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--tekst);
  background:radial-gradient(120% 70% at 78% 0%, var(--poswiata) 0%, transparent 58%), var(--tlo);
  background-attachment:fixed;
  font-family:"Archivo",system-ui,sans-serif;font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Instrument Serif","Iowan Old Style",Georgia,serif;
  font-weight:400;letter-spacing:-.015em;line-height:1.05;margin:0;text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--akcent);outline-offset:3px}

.kontener{width:min(100% - var(--marg)*2, var(--max));margin-inline:auto}
.waski{max-width:64ch}

/* ——— nagłówek ——— */
.pasek{position:sticky;top:0;z-index:20;background:var(--pasek-tlo);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linia)}
.pasek .kontener{display:flex;flex-wrap:wrap;gap:2px 24px;align-items:center;
  justify-content:space-between;min-height:52px;padding-block:5px}
@media(min-width:760px){.pasek .kontener{gap:12px 24px;min-height:66px;padding-block:12px}}
.marka{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:44px}

.marka img{height:17px;width:auto;filter:var(--logo-filtr);opacity:.94}
@media(min-width:760px){.marka img{height:19px}}
.tagline{font-size:12.5px;color:var(--tekst-3);letter-spacing:.02em}
/* w nagłówku telefonu tagline tylko zabiera wysokość — jest w stopce */
.tagline--pasek{display:none}
@media(min-width:760px){.tagline--pasek{display:inline}}
/* na telefonie cztery pozycje muszą się zmieścić w jednej linii (od 360 px) */
nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;margin-inline:-6px}
@media(min-width:760px){nav{justify-content:flex-end;gap:8px;margin-inline:0}}
nav a{display:inline-flex;align-items:center;min-height:46px;font-size:12px;
  letter-spacing:.045em;text-transform:uppercase;color:var(--tekst-2);
  padding-inline:6px;border-radius:2px}
@media(min-width:760px){nav a{font-size:12.5px;letter-spacing:.11em;padding-inline:12px}}
nav a:hover{color:var(--tekst);background:var(--hover-tlo)}
nav a[aria-current]{color:var(--akcent)}

.motyw{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 16px;border:1px solid var(--linia);border-radius:2px;
  color:var(--tekst-2);background:transparent;cursor:pointer;font:inherit;font-size:13.5px;
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.motyw__opis{letter-spacing:.02em}
.motyw:hover{color:var(--tekst);border-color:var(--tekst-3);background:var(--hover-tlo)}
.motyw svg{width:18px;height:18px;flex:0 0 auto}
:root[data-motyw="ciemny"] .motyw .slonce{display:block}
:root[data-motyw="ciemny"] .motyw .ksiezyc{display:none}
:root[data-motyw="jasny"] .motyw .slonce{display:none}
:root[data-motyw="jasny"] .motyw .ksiezyc{display:block}

/* ——— hero ——— */
.hero{padding-block:clamp(44px,6vw,84px) clamp(36px,5vw,64px)}
.hero .kontener{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px);align-items:center}
@media(min-width:940px){.hero .kontener{
  grid-template-columns:minmax(0,1fr) clamp(380px,34vw,470px);
  gap:clamp(36px,5vw,72px)}}
.nad{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--akcent)}
.nad::before{content:"";width:26px;height:1px;background:var(--akcent);opacity:.7}
.hero h1{font-size:clamp(42px,5.6vw,76px);margin-block:22px 0}
.hero h1 em{font-style:italic}
.hero__lead{margin:22px 0 0;max-width:46ch;font-size:clamp(17px,1.3vw,18.5px);color:var(--tekst-2)}
.akcje{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;
  border:1px solid var(--akcent);color:var(--akcent);font-size:15px;letter-spacing:.03em;
  transition:background .2s ease,color .2s ease}
.btn:hover{background:var(--akcent);color:var(--btn-tekst)}
.tel{font-size:15.5px;color:var(--tekst-3)}
.tel b{font-weight:500;color:var(--tekst-2)}

/* łuk z litery A — kształt wprost z pliku znaku */
.luk-cien{filter:drop-shadow(var(--cien-luk));max-width:100%;margin-inline:auto}
/* Kadr w kształcie litery A z logo — nogi, szczyt i poprzeczka.
   Proporcja z oryginalnego SVG, nie dobrana na oko. */
.luk{position:relative;overflow:hidden;aspect-ratio:0.9262;width:100%;clip-path:url(#luk-archispa)}
.luk img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.luk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,0) 30%)}

/* ——— pasek realizacji ——— */
.refy{border-block:1px solid var(--linia)}
.refy .kontener{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline;padding-block:20px}
.refy b{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-3);font-weight:400}
.refy span{font-size:15px;color:var(--tekst-2)}

/* ——— sekcje ——— */
section{padding-block:var(--rytm)}
.tytul{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;
  justify-content:space-between;margin-bottom:clamp(24px,3vw,40px)}
.tytul h2{font-size:clamp(28px,3.4vw,44px)}
.tytul small{font-size:14px;color:var(--tekst-3);letter-spacing:.02em}
.strona-tytul{padding-block:clamp(40px,5vw,72px) clamp(20px,3vw,32px)}
.strona-tytul h1{font-size:clamp(36px,5vw,64px)}
.strona-tytul p{margin:20px 0 0;max-width:56ch;color:var(--tekst-2)}

/* ——— galeria: kolumny znoszą pion i poziom ——— */
.gallery{columns:2;column-gap:14px}
@media(min-width:720px){.gallery{columns:3;column-gap:16px}}
@media(min-width:1120px){.gallery{columns:4;column-gap:16px}}
.gallery button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;
  background:var(--tlo-uniesione);break-inside:avoid;cursor:zoom-in;overflow:hidden}
@media(min-width:720px){.gallery button{margin-bottom:16px}}
.gallery img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gallery button:hover img{transform:scale(1.035)}
.wiecej{display:flex;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.gallery-fallback{color:var(--tekst-2)}
.gallery-fallback a{color:var(--akcent);text-decoration:underline;text-underline-offset:3px}

/* ——— lightbox ——— */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(6,6,7,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox__btn{position:absolute;background:transparent;border:0;color:#f2f0ee;
  font-size:38px;line-height:1;cursor:pointer;width:56px;height:56px;opacity:.8}
.lightbox__btn:hover{opacity:1}
.lightbox__btn--prev{left:4px}
.lightbox__btn--next{right:4px}
.lightbox__close{top:6px;right:6px;font-size:32px}

/* ——— trzy rzeczy ——— */
.trzy{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,40px);
  border-top:1px solid var(--linia);padding-top:clamp(30px,3.5vw,46px)}
@media(min-width:760px){.trzy{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trzy .nr{font-size:11px;letter-spacing:.16em;color:var(--akcent)}
.trzy h3{font-size:clamp(20px,2vw,26px);margin-block:10px 8px}
.trzy p{margin:0;font-size:16.5px;color:var(--tekst-2)}

/* ——— blok zaproszenia ——— */
.zapros{border:1px solid var(--linia);background:var(--tlo-uniesione);
  padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:820px){.zapros{grid-template-columns:1.3fr auto;gap:40px}}
.zapros h2{font-size:clamp(24px,2.8vw,36px);margin-top:14px}
.zapros p{margin:14px 0 0;max-width:52ch;color:var(--tekst-2);font-size:16px}

/* ——— Współpraca: pięć zasad i etapy ——— */
.piec{display:grid;grid-template-columns:1fr;gap:2px;border:1px solid var(--linia);
  background:var(--linia);margin-top:clamp(24px,3vw,36px)}
@media(min-width:680px){.piec{grid-template-columns:repeat(5,minmax(0,1fr))}}
.piec li{list-style:none;background:var(--tlo);padding:20px 18px;display:flex;
  flex-direction:column;gap:8px}
.piec .nr{font-size:11px;letter-spacing:.16em;color:var(--akcent)}
.piec span:last-child{font-size:16px;color:var(--tekst-2)}

.etap{border-top:1px solid var(--linia);padding-block:clamp(24px,3vw,34px)}
.etap:last-of-type{border-bottom:1px solid var(--linia)}
.etap__glowa{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:16px}
@media(min-width:680px){.etap__glowa{grid-template-columns:3.2rem 1fr;gap:18px;align-items:baseline}}
.etap__nr{font-size:12px;letter-spacing:.14em;color:var(--akcent)}
.etap h3{font-size:clamp(19px,2vw,25px)}
.lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:680px){.lista{margin-left:calc(3.2rem + 18px)}}
@media(min-width:1000px){.lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px}}
.lista li{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;color:var(--tekst-2)}
.lista input{appearance:none;flex:0 0 auto;width:18px;height:18px;margin-top:3px;
  border:1px solid var(--tekst-3);border-radius:2px;cursor:pointer;position:relative;
  background:transparent;transition:border-color .15s ease,background .15s ease}
.lista input:checked{border-color:var(--akcent);background:var(--akcent)}
.lista input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--btn-tekst);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lista label{cursor:pointer}
.lista input:checked + label{color:var(--tekst-3);text-decoration:line-through}

/* ——— O mnie ——— */
.tresc{max-width:60ch}
.tresc h2{font-size:clamp(24px,2.6vw,32px);margin-top:clamp(34px,4vw,48px)}
.tresc p{margin:16px 0 0;color:var(--tekst-2)}
.tresc ul{margin:16px 0 0;padding-left:1.1em;color:var(--tekst-2)}
.tresc li{margin-bottom:6px}
.podpis{font-family:"Caveat",cursive;font-size:34px;color:var(--akcent);margin-top:28px}
/* portret — wyjątek od zasady „bez tonowania”: jedyne zdjęcie z zaokrąglonymi rogami,
   tonowanie jest wypalone w pliku img/michal.jpg, nie nakładane w CSS */
.portret{margin:0 0 0 auto;width:100%;max-width:460px;aspect-ratio:4/5;overflow:hidden;
  border-radius:22px;background:var(--tlo-uniesione);box-shadow:var(--cien-luk)}
@media(max-width:999px){.portret{margin-inline:0}}
.portret img{width:100%;height:100%;object-fit:cover}
.kontakt{display:grid;grid-template-columns:1fr;gap:2px;border:1px solid var(--linia);
  background:var(--linia);margin-top:clamp(26px,3vw,38px)}
@media(min-width:680px){.kontakt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kontakt div{background:var(--tlo);padding:20px}
.kontakt b{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tekst-3);font-weight:400;margin-bottom:8px}
.kontakt a{color:var(--akcent);text-decoration:underline;text-underline-offset:3px}
.kontakt button{min-height:46px;padding:0 18px;border:1px solid var(--linia);
  background:transparent;color:var(--tekst-2);font:inherit;font-size:15px;cursor:pointer}
.kontakt button:hover{border-color:var(--akcent);color:var(--akcent)}

/* ——— stopka ——— */
footer{border-top:1px solid var(--linia)}
footer .kontener{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  align-items:center;padding-block:26px 34px;font-size:13.5px;color:var(--tekst-3)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ——— ikony: oszczędne, jednej grubości, w kolorze tekstu ——— */
.ikona{width:20px;height:20px;flex:0 0 auto;color:var(--akcent);vertical-align:-3px}

/* O mnie — nagłówki sekcji i punkty „co mnie bawi” */
.tresc h2{display:flex;align-items:center;gap:11px}
.tresc h2 .ikona{width:21px;height:21px;vertical-align:0}
.bawi{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.bawi li{display:flex;align-items:flex-start;gap:12px;color:var(--tekst-2)}
.bawi .ikona{margin-top:3px}

/* drugi przycisk w hero — ta sama wysokość, cichszy niż główny */
.btn--cichy{border-color:var(--linia);color:var(--tekst-2)}
.btn--cichy:hover{background:transparent;border-color:var(--akcent);color:var(--akcent)}

/* ——— Poradnik: artykuł, porównanie, pliki do pobrania ——— */
.link{color:var(--akcent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.trzy h3 .link{text-decoration-color:var(--linia)}
.trzy h3 .link:hover{text-decoration-color:var(--akcent)}

.porownanie{margin-top:clamp(34px,4vw,52px);overflow-x:auto;border:1px solid var(--linia)}
.porownanie table{width:100%;min-width:620px;border-collapse:collapse;font-size:15.5px}
.porownanie caption{text-align:left;padding:16px 18px 4px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tekst-3)}
.porownanie th,.porownanie td{padding:12px 18px;text-align:left;vertical-align:top;
  border-top:1px solid var(--linia)}
.porownanie thead th{border-top:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:21px;color:var(--tekst)}
.porownanie tbody th{font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--tekst-3);white-space:nowrap}
.porownanie td{color:var(--tekst-2)}

.rodzaj{padding-top:0}
/* dwie kolumny: tekst po lewej, po prawej ramka albo zdjęcie — zdjęcie jedzie razem z tekstem.
   Na telefonie zdjęcie stoi w kodzie pierwsze, więc jest nad tekstem. */
.dwie{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,40px)}
@media(min-width:1000px){
  .dwie{grid-template-columns:minmax(0,62ch) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  .dwie > figure{order:2;position:sticky;top:96px}
}
.foto{margin:0;overflow:hidden;background:var(--tlo-uniesione);aspect-ratio:4/3}
.foto img{width:100%;height:100%;object-fit:cover}
.ramka{border:1px solid var(--linia);background:var(--tlo-uniesione);padding:clamp(22px,3vw,32px)}
.ramka h3{margin-top:0}
.tresc h3{font-size:clamp(21px,2.2vw,27px);margin-top:clamp(26px,3vw,36px)}
.tresc strong{font-weight:600;color:var(--tekst)}
.uwaga{border-left:2px solid var(--akcent);padding:2px 0 2px 18px;font-size:16.5px}
.tresc .wazne{font-size:clamp(18px,1.5vw,20px);color:var(--tekst)}

.kropki{margin:12px 0 0;padding-left:1.1em;color:var(--tekst-2);font-size:16px}
.kropki li{margin-bottom:8px}
.przypis{margin:clamp(28px,3vw,40px) 0 0;max-width:72ch;font-size:14px;color:var(--tekst-3)}

/* karty PDF: cała karta jest linkiem, „Pobierz” tylko wygląda jak przycisk */
.pobierz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px)}
@media(min-width:620px){.pobierz{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.pobierz{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pobierz a{display:flex;flex-direction:column;gap:18px;height:100%;padding:clamp(16px,2vw,22px);
  border:1px solid var(--linia);background:var(--tlo-uniesione);transition:border-color .2s ease}
.pobierz img{width:100%;height:auto;box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.pobierz__opis{display:flex;flex-direction:column;gap:4px}
.pobierz__opis b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(22px,2.2vw,27px);line-height:1.1}
.pobierz__opis small{font-size:13.5px;letter-spacing:.04em;color:var(--tekst-3)}
.pobierz .btn{align-self:flex-start;margin-top:auto}
.pobierz a:hover{border-color:var(--akcent)}
.pobierz a:hover img{transform:translateY(-3px)}
.pobierz a:hover .btn{background:var(--akcent);color:var(--btn-tekst)}