/* ===========================================================================
   Komponenty podstron „Projekty domów murowanych/szkieletowych".

   Obie makiety mają IDENTYCZNY arkusz — sprawdzone porównaniem plików —
   różni je tylko treść. `.hero-segment`, `.scroll-cue` i skala `.section-head`
   przychodzą z `segment.css`; tutaj jest to, czego nie ma nigdzie indziej.

   Sekcje wykorzystujące te klasy nie mają własnej sekcji „opinii" — segment
   projektowy kończy się tabelą porównawczą, FAQ i formularzem.
   =========================================================================== */

.section-head { margin-bottom: 58px; }

/* `.crumbs`/`.crumb-home` przyszły z `segment.css` (już ładowane na obu
   stronach projektów) — nie duplikujemy tu. */

/* Akapit wiodący sekcji — szerszy niż domyślny `.section-head p`. */
.lead-p { color: var(--text); font-size: 17px; max-width: 760px; }

/* --- Sekcja na tle przełamanym (ta sama rola co `section.who` gdzie indziej,
   ale ten komponent ma inną nazwę klasy w makietach tej rodziny) --------- */

.orient { background: var(--bg-alt); }

/* Cel kotwicy z kafla „od czego zacząć" / karty decyzyjnej — margines na
   przewijanie, inaczej nagłówek chowałby się pod przyklejonym menu. */
.sekcja-kotwica { scroll-margin-top: 90px; }

.orient-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.orient-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px 28px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.orient-card:hover { border-color: var(--beige); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26, 26, 28, .06); }
.orient-card .ic { width: 30px; height: 30px; stroke: var(--beige); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; display: block; }
.orient-card h3 { font-size: 20px; font-weight: 400; margin-bottom: 10px; letter-spacing: -.01em; }
.orient-card p { font-size: 15px; color: var(--text); }

/* --- Kafle gotowych koncepcji (nazwane projekty, nie placeholdery) ------ */
.pjgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; margin-bottom: 8px; }
.pjcard {
  display: block;
  color: inherit;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.pjcard:hover { border-color: var(--beige); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(26, 26, 28, .08); }
.pjcard-img { aspect-ratio: 4 / 3; overflow: hidden; }
.pjcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, 0, .2, 1); }
.pjcard:hover .pjcard-img img { transform: scale(1.05); }
.pjcard-b { padding: 24px 24px 26px; }
.pjcard-b h3 { font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.pjcard-m { font-size: 14px; color: var(--text); margin: 8px 0 14px; }
.pjcard .go { display: inline-flex; align-items: center; gap: 6px; color: var(--beige-dark); font-size: 15px; }
.pjcard .go .chev { transition: transform .2s ease; }
.pjcard:hover .go .chev { transform: translateX(3px); }
@media (max-width: 860px) { .pjgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pjgrid { grid-template-columns: 1fr; } }

/* Odstęp nad kolejnym `.mini-head` po siatce/kafelkach — w makiecie inline
   `style="margin-top:...px"`, tu jako reguła współdzielona (zamiast CSS-a
   w HTML-u). Wartości z makiety: ~90-96px, przyjęte jednolicie na 90px. */
.pjgrid + .mini-head,
.pstep-grid + .mini-head,
.timeline + .mini-head {
  margin-top: 90px;
}

/* `.mini-head` po notatce źródłowej stoi bliżej (makieta: 56px), a notatka
   tuż pod nim ma mniejszy odstęp dolny niż samodzielna (26px zamiast 44px). */
.src-note + .mini-head { margin-top: 56px; }
.mini-head + .src-note { margin-bottom: 26px; }

/* Notatka z akcentem przy lewej krawędzi — używana pod siatką koncepcji. */
.axis-note,
.p1-lead-box {
  background: #fff;
  border-left: 3px solid var(--beige);
  padding: 22px 26px;
  font-size: 16px;
  color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.axis-note { margin-top: 30px; }
.p1-lead-box { background: var(--bg-alt); padding: 18px 24px; font-size: 15.5px; margin-bottom: 44px; }
/* Odnośnik wewnątrz akapitu ma płynąć z tekstem, nie zajmować własny rządek —
   `.link` gdzie indziej jest `inline-flex` dla strzałki, tu nie ma strzałki. */
.p1-lead-box .link, .honest .link { display: inline; }

@media (max-width: 860px) { .orient-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .orient-card { transition: none; } }

/* --- „Od czego zacząć" — kolumna sticky + karty ścieżek ----------------- */

.start-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 60px; align-items: start; }

.start-left { position: sticky; top: 100px; align-self: start; }
.start-left h2 { font-size: clamp(28px, 3.6vw, 46px); }
.start-left > p { color: var(--text); margin-top: 16px; font-size: 17px; max-width: 440px; }
.start-img { margin-top: 30px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.start-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }

.start-right { display: flex; flex-direction: column; gap: 22px; }
.start-card {
  display: block;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  padding: 34px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.start-card:hover { border-color: var(--beige); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(26, 26, 28, .06); }
.start-card .ic { width: 32px; height: 32px; stroke: var(--beige); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; display: block; }
.start-card .st { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--beige-dark); font-weight: 500; }
.start-card h3 { font-size: 23px; font-weight: 300; margin: 6px 0 10px; letter-spacing: -.01em; }
.start-card p { font-size: 15.5px; color: var(--text); }
/* Karta jest linkiem do sekcji ścieżki — „Zobacz ścieżkę ›" na dole karty. */
.start-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--beige-dark); font-size: 15px; }
.start-card .go .chev { transition: transform .2s ease; }
.start-card:hover .go .chev { transform: translateX(3px); }

@media (max-width: 860px) {
  .start-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Sticky nie ma sensu w jednej kolumnie, a stała pozycja psuje układ. */
  .start-left { position: static; }
  /* Zdjęcie tylko odciąża kolumnę na desktopie — na telefonie zbędne. */
  .start-img { display: none; }
}
@media (prefers-reduced-motion: reduce) { .start-card { transition: none; } }

/* --- Zalety / ograniczenia (plusy i minusy) ------------------------------ */

.path-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.path-cols .prose p { color: var(--text); margin-bottom: 14px; }
.path-cols .prose h4 { font-size: 16px; margin: 22px 0 8px; letter-spacing: -.01em; }

.pc-box {
  border: 1px solid var(--line);
  padding: 26px 28px;
  background: var(--bg-alt);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.pc-box h5 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--beige-dark); font-weight: 500; margin: 0 0 14px; }
.pc-box h5 + h5 { margin-top: 24px; }

.plist, .mlist { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; margin: 0; }
.plist li, .mlist li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--text); }
/* Znak plusa/minusa jako treść pseudoelementu, nie znak listy — łatwiej
   pokolorować niż `::marker`, a nie wymaga osobnej ikony SVG na pozycję. */
.plist li::before { content: '+'; color: var(--beige-dark); font-weight: 600; }
.mlist li::before { content: '–'; color: #b3b0aa; font-weight: 600; }

.honest {
  background: var(--ink);
  color: #fff;
  padding: 22px 26px;
  margin-top: 22px;
  font-size: 15.5px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.honest b { color: #fff; font-weight: 500; }

.pros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }

@media (max-width: 860px) {
  .path-cols { grid-template-columns: 1fr; gap: 26px; }
  .pros-grid { grid-template-columns: 1fr; }
}

/* --- Kroki procesu w kartach --------------------------------------------- */

.mini-head { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--beige-dark); margin-bottom: 22px; }

.pstep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.pstep-grid.g3 { grid-template-columns: repeat(3, 1fr); }

.pstep {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  padding: 26px 24px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: border-color .35s ease, transform .35s ease;
}
.pstep:hover { border-color: var(--beige); transform: translateY(-3px); }
.pstep .no { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--beige-dark); font-weight: 500; }
.pstep .ic { width: 28px; height: 28px; stroke: var(--beige); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin: 14px 0 12px; display: block; }
.pstep h4 { font-size: 16px; margin-bottom: 8px; letter-spacing: -.01em; }
.pstep p { font-size: 13.5px; color: var(--text); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) { .pstep { transition: none; } }

/* --- Liczby / fakty ------------------------------------------------------ */

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
/* Wariant dwukolumnowy — sekcja „Technologia modułowa" ma dwa fakty, nie trzy. */
.facts.f2 { grid-template-columns: repeat(2, 1fr); }
.fact { background: var(--ink); color: #fff; padding: 26px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.fact .v { font-size: clamp(22px, 2.6vw, 30px); font-weight: 200; letter-spacing: -.01em; line-height: 1.15; }
/* Wartość „do uzupełnienia" jest mniejsza, żeby nie rozsadzać karty. */
.fact .v .todo { font-size: 14px; }
.fact .l { font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 10px; text-transform: uppercase; letter-spacing: .08em; }

/* --- Skąd pochodzi projekt (chipy) --------------------------------------- */

.src-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.src-chips span { border: 1px solid var(--line); border-radius: 980px; padding: 9px 18px; font-size: 14px; color: var(--ink); background: #fff; }
.src-note { font-size: 14.5px; color: var(--text); margin-bottom: 44px; }

@media (max-width: 860px) {
  .pstep-grid, .pstep-grid.g3 { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pstep-grid, .pstep-grid.g3 { grid-template-columns: 1fr; }
}

/* Znacznik miejsca, które redaktor musi jeszcze uzupełnić — widoczny tylko
   dopóki treść nie zostanie wpisana; zostaje w kodzie na wypadek kolejnych
   podstron tej rodziny. */
.todo { background: #fff6e6; border: 1px dashed #d8b76a; color: #8a6d2f; padding: 3px 8px; border-radius: 5px; font-size: 13px; }

/* --- Tabela porównawcza --------------------------------------------------- */

.cmp-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 680px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.cmp-table tbody th { font-weight: 400; color: var(--ink); white-space: nowrap; }
.cmp-table td { color: var(--text); }

.cmp-dark { background: var(--ink); color: #fff; }
.cmp-dark .eyebrow { color: #e9dfce; }
.cmp-dark .section-head h2 { color: #fff; }
.cmp-dark .cmp-table th, .cmp-dark .cmp-table td { border-bottom-color: rgba(255, 255, 255, .14); }
.cmp-dark .cmp-table thead th { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.cmp-dark .cmp-table tbody th { color: #fff; }
.cmp-dark .cmp-table td { color: rgba(255, 255, 255, .72); }

/* Przełącznik kolumny wyróżnionej — skrypt dokłada `col-on`/`col-dim`. */
.cmp2-seg { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
/* Skos w prawym górnym rogu, nie zaokrąglenie — brandowy kształt CTA,
   ten sam co `.btn-cut` i karty. Prawy padding większy o szerokość skosu,
   żeby tekst nie wchodził pod ścięty narożnik. */
.c2b {
  appearance: none;
  font-family: inherit;
  font-size: 14px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 0;
  padding: 10px 24px 10px 20px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.c2b:hover { border-color: var(--beige); }
.c2b.active { background: var(--beige); border-color: var(--beige); color: #fff; }

.cmp-table td, .cmp-table th { transition: background .3s ease, opacity .3s ease, color .3s ease; }
.cmp-dark .cmp-table td.col-on, .cmp-dark .cmp-table th.col-on { background: rgba(175, 151, 121, .2); color: #fff; }
.cmp-dark .cmp-table thead th.col-on { border-bottom-color: var(--beige); }
.cmp-table td.col-dim, .cmp-table th.col-dim { opacity: .35; }

/* Na wąskim ekranie tabela nie mieści 3 ścieżek w rzędzie — zamiast
   przewijania w bok, "rozkłada się" w blok (sprawdzony wzorzec responsywnych
   tabel). Te same 4 przyciski dostają nowe zadanie: nie tylko podświetlają,
   ale REALNIE chowają pozostałe dwie ścieżki (`col-dim` → `display:none`),
   więc wybór zakładki daje czystą, jednokolumnową listę bez przewijania.
   „Wszystkie" (bez klas col-on/col-dim) pokazuje 3 wartości pod każdym
   kryterium, z etykietą ścieżki z `data-etykieta` przed każdą. */
@media (max-width: 700px) {
  .cmp-wrap { overflow-x: visible; }
  .cmp-table { min-width: 0; }
  .cmp-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table tbody tr { padding: 20px 0; }
  .cmp-table tbody tr th { padding: 0 0 12px; border: none; font-size: 16px; }
  .cmp-table tbody td { padding: 5px 0; border: none; }
  .cmp-table tbody td::before { content: attr(data-etykieta) ": "; font-weight: 500; }
  .cmp-dark .cmp-table tbody td.col-on { background: none; color: var(--beige); }
  .cmp-table tbody td.col-dim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .c2b, .cmp-table td, .cmp-table th { transition: none; }
}

/* --- „Jak wybrać" — karty decyzyjne -------------------------------------- */

.decide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.decide-card {
  border: 1px solid var(--line);
  padding: 28px 26px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: border-color .35s ease, transform .35s ease;
}
.decide-card:hover { border-color: var(--beige); transform: translateY(-3px); }
.decide-card .st { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--beige-dark); font-weight: 500; }
.decide-card h4 { font-size: 19px; font-weight: 300; margin: 10px 0 12px; }
.decide-card p { font-size: 14.5px; color: var(--text); margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) { .decide-card { transition: none; } }

/* --- Proces jako lista numerowana ---------------------------------------- */

/* Numer w kółku to licznik CSS, nie tekst w treści — redaktor zmienia
   kolejność pozycji, a numeracja przelicza się sama. */
.psteps { list-style: none; counter-reset: ps; display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0; }
.psteps li { counter-increment: ps; position: relative; padding: 0 0 30px 62px; border-left: 1.5px solid var(--line); margin-left: 18px; }
.psteps li:last-child { border-left: none; padding-bottom: 0; }
.psteps li::before {
  content: counter(ps, decimal-leading-zero);
  position: absolute;
  left: -18px; top: -4px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--beige);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.psteps h4 { font-size: 17px; margin-bottom: 6px; }
.psteps p { font-size: 14.5px; color: var(--text); }
/* Wyróżnienie momentu, w którym trzy ścieżki się rozchodzą. */
.psteps .split-mark { color: var(--beige-dark); font-weight: 500; }

@media (max-width: 860px) { .decide-grid { grid-template-columns: 1fr; } }