/* Custom Layout Styles untuk Template Full Width */
.custom-section.single-image-full,
.custom-section.double-image-full {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.custom-section.single-image-full img,
.custom-section.double-image-full img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.custom-section.single-image-full:hover img,
.custom-section.double-image-full:hover img {
    transform: scale(1.02);
}

/* Links in full width layouts */
.custom-section.single-image-full a,
.custom-section.double-image-full a {
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    cursor: pointer;
}

/* Full width double image layout */
.custom-section.double-image-full .grid {
    gap: 0; /* No gap for seamless full width */
}

/* Overlay styles for full width layouts - pointer-events: none allows clicks through */
.custom-section .absolute.pointer-events-none {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through to the link below */
    z-index: 2;
}

.custom-section:hover .absolute.pointer-events-none {
    background: rgba(0, 0, 0, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-section.double-image-full .grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* Animation for full width sections */
.custom-section.single-image-full,
.custom-section.double-image-full {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Link hover effects for full width */
.custom-section a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.custom-section a:hover {
    text-decoration: none;
}

/* Text overlay responsive */
.custom-section .text-center {
    padding: 2rem;
    max-width: 90%;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .custom-section .text-center {
        padding: 1rem;
    }
    
    .custom-section .text-3xl {
        font-size: 1.5rem;
    }
    
    .custom-section .text-4xl {
        font-size: 2rem;
    }
    
    .custom-section .text-lg {
        font-size: 1rem;
    }
    
    .custom-section .text-xl {
        font-size: 1.125rem;
    }
}