/**
 * CTA Section Block - Frontend Styles
 *
 * Note: Global CTA styles are generated dynamically in wphub_output_custom_css()
 * These are additional block-specific styles for Gutenberg integration
 */

/* Block-specific overrides and enhancements */
.sjwh-wp-block-wphub-cta-section {
    /* Increased bottom margin for better content separation */
    margin: 2rem 0 4rem 0;
    /* Ensure text alignment cascades properly */
    position: relative;
    /* Ensure minimum height for split layouts */
    min-height: 500px;
}

/* Padding classes as fallback for different CTA padding sizes */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-xs {
    padding: 10px 15px !important;
}
.sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-s {
    padding: 20px 25px !important;
}
.sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-small {
    padding: 30px 35px !important;
}
.sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-medium {
    padding: 50px 40px !important;
}
.sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-large {
    padding: 80px 50px !important;
}

/* Editor-specific fixes */
.sjwh-wp-block-wphub-cta-section .sjwh-cta-content-inner {
    /* Ensure proper spacing for inline editing */
    position: relative;
}

/* Rich Text Editor spacing fixes */
.sjwh-wp-block-wphub-cta-section .sjwh-cta-heading[data-rich-text-placeholder]:empty:before,
.sjwh-wp-block-wphub-cta-section .sjwh-cta-subheading[data-rich-text-placeholder]:empty:before,
.sjwh-wp-block-wphub-cta-section .sjwh-cta-description[data-rich-text-placeholder]:empty:before {
    opacity: 0.7;
    font-style: italic;
}

/* Button wrapper styling for block integration */
.sjwh-wp-block-wphub-cta-section .sjwh-cta-button-wrapper {
    margin-top: 2rem;
}

/* Background Image handling for block */
.sjwh-wp-block-wphub-cta-section.has-background-image {
    /* Enhanced background image display */
    background-attachment: scroll;
}

/* Split layout visual containers (for background image layouts) */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-visual,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-visual {
    /* Visual space for split layouts - background image shows through */
    flex: 0 0 50%;
    /* Height determined by content */
    min-height: auto;
}

/* Split layout content positioning */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-content,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-content {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    /* Padding handled by parent container */
}

/* Ensure split layouts respect text alignment */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-content-inner,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-content-inner {
    width: 100%;
}

/* Remove background overlay - text should be readable without it */
.sjwh-wp-block-wphub-cta-section.has-background-image .sjwh-cta-content-inner {
    /* No background overlay needed */
    /* Padding handled by parent container */
    /* Keep text shadow for better readability if needed */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure text is readable on background images */
.sjwh-wp-block-wphub-cta-section.has-background-image .sjwh-cta-heading,
.sjwh-wp-block-wphub-cta-section.has-background-image .sjwh-cta-subheading,
.sjwh-wp-block-wphub-cta-section.has-background-image .sjwh-cta-description {
    color: white;
}

/* Button enhancements for background image layouts */
.sjwh-wp-block-wphub-cta-section.has-background-image .sjwh-cta-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Button animations from global theme styles */
.sjwh-wp-block-wphub-cta-section .sjwh-cta-button {
    transition: all 0.3s ease;
    display: inline-block;
}

.sjwh-wp-block-wphub-cta-section .sjwh-cta-button:hover {
    transform: translateY(-2px);
}

/* Specific button animation classes */
.sjwh-wp-block-wphub-cta-section .btn-animation-pulse:hover {
    animation: pulse 1s infinite;
}

.sjwh-wp-block-wphub-cta-section .btn-animation-bounce:hover {
    animation: bounce 0.5s;
}

.sjwh-wp-block-wphub-cta-section .btn-animation-shadow-lift:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

/* Ensure CTA buttons use theme button styles */
.sjwh-wp-block-wphub-cta-section .sjwh-hero-btn.sjwh-btn-primary,
.sjwh-wp-block-wphub-cta-section .sjwh-hero-btn.sjwh-btn-secondary,
.sjwh-wp-block-wphub-cta-section .sjwh-hero-btn.sjwh-btn-ghost {
    /* Inherit from global button styles defined in admin-settings.php */
}

/* Alignment utilities - Enhanced with !important for proper override */
.sjwh-wp-block-wphub-cta-section.text-left .sjwh-cta-content-inner,
.sjwh-wp-block-wphub-cta-section.text-left .sjwh-cta-content {
    text-align: left !important;
}

.sjwh-wp-block-wphub-cta-section.text-left .sjwh-cta-button-wrapper {
    justify-content: flex-start !important;
    display: flex;
}

.sjwh-wp-block-wphub-cta-section.text-center .sjwh-cta-content-inner,
.sjwh-wp-block-wphub-cta-section.text-center .sjwh-cta-content {
    text-align: center !important;
}

.sjwh-wp-block-wphub-cta-section.text-center .sjwh-cta-button-wrapper {
    justify-content: center !important;
    display: flex;
}

.sjwh-wp-block-wphub-cta-section.text-right .sjwh-cta-content-inner,
.sjwh-wp-block-wphub-cta-section.text-right .sjwh-cta-content {
    text-align: right !important;
}

.sjwh-wp-block-wphub-cta-section.text-right .sjwh-cta-button-wrapper {
    justify-content: flex-end !important;
    display: flex;
}

/* Animation integration */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-animation-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sjwh-wp-block-wphub-cta-section.sjwh-cta-animation-fade-in.aos-animate {
    opacity: 1;
    transform: translateY(0);
}

.sjwh-wp-block-wphub-cta-section.sjwh-cta-animation-slide-up {
    transform: translateY(30px);
    transition: transform 0.6s ease;
}

.sjwh-wp-block-wphub-cta-section.sjwh-cta-animation-slide-up.aos-animate {
    transform: translateY(0);
}

/* Button animation keyframes */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

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

@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgba(0, 123, 186, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 123, 186, 0.8), 0 0 30px rgba(0, 123, 186, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 123, 186, 0.5);
    }
}

@keyframes breathing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .sjwh-wp-block-wphub-cta-section {
        margin: 1.5rem 0;
    }

    .sjwh-wp-block-wphub-cta-section .sjwh-cta-button-wrapper {
        margin-top: 1.5rem;
    }

    /* Responsive padding adjustments for tablet */
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-xs {
        padding: 8px 12px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-s {
        padding: 15px 20px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-small {
        padding: 25px 30px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-medium {
        padding: 40px 30px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-large {
        padding: 60px 40px !important;
    }
}

@media (max-width: 575px) {
    .sjwh-wp-block-wphub-cta-section {
        margin: 1rem 0;
    }

    .sjwh-wp-block-wphub-cta-section .sjwh-cta-button-wrapper {
        margin-top: 1rem;
    }

    /* Responsive padding adjustments for mobile */
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-xs {
        padding: 5px 10px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-s {
        padding: 10px 15px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-small {
        padding: 20px 20px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-medium {
        padding: 30px 20px !important;
    }
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-padding-large {
        padding: 40px 25px !important;
    }

    /* Adjust split visual areas for mobile */
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-visual,
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-visual {
        /* Height determined by content even on mobile */
        min-height: auto;
    }

    /* Mobile content padding for background images */
    .sjwh-wp-block-wphub-cta-section.has-background-image .sjwh-cta-content-inner {
        /* Padding handled by parent container with responsive adjustments */
        /* No background overlay on mobile either */
    }
}

/* Split Image Styles - Base styles for all layouts */
.sjwh-wp-block-wphub-cta-section .sjwh-cta-split-visual {
    position: relative;
    overflow: hidden;
    /* No background - inherits from parent container */
}

.sjwh-wp-block-wphub-cta-section .sjwh-cta-split-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Ensure no inherited styles affect split images */
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Ensure split container uses flexbox */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-section-container,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-section-container {
    display: flex;
    align-items: stretch;
    min-height: 500px;
    height: 100%;
    width: 100%;
}

/* Split visual takes 50% width and full height */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-visual,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-visual {
    flex: 1 1 50%;
    max-width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

/* Ensure the image fills the container properly */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-image,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* For narrow images, ensure they scale up */
    min-width: 100%;
    min-height: 100%;
    /* Override any global image styles - split images should be full bleed */
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Prevent any hover effects on split images */
.sjwh-wp-block-wphub-cta-section .sjwh-cta-split-image:hover {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Split content takes 50% width */
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-content,
.sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-content {
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    min-height: 500px;
}

/* Mobile Responsive: Stack vertically on mobile */
@media (max-width: 768px) {
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-section-container,
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-section-container {
        flex-direction: column;
    }

    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-visual,
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-visual,
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-split-content,
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-split-content {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    /* Ensure image has minimum height on mobile */
    .sjwh-wp-block-wphub-cta-section .sjwh-cta-split-visual {
        min-height: 250px;
    }

    /* For split layout, image comes after content on mobile */
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split .sjwh-cta-section-container {
        flex-direction: column;
    }

    /* For split-reverse, image comes first on mobile */
    .sjwh-wp-block-wphub-cta-section.sjwh-cta-layout-split-reverse .sjwh-cta-section-container {
        flex-direction: column-reverse;
    }
}