/* ===================================
   ATAX SERVICES BANNER BLOCK STYLES
   =================================== */

/* Main services banner section wrapper */
.atax-services-banner-section {
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, var(--accent-color, #10A1DC) 0%, var(--primary-color, #354477) 100%);
}

/* Services banner container - content only constrained to 1200px */
.atax-services-banner-container {
    max-width: 1200px; /* Main container max-width for content only */
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: transparent; /* Remove background from container since section has it */
    padding: 0px 40px 0px 40px; /* Top padding for hero overlap, bottom padding for content */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for cards below */
    align-items: flex-start; /* Align items to top */
    gap: 60px;
    min-height: 500px;
    justify-content: space-between;
}

/* Gradient overlay container - covers the whole banner area (full width) */
.atax-services-banner-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--primary-color, #354477) 100%);
    z-index: 2; /* Gradient overlay above the image */
    pointer-events: none; /* Allow clicks to pass through */
}

/* Professional image container - positioned to extend from bottom to top */
.atax-services-banner-image {
    position: relative;
    flex-shrink: 0;
    z-index: 1; /* Image container below the gradient overlay */
    padding: 0px;
    align-self: flex-end; /* Align image to bottom of container */
    margin-bottom: 0; /* Remove any bottom margin */
}

/* Professional image styling - extends from bottom to top */
.atax-services-banner-professional-img {
    width: 500px;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 1; /* Image below the gradient overlay */
    display: block; /* Ensure proper image display */
    margin-bottom: 0; /* Remove any bottom margin */
    padding-bottom: 0; /* Remove any bottom padding */
}

/* Left content area styling */
.atax-services-banner-content {
    flex: 1;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0;
    max-width: 600px;
    position: relative;
    z-index: 3; /* Content above everything else */
    padding-top: 128px;
}

/* Main content area styling */
.atax-services-banner-main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Subtitle styling */
.atax-services-banner-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

/* Main title styling */
.atax-services-banner-title {
    font-size: 48px; /* Desktop default - main title */
    font-weight: 700;
    line-height: 1.2;
    color: white;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* Description styling */
.atax-services-banner-description {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    max-width: 540px;
}

/* Service category cards container - absolutely positioned to overlay the image */
.atax-services-banner-cards {
    position: absolute;
    bottom: 64px; /* Position above bottom padding */
    left: 40px; /* Align with left padding */
    right: 40px; /* Align with right padding */
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* Align cards to the left */
    z-index: 4; /* Cards above everything else */
}

/* Individual service card styling */
.atax-services-banner-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    flex: 1;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.atax-services-banner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Card icon styling */
.atax-services-banner-card-icon {
    margin-bottom: 16px;
}

.atax-services-banner-card-img {
    width: 32px;
    height: 32px;
}

/* Card title styling */
.atax-services-banner-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 12px 0;
    font-family: 'Montserrat', sans-serif;
}

/* Card link styling */
.atax-services-banner-card-link {
    color: var(--primary-color);
    text-decoration: underline; /* Add underline to links */
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
    display: flex; /* Use flexbox to align text and icon */
    align-items: center; /* Center align text and icon */
    gap: 8px; /* Space between text and icon */
    font-family: 'Montserrat', sans-serif;
}

.atax-services-banner-card-link:hover {
    color: var(--accent-color);
}

/* Chevron right arrow icon styling */
.atax-services-banner-card-arrow {
    width: 16px;
    height: 16px;
    filter: brightness(0.4);
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* ===================================
   RESPONSIVE DESIGN - GLOBAL FRAMEWORK
   =================================== */

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .atax-services-banner-container {
        gap: 50px; /* Reduced gap */
        padding: 0px 40px 0px 40px; /* Maintain desktop padding */
    }

}

/* Tablet (768px-1150px) - Hide image, content at order 1 */
@media (max-width: 1150px) {
    .atax-services-banner-container {
        flex-direction: column; /* Stack content on top */
        text-align: center;
        gap: 40px; /* Reduced gap for tablet */
        padding: 60px 20px 40px 20px; /* Container-first spacing */
        min-height: auto;
        align-items: center; /* Center align for tablet column layout */
        justify-content: center; /* Center justify for tablet column layout */
    }
    
    .atax-services-banner-image {
        display: none; /* Hide image on tablet */
    }
    
    .atax-services-banner-content {
        padding: 0; /* No side padding - main container controls it */
        text-align: center;
        gap: 28px; /* Slightly reduced gap for tablet */
        max-width: 100%; /* Full width on tablet */
        flex: 1; /* Take remaining space */
        order: 0; /* Content at the top */
    }
    
    /* Cards become relative positioned on tablet for proper stacking */
    .atax-services-banner-cards {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        justify-content: center; /* Center the cards on tablet */
        gap: 16px; /* Reduced gap for tablet */
        margin-top: 20px; /* Add margin for spacing */
    }
    
    .atax-services-banner-card {
        min-width: 180px; /* Slightly smaller cards on tablet */
    }
    
    .atax-services-banner-card-link {
        justify-content: center; /* Center align card links on tablet */
    }
    
    .atax-services-banner-title {
        font-size: 42px; /* Maintain desktop size */
    }
    
    .atax-services-banner-description {
        font-size: 18px; /* Maintain desktop size */
        max-width: 100%;
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Hide image, content at order 1 */
@media (max-width: 767px) {
    .atax-services-banner-container {
        flex-direction: column; /* Stack content on top */
        gap: 30px; /* Reduced gap for mobile */
        padding: 50px 16px 50px 16px; /* Container-first spacing with mobile padding */
        align-items: center; /* Center align for mobile */
        justify-content: center; /* Center justify for mobile */
    }
    
    .atax-services-banner-image {
        display: none; /* Hide image on mobile */
    }
    
    .atax-services-banner-content {
        padding: 0; /* No side padding - main container controls it */
        text-align: center;
        gap: 24px; /* Tighter spacing on mobile */
        max-width: 100%; /* Full width on mobile */
        flex: 1; /* Take remaining space */
        order: 0; /* Content at the top */
    }
    
    /* Cards become relative positioned on mobile for proper stacking */
    .atax-services-banner-cards {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        flex-direction: column; /* Stack cards vertically on mobile */
        gap: 16px;
        width: 100%;
        justify-content: center; /* Center cards on mobile */
        margin-top: 20px; /* Add margin for spacing */
    }
    
    .atax-services-banner-card {
        min-width: auto; /* Remove min-width constraint on mobile */
        width: 100%;
    }
    
    .atax-services-banner-card-link {
        justify-content: center; /* Center align card links on mobile */
    }
    
    .atax-services-banner-title {
        font-size: 36px; /* 48px → 36px for mobile readability (framework exception) */
    }
    
    .atax-services-banner-description {
        font-size: 16px; /* 18px → 16px for mobile readability */
        max-width: 100%;
    }
    /* NO other font size changes - same fonts as desktop */
}

/* ===================================
   WORDPRESS BLOCK WRAPPER STYLES
   =================================== */

/* WordPress block wrapper - handles WordPress integration */
.wp-block-acf-atax-services-banner .atax-services-banner-section {
    width: 100%;
    max-width: 100%;
    padding: 0; /* Remove horizontal padding for full-width */
}

/* Wide alignment support */
.wp-block-acf-atax-services-banner.alignwide .atax-services-banner-container {
    max-width: var(--wide-width, 1280px);
    margin: 0 auto;
}

.wp-block-acf-atax-services-banner.alignfull .atax-services-banner-container {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
}