/* =========================================================
   L4MED - SERVICES
   Uniwersalny system layoutu i komponentów
   Wersja uporządkowana - 2026-09-12
   ========================================================= */


/* =========================================================
   0. ZMIENNE
   ========================================================= */

:root {
    --l4med-accent: var(--e-global-color-primary, #078f9a);

    --l4med-text: #0d1528;
    --l4med-body: #555d66;
    --l4med-muted: #737b84;

    --l4med-border: #e3e8eb;
    --l4med-soft: #f7fafb;
    --l4med-soft-accent: #eef9fa;

    --l4med-radius: 10px;
    --l4med-shadow: 0 9px 28px rgba(15, 35, 55, 0.07);

    --l4med-section-gap: 54px;
    --l4med-content-gap: 20px;
}


/* =========================================================
   1. GŁÓWNE SEKCJE SERVICES
   Każdy kontener sekcji dostaje ID zaczynające się od:
   l4med-section-
   ========================================================= */

[id^="l4med-section-"] {
    position: relative;
    width: 100%;

    margin-top: var(--l4med-section-gap) !important;
    margin-bottom: var(--l4med-section-gap) !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

[id^="l4med-section-"] > .e-con-inner {
    gap: var(--l4med-content-gap) !important;
}

[id^="l4med-section-"].e-con {
    gap: var(--l4med-content-gap) !important;
}


/* Elementor - kasujemy przypadkowe dolne marginesy widgetów */

[id^="l4med-section-"] .elementor-widget-heading,
[id^="l4med-section-"] .elementor-widget-text-editor {
    margin-bottom: 0 !important;
}


/* =========================================================
   2. TYPOGRAFIA GŁÓWNYCH H2
   Dotyczy wyłącznie H2 umieszczonych w l4med-section-*
   ========================================================= */

[id^="l4med-section-"] h2,
[id^="l4med-section-"] h2.elementor-heading-title,
[id^="l4med-section-"] .elementor-widget-heading h2 {
    margin: 0 0 20px !important;

    font-size: 36px !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;

    color: var(--l4med-text);
}


/* =========================================================
   3. ZWYKŁY TEKST W SEKCJACH
   ========================================================= */

[id^="l4med-section-"] .elementor-widget-text-editor {
    color: var(--l4med-body);
}

[id^="l4med-section-"] .elementor-widget-text-editor p {
    margin-top: 0;
    margin-bottom: 15px;

    line-height: 1.65;
}

[id^="l4med-section-"] .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   4. GRID - 2 KOLUMNY
   ========================================================= */

[id^="l4med-grid2-"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 24px !important;

    width: 100% !important;
    max-width: 100% !important;

    align-items: stretch !important;
    flex-direction: initial !important;
}

[id^="l4med-grid2-"] > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 24px !important;

    width: 100% !important;
    max-width: 100% !important;

    align-items: stretch !important;
}


/* =========================================================
   5. GRID - 3 KOLUMNY
   ========================================================= */

[id^="l4med-grid3-"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 22px !important;

    width: 100% !important;
    max-width: 100% !important;

    align-items: stretch !important;
    flex-direction: initial !important;
}

[id^="l4med-grid3-"] > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 22px !important;

    width: 100% !important;
    max-width: 100% !important;

    align-items: stretch !important;
}


/* =========================================================
   6. RESET DZIECI GRIDÓW
   ========================================================= */

[id^="l4med-grid2-"] > [id^="l4med-card-"],
[id^="l4med-grid3-"] > [id^="l4med-card-"],
[id^="l4med-grid2-"] > .e-con-inner > [id^="l4med-card-"],
[id^="l4med-grid3-"] > .e-con-inner > [id^="l4med-card-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: none !important;
    flex-basis: auto !important;

    margin: 0 !important;
}


/* =========================================================
   7. UNIWERSALNE KARTY
   ========================================================= */

[id^="l4med-card-"] {
    position: relative;
    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100%;

    padding: 28px 26px 26px !important;

    background: #ffffff;

    border: 1px solid var(--l4med-border);
    border-radius: var(--l4med-radius);

    box-shadow: var(--l4med-shadow);

    overflow: hidden;
}


/* Górna turkusowa linia */

[id^="l4med-card-"]::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: var(--l4med-accent);
}


/* Elementor inner container */

[id^="l4med-card-"] > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    gap: 12px !important;
    height: 100%;
}


/* =========================================================
   8. NAGŁÓWKI W KARTACH
   H3 - kroki / większe karty
   H4 - mniejsze elementy informacyjne
   ========================================================= */

[id^="l4med-card-"] h3,
[id^="l4med-card-"] h3.elementor-heading-title,
[id^="l4med-card-"] .elementor-widget-heading h3 {
    margin: 0 0 14px !important;
    padding: 0 !important;

    font-size: 21px !important;
    line-height: 1.30 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;

    color: var(--l4med-text);
}

[id^="l4med-card-"] h4,
[id^="l4med-card-"] h4.elementor-heading-title,
[id^="l4med-card-"] .elementor-widget-heading h4 {
    margin: 0 0 12px !important;
    padding: 0 !important;

    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;

    color: var(--l4med-text);
}


/* W szerokich kartach dwukolumnowych dajemy trochę więcej oddechu */

[id^="l4med-grid2-"] [id^="l4med-card-"] h3,
[id^="l4med-grid2-"] [id^="l4med-card-"] h3.elementor-heading-title,
[id^="l4med-grid2-"] [id^="l4med-card-"] .elementor-widget-heading h3,
[id^="l4med-grid2-"] [id^="l4med-card-"] h4,
[id^="l4med-grid2-"] [id^="l4med-card-"] h4.elementor-heading-title,
[id^="l4med-grid2-"] [id^="l4med-card-"] .elementor-widget-heading h4 {
    margin-bottom: 18px !important;
}


/* =========================================================
   9. TEKST W KARTACH
   ========================================================= */

[id^="l4med-card-"] .elementor-widget-text-editor,
[id^="l4med-card-"] p {
    color: var(--l4med-body);
}

[id^="l4med-card-"] p {
    margin: 0 !important;

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   10. DOPISEK MEDYCZNY
   ========================================================= */

[id^="l4med-note-"] {
    box-sizing: border-box;

    width: 100%;

    margin-top: 20px !important;
    padding: 18px 21px !important;

    background: var(--l4med-soft);

    border-left: 3px solid var(--l4med-accent);
    border-radius: 7px;

    color: var(--l4med-muted);

    font-size: 14px;
    line-height: 1.6;
}

[id^="l4med-note-"] p {
    margin: 0 !important;
}


/* =========================================================
   11. WAŻNY KOMUNIKAT / ALERT
   ========================================================= */

[id^="l4med-alert-"] {
    box-sizing: border-box;

    width: 100%;

    margin: 6px 0 10px !important;
    padding: 20px 23px !important;

    background: var(--l4med-soft-accent);

    border: 1px solid rgba(7, 143, 154, 0.17);
    border-left: 4px solid var(--l4med-accent);

    border-radius: 8px;

    color: var(--l4med-text);

    font-size: 17px;
    line-height: 1.55;
    font-weight: 600;
}

[id^="l4med-alert-"] p {
    margin: 0 !important;
}


/* =========================================================
   12. TEKST + ZDJĘCIE / FILM
   l4med-split-* - tekst -> obraz na mobile
   l4med-split-reverse-* - obraz -> tekst na mobile
   ========================================================= */

[id^="l4med-split-"] {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.95fr) !important;

    gap: 40px !important;

    width: 100% !important;

    align-items: center !important;

    flex-direction: initial !important;
}

[id^="l4med-split-"] > .e-con-inner {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.95fr) !important;

    gap: 40px !important;

    width: 100% !important;

    align-items: center !important;
}

[id^="l4med-split-"] > *,
[id^="l4med-split-"] > .e-con-inner > * {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

[id^="l4med-split-"] img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    border-radius: 10px;
}


/* =========================================================
   13. CTA / REZERWACJA
   ========================================================= */

[id^="l4med-cta-"] {
    box-sizing: border-box;

    width: 100%;

    padding: 30px 32px !important;

    background: var(--l4med-soft-accent);

    border: 1px solid rgba(7, 143, 154, 0.17);
    border-radius: 11px;
}

[id^="l4med-cta-"] > .e-con-inner {
    gap: 15px !important;
}

[id^="l4med-cta-"] h2,
[id^="l4med-cta-"] h3 {
    margin-top: 0 !important;
}


/* =========================================================
   14. LISTY
   Nie ruszamy pionowych odstępów pomiędzy punktami
   ========================================================= */

[id^="l4med-section-"] ul {
    margin-top: 4px;
    margin-bottom: 0;
}


/* =========================================================
   15. FAQ
   Nie ingerujemy w wygląd CMSMasters Accordion
   ========================================================= */

[id^="l4med-section-"][id*="-faq"] {
    margin-top: 62px !important;
}


/* =========================================================
   16. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --l4med-section-gap: 46px;
    }

    [id^="l4med-section-"] h2,
    [id^="l4med-section-"] h2.elementor-heading-title,
    [id^="l4med-section-"] .elementor-widget-heading h2 {
        font-size: 32px !important;
    }

    [id^="l4med-grid3-"],
    [id^="l4med-grid3-"] > .e-con-inner {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    [id^="l4med-split-"],
    [id^="l4med-split-"] > .e-con-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 28px !important;
    }
}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --l4med-section-gap: 38px;
        --l4med-content-gap: 16px;
    }


    /* H2 */

    [id^="l4med-section-"] h2,
    [id^="l4med-section-"] h2.elementor-heading-title,
    [id^="l4med-section-"] .elementor-widget-heading h2 {
        margin-bottom: 15px !important;

        font-size: 28px !important;
        line-height: 1.2 !important;
    }


    /* Gridy */

    [id^="l4med-grid2-"],
    [id^="l4med-grid2-"] > .e-con-inner,
    [id^="l4med-grid3-"],
    [id^="l4med-grid3-"] > .e-con-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }


    /* Zwykły split: tekst -> obraz */

    [id^="l4med-split-"]:not([id^="l4med-split-reverse-"]),
    [id^="l4med-split-"]:not([id^="l4med-split-reverse-"]) > .e-con-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }


    /* Reverse split: obraz -> tekst */

    [id^="l4med-split-reverse-"] {
        display: flex !important;

        flex-direction: column-reverse !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;

        gap: 20px !important;

        width: 100% !important;
    }

    [id^="l4med-split-reverse-"] > .e-con-inner {
        display: flex !important;

        flex-direction: column-reverse !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;

        gap: 20px !important;

        width: 100% !important;
    }

    [id^="l4med-split-reverse-"] > *,
    [id^="l4med-split-reverse-"] > .e-con-inner > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 auto !important;
    }

    [id^="l4med-split-reverse-"] .elementor-widget-image {
        display: flex !important;
        justify-content: center !important;

        width: 100% !important;
    }

    [id^="l4med-split-reverse-"] .elementor-widget-image img {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 260px !important;
        max-height: 230px !important;

        margin: 0 auto !important;

        object-fit: contain !important;
    }


    /* Karty */

    [id^="l4med-card-"] {
        padding: 23px 20px 21px !important;
    }

    [id^="l4med-card-"] h3,
    [id^="l4med-card-"] h3.elementor-heading-title,
    [id^="l4med-card-"] .elementor-widget-heading h3 {
        margin-bottom: 10px !important;

        font-size: 20px !important;
    }

    [id^="l4med-card-"] h4,
    [id^="l4med-card-"] h4.elementor-heading-title,
    [id^="l4med-card-"] .elementor-widget-heading h4 {
        margin-bottom: 10px !important;

        font-size: 18px !important;
    }


    /* Notatki / alerty / CTA */

    [id^="l4med-note-"] {
        padding: 16px 18px !important;
    }

    [id^="l4med-alert-"] {
        padding: 17px 18px !important;

        font-size: 16px;
    }

    [id^="l4med-cta-"] {
        padding: 23px 20px !important;
    }
}


/* =========================================================
   L4MED - PRZYGOTOWANIE DO BADANIA
   Odstępy treści + panel polecanych badań
   ========================================================= */


/* ---------------------------------------------------------
   1. Odstępy w treści przygotowania
   --------------------------------------------------------- */

[id^="l4med-section-"][id*="-przygotowanie"].e-con,
[id^="l4med-section-"][id*="-przygotowanie"] > .e-con-inner {
    gap: 0 !important;
}


/* Kasujemy podwójny odstęp pod nagłówkami */

[id^="l4med-section-"][id*="-przygotowanie"] h2,
[id^="l4med-section-"][id*="-przygotowanie"] h2.elementor-heading-title,
[id^="l4med-section-"][id*="-przygotowanie"] .elementor-widget-heading h2 {
    margin-bottom: 0 !important;
}


/* Lista / treść należąca do nagłówka ma być blisko niego */

[id^="l4med-section-"][id*="-przygotowanie"]
.elementor-widget-heading + .elementor-widget-icon-list,

[id^="l4med-section-"][id*="-przygotowanie"]
.elementor-widget-heading + .elementor-widget-text-editor {
    margin-top: 14px !important;
}


/* Następny nagłówek odsuwamy wyraźniej od poprzedniej treści */

[id^="l4med-section-"][id*="-przygotowanie"]
.elementor-widget-icon-list + .elementor-widget-heading,

[id^="l4med-section-"][id*="-przygotowanie"]
.elementor-widget-text-editor + .elementor-widget-heading {
    margin-top: 42px !important;
}


/* ---------------------------------------------------------
   2. Polecane badania w sidebarze
   --------------------------------------------------------- */

.l4med-sidebar-tests {
    width: 100%;
}

.l4med-sidebar-test {
    border-bottom: 1px solid #e3e8eb;
}

.l4med-sidebar-test:last-child {
    border-bottom: 0;
}

.l4med-sidebar-test > a,
.l4med-sidebar-test > .l4med-sidebar-test-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
    width: 100%;
    min-height: 54px;
    padding: 10px 0;

    color: #0d1528;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none !important;
}

.l4med-sidebar-test > a:hover {
    color: var(--l4med-accent);
}

.l4med-sidebar-test-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    color: #0d1528;
    border: 1px solid #0d1528;
    border-radius: 8px;

    font-size: 18px;
    line-height: 1;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.l4med-sidebar-test > a:hover .l4med-sidebar-test-arrow {
    color: #ffffff;
    background: var(--l4med-accent);
    border-color: var(--l4med-accent);
}


@media (max-width: 767px) {

    [id^="l4med-section-"][id*="-przygotowanie"]
    .elementor-widget-heading + .elementor-widget-icon-list,

    [id^="l4med-section-"][id*="-przygotowanie"]
    .elementor-widget-heading + .elementor-widget-text-editor {
        margin-top: 10px !important;
    }

    [id^="l4med-section-"][id*="-przygotowanie"]
    .elementor-widget-icon-list + .elementor-widget-heading,

    [id^="l4med-section-"][id*="-przygotowanie"]
    .elementor-widget-text-editor + .elementor-widget-heading {
        margin-top: 26px !important;
    }

    .l4med-sidebar-test > a,
    .l4med-sidebar-test > .l4med-sidebar-test-title {
        min-height: 50px;
        font-size: 15px;
    }
}