/* assets/css/index.css - Стили главной страницы */

.content-wrapper {
    padding: 4rem 8%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    box-sizing: border-box;
}

/* =========================================================
   ПАНЕЛЬ УПРАВЛЕНИЯ СДВИГАМИ (Только для ПК)
   Меняй значение 'left'. Минус (-) двигает влево, Плюс (+) вправо.
   Ширина текста при этом ломаться и сужаться НЕ БУДЕТ!
========================================================= */

/* Блок 1: Новое общество */
.hero {
    position: relative;
    left: -55%; /* Сдвинут левее центра */
}

/* Блок 2: Технологии на службе человека */
.step-2 {
    position: relative;
    left: -10%; /* Стоит по центру (или чуть правее, если задать 5-10%) */
}

/* Блок 3: Осознанность в цифровом пространстве */
.step-3 {
    position: relative;
    left: 30%; /* Сдвинут правее */
}

/* Блок 4: Цитата песни */
.quote-block {
    position: relative;
    left: 70%; /* Сильно сдвинут вправо */
}

/* ========================================================= */

/* --- Внутренние стили блоков --- */

.hero { 
    text-align: left; 
    max-width: 700px; /* Жестко фиксируем ширину */
}
.hero h1 { 
    font-size: clamp(3rem, 8vw, 6rem); 
    font-weight: 900; 
    line-height: 0.9; 
    text-transform: uppercase; 
    margin: 0 0 1.5rem 0; 
}
.hero h1 span { color: var(--accent-red); }
.hero p { 
    font-size: 1.2rem; 
    color: var(--text-movie-desc); 
    border-left: 4px solid var(--accent-red); 
    padding-left: 20px; 
    margin: 0;
}

.text-section { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    max-width: 800px; /* Жестко фиксируем ширину */
}
.text-section h2 { 
    font-size: 2.2rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    margin: 0; 
    color: var(--text-white); 
    line-height: 1.1;
}
.text-section p { 
    font-size: 1.1rem; 
    color: var(--text-movie-desc); 
    margin: 0; 
    line-height: 1.6; 
}
.highlight { color: var(--accent-red); font-weight: bold; }

.quote-block { 
    background: var(--card-bg); 
    border-left: 4px solid var(--accent-red); 
    padding: 2rem 3rem; 
    max-width: 700px; /* Жестко фиксируем ширину */
    box-sizing: border-box;
}
.quote-text { 
    font-size: 1.2rem; 
    font-style: italic; 
    color: var(--text-white); 
    margin-bottom: 1.5rem; 
    line-height: 1.6; 
}
.quote-author { 
    font-size: 0.85rem; 
    color: var(--text-dim); 
    text-transform: uppercase; 
    font-weight: 900; 
    letter-spacing: 1px; 
    line-height: 1.5;
}

/* --- АДАПТИВНОСТЬ (МОБИЛЬНАЯ ВЕРСИЯ) --- */
@media (max-width: 768px) {
    .content-wrapper { padding: 3rem 15px; gap: 4rem; }
    
    /* ВАЖНО: Сбрасываем все ручные сдвиги на телефонах, чтобы текст не улетел за экран */
    .hero, .step-2, .step-3, .quote-block {
        left: 0 !important;
        margin: 0 auto;
    }
    
    .hero h1 { font-size: 3rem; }
    .text-section h2 { font-size: 1.6rem; }
    .quote-block { padding: 1.5rem; }
}