/*
 * sections.css - style poszczegolnych sekcji strony.
 */

/* ==========================================================================
   Ekran otwierajacy
   ========================================================================== */

.bn-hero {
	position: relative;
	min-height: 100vh;
	padding-block: var(--bn-space-3xl) var(--bn-space-xl);
	background-color: var(--bn-ink);
	overflow: hidden;
	display: flex;
	align-items: center;
}

/*
 * Tresc ekranu otwierajacego jest wysrodkowana, a grafika stoi pod nia -
 * tak jak w wersji 1.x. Tlo jest plaskie, bez gradientu.
 */
.bn-hero__inner {
	display: block;
	width: 100%;
	text-align: center;
}

.bn-hero__title {
	margin: var(--bn-space-md) 0 var(--bn-space-2xs);
	padding-inline: var(--bn-gutter);
	font-size: var(--bn-text-5xl);
	font-weight: 400;
	line-height: 56px;
}

/*
 * Kursor maszyny do pisania. W oryginale byl to prawa krawedz elementu,
 * migajaca animacja CSS - i tak zostaje.
 */
.bn-hero__typed {
	display: inline-block;
	border-right: 0.1em solid var(--bn-accent);
	animation: bn-caret 0.75s step-end infinite;
}

@keyframes bn-caret {
	from, to { border-color: transparent; }
	50%      { border-color: var(--bn-accent); }
}

.bn-hero__text {
	max-width: 800px;
	margin: 0 auto var(--bn-space-md);
	padding-inline: var(--bn-gutter);
	font-size: var(--bn-text-base);
	line-height: 28px;
}

.bn-hero__figure {
	display: grid;
	place-items: center;
	margin-block-start: var(--bn-space-lg);
}

.bn-hero__figure img {
	max-width: min(500px, 100%);
}

.bn-hero__scroll {
	position: absolute;
	inset-block-end: var(--bn-space-sm);
	inset-inline-start: 50%;
	translate: -50% 0;
	color: var(--bn-accent);
}

@media (max-width: 768px) {
	.bn-hero__title {
		font-size: var(--bn-text-lg);
		line-height: 36px;
	}

	.bn-hero__text {
		font-size: 15px;
		line-height: 24px;
		margin-bottom: var(--bn-space-3xs);
		padding-inline: var(--bn-space-sm);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bn-hero__typed {
		animation: none;
	}
}

/* ==========================================================================
   Naglowek podstrony
   ========================================================================== */

/* Pas z grafika tla i przycienieniem w kolorze akcentu - jak w wersji 1.x. */
.bn-page-header {
	position: relative;
	padding-block: var(--bn-space-3xl);
	background:
		linear-gradient(var(--bn-accent-wash), var(--bn-overlay)),
		url('../img/bg.png') fixed center center;
	background-size: cover;
	overflow: hidden;
	text-align: center;
}

.bn-page-header__title {
	margin-block-end: var(--bn-space-2xs);
	font-size: var(--bn-text-2xl);
	font-weight: 700;
}

/* ==========================================================================
   Uslugi
   ========================================================================== */

/*
 * Uslugi staly w dwoch kolumnach (col-lg-6). Przy trzech kolumnach tekst
 * obok ikony zwezal sie do trzech slow w wierszu.
 */
.bn-services {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 992px) {
	.bn-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Wezwanie do dzialania
   ========================================================================== */

/*
 * Wezwanie do dzialania to pas na cala szerokosc okna z grafika tla,
 * a nie karta w kontenerze. Odpowiada sekcji "#valuation" z wersji 1.x.
 */
.bn-cta {
	display: grid;
	gap: var(--bn-space-md);
	align-items: center;
	padding: 0;
	background: none;
	position: relative;
}

@media (min-width: 769px) {
	.bn-cta {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
		gap: var(--bn-space-lg);
	}

	.bn-cta__action {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

.bn-cta__body {
	position: relative;
}

.bn-cta__title {
	margin-block-end: var(--bn-space-3xs);
	font-size: var(--bn-text-2xl);
	font-weight: 700;
}

.bn-cta__text {
	margin: 0;
}

.bn-cta__action {
	position: relative;
}

/* ==========================================================================
   Technologie
   ========================================================================== */

/* Technologie: dwie kolumny, od duzego ekranu trzy (col-6 col-lg-4). */
.bn-tech {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	--bn-grid-gap: var(--bn-space-sm);
	align-items: start;
}

@media (min-width: 992px) {
	.bn-tech {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Miejsce na ikone jest zarezerwowane niezaleznie od tego, czy ikona
 * istnieje. Bez tego pozycje bez rozpoznanej ikony podjezdzaly do gory
 * i caly rzad ukladal sie w szachownice.
 */
.bn-tech__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-block-end: var(--bn-space-2xs);
}

/*
 * Technologie nie maja tla ani ramki - to sam wysrodkowany tekst z ikona
 * nad nim. Kafle byly moim dodatkiem i tutaj znikaja.
 */
.bn-tech__item {
	display: block;
	margin-block-end: var(--bn-space-xs);
	text-align: center;
}

.bn-tech__item .bn-icon {
	--bn-icon-size: 40px;
	margin: 0 auto var(--bn-space-2xs);
	color: var(--bn-accent);
	transition: color var(--bn-duration-slow);
}

.bn-tech__label {
	margin: 0 0 var(--bn-space-xs);
	font-size: var(--bn-text-xl);
	font-weight: 300;
	color: var(--bn-text);
}

/* ==========================================================================
   Proces - jak dzialamy
   ========================================================================== */

/* Etapy wspolpracy: cztery kolumny na duzym ekranie (col-lg-3). */
.bn-process {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 768px) {
	.bn-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.bn-process {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Numeracja krokow niesie tu realna informacje - to kolejnosc etapow
 * wspolpracy, a nie ozdoba. Dlatego numer jest widoczny i duzy.
 */
/* Etap wspolpracy: numer w ramce, bez tla kafla - jak "#howdoing" w 1.x. */
.bn-process__step {
	position: relative;
	padding: var(--bn-space-lg);
	margin-block-end: var(--bn-space-md);
	text-align: center;
	height: 100%;
}

.bn-process__number {
	display: block;
	margin: 0 auto var(--bn-space-xs);
	color: #fff;
	font-size: var(--bn-text-6xl);
	font-weight: 700;
	line-height: 1.2;
	border: 2px solid var(--bn-accent);
}

.bn-process__title {
	margin-block-end: var(--bn-space-xs);
	font-size: var(--bn-text-2xl);
	font-weight: 400;
	color: #fff;
}

.bn-process__text {
	margin: 0;
	color: var(--bn-accent);
	font-size: var(--bn-text-base);
	font-weight: 300;
}

/* ==========================================================================
   Zakres oferty
   ========================================================================== */

/* Zakres oferty: trzy kolumny na duzym ekranie (col-lg-4 col-md-6). */
.bn-offer {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 768px) {
	.bn-offer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.bn-offer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bn-offer__list {
	margin: 0 0 var(--bn-space-md);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--bn-space-3xs);
}

.bn-offer__item {
	display: flex;
	align-items: flex-start;
	gap: var(--bn-space-2xs);
	color: var(--bn-text-muted);
	font-size: var(--bn-text-base);
}

.bn-offer__item .bn-icon {
	--bn-icon-size: 1.1rem;
	margin-block-start: 0.35em;
	color: var(--bn-accent);
}

/* ==========================================================================
   Cennik
   ========================================================================== */

/* Cennik: dwie kolumny (col-lg-6 col-12). */
.bn-pricing {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 992px) {
	.bn-pricing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bn-pricing__intro {
	max-width: 46rem;
	margin-block-end: var(--bn-space-md);
	color: var(--bn-text-muted);
}

.bn-price {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 45px 28px;
	margin-block-end: var(--bn-space-md);
	background: var(--bn-accent);
	color: var(--bn-on-accent);
	box-shadow: var(--bn-shadow);
	text-align: center;
}

.bn-price__title {
	margin-block-end: var(--bn-space-xs);
	color: var(--bn-on-accent);
	font-size: var(--bn-text-2xl);
	font-weight: 400;
}

.bn-price__amount {
	margin: 0;
	color: var(--bn-on-accent);
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
}

/*
 * Redaktorzy wpisuja kwote razem z podpisem: "1 200<span>PLN netto</span>".
 * W wersji 1.x podpis mial 20 px przy kwocie 40 px i tak zostaje.
 */
.bn-price__amount span {
	color: var(--bn-on-accent);
	font-size: var(--bn-text-lg);
}

.bn-price__amount sup {
	top: -20px;
	font-size: var(--bn-text-lg);
}

.bn-price__unit {
	margin-block-end: var(--bn-space-sm);
	color: var(--bn-on-accent);
	font-size: var(--bn-text-lg);
}

.bn-price__text {
	color: var(--bn-on-accent);
	font-size: var(--bn-text-base);
	text-align: left;
}

.bn-price__actions {
	display: grid;
	gap: var(--bn-space-2xs);
	justify-items: center;
	margin-block-start: auto;
	padding-block-start: var(--bn-space-sm);
}

.bn-pricing__note {
	margin-block-start: var(--bn-space-md);
	padding: var(--bn-space-md);
	background: none;
	border: 0;
	color: var(--bn-text);
	font-size: var(--bn-text-sm);
}

.bn-pricing__note {
	margin-block-start: var(--bn-space-md);
	padding: var(--bn-space-md);
	background: var(--bn-surface-sunken);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

/* ==========================================================================
   Zespol
   ========================================================================== */

.bn-team {
	--bn-stack-gap: var(--bn-space-md);
}

.bn-member {
	display: grid;
	gap: var(--bn-space-md);
	padding: var(--bn-space-md);
	background: var(--bn-surface-raised);
	box-shadow: var(--bn-shadow-sm);
	align-items: start;
}

@media (min-width: 993px) {
	.bn-member {
		grid-template-columns: 30% minmax(0, 1fr);
		gap: var(--bn-space-md);
	}
}

.bn-member__photo {
	overflow: hidden;
	background: var(--bn-ink);
	border-radius: var(--bn-radius-tile);
}

.bn-member__photo img {
	transition: transform var(--bn-duration-fast);
}

.bn-member:hover .bn-member__photo img {
	transform: scale(1.1);
}

.bn-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-member__name {
	margin-block-end: var(--bn-space-3xs);
	color: var(--bn-accent);
	font-size: 17px;
	font-weight: 700;
}

/* Stanowisko ma pod soba krotka kreske - element z wersji 1.x. */
.bn-member__role {
	display: block;
	position: relative;
	padding-block-end: var(--bn-space-2xs);
	font-size: var(--bn-text-sm);
	font-weight: 500;
}

.bn-member__role::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: block;
	width: 50px;
	height: 1px;
	background: var(--bn-border-light);
}

.bn-member__bio {
	margin-block-start: var(--bn-space-2xs);
	font-size: var(--bn-text-xs);
}

/* Przyciski profili w karcie zespolu sa kwadratami w kolorze akcentu. */
.bn-member .bn-social__link {
	width: 32px;
	height: 32px;
	background: var(--bn-accent);
	border: 0;
	border-radius: var(--bn-radius-tile);
	color: var(--bn-on-accent);
}

.bn-member .bn-social__link:hover {
	background: var(--bn-accent-dark);
	color: var(--bn-on-accent);
}

/* ==========================================================================
   Referencje
   ========================================================================== */

.bn-reference {
	display: grid;
	gap: var(--bn-space-md);
	padding: 45px 28px;
	margin-block-end: var(--bn-space-md);
	background: var(--bn-accent);
	color: var(--bn-on-accent);
	box-shadow: var(--bn-shadow);
	align-items: center;
}

@media (min-width: 992px) {
	/* Proporcja 3:9 odpowiada kolumnom col-lg-3 i col-lg-9 z wersji 1.x. */
	.bn-reference {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		gap: var(--bn-space-md);
	}
}

.bn-reference__logo {
	display: grid;
	place-items: center;
}

.bn-reference__logo img {
	max-height: 6rem;
	width: auto;
	object-fit: contain;
}

.bn-reference__name {
	margin-block-end: var(--bn-space-2xs);
	color: var(--bn-on-accent);
	font-size: var(--bn-text-lg);
	font-weight: 400;
}

.bn-reference__quote {
	position: relative;
	margin: 0 0 var(--bn-space-sm);
	padding: 0;
	border: 0;
	color: var(--bn-on-accent);
	font-style: normal;
	font-size: var(--bn-text-base);
}

.bn-reference__quote .bn-icon {
	--bn-icon-size: 25px;
	margin-block-end: var(--bn-space-2xs);
	color: var(--bn-on-accent);
}

.bn-reference .bn-btn--quiet {
	color: var(--bn-on-accent);
}

.bn-reference .bn-btn--quiet .bn-icon {
	--bn-icon-size: 25px;
}

/* ==========================================================================
   Liczby
   ========================================================================== */

/* Liczby: cztery kolumny na duzym ekranie (col-lg-3 col-6). */
.bn-counts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

@media (min-width: 992px) {
	.bn-counts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bn-count {
	display: grid;
	gap: var(--bn-space-3xs);
	padding: var(--bn-space-lg);
	text-align: center;
	height: 100%;
}

.bn-count__value {
	color: #fff;
	font-size: var(--bn-text-6xl);
	font-weight: 700;
	line-height: 1.2;
	/* Cyfry o stalej szerokosci - licznik nie skacze podczas odliczania. */
	font-variant-numeric: tabular-nums;
}

.bn-count__label {
	margin: 0;
	color: #fff;
	font-size: var(--bn-text-2xl);
	font-weight: 400;
}

.bn-count__text {
	margin: 0;
	color: var(--bn-accent);
	font-size: var(--bn-text-base);
	font-weight: 300;
}

/* ==========================================================================
   Cele i podsumowanie
   ========================================================================== */

.bn-goal__title {
	margin-block-end: var(--bn-space-2xs);
}

.bn-goal__media {
	border-radius: var(--bn-radius);
	overflow: hidden;
}

.bn-resume__item + .bn-resume__item {
	margin-block-start: var(--bn-space-md);
	padding-block-start: var(--bn-space-md);
	border-block-start: 1px solid var(--bn-border);
}

.bn-resume__title {
	margin-block-end: var(--bn-space-3xs);
	font-size: var(--bn-text-lg);
}

.bn-resume__subtitle {
	display: block;
	margin-block-end: var(--bn-space-2xs);
	color: var(--bn-accent);
	font-size: var(--bn-text-sm);
	font-weight: 700;
}

.bn-resume__text {
	color: var(--bn-text-muted);
}

/* ==========================================================================
   Wpisy
   ========================================================================== */

/* Wpisy: cztery kolumny na duzym ekranie. */
.bn-posts {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 768px) {
	.bn-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.bn-posts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bn-entry__header {
	margin-block-end: var(--bn-space-md);
}

.bn-entry__meta {
	margin-block-start: var(--bn-space-2xs);
}

.bn-entry__media {
	margin-block-end: var(--bn-space-md);
	border-radius: var(--bn-radius-lg);
	overflow: hidden;
}

.bn-entry__footer {
	margin-block-start: var(--bn-space-lg);
	padding-block-start: var(--bn-space-md);
	border-block-start: 1px solid var(--bn-border);
}

.bn-post-nav {
	display: grid;
	gap: var(--bn-space-sm);
	margin-block-start: var(--bn-space-lg);
}

@media (width >= 48rem) {
	.bn-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bn-post-nav a {
	display: block;
	padding: var(--bn-space-sm);
	background: var(--bn-surface-raised);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	text-decoration: none;
}

.bn-post-nav a:hover {
	border-color: var(--bn-accent);
}

.bn-post-nav__label {
	display: block;
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

.bn-post-nav__title {
	color: var(--bn-text-strong);
	font-weight: 700;
}

.bn-post-nav__next {
	text-align: end;
}

/* ==========================================================================
   Blad 404 i pusty wynik
   ========================================================================== */

.bn-error {
	display: grid;
	place-items: center;
	gap: var(--bn-space-md);
	min-height: 60vh;
	padding-block: var(--bn-space-xl);
	text-align: center;
}

.bn-error__code {
	margin: 0;
	color: var(--bn-accent);
	font-size: 120px;
	font-weight: 700;
	line-height: 1;
}

.bn-error__text {
	max-width: 32rem;
}

/* ==========================================================================
   Stopka
   ========================================================================== */

.bn-footer {
	margin-block-start: auto;
	background: var(--bn-ink);
	font-size: var(--bn-text-sm);
}

.bn-footer__main {
	display: grid;
	gap: var(--bn-space-lg);
	padding-block: var(--bn-space-xl);
}

@media (width >= 56rem) {
	.bn-footer__main {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
		gap: var(--bn-space-xl);
	}
}

.bn-footer__title {
	margin: 0;
	font-size: var(--bn-text-4xl);
	line-height: 1;
	text-transform: uppercase;
}

.bn-footer__tagline {
	margin: 0 0 var(--bn-space-2xs);
	color: var(--bn-accent);
	font-size: var(--bn-text-base);
}

.bn-footer__text {
	font-size: var(--bn-text-sm);
	line-height: 24px;
}

.bn-footer__heading {
	margin-block-end: var(--bn-space-xs);
	font-size: var(--bn-text-base);
	text-transform: uppercase;
	letter-spacing: var(--bn-tracking-wide);
}

.bn-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--bn-space-3xs);
}

.bn-footer__menu a {
	color: #fff;
	font-size: var(--bn-text-sm);
	text-decoration: none;
}

.bn-footer__menu a:hover,
.bn-footer__menu a:focus-visible {
	color: var(--bn-accent);
}

.bn-contact {
	display: grid;
	gap: var(--bn-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bn-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--bn-space-2xs);
	color: #fff;
	font-size: var(--bn-text-sm);
	line-height: 28px;
}

.bn-contact__item .bn-icon {
	--bn-icon-size: 30px;
	flex-shrink: 0;
	color: var(--bn-accent);
}

.bn-contact__item a {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 768px) {
	.bn-contact__item .bn-icon {
		--bn-icon-size: 25px;
	}
}

.bn-contact__item a:hover {
	color: var(--bn-accent);
}

.bn-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-space-2xs);
	/* To jest lista - bez tego znaczniki punktowania wychodza obok ikon. */
	margin: var(--bn-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.bn-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--bn-ink);
	border: 1px solid var(--bn-accent);
	border-radius: var(--bn-radius-full);
	color: var(--bn-accent);
	transition: background var(--bn-duration-fast), color var(--bn-duration-fast);
}

.bn-social__link .bn-icon {
	--bn-icon-size: 18px;
}

.bn-social__link:hover,
.bn-social__link:focus-visible {
	background: var(--bn-accent);
	color: var(--bn-ink);
}

/* --- Partnerzy --- */

.bn-partners {
	padding-block: var(--bn-space-md);
	overflow: hidden;
}

.bn-partners__grid {
	--bn-grid-min: 8rem;
	--bn-grid-gap: var(--bn-space-md);
	align-items: center;
}

.bn-partners__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	margin-inline: auto;
	padding-block: var(--bn-space-xs);
	opacity: 0.5;
	transition: opacity var(--bn-duration-fast);
}

.bn-partners__logo:hover img {
	opacity: 1;
}

/* --- Chmura tagow --- */

.bn-tag-cloud {
	padding-block: var(--bn-space-md);
	background: var(--bn-ink);
	overflow: hidden;
}

.bn-tag-cloud__grid {
	--bn-grid-min: 12rem;
	--bn-grid-gap: var(--bn-space-md);
	align-items: start;
}

.bn-tag-cloud ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.bn-tag-cloud ul {
	text-align: center;
}

.bn-tag-cloud a {
	color: #fff;
	font-size: var(--bn-text-xs);
	text-decoration: none;
}

.bn-tag-cloud a:hover {
	color: var(--bn-accent);
}

/* --- Pasek dolny --- */

.bn-footer__bar {
	display: grid;
	gap: var(--bn-space-2xs);
	padding-block: var(--bn-space-sm);
	color: #fff;
	font-size: var(--bn-text-sm);
	text-align: center;
}

@media (width >= 48rem) {
	.bn-footer__bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		text-align: start;
	}

	.bn-footer__legal {
		justify-self: end;
	}
}

.bn-footer__legal a {
	color: #fff;
	text-decoration: none;
}

.bn-footer__legal a:hover {
	color: var(--bn-accent);
}

/*
 * Pas wezwania do dzialania korzysta z tego samego tla co naglowek podstrony,
 * ale ma mniejsza wysokosc - jak "#valuation" w wersji 1.x.
 */
.bn-cta-band {
	padding-block: var(--bn-space-2xl);
	text-align: start;
}

/* Slot ikony w danych kontaktowych - staly rozmiar niezaleznie od tego,
   czy ikona zostala rozpoznana. */
.bn-contact__icon {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
}

@media (max-width: 768px) {
	.bn-contact__icon {
		width: 25px;
	}
}