/*
 * Compact 150 (NC 150) - style sekcji wg makiety "Nowa sekcja NC150".
 * Ładowany tylko na stronie maszyny compact-150 (patrz resources/functions.php).
 * Animacje korzystają z istniejącego mechanizmu .--observe -> .in-viewport (critical.js).
 *
 * Wymiary na desktopie (>= 64em) są przeliczone z makiety (strona 1299 px = 100vw), dzięki czemu proporcje
 * układu zostają takie same na różnych szerokościach ekranu. Poniżej 64em sekcje układają się w jedną kolumnę.
 */

.nc150 {
    --nc150-orange: #ff5321;
    --nc150-card: #0c0f15;
    --nc150-card-border: #1b212b;
    --nc150-grey: #a6a8ae;
    --nc150-line: #3f3f3f;
    --nc150-pad-y: clamp(3.5rem, 6.2vw, 8.5rem);
    color: #fff;
    background: #000;
    overflow: hidden;
}

.nc150 section[id] {
    scroll-margin-top: 6rem;
}

.nc150__accent {
    color: var(--nc150-orange);
}

.nc150__heading {
    text-align: center;
    color: #fff;
    margin: 0;
}

.nc150__heading--left {
    text-align: left;
}

.nc150__meet .nc150__heading {
    text-wrap: balance;
}

/* ---------------------------------------------------------------- animacje */
@keyframes nc150-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

html.js .nc150 .nc150__rise,
html.js .nc150 .nc150__fade {
    opacity: 0;
    transition: opacity 1s cubic-bezier(.22, .61, .36, 1), transform 1s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * .11s);
}

/* "wznoszenie" - tekst wjeżdża od dołu */
html.js .nc150 .nc150__rise {
    transform: translateY(2.25rem);
}

/* "pojawianie się" - zdjęcie/grafika wpływa z lekkim powiększeniem */
html.js .nc150 .nc150__fade {
    transform: scale(.94);
}

html.js .nc150 .in-viewport .nc150__rise,
html.js .nc150 .in-viewport .nc150__fade,
html.js .nc150 .in-viewport.nc150__rise,
html.js .nc150 .in-viewport.nc150__fade {
    opacity: 1;
    transform: none;
}

/* "oddech" - delikatne pulsowanie obrazu po wejściu w kadr */
.nc150__breathe {
    transform-origin: 50% 55%;
}

.in-viewport .nc150__breathe {
    animation: nc150-breathe 8s ease-in-out 1.2s infinite;
}

/* hero ma własną sekcję (--observe na samej sekcji) */
html.js .nc150__hero .nc150__heroImage {
    opacity: 0;
    transform: scale(.92);
    transition: opacity 1.2s cubic-bezier(.22, .61, .36, 1), transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

html.js .nc150__hero.in-viewport .nc150__heroImage {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js .nc150 .nc150__rise,
    html.js .nc150 .nc150__fade,
    html.js .nc150__hero .nc150__heroImage {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .in-viewport .nc150__breathe {
        animation: none;
    }
}

/* ---------------------------------------------------------------- szlif: reakcja kart i paneli na najechanie */
html.js .nc150 .nc150__card,
html.js .nc150 .nc150__panel {
    transition: opacity 1s cubic-bezier(.22, .61, .36, 1), transform 1s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, background-color .3s ease;
    transition-delay: calc(var(--i, 0) * .11s), calc(var(--i, 0) * .11s), 0s, 0s;
}

@media (hover: hover) {
    .nc150__card:hover,
    .nc150__panel:hover {
        background-color: #10141c;
        border-color: rgba(255, 83, 33, .55);
    }
}

/* ---------------------------------------------------------------- 1. hero (reszta stylów: t-singleMachineHero) */
.t-singleMachineHero.--compact-150 {
    position: relative;
    z-index: 0;
    padding-bottom: 2.5rem;
}

.t-singleMachineHero.--compact-150 .t-singleMachineHero__image {
    display: block;
    width: clamp(15rem, 27vw, 26rem);
    height: auto;
    margin: 0 auto;
}

/* Nawigacja hero w jednej linii (4 pozycje zamiast 3; w DE długie etykiety): bez zawijania i z mniejszymi odstępami.
 * Tylko >= 68.75em (poniżej nawigacja i tak układa się pionowo jak na pozostałych stronach). */
@media (min-width: 68.75em) {
    .t-singleMachineHero.--compact-150 .t-singleMachineHero__navList {
        flex: 0 0 auto;
        flex-flow: row nowrap;
        justify-content: flex-end;
    }

    .t-singleMachineHero.--compact-150 .t-singleMachineHero__navList li {
        flex: 0 0 auto;
        width: auto;
        margin-left: 1.25rem;
        padding-top: 0;
    }

    .t-singleMachineHero.--compact-150 .t-singleMachineHero__navList li a {
        padding: .75rem .5rem;
        white-space: nowrap;
    }

    .t-singleMachineHero.--compact-150 .t-singleMachineHero__navHeading {
        padding-right: 1.5rem;
    }
}

/* ================================================================ mobile / tablet (< 64em) */

/* ---------------------------------------------------------------- 2. korzyści */
.nc150__benefits {
    padding-top: var(--nc150-pad-y);
    padding-bottom: var(--nc150-pad-y);
}

.nc150__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: clamp(2rem, 4vw, 3.25rem) 0 0;
    padding: 0;
}

.nc150__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 13rem;
    padding: 2rem 1.75rem;
    background: var(--nc150-card);
    border: 1px solid var(--nc150-card-border);
    border-radius: 1.75rem;
}

.nc150__cardTitle {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--nc150-orange);
    margin: 0 0 1rem;
}

.nc150__cardText {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--nc150-grey);
    margin: 0;
}

@media (min-width: 48em) {
    .nc150__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------------------------------------------------------------- 3. zdjęcia */
.nc150__photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: clamp(2rem, 5vw, 4.75rem) 0;
}

.nc150__photo {
    margin: 0;
    overflow: hidden;
    height: clamp(18rem, 70vw, 30rem);
}

.nc150__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 48em) {
    .nc150__photos {
        grid-template-columns: 467fr 822fr;
    }

    .nc150__photo {
        height: min(44.5vw, 60rem);
    }
}

/* ---------------------------------------------------------------- 4. "Compact 150 umyje:" */
.nc150__washes {
    padding-top: var(--nc150-pad-y);
    padding-bottom: var(--nc150-pad-y);
}

.nc150__washesGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    align-items: center;
}

.nc150__washesImage img {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin: 0 auto;
}

.nc150__industries {
    margin: 0;
    padding: 0;
}

.nc150__industry {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--nc150-line);
}

.nc150__industry:first-child {
    padding-top: 0;
}

.nc150__industry:last-child {
    border-bottom: 0;
}

.nc150__industryTitle {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .5rem;
}

.nc150__industryText {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--nc150-grey);
    margin: 0;
}

/* ---------------------------------------------------------------- 5. zastosowanie (przed / po procesie) */
.nc150__application {
    padding-top: calc(var(--nc150-pad-y) * .15);
    padding-bottom: var(--nc150-pad-y);
}

.nc150__lead {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 1.25rem 0 0;
}

.nc150__panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 66rem;
    margin: clamp(2rem, 5vw, 4.25rem) auto 0;
    padding: 0;
}

.nc150__panel {
    padding: 2.25rem 1.75rem 2.5rem;
    background: var(--nc150-card);
    border: 1px solid var(--nc150-card-border);
    border-radius: 2rem;
}

.nc150__panelTitle {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--nc150-orange);
    margin: 0 0 1.5rem 1.75rem;
}

.nc150__panelList {
    margin: 0;
    padding: 0;
}

.nc150__panelItem {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .55rem 0 .55rem 1.75rem;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
}

.nc150__arrow {
    flex: 0 0 auto;
    width: .9rem;
    height: .9rem;
    margin-top: .55em;
    color: var(--nc150-orange);
    transition: transform .13s ease-in-out;
}

/* strzałka prostuje się po najechaniu - jak w zakładce Laboratorium (.a-button.--arrow) */
.nc150__panelItem:hover .nc150__arrow {
    transform: translateY(-2px) translateX(8px) rotate(-45deg);
}

@media (min-width: 48em) {
    .nc150__panels {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 6vw, 8rem);
    }
}

/* ---------------------------------------------------------------- 6. "Poznaj Compact 150" */
.nc150__meet {
    padding-top: var(--nc150-pad-y);
    padding-bottom: var(--nc150-pad-y);
}

.nc150__meetGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.nc150__features {
    margin: 1.75rem 0 0;
    padding: 0;
    border-top: 1px solid var(--nc150-line);
}

.nc150__feature {
    position: relative;
    padding: 1rem 0 1rem 1.75rem;
    border-bottom: 1px solid var(--nc150-line);
    font-size: 1rem;
    line-height: 1.4;
}

.nc150__feature::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: 1.55rem;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--nc150-orange);
}

.nc150__meetImage img {
    display: block;
    width: 100%;
    max-width: 38rem;
    height: auto;
    margin: 0 auto;
}

/* ---------------------------------------------------------------- 7. grafika "Więcej niż mycie." */
.nc150__graphic {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 4vw, 5rem) 1.25rem;
}

.nc150__graphicInner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 1.5rem;
    text-align: center;
}

/* obraz w pseudoelemencie, żeby brzegi można było płynnie wygasić do czerni (zdjęcie ma szarą ramkę komory) */
.nc150__graphicInner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0b0711;
    background-image: var(--nc150-bg);
    background-position: center;
    background-size: cover;
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%);
}

.nc150__graphicTitle {
    position: relative;
}

.nc150__graphicTitle {
    max-width: 8em;
    margin: 0;
    font-size: 2.625rem;
    line-height: 1.25;
    color: #fff;
}

/* obraz o połowę węższy niż pełna szerokość, wyśrodkowany */
@media (min-width: 48em) {
    .nc150__graphicInner {
        width: min(50%, 60rem);
    }
}

/* ---------------------------------------------------------------- 8. skuteczność potwierdzona doświadczeniem */
.nc150__experience {
    padding-top: var(--nc150-pad-y);
    padding-bottom: var(--nc150-pad-y);
}

.nc150__experience .nc150__heading {
    max-width: 21em;
    margin: 0 auto;
}

.nc150__experienceText {
    max-width: 62rem;
    margin: clamp(2.25rem, 5vw, 4.5rem) auto 0;
    text-align: center;
}

.nc150__experienceText p {
    margin: 0 0 1.9em;
    line-height: 1.5;
    color: #fff;
    font-size: 1rem;
}

.nc150__experienceText p:last-child {
    margin-bottom: 0;
}

/* ================================================================ desktop (>= 64em)
 * Proporcje z makiety (strona 1299 px, kontener makiety 1167 px) przeliczone na % szerokości kontenera,
 * dzięki czemu treść zawsze mieści się w .l-container (między pionowymi liniami .l-borders).
 * Rozmiary czcionek i pionowe odstępy skalują się z szerokością okna (vw).
 */
@media (min-width: 64em) {

    /* 2. korzyści: siatka 3 x 2 w kontenerze */
    .nc150__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.7vw;
        margin-top: 4.3vw;
    }

    .nc150__card {
        min-height: 17.5vw;
        padding: 2vw 1.7vw;
        border-radius: 2.2vw;
    }

    .nc150__cardTitle {
        margin-bottom: 1.1vw;
    }

    .nc150__cardText {
    }

    /* 4. umyje: obraz po lewej, lista po prawej */
    .nc150__washesGrid {
        grid-template-columns: 30.2% 1fr;
        column-gap: 13%;
        padding-right: 3.3%;
        margin-top: 2.5vw;
        align-items: start;
    }

    .nc150__washesImage img {
        max-width: none;
    }

    .nc150__industry {
        padding: 1.45vw 0;
    }

    .nc150__industry:first-child {
        padding-top: .2vw;
    }

    .nc150__industryTitle {
        margin-bottom: .6vw;
    }

    .nc150__industryText {
    }

    /* 5. zastosowanie */
    .nc150__lead {
        margin-top: 1.5vw;
    }

    .nc150__panels {
        grid-template-columns: 436fr 465fr;
        column-gap: 12.9%;
        width: 88.6%;
        max-width: none;
        margin-top: 6.2vw;
    }

    .nc150__panel {
        padding: 4.4vw 3.2vw 4.2vw;
        border-radius: 4.6vw;
    }

    .nc150__panelTitle {
        margin: 0 0 2.9vw 1.4vw;
    }

    .nc150__panelItem {
        padding: .62vw 0 .62vw .5vw;
        gap: 1.2vw;
    }

    .nc150__arrow {
        width: .9rem;
        height: .9rem;
    }

    /* 6. poznaj */
    .nc150__meetGrid {
        grid-template-columns: 39% 45.4%;
        column-gap: 7.7%;
        padding-left: 5.9%;
        align-items: center;
    }

    /* "Poznaj / Meet / Lerne den Compact 150" - mniejsza czcionka i równe łamanie wierszy (EN łamało się na "Meet Compact" + "150") */
    .nc150__meet .nc150__heading {
        max-width: 12em;
        text-wrap: balance;
    }

    .nc150__features {
        margin-top: 2.2vw;
    }

    .nc150__feature {
        padding: 1.05vw 0 1.05vw 2.2vw;
    }

    .nc150__feature::before {
        left: .35vw;
        top: 1.75vw;
        width: .9vw;
        height: .9vw;
    }

    .nc150__meetImage img {
        max-width: none;
    }

    /* 8. doświadczenie */
    .nc150__experienceText {
        max-width: 78%;
        margin-top: 5.2vw;
    }
}

/* ================================================================ typografia jak na Compact 100/200/400
 * Rozmiary z motywu (stałe, w rem; punkty przełączenia jak w main.css): nagłówki sekcji = .a-heading (2.75rem),
 * teksty 1.125rem / 1.25rem, tytuł grafiki jak .t-break (3.85vw). */
@media (min-width: 37.5em) {
    .nc150__graphicTitle {
        font-size: 3.85vw;
    }
}

@media (min-width: 68.75em) {
    .nc150__cardTitle,
    .nc150__panelTitle {
        font-size: 1.5rem;
    }

    .nc150__cardText,
    .nc150__industryText {
        font-size: 1.125rem;
    }

    .nc150__lead {
        font-size: 1.5rem;
    }

    .nc150__industryTitle {
        font-size: 1.25rem;
    }

    .nc150__panelItem,
    .nc150__feature,
    .nc150__experienceText p {
        font-size: 1.25rem;
    }
}