/* дополнительные классы в стиле bootstrap */
/* Дополнительные размеры */
   
.h-60 {
    height: 60% !important;
}
.h-40 {
    height: 40% !important;
}

/* Дополнительные z */
   
.z-4 {
    z-index: 4 !important;
}
.z-5 {
    z-index: 5 !important;
}
.z-6 {
    z-index: 6 !important;
}
.z-7 {
    z-index: 7 !important;
}
.z-8 {
    z-index: 8 !important;
}
.z-9 {
    z-index: 9 !important;
}
.z-10 {
    z-index: 10 !important;
}

/* GRADIENT OVERLAYS */
.bg-gradient-caption {
    background: linear-gradient(
        to top, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.3) 30%, 
        rgba(0, 0, 0, 0) 60%
    ) !important;
}
.bg-gradient-dark {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.7) 100%
    ) !important;
}
.bg-primary-darker {
    background-color: #0056a7 !important;
}

/* ASPECT RATIOS */
/* Aspect Ratio 3:1 */
.aspect-ratio-3-1 {
    aspect-ratio: 3 / 1;
    position: relative;
}
.aspect-ratio-3-1::before {
    content: "";
    display: block;
    padding-top: 33.33%;
}

/* Aspect Ratio 3:2 */
.aspect-ratio-3-2 {
    aspect-ratio: 3 / 2;
    position: relative;
}
.aspect-ratio-3-2::before {
    content: "";
    display: block;
    padding-top: 66.67%;
}

/* Aspect Ratio 3:4 */
.aspect-ratio-3-4 {
    aspect-ratio: 3 / 4;
    position: relative;
}
.aspect-ratio-3-4::before {
    content: "";
    display: block;
    padding-top: 133.33%;
}

/* Aspect Ratio document */
.aspect-ratio-document {
    aspect-ratio: 1 / 1.2;
    position: relative;
}
.aspect-ratio-document::before {
    content: "";
    display: block;
    padding-top: 120%;
}

/* Контент внутри */
.aspect-ratio-3-1 > *,
.aspect-ratio-3-2 > *,
.aspect-ratio-3-4 > *,
.aspect-ratio-document > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Для современных браузеров убираем костыли */
@supports (aspect-ratio: 1 / 1) {
    .aspect-ratio-3-1::before,
    .aspect-ratio-3-2::before,
    .aspect-ratio-3-4::before,
    .aspect-ratio-document::before {
        display: none;
    }
    
    .aspect-ratio-3-1 > *,
    .aspect-ratio-3-2 > *,
    .aspect-ratio-3-4 > *,
    .aspect-ratio-document > * {
        position: static;
    }
}

/* Подсветка вместо тени */
.shadow-light-sm {
    box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.9);
}

/* Серый фон с прозрачностью */
.bg-secondary-opacity-75 {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb),0.75) !important;
}

/* Сдвиг вверх при наведении */
.hover-lift {
    transition: transform 0.2s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-0.125rem);
}

/* Blur utilities */
.blur-5 { filter: blur(5px) !important; }
.blur-10 { filter: blur(10px) !important; }
.blur-15 { filter: blur(15px) !important; }
.blur-20 { filter: blur(20px) !important; }

/* Scale utilities */
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }
.scale-125 { transform: scale(1.25) !important; }
.scale-150 { transform: scale(1.5) !important; }