.openness-principles {
	padding: 20px 0 140px;
	background: #fff;
    max-width: 1320px;
    margin: 0 auto;

    @media screen and (max-width: 768px) {
        padding: 20px 0px 60px;
    }
}

.openness-subtitle {
    margin: 0;
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: #004735;
    border-bottom: 1px solid rgba(0, 74, 51, 0.1);
    padding-bottom: 14px;
    margin-bottom: 60px;

    @media screen and (max-width: 768px) {
        font-size: 16px;
        margin: 0 20px 30px;
    }
}

.openness-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
}

.openness-title {
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 42px;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: rgba(0, 71, 53, 1);
    margin: 0;

    &.mobile-version {
        display: none;
    }

    @media screen and (max-width: 768px) {
        font-size: 32px;

        &.mobile-version {
            display: block;
            padding: 0 20px 30px 20px;
        }
        
        &.desktop-version {
            display: none;
        }

    }
}

/* === Сетка карточек === */
.openness-grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    @media screen and (max-width: 768px) {
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
        grid-template-rows: unset;
        gap: 14px;
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 0 0 20px;
        margin: 0 0 0 20px;
        /* scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; */
    }
}

.openness-card {
	border-radius: 16px;
	padding: 26px;
    background: #F1F5F8;

    @media screen and (max-width: 768px) {
        padding: 20px;
        /* min-width: 315px; */
        width: 275px;
    }
	/* transition: 0.3s ease; */

    &:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;

        &.card-with-title {
            background: none;
            padding: 0;

            @media screen and (max-width: 768px) {
                /* grid-area: 1 / 1 / 2 / 2;  */
                display: none;
            }
        }

        @media screen and (max-width: 768px) {
            /* grid-area: 2 / 1 / 3 / 2; */
            grid-area: unset;
        }
    }

    &:nth-child(n+2) {
        grid-area: 1 / 2 / 2 / 3;

        @media screen and (max-width: 768px) {
            /* grid-area: 2 / 1 / 3 / 2; */
            grid-area: unset;
        }
    }

    &:nth-child(n+3) {
        grid-area: 1 / 3 / 2 / 4;

        @media screen and (max-width: 768px) {
            /* grid-area: 2 / 2 / 3 / 3;  */
            grid-area: unset;
        }
    }

    &:nth-child(n+4) {
        grid-area: 2 / 2 / 3 / 3;

        @media screen and (max-width: 768px) {
            /* grid-area: 2 / 3 / 3 / 4; */
            grid-area: unset;
        }
    }

    &:nth-child(n+5) {
        grid-area: 3 / 1 / 4 / 2;

        @media screen and (max-width: 768px) {
            /* grid-area: 2 / 4 / 3 / 5; */
            grid-area: unset;
        }
    }

    &:nth-child(n+6) {
        grid-area: 3 / 3 / 4 / 4;

        @media screen and (max-width: 768px) {
            /* grid-area: 2 / 5 / 3 / 6; */
            grid-area: unset;
        }
    }
}
/* .openness-card:hover {
	background: #d5e6db;
} */

.openness-card-header {
	display: flex;
	justify-content: space-between;
    padding-bottom: 40px;

    /* @media screen and (max-width: 768px) {
        padding-bottom: 40px;
    } */
}

.openness-card h3 {
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #013026;
    flex: 0 1 270px;
	margin: 0;

    @media screen and (max-width: 768px) {
        font-size: 21px;
        letter-spacing: -0.01em;
        flex: 0 1 85%;
    }
}

.openness-icon {
	background: #CFE2E0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #004735 inset;

    @media screen and (max-width: 768px) {
        /* flex: 1 0 36px; */
        max-width: 36px;
    }
}

.openness-card p {
	font-family: 'Closer Text', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: #004A33;
}

/* === Адаптив === */
@media (max-width: 768px) {
	.openness-header {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* editor */
.editor-styles-wrapper {
    .openness-editor-preview {
        background: #fff;
        padding: 60px 40px;
        border-radius: 24px;
        border: 1px solid #e0e0e0;

        .openness-section-title {
            border: none;
            background: transparent;
            color: #004d40;
            text-transform: uppercase;
            font-size: 15px;
            margin-bottom: 10px;
            outline: none;
        }

        .openness-main-title {
            font-size: 28px;
            font-weight: 600;
            color: #004d40;
            border: none;
            background: transparent;
            width: 100%;
            max-width: 500px;
            margin-bottom: 40px;
            outline: none;
        }

        .openness-editor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;

            .openness-editor-card {
                background: #e1eee6;
                padding: 20px;
                border-radius: 16px;

                .openness-card-title {
                    width: 80%;
                    border: none;
                    background: transparent;
                    font-weight: 600;
                    color: #004d40;
                    outline: none;
                }

                .openness-card-desc {
                    width: 100%;
                    min-height: 60px;
                    border: none;
                    background: transparent;
                    resize: none;
                    margin-top: 8px;
                    color: #333;
                    font-size: 14px;
                    line-height: 1.5;
                    outline: none;
                }
            }
        }
    }
}