/* Cover Image Styles */
.cover-image {
    position: relative;
    width: 100%;
    height: 50vh; /* Adjust height as needed */
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the area nicely */
    object-position: center; /* Adjust to position the focal point */
}

/* Overlay option for better text contrast */
.cover-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
    z-index: 1;
}

/* Optional text overlay */
.cover-caption {
    position: absolute;
    bottom: var(--space-xl);
    left: var(--space-xl);
    color: white;
    z-index: 2;
    max-width: 60%;
}

.cover-caption h2 {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cover-caption p {
    font-size: 1.2rem;
    margin-bottom: var(--space-md);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Alternative design: Full-screen cover with scroll indicator */
.fullscreen-cover {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.5rem;
    z-index: 2;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-30px) translateX(-50%);
    }
    60% {
        transform: translateY(-15px) translateX(-50%);
    }
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .cover-image {
        height: 40vh;
    }
    
    .cover-caption h2 {
        font-size: 2rem;
    }
    
    .cover-caption p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .cover-image {
        height: 30vh;
    }
    
    .cover-caption {
        bottom: var(--space-md);
        left: var(--space-md);
        max-width: 80%;
    }
    
    .cover-caption h2 {
        font-size: 1.5rem;
    }
}