/* Hero Component Styles */
.hero {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 20px 85px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

/* Content Side */
.hero__content {
    flex: 1;
    /* max-width: 735px; */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* padding: 8px 16px; */
}

.hero__badge-icon {
    width: 30px;
    height: 26px;
}

.hero__badge-text {
    color: var(--berloga-text);
    font-family: var(--regular-text-font-family);
    font-size: 20px;
    font-weight: 500;
}

.hero__quote {
    color: var(--berloga-text);
    font-family: var(--regular-text-font-family);
    font-size: 24px;
    line-height: normal;
    margin: 0;
    padding: 0;
    font-style: italic;
    max-width: 625px;
}

.hero__buttons {
    display: flex;
    gap: 20px;
}

.hero__buttons--mobile {
    display: none;
}

/* Image Side - Адаптивное изображение */
.hero__image {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 498px;
    aspect-ratio: 498/564; /* Сохранение пропорций */
}

.hero__image-circle {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1; /* Всегда круглые */
}

.hero__image-circle--large {
    background-color: var(--berloga-blue-lightest);
    width: 92.2%; /* 459/498 = 92.2% */
    left: 0;
    top: 9.6%; /* 54/564 = 9.6% */
}

.hero__image-circle--small {
    background-color: var(--berloga-magenta-light);
    width: 92.2%; /* 459/498 = 92.2% */
    left: 7.6%; /* 38/498 = 7.6% */
    top: 15.6%; /* 88/564 = 15.6% */
}

.hero__image-pets {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Desktop 1440px */
@media (max-width: 1440px) {
    .hero__quote {
        font-size: 20px;  
    }
    .hero__image {
        max-width: 400px;
    }
}

/* Desktop 1200px */
@media (max-width: 1200px) {
    .hero__quote {
        font-size: 18px;  
    }
    .hero__button--secondary {
        display: none;
    }
}

/* Tablet 1024px */
@media (max-width: 1024px) {
    .hero {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .hero__content {
        align-items: center;
    }

    .hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero__buttons--desktop {
        display: none;
    }

    .hero__buttons--mobile {
        display: flex;
    }

    .hero__quote {
        font-size: 16px;  
    }
}

/* Mobile Hero Styles - Based on Exact Figma MCP Data */
@media (max-width: 768px) {
    .hero {
        /* Container: адаптивный с максимальной шириной */
        /* max-width: 375px; */
        width: 100%;
        height: auto;
        padding: 40px 0px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 40px;
    }
    
    .hero__content {
        /* Content: адаптивный контент */
        width: 100%;
        /* max-width: 335px; */
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    
    /* Mobile Badge - адаптивный */
    .hero__badge {
        max-width: 165px;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-start;
        flex-shrink: 0;
    }
    
    .hero__badge-icon {
        width: 22px;
        height: 19px;
        flex-shrink: 0;
    }
    
    .hero__badge-text {
        color: #1a1a1a;
        font-family: 'Nunito', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 19px;
    }
    
    /* Mobile Header - адаптивный */
    .hero__title {
        width: 100%;
        /* max-width: 335px; */
        color: #1a1a1a;
        font-family: 'Nunito', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 40px;
        line-height: 48px;
        text-align: center;
        margin: 0;
        padding: 0 40px;
    }
    
    .hero__title-line {
        display: block;
        color: #1a1a1a;
    }
    
    .hero__title-brand {
        color: var(--berloga-blue, #4eb3ca);
    }
    
    /* Mobile Quote - адаптивная */
    .hero__quote {
        width: 100%;
        /* max-width: 339px; */
        color: #1a1a1a;
        font-family: 'Nunito', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 22px;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    
    /* Mobile Image Section - адаптивное изображение */
    .hero__image {
        width: 100%;
        max-width: 335px;
        aspect-ratio: 335/379; /* Сохранение пропорций */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    /* Large Circle - адаптивный */
    .hero__image-circle--large {
        background: #eff8fa;
        border-radius: 50%;
        width: 97.3%; /* 326/335 = 97.3% */
        aspect-ratio: 1; /* Круглая форма */
        position: absolute;
        left: 0%;
        top: 6.3%; /* 24/379 = 6.3% */
    }
    
    /* Small Circle - адаптивный */
    .hero__image-circle--small {
        background: #f8e6ed;
        border-radius: 50%;
        width: 91.3%; /* 306/335 = 91.3% */
        aspect-ratio: 1; /* Круглая форма */
        position: absolute;
        left: 8.7%; /* 29/335 = 8.7% */
        top: 10.0%; /* 38/379 = 10.0% */
    }
    
    /* Main Image - адаптивное */
    .hero__image-pets {
        width: 100%;
        height: 100%;
        position: relative;
        object-fit: cover;
        z-index: 1;
    }
    
    /* Mobile Buttons - адаптивные */
    .hero__buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 335px;
    }
    
    /* Hide secondary button on mobile */
    .hero__button--secondary {
        display: none;
    }
    
    /* Mobile Button - адаптивная */
    .hero__button--primary {
        width: 100%;
        max-width: 335px;
        height: 51px;
        background: #b50847;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        font-family: 'Nunito', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 27px;
        color: #ffffff;
        text-decoration: none;
        min-width: auto;
        box-sizing: border-box;
    }

    .hero__buttons--desktop {
        display: none;
    }

    .hero__buttons--mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 335px;
    }
}
@media (max-width: 570px) {
    .hero__title {
        font-size: 32px;
    }
    .hero__quote {
        font-size: 18px;
    }

}

@media (max-width: 375px) {
    .hero__title {
        font-size: 28px;
    }
    .hero__quote {
        font-size: 16px;
    }

}