/*
 * NDI — Nasze podejście.
 * Version: 2.0
 */

body.home .ndi-approach-v2 {
position: relative;
isolation: isolate;
min-height: 780px;
overflow: hidden;
background: #101d31;
color: #fff;
}

body.home .ndi-approach-v2__background {
position: absolute;
z-index: -3;
inset: 0;
background-image: var(
--ndi-approach-image,
linear-gradient(135deg, #17263d, #293b4e)
);
background-position: center;
background-size: cover;
transform: scale(1.005);
}

body.home .ndi-approach-v2__overlay {
position: absolute;
z-index: -2;
inset: 0;
background:
linear-gradient(
90deg,
rgba(10, 22, 39, .97) 0%,
rgba(10, 22, 39, .93) 30%,
rgba(10, 22, 39, .74) 52%,
rgba(10, 22, 39, .32) 74%,
rgba(10, 22, 39, .18) 100%
),
linear-gradient(
180deg,
rgba(8, 18, 32, .04) 40%,
rgba(8, 18, 32, .94) 100%
);
}

body.home .ndi-approach-v2__inner {
position: relative;
display: flex;
min-height: 780px;
flex-direction: column;
padding-top: clamp(76px, 8vw, 118px);
padding-bottom: 58px;
}

body.home .ndi-approach-v2__content {
width: min(690px, 58%);
}

body.home .ndi-approach-v2__kicker {
display: flex;
align-items: center;
gap: 18px;
margin: 0 0 24px;
color: #d1a16f;
font-family: var(--font-ui, sans-serif);
font-size: 12px;
font-weight: 750;
letter-spacing: .18em;
line-height: 1.4;
text-transform: uppercase;
}

body.home .ndi-approach-v2__kicker::after {
content: '';
display: block;
width: 52px;
height: 1px;
background: currentColor;
opacity: .75;
}

body.home .ndi-approach-v2 h2 {
max-width: 670px;
margin: 0;
color: #fff;
font-family: var(--font-heading, sans-serif);
font-size: clamp(46px, 5.1vw, 76px);
font-weight: 650;
line-height: .98;
letter-spacing: -.052em;
text-wrap: balance;
}

body.home .ndi-approach-v2__lead {
max-width: 650px;
margin: 30px 0 0;
color: rgba(255, 255, 255, .79);
font-family: var(--font-ui, sans-serif);
font-size: clamp(17px, 1.35vw, 20px);
font-weight: 400;
line-height: 1.65;
}

body.home .ndi-approach-v2__cta {
display: inline-flex;
align-items: center;
gap: 18px;
width: fit-content;
margin-top: 34px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(209, 161, 111, .62);
color: #d1a16f;
font-family: var(--font-ui, sans-serif);
font-size: 12px;
font-weight: 750;
letter-spacing: .11em;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
}

body.home .ndi-approach-v2__cta span:last-child {
font-size: 20px;
transition: transform .25s ease;
}

body.home .ndi-approach-v2__cta:hover span:last-child {
transform: translateX(5px);
}

body.home .ndi-approach-v2__aside {
position: absolute;
top: 82px;
right: 0;
display: flex;
flex-direction: column;
margin: 0;
color: rgba(255, 255, 255, .62);
font-family: var(--font-ui, sans-serif);
font-size: 11px;
font-weight: 750;
letter-spacing: .26em;
line-height: 1.8;
text-align: right;
text-transform: uppercase;
}

body.home .ndi-approach-v2__aside::after {
content: '';
align-self: flex-end;
width: 48px;
height: 1px;
margin-top: 17px;
background: rgba(255, 255, 255, .55);
}

body.home .ndi-approach-v2__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(34px, 5vw, 76px);
margin-top: auto;
padding-top: 64px;
}

body.home .ndi-approach-v2__step {
position: relative;
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 26px;
align-items: start;
}

body.home .ndi-approach-v2__step:not(:last-child)::after {
content: '';
position: absolute;
top: 42px;
right: calc(-1 * clamp(17px, 2.5vw, 38px));
width: clamp(34px, 5vw, 76px);
height: 1px;
background: rgba(209, 161, 111, .48);
}

body.home .ndi-approach-v2__number {
display: grid;
width: 84px;
height: 84px;
place-items: center;
border: 1px solid rgba(209, 161, 111, .76);
border-radius: 50%;
color: #d1a16f;
font-family: var(--font-heading, sans-serif);
font-size: 24px;
font-weight: 650;
line-height: 1;
}

body.home .ndi-approach-v2__step-content {
padding-top: 9px;
}

body.home .ndi-approach-v2__step h3 {
margin: 0;
color: #fff;
font-family: var(--font-heading, sans-serif);
font-size: clamp(22px, 1.75vw, 29px);
font-weight: 650;
line-height: 1.12;
letter-spacing: -.025em;
}

body.home .ndi-approach-v2__step p {
max-width: 330px;
margin: 15px 0 0;
color: rgba(255, 255, 255, .67);
font-family: var(--font-ui, sans-serif);
font-size: 15px;
font-weight: 400;
line-height: 1.55;
}

@media (max-width: 1120px) {
body.home .ndi-approach-v2__content {
width: min(680px, 70%);
}

body.home .ndi-approach-v2__steps {
gap: 28px;
}

body.home .ndi-approach-v2__step {
grid-template-columns: 70px minmax(0, 1fr);
gap: 20px;
}

body.home .ndi-approach-v2__number {
width: 68px;
height: 68px;
font-size: 21px;
}

body.home .ndi-approach-v2__step:not(:last-child)::after {
display: none;
}
}

@media (max-width: 900px) {
body.home .ndi-approach-v2 {
min-height: 0;
}

body.home .ndi-approach-v2__background {
background-position: 62% center;
}

body.home .ndi-approach-v2__overlay {
background:
linear-gradient(
90deg,
rgba(9, 20, 36, .96) 0%,
rgba(9, 20, 36, .82) 65%,
rgba(9, 20, 36, .58) 100%
),
linear-gradient(
180deg,
rgba(9, 20, 36, .08) 30%,
rgba(9, 20, 36, .96) 100%
);
}

body.home .ndi-approach-v2__inner {
min-height: 0;
padding-top: 84px;
padding-bottom: 60px;
}

body.home .ndi-approach-v2__content {
width: min(680px, 82%);
}

body.home .ndi-approach-v2__aside {
display: none;
}

body.home .ndi-approach-v2__steps {
grid-template-columns: 1fr;
gap: 28px;
margin-top: 72px;
padding-top: 0;
}

body.home .ndi-approach-v2__step {
grid-template-columns: 70px minmax(0, 1fr);
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, .17);
}

body.home .ndi-approach-v2__step p {
max-width: 620px;
}
}

@media (max-width: 767px) {
body.home .ndi-approach-v2__background {
background-position: 67% center;
}

body.home .ndi-approach-v2__overlay {
background:
linear-gradient(
180deg,
rgba(9, 20, 36, .7) 0%,
rgba(9, 20, 36, .88) 38%,
rgba(9, 20, 36, .985) 72%,
rgba(9, 20, 36, 1) 100%
);
}

body.home .ndi-approach-v2__inner {
width: calc(100% - 40px);
padding-top: 66px;
padding-bottom: 52px;
}

body.home .ndi-approach-v2__content {
width: 100%;
}

body.home .ndi-approach-v2 h2 {
font-size: clamp(39px, 11.5vw, 52px);
line-height: 1;
}

body.home .ndi-approach-v2__lead {
margin-top: 24px;
font-size: 16px;
line-height: 1.6;
}

body.home .ndi-approach-v2__cta {
margin-top: 28px;
}

body.home .ndi-approach-v2__steps {
gap: 22px;
margin-top: 58px;
}

body.home .ndi-approach-v2__step {
grid-template-columns: 58px minmax(0, 1fr);
gap: 17px;
padding-top: 21px;
}

body.home .ndi-approach-v2__number {
width: 56px;
height: 56px;
font-size: 17px;
}

body.home .ndi-approach-v2__step-content {
padding-top: 3px;
}

body.home .ndi-approach-v2__step h3 {
font-size: 23px;
}

body.home .ndi-approach-v2__step p {
margin-top: 10px;
font-size: 14px;
line-height: 1.55;
}
}

@media (prefers-reduced-motion: reduce) {
body.home .ndi-approach-v2__cta span:last-child {
transition: none;
}
}

/* NDI_APPROACH_CUSTOM_IMAGE_20260923 START */
body.home .ndi-approach-v2 {
    --ndi-approach-image:
        url('../assets/images/ndi-nasze-podejscie.webp') !important;
}

body.home .ndi-approach-v2::before {
    background-position: center center;
}
/* NDI_APPROACH_CUSTOM_IMAGE_20260923 END */