/* =========================================================
   OBSZARY BOXY — wspólny moduł
   strona główna: 3 w rzędzie
   podstrona problemów: 2 w rzędzie
   mobile: 1 w rzędzie
   ========================================================= */

.dd-obszary-boxes {
    width: 100% !important;
    margin: 36px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.dd-obszary-boxes *,
.dd-obszary-boxes *::before,
.dd-obszary-boxes *::after {
    box-sizing: border-box !important;
}

.dd-obszary-boxes-title {
    margin: 0 0 24px !important;
    font-family: inherit !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--dd-navy) !important;
}

/* DOMYŚLNIE — podstrona, lewa kolumna: 2 boxy */
.dd-obszary-boxes-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}

/* STRONA GŁÓWNA — pełna szerokość: 3 boxy */
.home .dd-obszary-boxes-grid,
.dd-obszary-boxes--wide .dd-obszary-boxes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Karta */
.dd-obszar-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

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

    padding: 24px !important;

    background: var(--dd-white) !important;
    border: 1px solid var(--dd-border-soft) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 0 rgba(9, 19, 58, 0.02) !important;

    color: var(--dd-text) !important;
    text-decoration: none !important;

    transform: none !important;
    filter: none !important;
}

.dd-obszar-card:hover,
.dd-obszar-card:focus,
.dd-obszar-card:active {
    transform: none !important;
    filter: none !important;
    box-shadow: 0 1px 0 rgba(9, 19, 58, 0.02) !important;
}

/* Tytuł jak w sidebarze / artykułach */
.dd-obszar-card-title {
    position: relative !important;

    margin: 0 0 14px !important;
    padding: 0 0 14px !important;

    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--dd-navy) !important;
}

.dd-obszar-card-title::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 38px !important;
    height: 3px !important;

    border-radius: 999px !important;
    background: var(--dd-orange) !important;
}

.dd-obszar-card-text {
    margin: 0 0 24px !important;

    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: var(--dd-text) !important;
}

/* Przycisk używa globalnego .dd-btn */
.dd-obszar-card-button {
    align-self: flex-start !important;
    min-height: 38px !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
}

/* Zabezpieczenie przed starymi klasami z poprzedniego modułu */
.tz-icon,
.tz-cardTop,
.tz-cardBottom,
.tz-arrow,
.tz-bottomText {
    display: none !important;
}

/* Tablet — też 2 w rzędzie */
@media (max-width: 991px) {
    .dd-obszary-boxes-grid,
    .home .dd-obszary-boxes-grid,
    .dd-obszary-boxes--wide .dd-obszary-boxes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile — 1 w rzędzie */
@media (max-width: 600px) {
    .dd-obszary-boxes {
        margin-top: 28px !important;
    }

    .dd-obszary-boxes-title {
        font-size: 23px !important;
    }

    .dd-obszary-boxes-grid,
    .home .dd-obszary-boxes-grid,
    .dd-obszary-boxes--wide .dd-obszary-boxes-grid {
        grid-template-columns: 1fr !important;
    }

    .dd-obszar-card {
        min-height: auto !important;
        padding: 22px 20px !important;
    }

    .dd-obszar-card-button {
        width: 100% !important;
    }
}