/*
 * HISHAM CTA - Style 1 CSS
 */

.hisham-cta-container {
    /* Basic container styling */
    width: 100%;
    min-height: 250px; /* Example height */
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden; /* For border-radius on the background image */
    
    /* Layout using Flexbox for vertical positioning */
    display: flex;
    padding: 20px;
}

/* Vertical Positioning */
.hisham-cta-position-top {
    align-items: flex-start;
}
.hisham-cta-position-middle {
    align-items: center;
}
.hisham-cta-position-bottom {
    align-items: flex-end;
}

/* Content Wrapper */
.hisham-cta-content-wrapper {
    /* Use 'max-content' to center content block when text-align is left/right */
    width: 100%;
    max-width: 800px; /* Example max width for content block */
    
    /* Apply spacing using the CSS variable set in PHP */
    display: flex;
    flex-direction: column;
    gap: var(--cta-spacing, 15px);
}

/* Horizontal Alignment (CSS alignment applies to the whole block) */
.hisham-cta-align-left .hisham-cta-content-wrapper {
    margin-right: auto;
}
.hisham-cta-align-center .hisham-cta-content-wrapper {
    margin-left: auto;
    margin-right: auto;
}
.hisham-cta-align-right .hisham-cta-content-wrapper {
    margin-left: auto;
}

/* Typography Resets */
.hisham-cta-title,
.hisham-cta-description {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Button Styling */
.hisham-cta-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

/* RTL Support for content alignment */
[dir="rtl"].hisham-cta-container.hisham-cta-align-left .hisham-cta-content-wrapper {
    /* In RTL, left alignment means content is aligned to the right edge */
    margin-left: auto;
    margin-right: unset;
}
[dir="rtl"].hisham-cta-container.hisham-cta-align-right .hisham-cta-content-wrapper {
    /* In RTL, right alignment means content is aligned to the left edge */
    margin-right: auto;
    margin-left: unset;
}

/* Animation Keyframes */
@keyframes hisham-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hisham-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hisham-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hisham-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation Classes */
.hisham-cta-animation-1 .hisham-cta-content-wrapper {
    animation: hisham-fade-in-up 0.8s ease-out;
}

.hisham-cta-animation-2 .hisham-cta-content-wrapper {
    animation: hisham-fade-in-left 0.8s ease-out;
}

.hisham-cta-animation-3 .hisham-cta-content-wrapper {
    animation: hisham-fade-in-right 0.8s ease-out;
}

.hisham-cta-animation-4 .hisham-cta-content-wrapper {
    animation: hisham-zoom-in 0.8s ease-out;
}