/* ===========================================================================
   Wspólne komponenty trzech podstron „Proces budowy…" (rezydencji, domu
   murowanego, domu szkieletowego) — identyczny arkusz makiet, różni je
   tylko treść i liczba etapów.

   `.hero` tutaj to WŁASNY wariant tej rodziny (72vh, wyrównanie do dołu,
   gradient z lewej i z dołu) — inny niż `.hero-segment` (82vh, ze strzałką
   zachęty) używany na Rezydencjach/Domach murowanych/Domach szkieletowych.
   =========================================================================== */

section { padding: 120px 0; }
/* Kotwica sekcji kontaktu — wynagradza wysokość nagłówka `position:fixed`
   przy przewijaniu do `#kontakt`. Ten sam wzorzec co `.sekcja-kotwica`
   w `projekty.css` (skopiowana nazwa, nie zależność między plikami). */
.sekcja-kotwica { scroll-margin-top: 90px; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 56px); }
.section-head p { color: var(--text); margin-top: 20px; font-size: 18px; font-weight: 300; }

/* --- Hero (72vh, gradient z lewej, bez strzałki zachęty) ------------------ */

.hero {
  position: relative;
  min-height: calc(72vh - var(--header-h));
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 128%; object-fit: cover; object-position: center 60%; will-change: transform; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, .26) 64%, rgba(0, 0, 0, .05) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%);
}
.hero .container { width: 100%; }
.hero-inner { padding: 0 0 84px; max-width: 760px; }
.hero .eyebrow { color: #e9dfce; }
.hero h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 200; margin-bottom: 24px; letter-spacing: -.03em; }
.hero p { font-size: clamp(17px, 2vw, 21px); font-weight: 300; opacity: .9; margin-bottom: 34px; max-width: 600px; }
.hero-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hero-actions .link { color: #fff; }

/* Ścieżka okruszków w jasnym tekście na ciemnym tle hero — ten sam wzorzec
   co `segment.css`/`o-nas.css` (ikona domku + `/` jako separator). */
.crumbs { font-size: 13px; color: rgba(255, 255, 255, .8); margin-bottom: 16px; display: flex; align-items: center; }
.crumbs a { color: #e9dfce; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { margin: 0 8px; opacity: .5; }
.crumb-home { display: inline-flex; }
.crumb-home svg { width: 15px; height: 15px; }

/* --- Interaktywny explorer etapów ("`.px`") ------------------------------- */

.px { margin-top: 4px; }

/* Liczba etapów idzie z atrybutu `data-etapy` — ten sam wzorzec co
   `.timeline[data-kolumny]` w `segment.css`. Wcięcie linii to
   100 / (2 × etapów): 3→16,66%, 5→10%, 6→8,33%. */
.px-time { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 6px 0 50px; }
.px-time[data-etapy="3"] { grid-template-columns: repeat(3, 1fr); }
.px-time[data-etapy="5"] { grid-template-columns: repeat(5, 1fr); }
.px-time[data-etapy="6"] { grid-template-columns: repeat(6, 1fr); }
.px-line { position: absolute; top: 8px; left: 10%; right: 10%; height: 2px; background: var(--line); }
.px-time[data-etapy="3"] .px-line { left: 16.66%; right: 16.66%; }
.px-time[data-etapy="5"] .px-line { left: 10%; right: 10%; }
.px-time[data-etapy="6"] .px-line { left: 8.33%; right: 8.33%; }
.px-line-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--beige); width: 0; transition: width .5s cubic-bezier(.2, 0, .2, 1); }
.px-node {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 6px;
  text-align: center;
}
.px-node .dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: 0 0 0 6px #fff;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
  z-index: 1;
}
.px-node .lb { display: flex; flex-direction: column; gap: 5px; line-height: 1.25; }
.px-node .lb .n { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--beige-dark); font-weight: 500; }
.px-node .lb .t { font-size: 14.5px; font-weight: 400; letter-spacing: -.01em; color: var(--text); transition: color .3s ease; }
.px-node:hover .dot { border-color: var(--beige); }
.px-node.active .dot { background: var(--beige); border-color: var(--beige); transform: scale(1.18); }
.px-node.active .lb .t { color: var(--ink); }

.px-panel { position: relative; }
.px-slide { display: none; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.px-slide.active { display: grid; animation: pxFade .5s ease; }
@keyframes pxFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.px-media { overflow: hidden; align-self: stretch; min-height: 430px; clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 52px, 100% 100%, 0 100%); }
.px-media img { width: 100%; height: 100%; object-fit: cover; }
.px-step { display: inline-block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--beige-dark); font-weight: 500; margin-bottom: 16px; }
.px-body h3 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 18px; }
.px-body .d { color: var(--text); margin-bottom: 26px; font-size: 17px; }
.px-scope { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.px-scope li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; color: var(--ink); }
.px-scope li svg { width: 18px; height: 18px; color: var(--beige); margin-top: 4px; }

.px-nav { display: flex; justify-content: space-between; margin-top: 46px; gap: 16px; }
.px-nav button {
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 13px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.px-nav button:hover { border-color: var(--beige); color: var(--beige-dark); }

@media (max-width: 860px) {
  .px-node .lb .t { font-size: 12.5px; }
  .px-node { gap: 12px; padding: 0 3px; }
  .px-slide.active { grid-template-columns: 1fr; gap: 30px; }
  .px-media { min-height: 260px; order: -1; }
}

/* --- Ciemny pasek ze zdjęciem w tle ("jeden wykonawca") ------------------- */

.cta-band { position: relative; overflow: hidden; color: #fff; padding: 130px 0; }
.cta-band .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .74)); }
.cta-band .cta-inner { max-width: 720px; }
.cta-band .eyebrow { color: #e9dfce; }
.cta-band h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 22px; color: #fff; }
.cta-band p { opacity: .85; margin-bottom: 8px; font-weight: 300; }
.cta-band .points { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.cta-band .points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; color: rgba(255, 255, 255, .85); }
.cta-band .points li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--beige); margin-top: 9px; }
.cta-band .link { color: #fff; margin-top: 30px; }

/* --- Zakres współpracy: inwestor / RISER.domy ----------------------------- */

.zakres-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.zakres-card {
  background: var(--bg-alt);
  padding: 42px 40px;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  transition: transform .45s cubic-bezier(.2, 0, .2, 1), box-shadow .45s ease;
}
.zakres-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26, 26, 28, .06); }
.zakres-card h4 { font-size: 18px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.zakres-card ul { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.zakres-card li { font-size: 15px; color: var(--text); display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.zakres-card li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--beige); margin-top: 9px; }
.zakres-card.out h4 { color: var(--text); }
.zakres-card.out li::before { background: #c9c6c0; }
/* Jedyny rozjazd między dwiema makietami tej rodziny: murowana ma kartę
   „po stronie inwestora" na białym tle z ramką, szkieletowa zostawia ją na
   szarym tle bazowym, bez ramki. Stąd nadpisanie tylko pod jedną klasą. */
main.proces-budowy-domu-murowanego .zakres-card.out { background: #fff; border: 1px solid var(--line); }
.zakres-card.brand { background: var(--beige); }
.zakres-card.brand h4 { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.zakres-card.brand li { color: #fff; }
.zakres-card.brand li::before { background: #fff; }
.zakres-card.brand:hover { box-shadow: 0 18px 44px rgba(175, 151, 121, .35); }

@media (max-width: 860px) { .zakres-cards { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .zakres-card { transition: none; } }
section.alt { background: var(--bg-alt); }

/* --- Sekcja „Technologia Woodcore" (proces-budowy-domu-szkieletowego) ----- */

/* `.split .media` domyślnie ma skos i minimalną wysokość pod zdjęcie —
   diagram modułów Woodcore ma być wyśrodkowany, bez skosu i bez tła. */
.split .media.plain { background: none; clip-path: none; display: flex; align-items: center; justify-content: center; min-height: auto; }
/* Zdjęcie ma własne, czarne tło wypalone w pliku (fotografia produktowa) —
   `object-fit: cover` z bazowej `.split .media img` przycinał je, zostawiając
   ścianę czerni. Bez `cover`, w naturalnej proporcji, jak w makiecie. */
.split .media.plain img { width: 100%; height: auto; object-fit: unset; }
/* Lista przewag pod akapitem `.split p` (margin-bottom: 16px) potrzebuje
   większego odstępu niż domyślny `.px-scope` — tu, nie inline, bo kontekst
   (wewnątrz `.split .txt`) jest jednoznaczny przez selektor przodka. */
.split .px-scope { margin-top: 26px; }