/**
 * Inner Page Banner Section Block Styles
 * 
 * @package ACF Child Theme
 */

/* ============================================
   Variables
   ============================================ */
:root {
    --ipbs-text-light: #ffffff;
    --ipbs-border-color: #7e3ab1;
}

/* ============================================
   Main Section Styles
   ============================================ */
.inner-page-banner-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ipbs-background {
    position: relative;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay Image Pattern */
.ipbs-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.3;
}

/* ============================================
   Content Wrapper
   ============================================ */
.ipbs-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: var(--theme-normal-container-max-width, 1290px);
    width: var(--theme-container-width, 100%);
    margin: 0 auto;
    padding: 60px 20px;
}

.ipbs-content {
    display: flex;
    align-items: center;
}

/* ============================================
   Title Styles
   ============================================ */
.ipbs-title {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ipbs-text-light);
    margin: 0;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet and below (max-width: 992px) */
@media (max-width: 992px) {
    .ipbs-background {
        min-height: 180px;
    }
    
    .ipbs-content-wrapper {
        padding: 50px 20px;
    }
    
    .ipbs-title {
        font-size: 40px;
    }
    
    .ipbs-overlay-image {
        width: 40%;
    }
}

/* Mobile and below (max-width: 768px) */
@media (max-width: 768px) {
    .ipbs-background {
        min-height: 150px;
    }
    
    .ipbs-content-wrapper {
        padding: 40px 20px;
    }
    
    .ipbs-title {
        font-size: 32px;
    }
    
    .ipbs-overlay-image {
        width: 30%;
        opacity: 0.2;
    }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
    .ipbs-background {
        min-height: 120px;
        border-bottom-width: 6px;
    }
    
    .ipbs-content-wrapper {
        padding: 30px 16px;
    }
    
    .ipbs-title {
        font-size: 28px;
    }
    
    .ipbs-overlay-image {
        display: none;
    }
}

/* ============================================
   Admin/Editor Preview Styles
   ============================================ */
.editor-styles-wrapper .inner-page-banner-section {
    margin: 0;
}

.editor-styles-wrapper .ipbs-background {
    min-height: 200px;
}

.editor-styles-wrapper .ipbs-content-wrapper {
    padding: 40px 20px;
}