/**
 * Prefooter CTA Block Styles
 *
 * Call-to-action section with action items displayed before the footer.
 * Features a card-style inner container with its own light background.
 * Supports optional image with left/right alignment layouts.
 *
 * @package TMW_Blocks
 * @since 1.0.0
 */

/* Block Section - width controlled by .container class on section element */
.prefooter-cta-section {
    width: 100%;
}

/* Inner Container - styling only, width inherited from .container class on section */
.prefooter-cta {
    padding: var(--space-3xl) var(--space-xl) var(--space-xl) var(--space-xl);
    background: var(--wp--preset--color--gray-light);
    border-radius: var(--radius-card);
}

/* Main Heading */
.prefooter-cta .section-title,
.prefooter-cta .section-subtitle {
    text-align: center;
    max-width: var(--max-width-content-xl);
    margin-left: auto;
    margin-right: auto;
}

/* Layout with Image - Uses .row with col-7 (image) + col-5 (content)
   - Image Left: .ml-auto utility pushes content to right edge (space-between effect)
   - Image Right: adjacent columns, no extra spacing */
.prefooter-cta.has-image-right .prefooter-cta-wrapper .row,
.prefooter-cta.has-image-left .prefooter-cta-wrapper .row {
    align-items: center;
    padding: 0 var(--space-xl);
}

/* Image Right: Content first (order-1), then image (order-2) */
.prefooter-cta.has-image-right .row .prefooter-cta-content {
    order: 1;
    margin-bottom: var(--space-xl);
}

.prefooter-cta.has-image-right .row .prefooter-cta-image {
    order: 2;
}

/* Image Left: Image first (order-1), then content (order-2) */
.prefooter-cta.has-image-left .row .prefooter-cta-content {
    order: 2;
    margin-bottom: var(--space-xl);
}

.prefooter-cta.has-image-left .row .prefooter-cta-image {
    order: 1;
}

/* Image Container */
.prefooter-cta-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.prefooter-cta-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
}

/* CTA Grid - NO image: Uses .row + col-4 col-md-6 col-sm-12 = 3→2→1 columns */
.prefooter-cta-content .row {
    max-width: var(--max-width-content-2xl);
    margin-top: var(--space-xl);
    margin-left: auto;
    margin-right: auto;
}

/* CTA Grid - WITH image: CTAs stack vertically in col-5 */
.prefooter-cta.has-image-right .prefooter-cta-content,
.prefooter-cta.has-image-left .prefooter-cta-content {
    gap: var(--space-lg);
}

/* Outer image+content row spacing */
.prefooter-cta.has-image-right .prefooter-cta-wrapper > .row,
.prefooter-cta.has-image-left .prefooter-cta-wrapper > .row {
    margin-top: var(--space-xl);
}

/* Individual CTA Item */
.prefooter-item {
    /* Use .text-center utility class in HTML */
    text-wrap: balance;
    padding-bottom: var(--space-lg);
}

.prefooter-item:last-child {
    padding-bottom: 0;
}

/* CTA Description */
.prefooter-description {
    max-width: 400px;
}

/* Mobile Responsive Styles */
@media (width <=991px) {
    .prefooter-cta {
        padding: var(--space-xl) var(--space-lg) !important;
    }

    .prefooter-description {
        margin-left: auto;
        margin-right: auto;
    }

    /* Layout with Image - Stack on Mobile (col-sm-12 handles stacking) */
    .prefooter-cta.has-image-right .prefooter-cta-wrapper .row,
    .prefooter-cta.has-image-left .prefooter-cta-wrapper .row,
    .prefooter-cta .row .prefooter-item {
        padding: 0;
        text-align: center;
    }

    /* Left-align titles on mobile */
    .prefooter-cta .section-title,
    .prefooter-cta .section-subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    /* Always show image above content on mobile for both layouts */
    .prefooter-cta.has-image-right .row .prefooter-cta-content,
    .prefooter-cta.has-image-left .row .prefooter-cta-content {
        order: 2;
    }

    .prefooter-cta.has-image-right .row .prefooter-cta-image,
    .prefooter-cta.has-image-left .row .prefooter-cta-image {
        order: 1;
        min-height: 300px;
    }

    .prefooter-cta-image img {
        max-height: 400px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Prefooter mobile styles - NO image: .row + col-* handles responsive behavior */
    .prefooter-cta-content .row {
        margin: var(--space-lg) 0;
    }
}

/* Alignment Variations */
.prefooter-cta.alignfull {
    padding-left: 0;
    padding-right: 0;
}

.prefooter-cta.alignfull .row {
    max-width: var(--max-width-content-2xl);
}

.prefooter-cta.alignwide .row {
    max-width: var(--max-width-content-2xl);
}

/* Block Editor Specific Styles */
.editor-styles-wrapper .prefooter-cta {
    margin-top: 0;
    margin-bottom: 0;
}