/* === Исправленный блок слайда === */
.slide {
    display: none; /* Скроет слайды до загрузки JS */
    min-height: 100%; 
    width: 100%;
    align-items: center; /* Центрирует содержимое по вертикали */
    background: #fff;    /* Белый фон, чтобы перекрыть то, что сзади */
    border-radius: var(--border-radius);
    /* Если тень "грязная", удалите строку ниже */
    box-shadow: var(--shadow); 
}

/* Центрируем содержимое внутри сетки */
.slide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center; 
    padding: 20px;
    width: 100%;
}

/* Убираем лишние отступы у текста */
.slide-text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

/* Чтобы картинка не была слишком огромной и не распирала блок */
.slide-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}




/* === Слайдер контейнер === */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Слайдер забирает 3 части из 4 доступных (Десктоп) */
.recipe-slider {
    grid-column: span 3;
    display: grid;
    height: 100%;
}

/* Рандомный рецепт забирает оставшуюся 1 часть (Десктоп) */
.recipe-search {
    grid-column: span 1;
}

/* === Слайды === 
.slide {
    display: none;
    border-radius: var(--border-radius);
    padding: 0.4rem;
    box-shadow: var(--shadow);
    display: grid;
    align-items: center; 
}

/* === Grid по умолчанию (картинка слева, текст справа) === 
.slide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-items: center;

    height: 100%;
    align-content: center;
}

.slide-grid .slide-image img {
    width: 100%;
    border-radius: var(--border-radius);
    height: auto;
    object-fit: contain;
}

.slide-grid .slide-text {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.1rem;
    color: var(--text-dark);
} */

/* Позиция картинка слева, текст справа */
.slide-left-text .slide-image { order: 1; }
.slide-left-text .slide-text { order: 2; }
/* Позиция картинка справа, текст слева */
.slide-right-text .slide-image { order: 2; }
.slide-right-text .slide-text { order: 1; }

/* === Центрированный слайд === */
.slide-center {
    position: relative;
    text-align: center;
    padding: 4px;
}

.slide-center .slide-image img {
    height: 100%;
    width: auto;
}

.slide-center .slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.45);
    padding: 20px;
    border-radius: 16px;
    color: #fff;
    max-width: 70%;
}

/* Автор слайда */
.slide-author {
    display: none;
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.85;
}

/* ========================================================== */
/* === Адаптив (Mobile) - Сгруппировано и перенесено вниз === */
/* ========================================================== */
@media (max-width: 768px) {
    /* 1. Распределение колонок для мобильной сетки */
    .recipe-slider,
    .recipe-search {
        grid-column: span 2; /* Занимают всю ширину в 2-х колоночной сетке */
    }

    /* 2. Стили внутреннего грида слайда */
    .slide-grid {
        grid-template-columns: 1fr; /* Один столбец */
        gap: 0;
    }
    
    .slide-grid .slide-text { 
        font-size: 14px; 
    }
    .slide-grid .slide-image img {
       padding-top: 8px;
    }
    .slide-center .slide-text { 
        max-width: 90%; 
        padding: 8px; 
    }

    /* 3. Позиционирование: картинка сверху, текст снизу для всех слайдов */
    .slide-left-text .slide-image,
    .slide-right-text .slide-image {
            order: 1; /* картинка сверху */
    }
    .slide-left-text .slide-text, 
    .slide-right-text .slide-text {
        order: 2; /* текст снизу */
     }
}