.despre-noi-coloane {
    display: grid;
    gap: 32px;
}

.despre-noi-coloane-2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
    .despre-noi-coloane-2 {
        grid-template-columns: 1fr;
    }
}

.despre-noi-coloana p {
    color: var(--culoare-text);
}

.despre-noi-coloana .checklist-items {
    margin-top: 12px;
}

.despre-noi-toggle {
    display: none;
}

.despre-noi-fade-layer {
    display: none;
}

/* Comprimare pe mobil (buton "Citeste mai mult") - vezi despre_noi.js. Doar coloanele al caror
   continut depaseste inaltimea de mai jos primesc de fapt butonul functional (JS ascunde restul).
   Un singur strat de blur, cat toata inaltimea comprimata, cu masca lunga (0-100%) - vizibilitatea
   lui creste treptat de sus in jos, fara cusaturi (varianta cu mai multe straturi suprapuse lasa o
   dunga vizibila la marginea fiecaruia). */
@media (max-width: 640px) {
    .despre-noi-coloana-inner {
        max-height: 220px;
        overflow: hidden;
        position: relative;
    }

    .despre-noi-fade-layer {
        display: block;
        position: absolute;
        inset: 0;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.85) 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, #000 100%);
        pointer-events: none;
    }

    .despre-noi-coloana.is-expanded .despre-noi-coloana-inner {
        max-height: none;
    }

    .despre-noi-coloana.is-expanded .despre-noi-fade-layer {
        display: none;
    }

    .despre-noi-toggle {
        display: table;
        position: relative;
        z-index: 1;
        margin: -18px auto 0;
        background: var(--culoare-fundal);
        border: 1px solid var(--culoare-border);
        border-radius: 20px;
        padding: 8px 18px;
        color: var(--culoare-accent);
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .despre-noi-coloana.is-expanded .despre-noi-toggle {
        margin-top: 10px;
        box-shadow: none;
    }
}