/* ==========================================================================
   Bory Home — komponenty współdzielone przez wszystkie szablony
   ========================================================================== */

/* --- Sekcje --------------------------------------------------------------- */

.bh-section {
  padding: var(--bh-pad-y) var(--bh-pad-x);
  scroll-margin-top: var(--bh-header-h);
}
.bh-section--alt  { background: var(--bh-surface-alt); }
.bh-section--dark { background: var(--bh-ink); color: #fff; }
.bh-section--flush { padding-left: 0; padding-right: 0; }

.bh-section--dark .bh-lead,
.bh-section--dark .bh-body { color: var(--bh-on-dark); }
.bh-section--dark .bh-eyebrow { color: var(--bh-accent); }
.bh-section--dark a { color: #fff; }

.bh-inner { max-width: var(--bh-max); margin-inline: auto; }

/* Nagłówek sekcji: eyebrow + H2 + lead */
.bh-section-head { max-width: 720px; margin: 0 0 44px; }
.bh-section-head--center { margin-inline: auto; text-align: center; }
.bh-section-head .bh-eyebrow { display: block; margin: 0 0 16px; }
.bh-section-head .bh-h2 { margin: 0 0 16px; }
/* W nagłówku wyśrodkowanym H2 ma zwykle własny `max-width`, więc bez
   `margin-inline: auto` jego blok przykleja się do lewej krawędzi. */
.bh-section-head--center .bh-h2,
.bh-section-head--center .bh-lead { margin-inline: auto; }

/* Nagłówek z akcją / leadem po prawej */
.bh-section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin: 0 0 46px;
  flex-wrap: wrap;
}
.bh-section-bar--tight { margin-bottom: 40px; }
.bh-section-bar .bh-section-head { margin: 0; }
.bh-section-bar .bh-section-head .bh-h2 { margin: 0; max-width: 20ch; }
/* Gdy pod nagłówkiem jest jeszcze lead, potrzebny jest odstęp. */
.bh-section-bar .bh-section-head .bh-h2:not(:last-child) { margin-bottom: 14px; }
/* Lead w prawej kolumnie jest węższy niż lead pod nagłówkiem. */
.bh-section-bar > .bh-lead { max-width: 34ch; margin: 0; }
.bh-section-bar .bh-section-head .bh-lead { max-width: 50ch; margin: 0; }

/* Modyfikatory szerokości łamania — prototypy podają je osobno dla każdej
   sekcji. Nagłówek w pasku sekcji ma wyżej `max-width: 20ch` z zasięgiem
   trzech klas, więc modyfikator musi mieć taki sam, żeby wygrać kolejnością. */
.bh-section-head .bh-h2--16,
.bh-section-bar .bh-section-head .bh-h2--16 { max-width: 16ch; }
.bh-section-head .bh-h2--18,
.bh-section-bar .bh-section-head .bh-h2--18 { max-width: 18ch; }
.bh-section-head .bh-h2--20,
.bh-section-bar .bh-section-head .bh-h2--20 { max-width: 20ch; }
.bh-section-head .bh-h2--22,
.bh-section-bar .bh-section-head .bh-h2--22 { max-width: 22ch; }
.bh-section-head .bh-h2--24,
.bh-section-bar .bh-section-head .bh-h2--24 { max-width: 24ch; }
.bh-lead--32 { max-width: 32ch; }
.bh-lead--34 { max-width: 34ch; }
.bh-lead--36,
.bh-section-bar > .bh-lead--36 { max-width: 36ch; }
/* Lead w prawej kolumnie paska ma własny `max-width` z dwóch klas, więc
   modyfikator musi powtórzyć ten zasięg, żeby wygrać kolejnością. */
.bh-lead--38,
.bh-section-bar > .bh-lead--38 { max-width: 38ch; }
.bh-lead--52 { max-width: 52ch; }


/* --- Okruszki -------------------------------------------------------------
   Karty produktowe i podstrona aplikacji mają tę samą ścieżkę nad hero. */

.bh-crumbs { padding: 20px var(--bh-pad-x) 0; }
.bh-crumbs__inner {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font: 400 12.5px/1 var(--bh-font);
  color: var(--bh-text-4);
}
.bh-crumbs a { color: var(--bh-text-4); }
.bh-crumbs a:hover { color: var(--bh-ink); }
.bh-crumbs [aria-current] { color: var(--bh-ink); font-weight: 600; }

/* --- Przyciski ------------------------------------------------------------ */

/* Warianty pełne nie mają obwódki (jak w projekcie), warianty obwódkowe mają
   1 px i o 1 px mniejszy padding pionowy, żeby wysokości się zgadzały. */
.bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 22px;
  border: 0;
  border-radius: var(--bh-pill);
  font: 700 14px/1 var(--bh-font);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--bh-t-fast), background var(--bh-t-fast),
              border-color var(--bh-t-fast), color var(--bh-t-fast);
}

.bh-btn--primary { background: var(--bh-accent); color: var(--bh-ink); }
.bh-btn--primary:hover { filter: brightness(.94); color: var(--bh-ink); }

.bh-btn--ink { background: var(--bh-ink); color: #fff; }
.bh-btn--ink:hover { background: var(--bh-ink-soft); color: #fff; }

.bh-btn--ghost {
  background: transparent;
  color: var(--bh-ink);
  border: 1px solid var(--bh-border-strong);
  padding: 14px 22px;
}
.bh-btn--ghost:hover { border-color: var(--bh-ink); color: var(--bh-ink); }

/* Wariant na ciemnym tle / w hero ze zdjęciem */
.bh-btn--on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 14px 22px;
}
.bh-btn--on-dark:hover { border-color: #fff; color: #fff; }

.bh-btn--sm { padding: 13px 20px; font-size: 13.5px; }
.bh-btn--sm.bh-btn--ghost, .bh-btn--sm.bh-btn--on-dark { padding: 12px 20px; }
.bh-btn--md { padding: 15px 22px; font-size: 14px; }
.bh-btn--md.bh-btn--ghost, .bh-btn--md.bh-btn--on-dark { padding: 14px 22px; }
.bh-btn--lg { padding: 18px 28px; font-size: 15px; }
.bh-btn--lg.bh-btn--ghost, .bh-btn--lg.bh-btn--on-dark { padding: 17px 28px; }
/* Przyciski w nagłówku sekcji mają węższy padding poziomy. */
.bh-section-bar__actions .bh-btn { padding: 15px 20px; font-size: 14px; }
.bh-section-bar__actions .bh-btn--ghost { padding: 14px 20px; }

.bh-btn[disabled], .bh-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

/* Link ze strzałką */
.bh-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 13.5px/1 var(--bh-font);
  color: var(--bh-ink);
}
.bh-arrow-link::after { content: '→'; transition: transform var(--bh-t-base); }
.bh-arrow-link:hover::after { transform: translateX(3px); }

/* --- Plakietki ------------------------------------------------------------ */

.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--bh-pill);
  background: var(--bh-accent);
  color: var(--bh-ink);
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bh-badge--soft   { background: var(--bh-surface-alt); color: var(--bh-text-3); }
.bh-badge--ink    { background: var(--bh-ink); color: #fff; }
.bh-badge--outline{ background: transparent; border: 1px solid var(--bh-border-strong); color: var(--bh-text-3); }

/* Kropka statusu z pulsem */
.bh-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12.5px/1 var(--bh-font);
  color: var(--bh-text-4);
}
.bh-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bh-success);
  box-shadow: 0 0 0 3px rgba(95, 208, 138, .22);
  animation: bh-pulse 2.6s ease-in-out infinite;
}

/* --- Karty ---------------------------------------------------------------- */

.bh-card {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-xl);
  box-shadow: var(--bh-shadow-card);
  transition: transform var(--bh-t-base), border-color var(--bh-t-base), box-shadow var(--bh-t-base);
}
.bh-card--pad { padding: 26px; }

.bh-card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--bh-accent);
  box-shadow: var(--bh-shadow-card-hover);
}

.bh-card--on-dark {
  background: var(--bh-ink-soft);
  border-color: var(--bh-ink-border);
  color: #fff;
  box-shadow: none;
}

.bh-card--selected {
  background: var(--bh-accent-bg);
  border-color: var(--bh-accent);
  border-width: 1.5px;
}

/* --- Ikona w żółtym kwadracie (README → Ikony) ---------------------------- */

.bh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--bh-accent);
  color: var(--bh-ink);
  flex: none;
}
.bh-icon svg { width: 22px; height: 22px; }
.bh-icon--sm { width: 32px; height: 32px; border-radius: 10px; }
.bh-icon--sm svg { width: 15px; height: 15px; }
.bh-icon--soft { background: var(--bh-surface-alt); }
.bh-icon--on-dark { background: var(--bh-ink-border); color: var(--bh-accent); }

/* --- Siatki --------------------------------------------------------------- */

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

@media (max-width: 1000px) {
  .bh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bh-grid--2, .bh-grid--3, .bh-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Pas zdjęć pełnej szerokości ------------------------------------------ */

.bh-photoband {
  display: grid;
  gap: 8px;
  height: 560px;
  background: var(--bh-ink);
}
.bh-photoband > div { overflow: hidden; }
.bh-photoband--triptych { grid-template-columns: 1.5fr 1fr 1fr; }
.bh-photoband--duo      { grid-template-columns: 1fr 1fr; }
.bh-photoband--single   { grid-template-columns: 1fr; }
.bh-photoband--thirds   { grid-template-columns: repeat(3, 1fr); }
/* Pasy na stronach dokumentów bywają wyższe niż domyślne 560 px. */
.bh-photoband--h580     { height: 580px; }
.bh-photoband--h600     { height: 600px; }
/* Trzy kadry z szerszym środkiem — wariant z kart produktowych i podstron. */
.bh-photoband--wide     { grid-template-columns: 1fr 1.35fr 1fr; }
.bh-photoband img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .bh-photoband { height: 340px; }
  .bh-photoband--triptych { grid-template-columns: 1.5fr 1fr; }
  .bh-photoband--triptych > *:last-child { display: none; }
}

/* --- Hero ze zdjęciami w tle ---------------------------------------------- */

.bh-hero {
  position: relative;
  background: var(--bh-ink);
  overflow: hidden;
  padding: 104px var(--bh-pad-x) 112px;
  color: #fff;
  text-align: center;
}

.bh-hero__bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 6px;
}
.bh-hero__frame { overflow: hidden; }
.bh-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.bh-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 26, 34, .5) 0%,
    rgba(12, 26, 34, .62) 55%,
    rgba(12, 26, 34, .72) 100%);
}

/* Treść hero leży nad tłem — każdy element osobno, bez wrappera (jak w prototypie). */
.bh-hero > *:not(.bh-hero__bg):not(.bh-hero__scrim) { position: relative; }

.bh-hero__inner { position: relative; max-width: var(--bh-max); margin-inline: auto; }

/* --- Hero podstrony ------------------------------------------------------- */
/* Ten sam układ mają katalog, standardy, „O nas" i kontakt: ciemne tło ze
   zdjęciami, treść po lewej, karty albo plakietki po prawej. */

.bh-hero--page {
  padding: 92px var(--bh-pad-x) 100px;
  text-align: left;
}

.bh-eyebrow--accent { color: var(--bh-accent); }

/* W główce sekcji eyebrow jest blokiem; w hero stoi luzem, więc marginesu
   nie dostałby jako element liniowy. */
.bh-hero--page .bh-eyebrow { display: block; margin: 0 0 16px; }

.bh-pagehero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: end;
  margin: 0 0 44px;
}

.bh-pagehero__title {
  font-size: 56px;
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -.038em;
  color: #fff;
  margin: 0 0 24px;
  max-width: 17ch;
}

.bh-pagehero__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--bh-on-dark-lead);
  max-width: 52ch;
}

@media (max-width: 1100px) {
  .bh-pagehero { grid-template-columns: 1fr; gap: 32px; }
  .bh-pagehero__title { font-size: 46px; }
}

@media (max-width: 860px) {
  .bh-hero--page { padding: 64px var(--bh-pad-x) 72px; }
}

/* --- Segmentowany przełącznik -------------------------------------------- */

.bh-segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--bh-surface-alt);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-pill);
}
.bh-segmented__opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: var(--bh-pill);
  font: 700 13px/1 var(--bh-font);
  color: var(--bh-text-3);
  cursor: pointer;
  transition: background var(--bh-t-base), color var(--bh-t-base);
}
.bh-segmented__opt[aria-selected="true"] { background: var(--bh-ink); color: #fff; }

/* --- Pas CTA na granacie -------------------------------------------------- */

.bh-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding: 48px;
  border-radius: var(--bh-r-2xl);
  background: var(--bh-ink);
  color: #fff;
  flex-wrap: wrap;
}
.bh-cta-band .bh-h2 { color: #fff; }
.bh-cta-band .bh-lead { color: var(--bh-on-dark); }
.bh-cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bh-cta-band__stack { display: flex; flex-direction: column; gap: 12px; }

/* Własny nagłówek pasa (nie `.bh-h2`) — pas bywa i sekcją, i wstawką. */
.bh-cta-band__heading {
  font: 800 34px/1.1 var(--bh-font);
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 14px;
}
.bh-cta-band__text {
  font: 400 15.5px/1.65 var(--bh-font);
  /* Odcień spoza tokenów — prototyp używa go w treści na granacie. */
  color: #8FA0AC;
}

/* --- Ścieżka w krokach ----------------------------------------------------
   Numerowane karty procesu; pierwsza wyróżniona. Używają jej „obsługa
   formalna", „personalizacja" i „o nas", więc komponent jest wspólny. */

.bh-path { gap: 18px; margin: 0 0 40px; }
.bh-path__card {
  background: var(--bh-surface-alt);
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 28px 26px 26px;
}
.bh-path__card--first { background: var(--bh-accent-bg); border-color: var(--bh-accent); }
.bh-path__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--bh-surface);
  font: 800 14px/1 var(--bh-font);
  margin: 0 0 18px;
}
.bh-path__card--first .bh-path__num { background: var(--bh-accent); }
.bh-path__title { font: 800 19px/1.2 var(--bh-font); letter-spacing: -.02em; margin: 0 0 9px; }
.bh-path__desc { font: 400 13.5px/1.6 var(--bh-font); color: var(--bh-text-2); }

/* --- Karuzela ze scroll-snap (mobile) ------------------------------------- */

.bh-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* zapas na cienie kart */
  padding: 14px var(--bh-gutter) 24px;
  margin-inline: calc(var(--bh-pad-x) * -1);
  padding-inline: var(--bh-pad-x);
  scrollbar-width: none;
}
.bh-rail::-webkit-scrollbar { display: none; }
.bh-rail > * { scroll-snap-align: start; }

/* --- Pole telefonu z wyborem kraju: przeniesione do `phone.css` (ładowany po tym arkuszu), bo strony ofert nie wczytują komponentów. */