/* ===== HOME PAGE STYLES ===== */

.template-homepage .main-container {
    position: relative;
    overflow: hidden;
}

/* ===== HERO BANNER SECTION ===== */
.template-homepage .banner {
    padding: 183px 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 560px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.template-homepage .banner .txt {
    background: rgba(214, 194, 176, 0.86);
    border-radius: 0 0 0 var(--border-radius-xl);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 920px;
    position: relative;
}

.template-homepage .banner .caffitaly {
    color: var(--brown-primary);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    align-self: stretch;
    min-height: 36px;
}

.template-homepage .banner .caffitaly2 {
    color: var(--black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 400;
    position: relative;
    width: 820px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.template-homepage .banner .button {
    background: var(--white);
    padding: 15px var(--spacing-lg);
    display: inline-flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    max-width: 320px;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
}

.template-homepage .banner .button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.template-homepage .banner .button a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-homepage .banner .div3 {
    color: var(--brown-primary);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}

/* ===== SPACER SECTIONS ===== */
.template-homepage .rectangle-9,
.template-homepage .rectangle-10,
.template-homepage .rectangle-11 {
    background: var(--beige-light);
    width: 100%;
    height: 40px;
    position: relative;
}

/* ===== CONTENT BLOCKS ===== */
.template-homepage .block-1,
.template-homepage .block-3 {
    padding: var(--spacing-2xl) 10% var(--spacing-2xl) 58%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
    justify-content: center;
    height: 407px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.template-homepage .block-1 .div4,
.template-homepage .block-3 .div7 {
    color: var(--brown-primary);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    width: 318px;
    min-height: 83px;
    line-height: 1.3;
}

.template-homepage .block-3 .div7 {
    width: 366px;
    min-height: 42px;
}

.template-homepage .block-1 .caffitaly3,
.template-homepage .block-3 .tres-coracoes {
    color: var(--black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 400;
    position: relative;
    width: 318px;
    line-height: 1.5;
}

.template-homepage .block-3 .tres-coracoes {
    width: 366px;
}

.template-homepage .button2 {
    background: var(--brown-light);
    padding: 15px var(--spacing-lg);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.template-homepage .button2:hover {
    background: var(--brown-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.template-homepage .button2 a {
    text-decoration: none;
}

.template-homepage .div5 {
    color: #000000;
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
}

/* ===== EXPERTS SECTION ===== */
.template-homepage .block-2 {
    background: var(--beige-light);
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.template-homepage .block-2 .txt2 {
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 408px;
    position: relative;
}

.template-homepage .block-2 .div6 {
    color: var(--brown-primary);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    align-self: stretch;
    min-height: 83px;
    line-height: 1.3;
}

.template-homepage .block-2 .caffitaly4 {
    color: var(--black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 400;
    position: relative;
    align-self: stretch;
    line-height: 1.5;
}

.template-homepage .block-2 .img {
    padding: 76px 173px;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 532px;
    height: 288px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.template-homepage .block-2 .play {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.template-homepage .block-2 .play:hover {
    transform: scale(1.1);
}

/* Стили для видео-контейнера экспертов */
.template-homepage .video-container.video-experts {
    flex-shrink: 0;
    width: 532px;
    height: 288px;
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.template-homepage .video-container.video-experts .video-frame {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* Явно скрываем дублирующееся мобильное изображение в блоке 2 на десктопе */
.template-homepage .block-2 .mobile-image {
    display: none;
}

/* ===== SUSTAINABILITY SECTION ===== */
.template-homepage .block-4 {
    padding: var(--spacing-2xl) 0 var(--spacing-2xl) 25%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 407px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 80px;
}

.template-homepage .block-4 .div8 {
    color: var(--brown-primary);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 30px;    
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    width: 460px;
    min-height: 83px;
    line-height: 1.3;
}

.template-homepage .block-4 .div9 {
    color: var(--black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: 400;
    position: relative;
    width: 460px;
    line-height: 1.5;
}

.template-homepage .sustainability-image {
    margin-top: var(--spacing-lg);
    width: 300px;
    height: auto;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.template-homepage .sustainability-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.template-homepage .sustainability-image:hover img {
    transform: scale(1.05);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1600px) {
    .template-homepage .banner .txt {
        width: 70%;
    }
    
    .template-homepage .banner .caffitaly2 {
        width: 100%;
    }
    
    .template-homepage .block-1,
    .template-homepage .block-3 {
        padding-left: 60%;
    }
    
    .template-homepage .block-4 {
        padding-left: 10%;
    }
}

/* =================================================================== */
/* ===== ЛОГИКА ПЕРЕКЛЮЧЕНИЯ ДЕСКТОП/МОБИЛЬНАЯ ВЕРСИЯ ===== */
/* =================================================================== */

/* По умолчанию (для десктопов и экранов шире 768px) */
.template-homepage .mobile-image,
.template-homepage .mobile-banner-text,
.template-homepage .mobile-text-content {
    display: none;
}

/* Для мобильных экранов (меньше или равно 768px) */
@media (max-width: 768px) {
    /* 1. Скрываем десктопные обертки */
    .template-homepage .desktop-image,
    .template-homepage .video-container.video-experts.desktop-image {
        display: none !important;
    }

    /* 2. Показываем мобильные обертки */
    .template-homepage .mobile-image,
    .template-homepage .mobile-banner-text,
    .template-homepage .mobile-text-content,
    .template-homepage .video-container.video-experts.mobile-image {
        display: flex; /* или flex, если нужно */
    }
    
    /* 3. Настраиваем порядок и внешний вид мобильных блоков */
    .template-homepage .main-container {
        display: flex;
        flex-direction: column;
    }
    
    /* Изображения */
    .template-homepage .mobile-image {
        display: block !important;
        width: 100%;
        height: 407px; /* Высота как у десктопных блоков */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 0px; /* Отступ снизу */
    }

    .template-homepage .banner {
        padding: 122px 0 !important;
    }
    
    .template-homepage .banner.mobile-image {
        order: 1;
        height: 170px;
    }
    
    .template-homepage .block-1.mobile-image,
    .template-homepage .block-3.mobile-image,
    .template-homepage .block-4.mobile-image {
        height: 275px;
    }
    
    .template-homepage .block-1.mobile-image { order: 3; }
    .template-homepage .block-3.mobile-image { order: 6; }
    .template-homepage .block-4.mobile-image { order: 8; }

    /* Блок экспертов (у него особая структура) */
    .template-homepage .block-2 {
        order: 5;
        flex-direction: column;
        background: var(--beige-light);
        padding: 0;
        margin-bottom: 40px;
    }
    .template-homepage .block-2 .txt2 {
        order: 1;
        width: 100%;
        padding: 30px 20px 50px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center !important;
    }
    .template-homepage .block-2 .div6,
    .template-homepage .block-2 .caffitaly4 {
        text-align: center !important;
        align-self: auto;
    }
    .template-homepage .block-2 .img.mobile-image,
    .template-homepage .video-container.video-experts.mobile-image {
        order: 2;
        width: 100%;
        height: 275px;
        border-radius: 0;
        padding: 0;
        display: flex; /* чтобы кнопка play была по центру */
        align-items: center;
        justify-content: center;
    }
    
    .template-homepage .video-container.video-experts.mobile-image .video-frame {
        width: 100%;
        height: 100%;
        border: none;
    }
    .template-homepage .block-2 .play {
        width: 100px;
        height: 100px;
    }

    /* Текстовые блоки */
    .template-homepage .mobile-banner-text,
    .template-homepage .mobile-text-content {
        background: var(--beige-light);
        padding: 30px 20px 50px 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    
    .template-homepage .mobile-banner-text { order: 2; }
    /* Для каждого текстового блока свой порядок */
    .template-homepage .block-1 ~ .mobile-text-content { order: 4; }
    .template-homepage .block-3 ~ .mobile-text-content { order: 7; }
    .template-homepage .block-4 ~ .mobile-text-content { order: 9; margin-bottom: 0 !important; }
    
    /* Стилизация текста внутри мобильных блоков (адаптация существующих) */
     .mobile-banner-text .mobile-caffitaly,
     .mobile-text-content .div4,
     .mobile-text-content .div7,
     .mobile-text-content .div8,
     .block-2 .div6 {
        color: var(--brown-primary);
        font-size: 25px !important;
        font-weight: bold;
        text-transform: uppercase;
        max-width: 295px;
        line-height: 1.3;
        font-family: 'Mulish-Bold' !important;
    }
    
     .mobile-banner-text .mobile-caffitaly2,
     .mobile-text-content .caffitaly3,
     .mobile-text-content .tres-coracoes,
     .mobile-text-content .div9,
     .block-2 .caffitaly4 {
        color: var(--black);
        font-size: 15px;
        font-weight: 400;
        max-width: 310px;
        line-height: 1.4;
    }

    /* Кнопки */
     .mobile-banner-text .mobile-button {
        background: var(--white);
        padding: 15px 30px;
        border-radius: var(--border-radius-sm);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
     .mobile-banner-text .mobile-div {
        color: var(--brown-primary);
        font-weight: 700;
        text-transform: uppercase;
    }
    
     .mobile-text-content .button2 {
        background: var(--brown-light);
     }
    
    /* Скрываем разделители */
    .template-homepage .rectangle-9,
    .template-homepage .rectangle-10,
    .template-homepage .rectangle-11 {
        display: none;
    }
}

/* Скрываем мобильные блоки на десктопе */
@media (min-width: 769px) {
    .template-homepage .mobile-banner-text,
    .template-homepage .mobile-text-content,
    .template-homepage .mobile-image,
    .template-homepage .video-container.video-experts.mobile-image {
        display: none !important;
    }
    
    /* Убеждаемся, что десктопные блоки показываются правильно */
    .template-homepage .banner .txt,
    .template-homepage .block-1 > .div4,
    .template-homepage .block-1 > .caffitaly3,
    .template-homepage .block-1 > .button2,
    .template-homepage .block-3 > .div7,
    .template-homepage .block-3 > .tres-coracoes,
    .template-homepage .block-3 > .button2,
    .template-homepage .block-4 > .div8,
    .template-homepage .block-4 > .div9 {
        display: block !important;
    }
    
    .template-homepage .block-2 .txt2 .button2 {
        display: flex !important;
    }

    .banner {
        min-height: 200px !important;
    }
}

@media (max-width: 480px) {
    .template-homepage .mobile-banner-text .mobile-caffitaly,
    .template-homepage .mobile-text-content .div4,
    .template-homepage .mobile-text-content .div7,
    .template-homepage .mobile-text-content .div8,
    .template-homepage .block-2 .div6 {
        font-size: var(--font-size-xl);
    }
    
    .template-homepage .block-2 .img {
        padding: var(--spacing-md);
        height: 200px;
    }
    
    .template-homepage .block-2 .play {
        width: 60px;
        height: 60px;
    }
}


    .template-homepage .img-best-choice-mobile {
        /* Стили для img элемента "Лучший выбор" в мобильной версии */
        object-position: 1% center !important;
    }

    .template-homepage .img-sustainability-mobile {
        /* Стили для img элемента устойчивого развития в мобильной версии */
        object-position: 99% center !important;
    }
    .template-homepage .img-innovation-mobile {
        /* Стили для img элемента инноваций в мобильной версии */
        object-position: 12% center !important;
    }