/* Strona główna v2 — style sekcji.
   Fundament (tokeny, kontener, nagłówki, przyciski) jest w najdul-base.css.
   Wygląd harmonijki Q&A nie należy tutaj — mieszka w qa-sets.css. */

/* ---------- Kategorie produktów ---------- */

.najdul-v2 .nj-find {
    background: #fff;
    padding: 96px 0;
}

.najdul-v2 .nj-find__head {
    margin-bottom: 40px;
}

.najdul-v2 .nj-cards {
    gap: 24px;
}

.najdul-v2 .nj-cards>.wp-block-column {
    display: flex;
}

/* .nj-card to core/cover: tlo i gradient daje sam blok, tu tylko ksztalt */

.najdul-v2 .nj-card {
    border-radius: var(--nj-radius);
    overflow: hidden;
    align-items: flex-end;
    padding: 0;
    width: 100%;
}

.najdul-v2 .nj-card .wp-block-cover__inner-container {
    width: 100%;
}

.najdul-v2 .nj-card__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 28px;
}

.najdul-v2 .nj-card__body h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 8px;
}

.najdul-v2 .nj-card__body p {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 34ch;
}

/* ---------- Współpraca (trzy karty) ---------- */

/* Sekcja stoi na białym tle strony — bez płyty pod spodem. Odstęp od sekcji
   wyżej daje teraz górne dopełnienie, które wcześniej robiło wypełnienie płyty. */
.najdul-v2 .nj-coop {
    background: #fff;
    padding: clamp(28px, 4vw, 56px) 0 96px;
}

/* Nadtytuł z kreską — ten sam zapis co na podstronach współpracy, ale
   arkusz strony głównej ładuje się osobno, więc reguła musi być tutaj. */
.najdul-v2 .nj-coop .nj-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nj-green-dark);
}

.najdul-v2 .nj-coop .nj-eyebrow::before {
    content: "";
    flex: none;
    width: 42px;
    height: 2px;
    background: var(--nj-green);
}

.najdul-v2 .nj-coop__title {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--nj-ink);
}

.najdul-v2 .nj-coop__title .nj-accent {
    color: var(--nj-green);
}

.najdul-v2 .nj-coop__lead {
    max-width: 58ch;
    margin: 0 0 38px;
}

/* ---------- Trzy karty ---------- */

.najdul-v2 .nj-coop__cards {
    gap: 24px;
}

.najdul-v2 .nj-coop__cards > .wp-block-column {
    margin-block: 0;
}

.najdul-v2 .nj-coop__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #e4eae8;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* Żadna karta nie jest wyróżniona na stałe — zieleń i powiększenie pojawiają
   się dopiero pod kursorem. `:focus-within` dokłada ten sam stan dla osób
   przechodzących tabulatorem, bo inaczej karta reagowałaby tylko na mysz.
   `z-index` podnosi powiększoną kartę nad sąsiadki, żeby cień ich nie ciął. */
.najdul-v2 .nj-coop__card:hover,
.najdul-v2 .nj-coop__card:focus-within {
    z-index: 1;
    border-color: var(--nj-green);
    background: #F1F6EC;
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 38px rgba(25, 44, 39, .12);
}

.najdul-v2 .nj-coop__shot {
    margin: 0;
}

.najdul-v2 .nj-coop__shot img {
    display: block;
    width: 100%;
    height: clamp(170px, 16vw, 200px);
    object-fit: cover;
}

/* Treść nachodzi na zdjęcie zaokrąglonym bokiem; tło bierze z karty, żeby
   wyróżniona i zwykła karta nie wymagały dwóch osobnych reguł. */
.najdul-v2 .nj-coop__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-top: -18px;
    padding: 22px 24px 26px;
    border-radius: 18px 18px 0 0;
    background: inherit;
}

/* Krążek z ikoną. Ikona wisi na klasie karty, a nie na :nth-child, więc
   kolejność kart można zmieniać w edytorze bez ruszania arkusza. */
.najdul-v2 .nj-coop__body::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--nj-mint) center / 22px 22px no-repeat;
}

.najdul-v2 .nj-coop__card--firmy .nj-coop__body::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348682b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

.najdul-v2 .nj-coop__card--produkcja .nj-coop__body::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348682b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 1.8v3M12 19.2v3M22.2 12h-3M4.8 12h-3M19.2 4.8l-2.1 2.1M6.9 17.1l-2.1 2.1M19.2 19.2l-2.1-2.1M6.9 6.9 4.8 4.8'/%3E%3C/svg%3E");
}

.najdul-v2 .nj-coop__card--publiczne .nj-coop__body::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348682b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='m12 3 9 5H3l9-5z'/%3E%3Cpath d='M6 10v11M10 10v11M14 10v11M18 10v11'/%3E%3C/svg%3E");
}

.najdul-v2 .nj-coop__name {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nj-ink);
}

.najdul-v2 .nj-coop__desc {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nj-muted);
}

/* Przycisk spychany na dół, żeby trzy karty o różnej długości opisu miały
   go w jednej linii. */
.najdul-v2 .nj-coop__cta {
    margin-top: auto;
}

/* Przycisk podąża za kartą: pod kursorem wypełnia się tą samą zielenią,
   dzięki czemu cała karta czyta się jako jeden aktywny element. */
.najdul-v2 .nj-coop__card:hover .nj-btn--line > .wp-block-button__link,
.najdul-v2 .nj-coop__card:focus-within .nj-btn--line > .wp-block-button__link {
    border-color: var(--nj-green-dark);
    background: var(--nj-green-dark);
    color: #fff;
}

/* Strzałka rysowana maską, nie tłem — dzięki temu bierze kolor napisu
   i działa tak samo na przycisku wypełnionym, jak i na obrysowanym. */
.najdul-v2 .nj-coop__cta .wp-block-button__link::after {
    content: "";
    flex: none;
    width: 20px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Bestsellery ---------- */

.najdul-v2 .nj-best {
    padding: 96px 0;
}

.najdul-v2 .nj-best--light {
    background: var(--nj-snow);
}

/* Podział na kolumny i wyśrodkowanie w pionie robi core/columns
   (verticalAlignment: center) — zostaje sam odstęp między kolumnami. */
.najdul-v2 .nj-best__grid {
    gap: 56px;
}

.najdul-v2 .nj-best__media {
    margin: 0;
    border-radius: var(--nj-radius);
    overflow: hidden;
}

.najdul-v2 .nj-best__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.najdul-v2 .nj-best h2 {
    margin-bottom: 6px;
}

.najdul-v2 .nj-best__latin {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--nj-green);
}

.najdul-v2 .nj-best__desc {
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--nj-muted);
}

/* Cechy rośliny. Układ 2×2 daje layout grid bloku (columnCount: 2),
   my dokładamy tylko odstępy i wygląd pojedynczej pigułki. */
.najdul-v2 .nj-pills {
    gap: 12px;
    margin-bottom: 28px;
}

.najdul-v2 .nj-pill {
    gap: 11px;
    padding: 11px 18px;
    border: 1px solid #e9efed;
    border-radius: 999px;
    background: #fff;
}

.najdul-v2 .nj-pill__icon {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: var(--nj-mint);
    font-size: 13px;
    line-height: 1;
}

.najdul-v2 .nj-pill__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--nj-ink);
}

/* ---------- Karuzela polecanych ---------- */

.najdul-v2 .nj-pop {
    padding: 96px 0;
    background: var(--nj-mist);
}

/* Podział na kolumny robi core/columns — szerokość kolumny opisowej trzymamy
   tutaj, a nie w atrybucie bloku, żeby widok mobilny nie musiał bić w styl
   inline przez !important.

   Sekcja celowo nie ma kontenera .nj-wrap: kolumna opisowa trzyma linię
   pozostałych sekcji dzięki lewemu marginesowi, a tor jedzie dalej, aż do
   prawej krawędzi ekranu — tak jak na projekcie. Odstęp liczymy z szerokości
   samej sekcji, a nie ze 100vw, bo vw obejmuje też pasek przewijania
   i tor wyjechałby o kilkanaście pikseli za daleko. */
.najdul-v2 .nj-pop__grid {
    gap: 64px;
    padding-left: max(
        0px,
        calc((100% - min(var(--theme-container-width, 90%), var(--theme-normal-container-max-width, 1290px))) / 2)
    );
}

.najdul-v2 .nj-pop__grid > .wp-block-column:first-child {
    flex: 0 0 320px;
}

/* Tor: układ poziomy daje layout flex bloku (nowrap), my dokładamy przewijanie. */
.najdul-v2 .nj-track {
    gap: 24px;
    padding-right: 24px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.najdul-v2 .nj-track::-webkit-scrollbar {
    display: none;
}

/* Karta to core/cover — zdjęcie i przyciemnienie daje sam blok. */
.najdul-v2 .nj-slide {
    flex: 0 0 min(360px, 80vw);
    align-items: flex-end;
    padding: 0;
    border-radius: var(--nj-radius);
    overflow: hidden;
    scroll-snap-align: start;
}

.najdul-v2 .nj-slide .wp-block-cover__inner-container {
    width: 100%;
}

.najdul-v2 .nj-slide__body {
    padding: 24px;
}

.najdul-v2 .nj-slide__body h3 {
    margin: 0 0 9px;
    font-size: 20px;
    color: #fff;
}

.najdul-v2 .nj-slide__desc {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.najdul-v2 .nj-slide__body .nj-btn > .wp-block-button__link {
    padding: 10px 20px;
    font-size: 12px;
}

/* Strzałki dokłada home-v2.js — w treści strony ich nie ma. */
.najdul-v2 .nj-arrows {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.najdul-v2 .nj-arrows button {
    width: 42px;
    height: 42px;
    border: 1px solid #d7e0dd;
    border-radius: 50%;
    background: #fff;
    color: var(--nj-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.najdul-v2 .nj-arrows button:hover:not(:disabled) {
    border-color: var(--nj-green);
}

.najdul-v2 .nj-arrows button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---------- Widok mobilny ---------- */

@media (max-width: 900px) {
    .najdul-v2 .nj-best__grid {
        flex-wrap: wrap;
    }

    .najdul-v2 .nj-best__grid > .wp-block-column {
        flex-basis: 100%;
    }

    .najdul-v2 .nj-pop__grid {
        flex-wrap: wrap;
    }

    .najdul-v2 .nj-pop__grid > .wp-block-column:first-child {
        flex: 1 1 100%;
    }

    .najdul-v2 .nj-pop__grid {
        padding-right: max(
            0px,
            calc((100% - min(var(--theme-container-width, 90%), var(--theme-normal-container-max-width, 1290px))) / 2)
        );
    }

    .najdul-v2 .nj-cards {
        flex-wrap: wrap;
    }

    .najdul-v2 .nj-cards>.wp-block-column {
        flex-basis: 100%!important;
    }

    /* W sekcji z odwróconym układem zdjęcie i tak ma być nad opisem. */
    .najdul-v2 .nj-best--reversed .nj-best__grid > .wp-block-column:last-child {
        order: -1;
    }
}

@media (max-width: 689px) {
    .najdul-v2 .nj-pills {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .najdul-v2 .nj-coop__card {
        transition: border-color .25s ease, background-color .25s ease;
    }

    .najdul-v2 .nj-coop__card:hover,
    .najdul-v2 .nj-coop__card:focus-within {
        transform: none;
    }
}