/* Dom Pogrzebowy Dygas - Myszyniec
   Paleta: papier, grafit, stonowany taupe. Ciemny pasek nawigacji. */

:root{
  --papier:#F7F6F3;
  --papier-2:#EFEDE8;
  --atrament:#23262A;
  --atrament-2:#585F66;
  --linia:#D8D4CC;
  --akcent:#8A7A66;
  --akcent-jasny:#C3B49C;
  --ciemny:#1C1F22;
  --ciemny-2:#2B3034;
  --max:1180px;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papier);
  color:var(--atrament);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
blockquote{margin:0}
a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.16;margin:0}
h1{font-size:clamp(2.4rem,6.6vw,4.3rem)}
h2{font-size:clamp(1.85rem,4.2vw,2.75rem)}
h3{font-size:1.2rem;font-family:var(--sans);font-weight:600;letter-spacing:-.01em;line-height:1.35}

p{margin:0 0 1.1em}
h1+p,h2+p,h2+.olowek,h3+p{margin-top:18px}
h2+.uslugi,h2+.kroki,h2+.siatka-3,h2+.karty{margin-top:34px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

.nadtytul{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--akcent);
  margin:0 0 1.1rem;
}

.sekcja{padding:76px 0}
.sekcja--pas{background:var(--papier-2)}
.sekcja--ciemna{background:var(--ciemny);color:#E4E1DC}
.sekcja--ciemna h2{color:#fff}
.sekcja--ciemna .nadtytul{color:var(--akcent-jasny)}
.sekcja--ciemna .olowek{color:#C4C0BA}

.olowek{max-width:56ch;font-size:1.09rem;color:var(--atrament-2)}

/* ---------- nagłówek (czarny pasek) ---------- */

.naglowek{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--ciemny);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.naglowek .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
}
.marka{text-decoration:none;display:block;line-height:1.1;color:#fff}
.marka b{
  display:block;
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.marka span{
  display:block;
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--akcent-jasny);
  margin-top:2px;
}

.menu{display:none;gap:26px;align-items:center}
.menu a{
  text-decoration:none;
  font-size:.92rem;
  color:#C8C4BE;
  padding:6px 0;
  border-bottom:1px solid transparent;
}
.menu a:hover,.menu a[aria-current]{color:#fff;border-bottom-color:var(--akcent-jasny)}

.tel-naglowek{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  font-weight:600;
  font-size:.97rem;
  white-space:nowrap;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}
.tel-naglowek:hover{background:#fff;color:var(--ciemny)}
.tel-naglowek svg{width:15px;height:15px;flex:0 0 auto}

/* ---------- hero na zdjęciu ---------- */

.hero{
  position:relative;
  min-height:clamp(440px,74vh,660px);
  display:flex;
  align-items:center;
  color:#fff;
  background:var(--ciemny);
  overflow:hidden;
}
.hero-tlo{position:absolute;inset:0;z-index:0}
.hero-tlo img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(97deg,rgba(17,20,23,.74) 0%,rgba(17,20,23,.5) 48%,rgba(17,20,23,.16) 100%),
    linear-gradient(180deg,rgba(17,20,23,.26) 0%,rgba(17,20,23,.04) 45%,rgba(17,20,23,.38) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:64px;padding-bottom:64px}
.hero h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.hero .godziny{
  margin:22px 0 30px;
  font-size:1.05rem;
  letter-spacing:.02em;
  color:#E7E4DF;
  display:flex;
  align-items:center;
  gap:11px;
}
.hero .godziny::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--akcent-jasny);
  flex:0 0 auto;
}

.cta-grupa{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:16px 26px;
  text-decoration:none;
  font-weight:600;
  font-size:1.02rem;
  border:1px solid var(--atrament);
  transition:background .18s ease,color .18s ease;
}
.btn--pelny{background:var(--atrament);color:var(--papier)}
.btn--pelny:hover{background:var(--ciemny-2);border-color:var(--ciemny-2)}
.btn--pusty{background:transparent;color:var(--atrament)}
.btn--pusty:hover{background:var(--atrament);color:var(--papier)}
.btn svg{width:17px;height:17px;flex:0 0 auto}

.hero .btn--pelny,.sekcja--ciemna .btn--pelny,.sekcja--foto .btn--pelny{
  background:var(--papier);color:var(--atrament);border-color:var(--papier);
}
.hero .btn--pelny:hover,.sekcja--ciemna .btn--pelny:hover,.sekcja--foto .btn--pelny:hover{background:#fff}
.hero .btn--pusty,.sekcja--ciemna .btn--pusty,.sekcja--foto .btn--pusty{
  color:#fff;border-color:rgba(255,255,255,.5);
}
.hero .btn--pusty:hover,.sekcja--ciemna .btn--pusty:hover,.sekcja--foto .btn--pusty:hover{
  background:#fff;color:var(--ciemny);
}

/* ---------- sekcja na pełnym zdjęciu ---------- */

.sekcja--foto{
  position:relative;
  color:#fff;
  background:var(--ciemny);
  overflow:hidden;
  padding:96px 0;
}
.sekcja--foto .tlo{position:absolute;inset:0;z-index:0}
.sekcja--foto .tlo img{width:100%;height:100%;object-fit:cover}
.sekcja--foto::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg,rgba(18,21,24,.92) 0%,rgba(18,21,24,.8) 48%,rgba(18,21,24,.42) 100%);
}
.sekcja--foto .wrap{position:relative;z-index:2}
.sekcja--foto h2{color:#fff}
.sekcja--foto .nadtytul{color:var(--akcent-jasny)}
.sekcja--foto .kolumna{max-width:34rem}
.sekcja--foto p{color:#D8D4CE}

/* ---------- kroki ---------- */

.kroki{display:grid;gap:2px;background:var(--linia)}
.krok{background:var(--papier);padding:28px 26px}
.sekcja--pas .krok{background:var(--papier-2)}
.krok-nr{
  font-family:var(--serif);
  font-size:2.5rem;
  line-height:1;
  color:var(--akcent);
  display:block;
  margin-bottom:14px;
}
.krok h3{margin-bottom:8px}
.krok p{margin:0;font-size:.97rem;color:var(--atrament-2)}

/* ---------- oferta: karty ---------- */

.karty{display:grid;gap:18px}
.karta{
  background:var(--papier);
  border:1px solid var(--linia);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.karta-foto{display:block}
.karta-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9)}
.karta-tresc{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.sekcja--pas .karta{background:var(--papier)}
.karta-nr{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--akcent);
  display:block;
  margin-bottom:14px;
}
.karta h3{
  font-family:var(--serif);
  font-size:1.38rem;
  font-weight:500;
  margin-bottom:10px;
}
.karta p{margin:0;font-size:.96rem;color:var(--atrament-2);line-height:1.65}

/* ---------- split ---------- */

.split{display:grid;gap:34px;align-items:center}
.split-foto img{width:100%;object-fit:cover;aspect-ratio:16/11}

/* ---------- listy ---------- */

.lista-ptaszki{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:13px}
.lista-ptaszki li{position:relative;padding-left:30px;font-size:1rem;color:var(--atrament-2)}
.lista-ptaszki li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:14px;
  height:1px;
  background:var(--akcent);
}
.sekcja--ciemna .lista-ptaszki li,.sekcja--foto .lista-ptaszki li{color:#D3CFC9}

/* ---------- galeria ---------- */

.siatka-3{display:grid;gap:16px}
.siatka-3 figure img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- nekrologi ---------- */

.nekrolog{
  background:var(--papier);
  border:1px solid var(--linia);
  padding:30px 26px 26px;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.sekcja--pas .nekrolog{background:var(--papier)}
.nekrolog .krzyzyk{
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--akcent);
  display:block;
  margin-bottom:10px;
  line-height:1;
}
.nekrolog .sp{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--atrament-2);
  display:block;
  margin-bottom:8px;
}
.nekrolog h3{
  font-family:var(--serif);
  font-size:1.62rem;
  font-weight:500;
  margin-bottom:6px;
  line-height:1.2;
}
.nekrolog .daty{font-size:.9rem;color:var(--atrament-2);margin:0 0 4px}
.nekrolog .skad{font-size:.88rem;color:var(--atrament-2);margin:0 0 18px;font-style:italic}
.nekrolog dl{
  margin:auto 0 0;
  display:grid;
  gap:9px;
  text-align:left;
  font-size:.92rem;
  border-top:1px solid var(--linia);
  padding-top:16px;
}
.nekrolog dt{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--akcent);
  font-weight:600;
}
.nekrolog dd{margin:0;color:var(--atrament-2);line-height:1.5}

/* ---------- opinie ---------- */

.opinie{display:grid;gap:18px}
.opinia{
  background:var(--papier);
  border:1px solid var(--linia);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
}
.sekcja--pas .opinia{background:var(--papier)}
.opinia p{font-family:var(--serif);font-size:1.1rem;line-height:1.58;margin:0 0 16px}
.opinia footer{
  margin-top:auto;
  font-size:.8rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--atrament-2);
}

/* ---------- kontakt ---------- */

.kontakt-siatka{display:grid;gap:36px;margin-top:38px}
.kontakt-dane{display:grid;gap:22px}
.dana{display:grid;gap:3px}
.dana dt{
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--akcent-jasny);
  font-weight:600;
}
.dana dd{margin:0;font-size:1.08rem;color:#E9E6E1}
.dana dd a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.dana dd a:hover{border-bottom-color:#fff}

.mapa{border:1px solid rgba(255,255,255,.18);min-height:340px;background:var(--ciemny-2)}
.mapa iframe{display:block;width:100%;height:100%;min-height:340px;border:0;filter:grayscale(1) contrast(.92)}

/* ---------- stopka ---------- */

.stopka{
  background:var(--ciemny-2);
  color:#B7B3AC;
  font-size:.87rem;
  padding:34px 0;
}
.stopka .wrap{display:grid;gap:16px}
.stopka a{color:#DAD6D0}
.stopka-demo{
  font-size:.79rem;
  color:#A6A29B;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px;
}

/* ---------- podstrona ---------- */

.szczyt-podstrony{padding:52px 0 40px;border-bottom:1px solid var(--linia)}
.okruchy{font-size:.83rem;color:var(--atrament-2);margin-bottom:18px}
.okruchy a{text-decoration:none;border-bottom:1px solid var(--linia)}

/* ---------- desktop ---------- */

@media (min-width:640px){
  .kroki{grid-template-columns:repeat(3,1fr)}
  .karty{grid-template-columns:repeat(2,1fr)}
  .siatka-3{grid-template-columns:repeat(3,1fr)}
  .opinie{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  body{font-size:17.5px}
  .sekcja{padding:96px 0}
  .menu{display:flex}
  .hero .wrap{padding-top:88px;padding-bottom:88px}
  .hero-tresc{max-width:40rem}
  .split{grid-template-columns:1fr 1fr;gap:56px}
  .split--odwrocony .split-tresc{order:2}
  .opinie{grid-template-columns:repeat(3,1fr)}
  .kontakt-siatka{grid-template-columns:.85fr 1.15fr;gap:48px;align-items:stretch}
  .stopka .wrap{grid-template-columns:1fr auto;align-items:end}
  .stopka-demo{grid-column:1/-1}
}

@media (min-width:1080px){
  .karty{grid-template-columns:repeat(4,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}