/* ========== HERO SECTION STYLES ========== */
.hero-section {
    background: #282828;
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.hero-section * {
    box-sizing: border-box;
}

    .hero-section .container {
        height: 100%;
        display:flex;
        align-items:center;
    }

/* Кега (бочка) - фоновые элементы */
.hero-keg {
    position: absolute;
    object-fit: cover;
}

.hero-keg--bottom-left {
    opacity: 0.5;
    width: 315.25px;
    height: 315.25px;
    left: 153px;
    top: 434.78px;
    transform: rotate(-27.135deg);
    filter: blur(7px);
}

.hero-keg--center {
    width: 701px;
    height: 701px;
    left: 50%;
    top: 16px;
    margin-left: 86.39px;
    transform: rotate(14.489deg);
}

/* Хмель - фоновые декоративные элементы */
.hero-hops {
    position: absolute;
    object-fit: cover;
}

.hero-hops--top-left {
    opacity: 0.1;
    width: 910.96px;
    height: 910.96px;
    left: -210px;
    top: -478px;
    transform: rotate(52.774deg);
}

.hero-hops--top-right {
    opacity: 0.1;
    width: 910.96px;
    height: 910.96px;
    left: 420.35px;
    top: 96px;
    transform: rotate(52.774deg);
}

.hero-hops--right {
    width: 567.84px;
    height: 567.84px;
    left: 1148.32px;
    top: -105px;
    transform: rotate(37.836deg);
    filter: blur(5px);
}

.hero-hops--bottom-center {
    width: 302.93px;
    height: 302.93px;
    left: 901px;
    top: 427.41px;
    transform: rotate(-35.849deg);    
}

.hero-hops--left {
    width: 377.82px;
    height: 377.82px;
    left: -143px;
    bottom: -163px;
    transform: rotate(52.774deg);
}

/* Контент Hero-секции */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
    align-items: start;
    justify-content: center;
    z-index: 10;
    margin-left: 10rem;
}

.hero-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.hero-label {
    color: #FFC75B;
    leading-trim: both;
    text-edge: cap;
    font-family: Montserrat;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}

.hero-content .hero-title {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}

.hero-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-content ul li {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    padding: 0;
}

/* Используем .btn .btn-primary .btn-pill из components.css */
.hero-button {
    /* Дополнительные специфичные стили если нужны */
}

/* ========== RESPONSIVE STYLES ========== */

/* Планшеты (768px - 1350px) */
@media (min-width: 768px) and (max-width: 1350px) {
    .hero-content {        
        margin-left: 0;        
    }

    .hero-hops--right {
        left: 1000px;
    }

    .hero-keg--center {
        margin-left: -150px;
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    .hero-section {
        height: 330px;
    }

    /* Скрываем большинство декоративных элементов */
    .hero-keg--bottom-left,
    .hero-keg--center,
    .hero-hops--right,
    .hero-hops--bottom-center,
    .hero-hops--left,
    .hero-hops--top-right {
        display: none;
    }

    .hero-hops--top-left {
        width: 415.83px;
        height: 415.83px;
        left: 79.1px;
        top: -253px;
    }

    .hero-content {
        width: 347px;
        gap: 20px;        
        margin-left: 0;
    }

    .hero-title {
        font-size: 24px;
    }

    /* .hero-button теперь использует .btn .btn-primary .btn-pill - адаптивность уже есть */
}

/* Очень большие экраны (1920px+) */
@media (min-width: 1920px) {
    
}