/**
 * Next Project Section Styling
 * With Background Scale on Hover
 */

/* Container styling when using shortcode */
.next-project-section {
    position: relative;
    min-height: 800px;    
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden; /* Required so scaled bg stays inside */
    z-index: 1;
}

/* Background layer (scalable) */
.next-project-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: inherit; /* inherits background-image from section */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1);
    transition: transform 0.9s ease;

    z-index: 0;
}

/* Background scale on hover */
.next-project-section:hover::after {
    transform: scale(1.08); /* Zoom effect */
}

/* Dark overlay (above bg but below content) */
.next-project-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.4s ease;
    z-index: 1;
}

/* Hover overlay effect */
.next-project-section:hover::before {
    background: rgba(0, 0, 0, 0.3);
}

/* Link styling */
.next-project-link {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2; /* Above overlay + bg */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-decoration: none;
    color: white;
}

/* Content wrapper */
.next-project-content {
    text-align: left;
    padding: 20px;
}

/* "Next Project" label */
.next-project-label {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-text);
    opacity: 0.8;
}

/* Project title - Using preloader typography */
.next-project-title {
    font-family: var(--e-global-typography-148cc15-font-family), Sans-serif;
    font-size: var(--e-global-typography-148cc15-font-size);
    font-weight: var(--e-global-typography-148cc15-font-weight);
    text-transform: var(--e-global-typography-148cc15-text-transform);
    font-style: var(--e-global-typography-148cc15-font-style);
    text-decoration: var(--e-global-typography-148cc15-text-decoration);
    line-height: var(--e-global-typography-148cc15-line-height);
    color: var(--e-global-color-text);
    margin: 0;
    transition: transform 0.4s ease;
}

/* Project description */
.next-project-description {    
    line-height: 1.6;
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
}

/* Responsive */
@media (max-width: 768px) {
    .next-project-section {
        min-height: 400px;
    }
    
    .next-project-content {
        padding: 30px 20px;
    }
    
    .next-project-label {
        font-size: 12px;
        margin-bottom: 15px;
    }
}