/* ==========================================================================
   Bory Home — podstrony kolekcji (`nasze-domy/bory-one`, `…/kolekcja-standard`)
   Wartości z prototypów „Bory Home Kolekcja Bory One.dc.html" i „Bory Home
   Kolekcja Standard standalone-src.dc.html". Obie strony mają ten sam
   szkielet, więc dzielą arkusz i szablony — różnice są w danych.
   ========================================================================== */

/* Rytm sekcji na tej stronie to 88 px, jak w katalogu domów, a nie 96 px
   ze strony głównej. Nagłówki sekcji mają 42 px. Sekcja kontaktu jest wspólna
   ze stroną główną i zostaje przy swoich wartościach — prototyp ma ją tak samo.

   Zawężenie `#id` wygrałoby z warstwą telefonu (`mobile.css` operuje na
   klasach), więc poniżej 641 px rytm należy do tamtego pliku. */
@media (min-width: 641px) {
  #definicja,
  #gotowe-projekty,
  #zasady,
  #modele,
  #w-praktyce { padding-block: 88px; }


  #definicja .bh-h2,
  #gotowe-projekty .bh-h2,
  #zasady .bh-h2,
  #modele .bh-h2,
  #w-praktyce .bh-h2 {
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -.034em;
  }

  /* Granatowy pas ma w prototypie nagłówek o 2 px mniejszy od pozostałych. */
  #w-praktyce .bh-h2 { font-size: 40px; }
}

/* --- Hero ------------------------------------------------------------------ */

.bh-onehero { padding: 40px var(--bh-pad-x) 76px; }

.bh-onehero__top {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 52px;
  align-items: end;
  margin: 0 0 44px;
}

.bh-onehero__eyebrow { display: block; margin: 0 0 16px; }

.bh-onehero__title {
  font: 800 56px/1.02 var(--bh-font);
  letter-spacing: -.04em;
  margin: 0 0 20px;
  max-width: 15ch;
}

.bh-onehero__lead {
  font: 400 18px/1.6 var(--bh-font);
  color: var(--bh-text-3);
  margin: 0 0 26px;
  max-width: 44ch;
}

.bh-onehero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bh-onehero__actions .bh-btn { font-size: 15px; padding: 18px 26px; }
.bh-onehero__actions .bh-btn--ghost { padding: 17px 26px; }

/* Panel hero: Bory One stawia w nim pytanie, Standard podaje zakres metraży
   z cenami „od". Rusztowanie jest wspólne, różni się środek. */
.bh-onepanel {
  background: var(--bh-ink);
  border-radius: 28px;
  padding: 36px 34px 32px;
  color: #fff;
}
.bh-onepanel__label {
  font: 600 11px/1 var(--bh-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bh-on-dark-3);
  margin: 0 0 18px;
}
.bh-onepanel__quote {
  font: 600 21px/1.4 var(--bh-font);
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.bh-onepanel__value {
  font: 800 52px/1 var(--bh-font);
  letter-spacing: -.04em;
  color: var(--bh-accent);
  margin: 0 0 12px;
}
.bh-onepanel__desc {
  font: 400 14.5px/1.65 var(--bh-font);
  color: var(--bh-on-dark-3);
  margin: 0;
}
.bh-onepanel__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.bh-onepanel__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 13.5px/1.4 var(--bh-font);
  color: var(--bh-on-dark-3);
}
.bh-onepanel__row b { font-weight: 600; color: #fff; white-space: nowrap; }

.bh-onefeats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bh-onefeat { background: var(--bh-surface-alt); border-radius: var(--bh-r-xl); padding: 26px 26px 24px; }
.bh-onefeat__title { font: 800 15px/1.3 var(--bh-font); color: var(--bh-ink); margin: 0 0 8px; }
.bh-onefeat__desc { font: 400 13.5px/1.55 var(--bh-font); color: var(--bh-text-2); }

/* --- Sekcja dwukolumnowa (definicja, pas „w praktyce") --------------------- */

.bh-onesplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px; align-items: start; }
.bh-onesplit--center { align-items: center; }
/* Nagłówek w kolumnie nie ma pod sobą treści sekcji, więc gubi swój margines. */
.bh-onesplit__head { margin-bottom: 0; }

.bh-onenote { background: var(--bh-ink); border-radius: var(--bh-r-xl); padding: 24px 26px; margin: 26px 0 0; }
.bh-onenote__label {
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bh-accent);
  margin: 0 0 12px;
}
.bh-onenote__text { font: 400 14.5px/1.65 var(--bh-font); color: var(--bh-on-dark-lead); margin: 0; }

/* --- Listy punktów --------------------------------------------------------- */

.bh-onepoints {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-2xl);
  padding: 34px 32px 30px;
}
/* Wewnątrz karty lista nie rysuje drugiej karty. */
.bh-onepoints--plain { background: none; border: 0; border-radius: 0; padding: 0; }

.bh-onepoint {
  position: relative;
  padding-inline-start: 19px;
  font: 400 15px/1.6 var(--bh-font);
  color: var(--bh-text-3);
}
.bh-onepoint::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bh-accent);
}

/* --- „Dlaczego tylko gotowe projekty?" ------------------------------------- */

.bh-onecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bh-onecard { background: var(--bh-surface-alt); border-radius: var(--bh-r-2xl); padding: 34px 32px 30px; }
.bh-onecard__title {
  font: 800 21px/1.2 var(--bh-font);
  letter-spacing: -.024em;
  color: var(--bh-ink);
  margin: 0 0 22px;
}

/* --- Cztery zasady i karta „dla kogo" -------------------------------------- */

.bh-onerules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
.bh-onerule {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 24px;
  padding: 30px 28px 26px;
  transition: border-color var(--bh-t-slow), box-shadow var(--bh-t-slow);
}
.bh-onerule:hover { border-color: var(--bh-accent); box-shadow: var(--bh-shadow-card-hover); }
.bh-onerule__no {
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bh-text-4);
  margin: 0 0 18px;
}
.bh-onerule__title {
  font: 800 21px/1.2 var(--bh-font);
  letter-spacing: -.024em;
  color: var(--bh-ink);
  margin: 0 0 12px;
}
.bh-onerule__desc { font: 400 14.5px/1.65 var(--bh-font); color: var(--bh-text-2); margin: 0; }

.bh-oneaudience {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-2xl);
  padding: 32px 32px 28px;
}
.bh-oneaudience__title {
  font: 800 21px/1.2 var(--bh-font);
  letter-spacing: -.024em;
  color: var(--bh-ink);
  margin: 0 0 20px;
}
.bh-oneaudience__chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }
.bh-onechip {
  font: 600 14px/1 var(--bh-font);
  color: var(--bh-text-3);
  background: var(--bh-surface-alt);
  padding: 14px 18px;
  border-radius: var(--bh-pill);
}
/* Na białej sekcji (Standard) karta jest szara, a pigułki białe — odwrotnie
   niż na szarej sekcji Bory One. */
.bh-oneaudience--alt { background: var(--bh-surface-alt); border-color: transparent; }
.bh-oneaudience--alt .bh-onechip { background: var(--bh-surface); }

.bh-oneaudience__note { font: 400 15px/1.6 var(--bh-font); color: var(--bh-text-2); margin: 0; }

.bh-onelink {
  font-weight: 600;
  color: var(--bh-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--bh-accent);
  padding: 0 0 2px;
  transition: border-color var(--bh-t-base);
}
.bh-onelink:hover { border-color: var(--bh-ink); color: var(--bh-ink); }

/* --- Siatka modeli --------------------------------------------------------- */

.bh-onegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.bh-onemodel {
  display: flex;
  flex-direction: column;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-2xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--bh-t-slow), box-shadow var(--bh-t-slow), transform var(--bh-t-slow);
}
.bh-onemodel:hover {
  border-color: var(--bh-accent);
  box-shadow: 0 30px 56px -38px rgba(12, 26, 34, .36);
  transform: translateY(-3px);
  color: inherit;
}

.bh-onemodel__media { position: relative; display: block; aspect-ratio: 16 / 10; background: #EEF1F3; overflow: hidden; }
.bh-onemodel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-onemodel__badge {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 9px 12px;
  border-radius: var(--bh-pill);
}

.bh-onemodel__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; }
.bh-onemodel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 10px; }
.bh-onemodel__name { font: 800 25px/1.1 var(--bh-font); letter-spacing: -.028em; color: var(--bh-ink); }
.bh-onemodel__meta { flex: none; font: 600 13px/1.2 var(--bh-font); color: var(--bh-text-4); white-space: nowrap; }
.bh-onemodel__desc { font: 400 14.5px/1.6 var(--bh-font); color: var(--bh-text-2); margin: 0 0 22px; flex: 1; }
.bh-onemodel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0 0;
  border-top: 1px solid var(--bh-rule);
}
.bh-onemodel__price { font: 800 17px/1 var(--bh-font); letter-spacing: -.02em; color: var(--bh-ink); }
.bh-onemodel__cta {
  font: 600 13.5px/1 var(--bh-font);
  color: var(--bh-ink);
  border-bottom: 1.5px solid var(--bh-accent);
  padding: 0 0 3px;
}

/* Szósty kafel siatki Standardu — granatowa karta do konfiguratora. */
.bh-onepromo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bh-ink);
  border-radius: var(--bh-r-2xl);
  padding: 34px 32px 30px;
  color: #fff;
  text-decoration: none;
  transition: transform var(--bh-t-slow);
}
.bh-onepromo:hover { transform: translateY(-3px); color: #fff; }
.bh-onepromo__label {
  display: block;
  font: 600 11px/1 var(--bh-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bh-accent);
  margin: 0 0 18px;
}
.bh-onepromo__title {
  display: block;
  font: 800 28px/1.12 var(--bh-font);
  letter-spacing: -.03em;
  margin: 0 0 14px;
  max-width: 16ch;
}
.bh-onepromo__desc { display: block; font: 400 14.5px/1.65 var(--bh-font); color: var(--bh-on-dark-3); }
.bh-onepromo__cta {
  align-self: flex-start;
  font: 700 14.5px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 17px 24px;
  border-radius: var(--bh-pill);
  margin: 26px 0 0;
}

/* --- Pas „w praktyce" ------------------------------------------------------ */

.bh-onepractice__cta { margin: 28px 0 0; font-size: 15px; padding: 18px 26px; }

/* Szczelina 2 px to tło siatki między kaflami, nie odstęp — stąd `gap` przy
   kaflach w kolorze sekcji. */
.bh-onetiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, .12);
  border-radius: 24px;
  overflow: hidden;
}
.bh-onetile { background: var(--bh-ink); padding: 30px 28px; }
.bh-onetile__title { font: 800 19px/1.25 var(--bh-font); letter-spacing: -.022em; color: #fff; }
.bh-onetile__value {
  font: 800 27px/1 var(--bh-font);
  letter-spacing: -.03em;
  color: var(--bh-accent);
  margin: 0 0 9px;
}
.bh-onetile__label { font: 400 13px/1.5 var(--bh-font); color: var(--bh-on-dark-3); }

/* --- Zawężenia nagłówków sekcji -------------------------------------------- */

.bh-section-head--58 { max-width: 58ch; }
.bh-section-head--62 { max-width: 62ch; }
.bh-h2--20 { max-width: 20ch; }
.bh-h2--22 { max-width: 22ch; }
.bh-h2--24 { max-width: 24ch; }
.bh-h2--26 { max-width: 26ch; }

/* --- Warstwy pośrednie ----------------------------------------------------- */

@media (max-width: 1100px) {
  .bh-onerules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-onehero__title { font-size: 46px; }
}

@media (max-width: 860px) {
  .bh-onehero__top { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .bh-onesplit { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bh-onefeats { grid-template-columns: minmax(0, 1fr); }
  .bh-onecards { grid-template-columns: minmax(0, 1fr); }
  .bh-onegrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .bh-onehero { padding-block: 28px 56px; }
  .bh-onehero__title { font-size: 36px; }
  .bh-onerules { grid-template-columns: minmax(0, 1fr); }
  .bh-onetiles { grid-template-columns: minmax(0, 1fr); }
  .bh-onemodel__head { display: block; }
  .bh-onemodel__meta { display: block; margin: 6px 0 0; }
  .bh-onepanel,
  .bh-onepoints,
  .bh-onecard,
  .bh-onepromo,
  .bh-oneaudience { padding: 24px 22px 22px; }
  .bh-onepanel__value { font-size: 40px; }
  .bh-onepromo__title { font-size: 23px; max-width: none; }
}