/* ============================================================
   MB SERVICES — GRID VERSION (CONTROLLED, STABLE)
   ============================================================ */


/* ============================================================
   0. OUTER WRAPPER (1200px — SINGLE AXIS)
============================================================ */
.mb-services-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}


/* ============================================================
   1. SERVICES CONTAINER — GRID 4 / 2 / 1
============================================================ */

.mb-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    width: 100%;
}

/* ===== TABLET / iPAD — 2 COLUMNS ===== */
@media (max-width: 1024px) {
    .mb-services {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== MOBILE — 1 COLUMN ===== */
@media (max-width: 767px) {
    .mb-services {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   2. GRID ITEM (SERVICE BOX)
============================================================ */
.mb-service {
    box-sizing: border-box;
    padding: 0 15px;
    margin-top: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}


/* fade others on hover */
.mb-services:hover .mb-service {
    opacity: 0.4;
}
.mb-services .mb-service:hover {
    opacity: 1;
}


/* ============================================================
   3. TITLE BLOCK — VERTICAL CENTERING (DESKTOP)
============================================================ */

.mb-service-head {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 10px;
    min-height: 56px;

    align-items: center;     /* ⬅️ KLUCZ: środek względem ikony */
}

.mb-service-icon {
    width: 48px;
    height: 48px;
    margin: 0;
}

/* ============================================================
   4. ICON (SVG / IMG)
============================================================ */
.mb-service-icon {
    float: left;
    width: 48px;
    height: 48px;
    margin: 0 15px 0 0;
    color: #d7d7d7;
    display: block;
    transition: color 0.3s ease;
}


/* hover animation + color */
.mb-services .mb-service:hover .mb-service-icon {
    color: #191919;
    animation: flip .8s;
}


/* ============================================================
   5. TITLE — CENTERED TO ICON
============================================================ */

.mb-service-title {
    width: 100%;

    margin: 0;               /* ⬅️ reset wcześniejszego top-margin */
    padding-left: 10px;
    border-left: 1px solid #CCC;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 16px;
    line-height: 1.2;
    color: #016500;
}
/* ============================================================
   6. TEXT
============================================================ */
.mb-service p {
    text-align: left;
    color: #676262d9;
}


/* ============================================================
   7. MOBILE — SINGLE COLUMN LIST (TIGHT TEXT)
   icon | separator | title + text
============================================================ */
@media only screen and (max-width: 767px) {

    /* layout: jedna kolumna */
    .mb-services {
        grid-template-columns: 1fr;
    }

    .mb-service {
        position: relative;
        padding-left: 64px;     /* kolumna tekstowa */
        margin-bottom: 14px;    /* ciaśniej w pionie */
    }

    /* RESET desktopowego nagłówka (żeby nie robił „dziury”) */
    .mb-service-head {
        min-height: 0;
        margin: 0;
    }

    /* IKONA — pozycja optyczna (bez transform) */
    .mb-service-icon {
        position: absolute;
        left: 0;
        top: 12px;
        width: 40px;
        height: 40px;
        margin: 0;
        float: none;
    }

    /* JEDYNA KRESKA — oddziela ikonę od CAŁEJ kolumny tekstu */
    .mb-service::before {
        content: "";
        position: absolute;
        left: 48px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #ccc;
    }

    /* TYTUŁ — MOBILE: BEZ ELLIPSIS */
    .mb-service-title {
        float: none;
        margin: 0 0 2px 0;
        padding: 0;
        border: 0;

        font-size: 15px;
        line-height: 1.2;

        /* ⬇️ JEDYNA ISTOTNA ZMIANA */
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    /* TEKST */
    .mb-service p {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        color: #676262d9;
    }
}
/* ============================================================
   8. SVG ICON ANIMATION — 3D FLIP (NO GAP)
============================================================ */

.mb-service-icon {
    perspective: 800px;
    transform-style: preserve-3d;
}

/* animujemy BEZ znikania */
.mb-services .mb-service:hover .mb-service-icon {
    animation: flip3d .8s ease-in-out;
    backface-visibility: visible; /* ⬅️ KLUCZ: brak „dziury” */
}

@keyframes flip3d {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}
/* MB SERVICES — REFERENCE
   Sections 7 & 8 frozen. Do not refactor.
*/