/* ========================================================================= */
/* 1. ГЛОБАЛНИ НАСТРОЙКИ (НУЛИРАНЕ)                                         */
/* ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    background-color: #111;
    font-family: 'Montserrat', sans-serif;
    scroll-snap-type: y mandatory !important; /* Един непрекъснат скрол за цялата страница */
}

/* ========================================================================= */
/* 2. ОСНОВЕН КОНТЕЙНЕР                                                      */
/* ========================================================================= */
.presentation-slider {
    width: 100vw !important;
    height: auto !important;
    overflow: visible !important;
    scrollbar-width: none;
}
.presentation-slider::-webkit-scrollbar { display: none; }

.slide {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    /* Тези са важни за правилния zoom на снимките */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    padding-left: 10%; /* Текстът започва от 10% вляво */
}

/* --- КОРЕКЦИЯ: анулира евентуален transform (напр. scaleX(-1)) от main.css,
   който обръща снимките огледално --- */
.slide,
.bg-image,
.split-image,
.framed-image {
    transform: none !important;
}

/* --- КОНТЕЙНЕРЪТ ЗА ТЕКСТ (ОГРАНИЧЕН) --- */
.content-area {
    width: 45% !important;  /* Заема 45% от екрана */
    max-width: 600px !important; /* Но не повече от 600px (за големи монитори) */
    z-index: 2;
    color: #fff;
    position: relative;
}

/* --- ТЕКСТОВ БЛОК В "SPLIT" СЛАЙДОВЕ (заглавие + описание, слайдове 2,3,4,5,7) --- */
.split-text {
    width: 60%;      /* Заема 60% от екрана, а не цялата ширина */
    max-width: 700px; /* За много големи монитори да не се разтяга прекалено */
    z-index: 2;
    color: #fff;
    position: relative;
}

/* ========================================================================= */
/* 3. ТИПОГРАФИЯ                                                            */
/* ========================================================================= */
.title-serif { 
    font-size: clamp(2.5rem, 5vw, 5rem); 
    line-height: 1.1;
    margin-bottom: 20px; 
}
.desc-bigger { 
	font-family: 'Montserrat', sans-serif; 
    font-size: clamp(2rem, 2.5vw, 2.25rem) !important; 
    line-height: 1.3 !important;
	color: #f0f0f0; 
	font-weight: 500;
}

.desc-sans { 
    font-family: 'Montserrat', sans-serif; 
    font-size: clamp(1rem, 1.5vw, 1.25rem); 
    line-height: 1.6;
    color: #f0f0f0; 
}

.desc-sans span {
	color: #b90808;
	font-weight:600;
}


/* ========================================================================= */
/* 4. ФОНОВИ СНИМКИ (По-специфични за някои слайдове)                        */
/* ========================================================================= */
/* Тези се прилагат директно към <section> тага в HTML чрез inline style */

.overlay-dark {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 1;
}
.overlay-darkest {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 1;
}



/* ИКОНИ */

/* Контейнерът става flex, за да подреди li елементите хоризонтално */
.stats-grid {
    display: flex;
    flex-wrap: wrap; /* Позволява пречупване на нов ред, ако мястото не стигне */
    justify-content: flex-start; /* Подрежда иконите отляво */
    gap: 30px; /* Разстояние между иконите */
    list-style: none; /* Премахва булетите (точките) на списъка */
}

.stat-item {
    display: flex;
    flex-direction: column; /* Иконата и текста остават един под друг */
    align-items: center;    /* Центрира ги хоризонтално */
    text-align: center;
    width: 100px;           /* Фиксирана ширина, за да са подравнени */
}

.stat-icon {
    width: 100px;            /* Настрой размера на иконата */
    height: auto;
    margin-bottom: 10px;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

.stat-label {
    font-size: 0.9rem;
    color: #ccc;
    text-transform: uppercase;
}

/* Мобилна версия - ако искаш на телефон да са 2х2 вместо 4х1 */
@media (max-width: 768px) {
    .stats-grid {
        justify-content: center;
        gap: 20px;
    }
}


/* ИНСТАГРАМ */

.insta-profile-banner {
    background: #000;
    padding: 50px 0;
    margin: 40px 0;
}

.insta-profile-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #111;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #333;
}

/* Instagram градиент рамка */
.gradient-border {
    padding: 4px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 50%;
    display: flex;
}

.insta-profile-pic img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #000;
}

.insta-handle {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.insta-stats {
    display: flex;
    gap: 20px;
    color: #fff;
    margin-bottom: 10px;
}

.insta-bio {
    color: #ccc;
    font-size: 14px;
    line-height: 1.4;
}

.btn-insta {
    background: linear-gradient(45deg, #405de6, #833ab4, #fd1d1d, #fcaf45);
    color: white !important;
    border: none !important;
    padding: 10px 30px !important;
    border-radius: 8px !important;
    font-weight: 600;
}

@media (max-width: 768px) {
    .insta-profile-card { flex-direction: column; text-align: center; }
	
	.insta-stats {
        justify-content: center;
        margin-top: 10px; /* Добавя малко разстояние, за да не е "залепено" за името */
    }
}


/* Специални настройки за логото */
.logo-box {
    width: 120px;
    height: 120px;
    min-width: 120px;
    
    /* Премахваме градиента и слагаме тънка рамка в тон с банера */
    background: #000; /* Фонът вътре в кръга */
    border: 1px solid #333; /* Тънка сива рамка като на банера */
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px; /* Разстояние на логото от рамката */
}

.logo-box img { 
    max-width: 100%; 
    height: auto; 
    object-fit: contain; 
}

.insta-profile-info .insta-bio p {
    font-family: 'Montserrat', sans-serif; 
	font-size: clamp(1rem, 1vw, 1rem);
    line-height: 1.6;
    color: #f0f0f0; 
}

/* В HTML-а използвахме btn btn-two, който ти вече имаш дефиниран в сайта! */


/* ЛОГА */

.logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колони по 1 част всяка */
    gap: 40px; /* Разстояние между логата */
    list-style: none; /* Премахва точките на списъка */
    width: 100%;
    max-width: 1000px; /* Ограничава ширината, за да не са огромни на големи екрани */
    margin: 0 auto;
    align-items: center;
}

.logos-grid li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Фиксирана височина за подравняване */
}

.logos-grid li img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Запазва пропорциите на логото */
    filter: brightness(0) invert(1); /* Ако логата са черни, това ще ги направи бели */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.logos-grid li img:hover {
    opacity: 1; /* При посочване с мишката логото става напълно непрозрачно */
}

/* Мобилна версия: 2 колони вместо 4 */
@media (max-width: 768px) {
    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}


/* ФОНОВИ СНИМКИ - ДЕСКТОП */
#slide-1 { background-image: url('../img/newslider/silvia-radulova-wallpaper-1.webp'); }
#slide-2 { background-image: url('../img/newslider/silvia-radulova-wallpaper-4.webp'); }
#slide-3 { background-image: url('../img/newslider/silvia-radulova-wallpaper-2.webp'); }
#slide-4 { background-image: url('../img/newslider/silvia-radulova-wallpaper-7.webp'); }
#slide-5 { background-image: url('../img/newslider/silvia-radulova-wallpaper-5.webp'); }
#slide-6 { background-image: url('../img/newslider/silvia-radulova-wallpaper-6.webp'); }
#slide-7 { background-image: url('../img/newslider/silvia-radulova-wallpaper-3.webp'); }

/* ========================================================================= */
/* 5. МОБИЛНА ВЕРСИЯ                                                         */
/* ========================================================================= */
@media (max-width: 992px) {
    .slide { 
        padding: 0 5% !important; 
        justify-content: center !important; 
        text-align: center !important; 
    }
    .slide-content { 
        width: 100% !important; /* На мобилно заема цялата ширина */
    }
    .split-text {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 24px !important; /* нормален отстъп отляво/отдясно, вместо текстът да опира в ръба */
    }
    .content-wrapper {
        padding: 0 24px !important;
    }
    .title-serif { font-size: 2.5rem !important; }
	
	.split-text {
		margin-top:300px;
	}
	
	.stats-grid {
		display: none;
	}
	
    /* --- МОБИЛНИ ФОНОВЕ (различни снимки от десктоп) --- */
    /* Смени само линка в url('...') с твоя, останалото не пипай */
    #slide-1 { background-image: url('../img/newslider/silvia-radulova-mobile-1.jpg') !important; }
    #slide-2 { background-image: url('../img/newslider/silvia-radulova-mobile-4.jpg') !important; }
    #slide-3 { background-image: url('../img/newslider/silvia-radulova-mobile-3.jpg') !important; }
    #slide-4 { background-image: url('../img/newslider/silvia-radulova-mobile-2.jpg') !important; }
    #slide-5 { background-image: url('../img/newslider/silvia-radulova-mobile-5.jpg') !important; }
    #slide-6 { background-image: url('../img/newslider/silvia-radulova-mobile-6.jpg') !important; }
    #slide-7 { background-image: url('../img/newslider/silvia-radulova-mobile-7.jpg') !important; }
}


@media (max-width: 768px) {
    .logos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0; /* Изключваме gap, ползваме margin за пълен контрол */
    }

    .logos-grid li {
        margin-bottom: 5px; /* Тук сложи отрицателната стойност */
        height: 60px; /* Може да се наложи да коригираш височината */
    }
}