/* ============================================
   V3 HEADER
   ============================================ */

/* Базовый контейнер хедера */
.header-container {
    min-height: 7.5rem;      /* 120px */
    height: clamp(7.5rem, 15vh, 12.5rem);
    max-height: 12.5rem;     /* 200px */
    padding: 0.75rem 0;      /* Вертикальные отступы */
}

/* Логотип */
.header-logo {
    height: 100%;
    width: 100%;           /* Добавляем width: 100% */
    max-height: 6rem;
    max-width: 100%;       /* КРИТИЧНО - не даем вылезти за колонку */
    object-fit: contain;   /* Вписываем в контейнер */
}

/* Текстовый блок */
.header-subtitle {
    font-size: clamp(0.7rem, 1.5vw, 1rem);
    line-height: 1.2;
}

.header-title {
    font-size: clamp(1rem, 2.5vw, 2rem);
    line-height: 1.2;
}

/* Слоган */
.header-slogan {
    font-size: clamp(1rem, 2vw, 2rem);
    line-height: 1.2;
}

/* ============================================
   TABLET (768px+)
   ============================================ */
@media (min-width: 768px) {
    .header-container {
        min-height: 9.375rem;  /* 150px */
        height: clamp(9.375rem, 18vh, 15.625rem);
        max-height: 15.625rem; /* 250px */
        padding: 1rem 0;
    }
    
    .header-logo {
        max-height: 8rem;      /* 128px */
    }
    
    .header-subtitle {
        font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    }
    
    .header-title {
        font-size: clamp(1.2rem, 2.5vw, 2.25rem);
    }
    
    .header-slogan {
        font-size: clamp(1.2rem, 2vw, 2.25rem);
    }
}

/* ============================================
   DESKTOP (1200px+)
   ============================================ */
@media (min-width: 1200px) {
    .header-container {
        min-height: 11.25rem;  /* 180px */
        height: clamp(11.25rem, 20vh, 18.75rem);
        max-height: 18.75rem;  /* 300px */
        padding: 1.25rem 0;
    }
    
    .header-logo {
        max-height: 10rem;     /* 160px */
    }
    
    .header-subtitle {
        font-size: clamp(0.9rem, 1.5vw, 1.25rem);
    }
    
    .header-title {
        font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    }
    
    .header-slogan {
        font-size: clamp(1.5rem, 2vw, 2.5rem);
    }
}

/* ============================================
   LANDSCAPE на мобильных (высота < 500px)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .header-container {
        min-height: 5rem;      /* 80px */
        height: 5rem;
        max-height: 5rem;
        padding: 0.5rem 0;
    }
    
    .header-logo {
        max-height: 4rem;      /* 64px */
    }
    
    .header-subtitle {
        font-size: 0.7rem;
    }
    
    .header-title {
        font-size: 0.9rem;
    }
    
    /* Слоган полностью скрыт */
    .header-slogan {
        display: none !important;
    }
}

/* ============================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (< 375px)
   ============================================ */
@media (max-width: 375px) {
    .header-container {
        min-height: 6.25rem;   /* 100px */
        height: 6.25rem;
        max-height: 6.25rem;
        padding: 0.5rem 0;
    }
    
    .header-logo {
        max-height: 5rem;      /* 80px */
    }
    
    .header-subtitle {
        font-size: 0.65rem;
        line-height: 1.1;
    }
    
    .header-title {
        font-size: 0.85rem;
        line-height: 1.15;
    }
}



/* Reveal слева направо через clip-path */
@keyframes revealLeft {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Reveal с поворотом (для слогана) */
.reveal-left-rotate {
    animation: revealLeft 2s ease-out 1.5s backwards;
    transform: rotate(-5deg);
    line-height: 1.8;  /* Относительный line-height */
}

/* Адаптивный line-height для слогана */
@media (min-width: 992px) {  /* lg breakpoint */
    .reveal-left-rotate {
        line-height: clamp(1.6, 2.5vw, 2.2);
    }
}

@media (min-width: 1200px) {  /* xl breakpoint */
    .reveal-left-rotate {
        line-height: clamp(1.8, 2.5vw, 2.5);
    }
}