/* Hero Banner Component Styles */

.hero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: var(--header-height);
    padding-top: 0;
    border-top: none;
    padding-bottom: 35px;
}

.hero-image-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-picture {
    width: 100%;
    height: auto;
    display: block;
}

.hero-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-position: center;
    object-fit: contain;
    transition: all var(--transition-slow);
    display: block;
}

@media (min-width: 1024px) {
    .hero-image {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Loading state */
.hero-image.loading {
    opacity: 0;
    filter: blur(4px);
}

.hero-image-container.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

/* Error state */
.hero-image.error {
    display: none;
}

.hero-image-container.error {
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-container.error::after {
    content: 'Hero image not available';
    color: var(--gray-500);
    font-size: var(--font-size-lg);
    text-align: center;
}

/* Intersection observer animation */
.hero-section.animate-in .hero-image {
    animation: fadeIn var(--transition-slow) ease-out;
}

/* Performance optimizations */
.hero-image {
    will-change: transform, opacity;
}

/* Accessibility */
.hero-image:focus-visible {
    outline: 2px solid var(--gray-900);
    outline-offset: 4px;
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}