/* ============================================================
   ARCHINERGIA — style nowych podstron (strona glowna + budynki pasywne)
   Plik osobny od style.css, zeby nie zmieniac wygladu starych podstron.
   ============================================================ */

/* --- wspolne: nawigacja, sekcje, kafle, kontakt, stopka --- */
:root{
    color-scheme: light;
    --green: rgb(166,210,57);
    --green-soft: rgba(166,210,57,.14);
    --dark: rgb(16,24,32);
    --dark-70: rgba(16,24,32,.8);
    --dark-55: rgba(16,24,32,.62);
    --white:#ffffff;
    --panel:#f7f8f4;
    --line: rgba(16,24,32,.12);
    --display: 'Michroma', 'Trebuchet MS', sans-serif;
    --body: Arial, Helvetica, system-ui, sans-serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--white);
    color:var(--dark);
    font-family:var(--body);
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  .wrap{max-width:1100px;margin:0 auto;padding-inline:24px}

  /* ---------- nav (jak na obecnej stronie) ---------- */
  .topnav{
    position:sticky; top: env(safe-area-inset-top, 0px); z-index:50;
    background:var(--green);
    border-bottom:1px solid rgba(16,24,32,.1);
    display:flex;align-items:center;justify-content:space-between;
    gap:16px; padding:12px 24px;
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--dark)}
  .brand img{height:40px;width:auto}
  .brand span{font-family:var(--display);font-size:.85rem;letter-spacing:.06em}
  .nav-list{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
  .nav-list a{color:var(--dark);text-decoration:none;padding:8px 6px;font-size:.92rem}
  .nav-list a:hover{color:var(--white)}
  @media (max-width:620px){ .brand span{display:none} .nav-list{gap:8px} .nav-list a{font-size:.82rem} }

  /* ---------- hero ---------- */
  .hero{position:relative;isolation:isolate;min-height:clamp(440px,72vh,620px);display:flex;align-items:flex-end}
  .hero picture, .hero .hero-img{position:absolute;inset:0;z-index:-2}
  .hero-img{width:100%;height:100%;object-fit:cover}
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg, rgba(16,24,32,.88) 0%, rgba(16,24,32,.72) 42%, rgba(16,24,32,.28) 78%, rgba(16,24,32,.15) 100%);
  }
  .hero-inner{padding-block:clamp(48px,8vw,88px); max-width:720px}
  .hero h1{
    font-family:var(--display);
    color:var(--white);
    font-size:clamp(1.55rem,4.4vw,2.9rem);
    line-height:1.18;
    letter-spacing:.01em;
    margin:0 0 20px;
    text-wrap:balance;
  }
  .hero h1 em{font-style:normal;color:var(--green)}
  .hero p{color:rgba(255,255,255,.9);font-size:clamp(.98rem,1.4vw,1.1rem);max-width:60ch;margin:0 0 18px}
  .hero .where{color:var(--white);font-weight:bold;margin-bottom:10px}
  .cred{
    display:inline-block;border-left:3px solid var(--green);padding-left:14px;
    color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.55;margin-bottom:26px
  }
  .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .btn{
    font-family:var(--display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
    text-decoration:none;padding:15px 26px;border-radius:6px;display:inline-block;
    background:var(--green);color:var(--dark);border:2px solid var(--green);
    transition:background .2s,color .2s;
  }
  .btn:hover{background:transparent;color:var(--green)}
  .btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
  .btn.ghost:hover{background:var(--white);color:var(--dark);border-color:var(--white)}

  /* ---------- sekcje ---------- */
  section.band{padding-block:clamp(52px,7vw,84px)}
  .eyebrow{
    font-family:var(--display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dark-55);margin:0 0 12px
  }
  h2{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.35;margin:0 0 24px;text-wrap:balance}
  h3{font-family:var(--display);font-size:.98rem;line-height:1.4;margin:0 0 10px;color:var(--dark)}
  .lead{font-size:1.05rem;color:var(--dark-70);max-width:62ch}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:24px}
  .card{background:var(--panel);border-left:4px solid var(--green);border-radius:8px;padding:26px 24px}
  .card p{margin:0;color:var(--dark-70);font-size:.94rem}

  /* ---------- realizacja ---------- */
  .case{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,52px);align-items:center}
  @media (min-width:860px){ .case{grid-template-columns:1.05fr .95fr} }
  .case-media{display:grid;gap:12px}
  .case-media img{border-radius:8px;width:100%;height:100%;object-fit:cover}
  .case-media .stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .case-media .stack img{aspect-ratio:4/3}
  .spec{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
  .spec li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
  .spec dt,.spec .k{color:var(--dark-55)}
  .spec .v{font-weight:bold;text-align:right;font-variant-numeric:tabular-nums}

  /* ---------- pasek pasywny ---------- */
  .passive{background:var(--dark);color:var(--white)}
  .passive h2{color:var(--white)}
  .passive p{color:rgba(255,255,255,.78);max-width:60ch}
  .passive .accent{color:var(--green)}

  /* ---------- kontakt ---------- */
  .contact{background:var(--green)}
  .contact .wrap{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}
  .contact h2{margin:0 0 8px}
  .contact p{margin:0;color:rgba(16,24,32,.78)}
  .contact-links{display:flex;flex-direction:column;gap:6px;font-size:1.05rem}
  .contact-links a{color:var(--dark);font-weight:bold;text-decoration:none;border-bottom:2px solid rgba(16,24,32,.45)}
  .contact-links a:hover{border-bottom-color:var(--white);color:var(--white)}
  .socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .social-link{
    display:inline-block;padding:9px 16px;border:2px solid var(--dark);border-radius:6px;
    color:var(--dark);text-decoration:none;font-weight:bold;font-size:.82rem
  }
  .social-link:hover{background:var(--dark);color:var(--green)}

  footer.site{background:var(--green);border-top:1px solid rgba(16,24,32,.18);text-align:center;padding:22px 24px;font-size:.86rem;color:rgba(16,24,32,.85)}

  /* ---------- oznaczenie tekstu zmyślonego ---------- */
  .tbd{
    background:rgba(166,210,57,.22);
    box-shadow:inset 0 -1px 0 rgba(16,24,32,.28);
    padding:0 3px;border-radius:2px;
  }
  .hero .tbd, .passive .tbd{background:rgba(166,210,57,.26);box-shadow:inset 0 -1px 0 rgba(255,255,255,.4)}

  .legend{background:#11161c;color:#cfd6dd;padding-block:34px;font-size:.9rem;line-height:1.75}
  .legend .wrap{max-width:820px}
  .legend h4{font-family:var(--display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 14px}
  .legend ol{margin:0;padding-left:1.25rem;display:grid;gap:8px}
  .legend mark{background:rgba(166,210,57,.25);color:#eef3f7;padding:0 3px;border-radius:2px}

/* --- tylko podstrona "Budynki pasywne" --- */
/* ---- dodatki tylko dla podstrony "Budynki pasywne" ---- */
  .page-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(320px,46vh,440px)}
  .page-hero .hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
  .page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(100deg, rgba(16,24,32,.9) 0%, rgba(16,24,32,.74) 48%, rgba(16,24,32,.3) 100%)}
  .page-hero .wrap{padding-block:clamp(38px,6vw,66px);max-width:760px}
  .page-hero h1{font-family:var(--display);color:var(--white);font-size:clamp(1.45rem,3.8vw,2.5rem);line-height:1.2;margin:0 0 18px;text-wrap:balance}
  .page-hero p{color:rgba(255,255,255,.88);font-size:clamp(1rem,1.4vw,1.12rem);max-width:58ch;margin:0}
  .page-hero .eyebrow{color:var(--green)}

  .prose p{color:var(--dark-70);max-width:66ch}
  .prose p + p{margin-top:16px}
  .pull{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.5;font-weight:bold;color:var(--dark);
    border-left:4px solid var(--green);padding-left:20px;margin:28px 0;max-width:52ch}

  /* tabela kryteriów */
  .crit{width:100%;border-collapse:collapse;margin-top:26px;font-size:.95rem}
  .crit caption{text-align:left;color:var(--dark-55);font-size:.85rem;padding-bottom:12px}
  .crit th,.crit td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
  .crit thead th{font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-55);border-bottom:2px solid var(--dark)}
  .crit td.num{font-weight:bold;white-space:nowrap;font-variant-numeric:tabular-nums}
  .crit td.why{color:var(--dark-55)}
  .crit-scroll{overflow-x:auto}

  /* rysunek + legenda */
  .diagram{display:grid;gap:clamp(24px,3vw,44px);align-items:center;grid-template-columns:1fr}
  @media (min-width:900px){ .diagram{grid-template-columns:1.15fr .85fr} }
  .diagram svg{width:100%;height:auto;display:block;border-radius:8px;background:#eef1e7}
  .rules{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:r}
  .rules li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
  .rules .n{width:28px;height:28px;border-radius:50%;background:var(--dark);color:var(--green);
    display:grid;place-items:center;font-weight:bold;font-size:.9rem;margin-top:2px}
  .rules h3{margin:0 0 4px}
  .rules p{margin:0;color:var(--dark-70);font-size:.92rem}

  /* mity */
  .myths{display:grid;gap:18px}
  .myth{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:8px;padding:22px 24px}
  .myth h3{margin:0 0 8px;color:var(--dark)}
  .myth p{margin:0;color:var(--dark-70);font-size:.94rem}
  .myth .said{display:block;font-family:var(--body);font-weight:normal;color:var(--dark-55);font-size:.86rem;margin-bottom:6px}

  /* autorka */
  .author{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr;align-items:center}
  @media (min-width:860px){ .author{grid-template-columns:.8fr 1.2fr} }
  .author img{border-radius:10px;width:100%;object-fit:cover;aspect-ratio:3/4}

  .steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
  .steps li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:none}
  .steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
    font-family:var(--display);font-size:.78rem;color:var(--green);padding-top:3px}
  .steps strong{display:block}
  .steps span{color:var(--dark-70);font-size:.92rem}

  /* cztery kafle w ukladzie 2x2, zeby zaden nie zostawal sam w rzedzie */
  @media (min-width:760px){ .cards.cards-2{grid-template-columns:repeat(2,1fr)} }

  /* pasek kontaktowy: tekst i dane obok siebie, a nie jedno pod drugim */
  .contact .wrap > div:first-child{flex:1 1 420px;max-width:620px}
  .contact .contact-links{flex:0 1 280px}


/* Odnosnik do rejestru Passive House Institute — na jasnym i ciemnym tle */
.verify-link{margin:14px 0 0}
.verify-link a{
	display:inline-block;
	font-family:var(--display);
	font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
	color:var(--dark);text-decoration:none;
	border-bottom:2px solid var(--green);padding-bottom:3px;
}
.verify-link a:hover{border-bottom-color:var(--dark)}
.verify-link.on-dark a{color:var(--green);border-bottom-color:var(--green)}
.verify-link.on-dark a:hover{color:var(--white);border-bottom-color:var(--white)}


/* ============================================================
   Znak Certified Passive House Designer (Passive House Institute)
   ============================================================ */

/* Granatowy pasek na stronie glownej: tekst po lewej, znak po prawej */
.wrap.cert-split{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center}
.cert-split .cert-text{flex:1 1 420px;min-width:0}
.cert-split .cert-badge{flex:0 0 auto;margin:0}
.cert-badge img,
.author .cert-inline img,
.cert-inline img{
	display:block;
	width:clamp(96px,11vw,132px);   /* granatowy pasek na stronie glownej */
	height:auto;
	aspect-ratio:1 / 1;     /* znak jest kwadratowy; rezerwuje miejsce zanim sie wczyta */
	object-fit:contain;     /* nadpisuje .author img (cover) */
	border-radius:4px;
	background:#fff;
}
.cert-badge a,
.cert-inline a{display:inline-block;transition:opacity .2s}
.cert-badge a:hover,
.cert-inline a:hover{opacity:.82}

/* Podstrona "Budynki pasywne": znak obok zdania o certyfikacie */

/* Na podstronie "Budynki pasywne" znak jest mniejszy — mniej wiecej
   na wysokosc akapitu, obok ktorego stoi. */
.author .cert-inline img,
.cert-inline img{width:clamp(68px,7vw,88px)}

.cert-inline{
	display:flex;gap:18px;align-items:center;
	margin-top:22px;padding-top:20px;
	border-top:1px solid var(--line);
}
.cert-inline > a{flex:0 0 auto}
.cert-inline p{margin:0}
@media (max-width:520px){
	.cert-inline{flex-direction:column;gap:14px}
}