/* =========================================================
   ZJ — UNIWERSALNE BOXY INFORMACYJNE
   Można używać niezależnie od sekcji / miejsca na stronie.
   Nie wymaga .zm2-hero ani żadnego innego kontenera.
   ========================================================= */

/* ---------- Zmienne komponentu ---------- */
.zj-info-grid,
.zj-info-card {
    --zj-info-vanilla: #FFF8EC;
    --zj-info-sage: #9DBB9D;
    --zj-info-forest: #365B43;
    --zj-info-coral: #E98B73;
    --zj-info-yellow: #D7B85F;
    --zj-info-mist: #A8C7CF;
    --zj-info-graphite: #263238;

    --zj-info-radius: 1rem;
    --zj-info-gap: 0.85rem;
    --zj-info-padding: 1rem;
}

/* ---------- Bezpieczny box-sizing tylko dla komponentu ---------- */
.zj-info-card,
.zj-info-card *,
.zj-info-card *::before,
.zj-info-card *::after {
    box-sizing: border-box;
}

/* =========================================================
   OPCJONALNY GRID
   Możesz go użyć dla 2, 3, 4... kart.
   Jeżeli wstawiasz tylko jeden box — grid nie jest potrzebny.
   ========================================================= */

.zj-info-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 18rem), 1fr)
    );
    gap: var(--zj-info-gap);
    width: 100%;
}

/* Węższy grid — np. sidebar */
.zj-info-grid--compact {
    grid-template-columns: 1fr;
}

/* =========================================================
   BAZA KARTY
   ========================================================= */

.zj-info-card {
    width: 100%;
    min-width: 0;
    min-height: 5.75rem;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--zj-info-gap);

    padding: var(--zj-info-padding);

    color: var(--zj-info-graphite);
    background: #FFFFFF;

    border: 0.0625rem solid #DDE3DF;
    border-radius: var(--zj-info-radius);

    font-family: "Lato", Arial, sans-serif;
    text-decoration: none;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

/* Link */
a.zj-info-card,
button.zj-info-card {
    cursor: pointer;
}

/* Wersja z dodatkową strzałką */
.zj-info-card--link {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* =========================================================
   IKONA
   ========================================================= */

.zj-info-card__icon {
    width: 2.8rem;
    height: 2.8rem;

    display: grid;
    place-items: center;

    flex: 0 0 auto;
    border-radius: 0.85rem;
}

.zj-info-card__icon svg {
    width: 1.45rem;
    height: 1.45rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   TEKST
   ========================================================= */

.zj-info-card__text {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.zj-info-card__text small {
    color: inherit;
    opacity: 0.78;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.zj-info-card__text strong {
    color: inherit;

    font-family: "Nunito Sans", Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;

    overflow-wrap: anywhere;
}

/* Dłuższy opis */
.zj-info-card__description {
    display: block;
    margin-top: 0.3rem;

    color: inherit;
    opacity: 0.84;

    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
}

/* =========================================================
   STRZAŁKA
   ========================================================= */

.zj-info-card__arrow {
    align-self: center;

    font-family: "Nunito Sans", Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;

    transition: transform 180ms ease;
}

/* =========================================================
   INTERAKCJE
   ========================================================= */

a.zj-info-card:hover,
button.zj-info-card:hover {
    transform: translateY(-0.18rem);
}

a.zj-info-card:hover .zj-info-card__arrow,
button.zj-info-card:hover .zj-info-card__arrow {
    transform: translateX(0.2rem);
}

a.zj-info-card:focus-visible,
button.zj-info-card:focus-visible {
    outline: 0.2rem solid #1F6F55;
    outline-offset: 0.2rem;
}

/* =========================================================
   WERSJA BEZ IKONY
   Dodaj klasę .zj-info-card--no-icon
   ========================================================= */

.zj-info-card--no-icon {
    grid-template-columns: minmax(0, 1fr);
}

.zj-info-card--no-icon.zj-info-card--link {
    grid-template-columns: minmax(0, 1fr) auto;
}

.zj-info-card--no-icon .zj-info-card__icon {
    display: none;
}

/* =========================================================
   WERSJA MAŁA — np. sidebar / stopka
   ========================================================= */

.zj-info-card--sm {
    min-height: 4.75rem;
    padding: 0.8rem 0.9rem;
}

.zj-info-card--sm .zj-info-card__icon {
    width: 2.4rem;
    height: 2.4rem;
}

.zj-info-card--sm .zj-info-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.zj-info-card--sm .zj-info-card__text strong {
    font-size: 1rem;
}

/* =========================================================
   WERSJA DUŻA — np. sekcja na stronie głównej
   ========================================================= */

.zj-info-card--lg {
    min-height: 7rem;
    padding: 1.25rem;
}

.zj-info-card--lg .zj-info-card__icon {
    width: 3.2rem;
    height: 3.2rem;
}

.zj-info-card--lg .zj-info-card__text strong {
    font-size: 1.1875rem;
}

/* =========================================================
   STYLE KOLORYSTYCZNE
   ========================================================= */

/* ---------- STYLE 1: Wanilia + szałwia ---------- */
.zj-info-card--style-1 {
    color: var(--zj-info-graphite);
    background: var(--zj-info-vanilla);
    border-color: #E9DDC8;
}

.zj-info-card--style-1 .zj-info-card__icon {
    color: var(--zj-info-forest);
    background: #DFE9DD;
}

a.zj-info-card--style-1,
button.zj-info-card--style-1 {
    background: #EDF4EA;
    border-color: #C8D9C4;
}

a.zj-info-card--style-1:hover,
button.zj-info-card--style-1:hover {
    color: var(--zj-info-graphite);
    background: #E1ECDE;
    border-color: var(--zj-info-sage);
    box-shadow: 0 0.9rem 1.8rem rgb(54 91 67 / 14%);
}

/* ---------- STYLE 2: Mglisty błękit ---------- */
.zj-info-card--style-2 {
    color: var(--zj-info-graphite);
    background: #EEF6F7;
    border-color: #C8DDE2;
}

.zj-info-card--style-2 .zj-info-card__icon {
    color: #315D66;
    background: #D4E7EB;
}

a.zj-info-card--style-2,
button.zj-info-card--style-2 {
    background: #E2F0F3;
    border-color: var(--zj-info-mist);
}

a.zj-info-card--style-2:hover,
button.zj-info-card--style-2:hover {
    color: #244850;
    background: #D4E7EB;
    border-color: #567D88;
    box-shadow: 0 0.9rem 1.8rem rgb(86 125 136 / 18%);
}

/* ---------- STYLE 3: Morelowy koral ---------- */
.zj-info-card--style-3 {
    color: var(--zj-info-graphite);
    background: #FFF1EC;
    border-color: #F0C9BF;
}

.zj-info-card--style-3 .zj-info-card__icon {
    color: #7B3E31;
    background: #F6D7CF;
}

a.zj-info-card--style-3,
button.zj-info-card--style-3 {
    background: #FBE4DE;
    border-color: #E7A695;
}

a.zj-info-card--style-3:hover,
button.zj-info-card--style-3:hover {
    color: #5D3027;
    background: #F5D3CA;
    border-color: var(--zj-info-coral);
    box-shadow: 0 0.9rem 1.8rem rgb(184 102 82 / 18%);
}

/* ---------- STYLE 4: Miękki żółty ---------- */
.zj-info-card--style-4 {
    color: var(--zj-info-graphite);
    background: #FFF9E9;
    border-color: #EBDCAA;
}

.zj-info-card--style-4 .zj-info-card__icon {
    color: #69571F;
    background: #F4E8BD;
}

a.zj-info-card--style-4,
button.zj-info-card--style-4 {
    background: #F8EFCE;
    border-color: #DEC66F;
}

a.zj-info-card--style-4:hover,
button.zj-info-card--style-4:hover {
    color: #554617;
    background: #F1E2AD;
    border-color: var(--zj-info-yellow);
    box-shadow: 0 0.9rem 1.8rem rgb(139 116 48 / 16%);
}

/* ---------- STYLE 5: Biała karta premium ---------- */
.zj-info-card--style-5 {
    color: var(--zj-info-graphite);
    background: #FFFFFF;
    border-color: #DFE5E0;
    border-left: 0.3rem solid var(--zj-info-sage);
    box-shadow: 0 0.45rem 1.2rem rgb(38 50 56 / 6%);
}

.zj-info-card--style-5 .zj-info-card__icon {
    color: var(--zj-info-forest);
    background: #EDF4EA;
}

a.zj-info-card--style-5,
button.zj-info-card--style-5 {
    border-left-color: var(--zj-info-coral);
}

a.zj-info-card--style-5:hover,
button.zj-info-card--style-5:hover {
    color: var(--zj-info-graphite);
    background: #FFFAF7;
    border-color: #E5B1A4;
    border-left-color: var(--zj-info-coral);
    box-shadow: 0 1rem 2rem rgb(38 50 56 / 12%);
}

/* ---------- STYLE 6: Szałwia + koral ---------- */
.zj-info-card--style-6 {
    color: var(--zj-info-graphite);
    background: #DFE9DD;
    border-color: #BED2BA;
}

.zj-info-card--style-6 .zj-info-card__icon {
    color: #FFFFFF;
    background: var(--zj-info-forest);
}

a.zj-info-card--style-6,
button.zj-info-card--style-6 {
    background: #F7DDD6;
    border-color: #E7AD9D;
}

a.zj-info-card--style-6 .zj-info-card__icon,
button.zj-info-card--style-6 .zj-info-card__icon {
    color: var(--zj-info-graphite);
    background: #F1B7A8;
}

a.zj-info-card--style-6:hover,
button.zj-info-card--style-6:hover {
    color: var(--zj-info-graphite);
    background: #EFC9BF;
    border-color: var(--zj-info-coral);
    box-shadow: 0 0.9rem 1.8rem rgb(54 91 67 / 14%);
}

/* ---------- STYLE 7: Leśna zieleń ---------- */
.zj-info-card--style-7 {
    color: #FFFFFF;
    background: var(--zj-info-forest);
    border-color: #274532;
    box-shadow: 0 0.7rem 1.7rem rgb(54 91 67 / 16%);
}

.zj-info-card--style-7 .zj-info-card__icon {
    color: var(--zj-info-forest);
    background: #E7EFE5;
}

a.zj-info-card--style-7,
button.zj-info-card--style-7 {
    color: #274532;
    background: #F5F8F3;
    border-color: #BCD0B7;
}

a.zj-info-card--style-7:hover,
button.zj-info-card--style-7:hover {
    color: #FFFFFF;
    background: #456C51;
    border-color: var(--zj-info-forest);
    box-shadow: 0 1rem 2rem rgb(54 91 67 / 22%);
}

a.zj-info-card--style-7:hover .zj-info-card__icon,
button.zj-info-card--style-7:hover .zj-info-card__icon {
    color: #FFFFFF;
    background: #567A60;
}

/* ---------- STYLE 8: Pastelowy gradient ---------- */
.zj-info-card--style-8 {
    color: var(--zj-info-graphite);
    background: linear-gradient(
        135deg,
        var(--zj-info-vanilla) 0%,
        #EDF4EA 100%
    );
    border-color: #D7DFD4;
}

.zj-info-card--style-8 .zj-info-card__icon {
    color: var(--zj-info-forest);
    background: #DCE8DA;
}

a.zj-info-card--style-8,
button.zj-info-card--style-8 {
    background: linear-gradient(
        135deg,
        #FFF1EC 0%,
        #EDF6F7 100%
    );
    border-color: #E7C8C0;
}

a.zj-info-card--style-8:hover,
button.zj-info-card--style-8:hover {
    color: var(--zj-info-graphite);
    background: linear-gradient(
        135deg,
        #F9DDD5 0%,
        #DCECEF 100%
    );
    border-color: #D79B8B;
    box-shadow: 0 1rem 2.1rem rgb(54 91 67 / 14%);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 38rem) {
    .zj-info-card {
        min-height: 5rem;
        padding: 0.9rem;
    }

    .zj-info-card__icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .zj-info-card,
    .zj-info-card__arrow {
        transition: none;
    }

    a.zj-info-card:hover,
    button.zj-info-card:hover {
        transform: none;
    }
}