/* ===================================
   SERVICE BOX TWO BLOCK STYLES
   =================================== */

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-service-box-two .service-box-two-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 72px 80px 64px 80px; /* Main container controls all side spacing */
    display: flex;
    flex-direction: column;
    gap: 60px;
    overflow-x: hidden;
    box-sizing: border-box;
    background: #354477; /* Dark blue background as per design */
    position: relative;
    color: white; /* White text on dark background */
}

/* Main container - 1280px max-width as per design */
.service-box-two-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
    z-index: 2; /* Above background logo */
    padding: 0; /* No side padding - main container controls it */
}

/* Content section with two columns */
.service-box-two-content {
    display: flex;
    gap: 148px; /* Space between columns */
    align-items: stretch; /* Ensure equal height columns */
    padding: 0; /* No side padding - main container controls it */
}

/* Left column: Mascot and main content */
.service-box-two-left-column {
    flex: 1.5; /* Take up available space */
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start; /* Left align all content */
    justify-content: flex-end; /* Align content to bottom of container */
    padding: 0; /* No side padding - main container controls it */
}

/* Mascot section */
.service-box-two-mascot {
    display: flex;
    justify-content: flex-start; /* Left align mascot */
    align-items: flex-start; /* Left align mascot */
    width: 100%;
    padding: 0; /* No side padding - main container controls it */
}

.service-box-two-mascot-image {
    max-width: 200px; /* Reasonable mascot size */
    height: auto;
    display: block;
}

/* Main title moved to left column */
.service-box-two-main-title {
    font-size: 48px; /* Large title as per design */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: white; /* White text on dark background */
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    text-align: left; /* Left align text */
    padding: 0; /* No side padding - main container controls it */
}

/* Headline above main description */
.service-box-two-headline {
    font-size: 24px; /* Headline size */
    font-weight: 600; /* Semi-bold */
    line-height: 1.3;
    color: white; /* White text */
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

/* Main description paragraph */
.service-box-two-description {
    font-size: 16px; /* Body text size */
    font-weight: 400; /* Regular weight */
    line-height: 1.6;
    color: white; /* White text */
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    padding: 0; /* No side padding - main container controls it */
}

/* Right column: Three content blocks */
.service-box-two-text-column {
    flex: 1; /* Equal width with left column */
    display: flex;
    flex-direction: column;
    gap: 32px; /* Space between content blocks */
    padding: 0; /* No side padding - main container controls it */
}

/* Individual content block */
.service-box-two-content-block {
    display: flex;
    flex-direction: column; /* Vertical layout: icon, title, paragraph */
    gap: 16px; /* Space between elements */
    align-items: flex-start;
    padding: 0; /* No side padding - main container controls it */
}

/* Checkmark icon */
.service-box-two-icon {
    flex-shrink: 0; /* Don't shrink icon */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.service-box-two-icon .checkmark-icon {
    width: 27px; /* Same size as other blocks */
    height: 27px;
    display: block;
}

/* Text content within each block */
.service-box-two-text-content {
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between title and description */
    padding: 0; /* No side padding - main container controls it */
}

.service-box-two-block-title {
    font-size: 32px; /* Block title size */
    font-weight: 700; /* Bold */
    line-height: 1.3;
    color: white; /* White text */
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

.service-box-two-block-description {
    font-size: 16px; /* Block description size */
    font-weight: 500; /* Medium weight */
    line-height: 1.3; /* 130% line height */
    color: white; /* White text */
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    padding: 0; /* No side padding - main container controls it */
}

/* Background logo watermark - positioned on left side */
.service-box-two-background-logo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%; 
    opacity: 0.08;
    pointer-events: none; 
    z-index: 1; 
    overflow: hidden; 
}

.service-box-two-background-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom left;
    display: block;
    position: relative;
    top: 400px; 
    right: 250px;
}

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

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .wp-block-acf-atax-service-box-two .service-box-two-section {
        padding: 72px 80px 64px 80px; /* Reduced top padding */
        gap: 50px; /* Reduced gap */
    }
    .service-box-two-content {
        gap: 120px; /* Reduced gap between columns */
    }
    /* NO font size changes - same fonts as desktop */
}

/* Tablet (768px-1150px) - Columns stack, layout transformation */
@media (max-width: 1150px) {
    .wp-block-acf-atax-service-box-two .service-box-two-section {
        padding: 64px 32px 64px 32px;
        gap: 45px;
    }
    .service-box-two-container {
        max-width: 100%;
        padding: 0; /* No side padding - main container controls it */
    }
    .service-box-two-content {
        flex-direction: column; /* Stack columns on tablet */
        gap: 40px; /* Reduced gap for stacked layout */
        text-align: start;
        align-items: stretch; /* Ensure full width on tablet */
    }
    .service-box-two-left-column {
        align-items: start; /* Center content on tablet */
        text-align: start;
    }
    .service-box-two-background-logo {
        width: 80%;
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Stacked layout, mobile optimization */
@media (max-width: 767px) {
    .wp-block-acf-atax-service-box-two .service-box-two-section {
        padding: 48px 16px 48px 16px; /* Proper mobile padding with bottom */
        gap: 40px;
    }
    .service-box-two-container {
        gap: 35px; /* Scaled down for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .service-box-two-content {
        gap: 64px; /* Further reduced gap for mobile */
    }
    .service-box-two-main-title {
        font-size: 36px; /* 48px → 36px for mobile readability (framework exception) */
    }
    .service-box-two-left-column {
        gap: 20px; /* Reduced gap for mobile */
    }
    .service-box-two-text-column {
        gap: 25px; /* Reduced gap for mobile */
    }
    .service-box-two-background-logo {
        width: 100%;
    }
    .service-box-two-background-logo img {
        top: 200px;
    }
    /* NO other font size changes - same fonts as desktop */
}

/* ===================================
   ALIGNMENT SUPPORT
   =================================== */

/* Wide alignment support */
.wp-block-acf-atax-service-box-two .service-box-two-section.alignwide {
    max-width: var(--wide-width, 1280px);
}

/* Full width alignment support */
.wp-block-acf-atax-service-box-two .service-box-two-section.alignfull {
    max-width: 100%;
}

/* ===================================
   OVERFLOW PROTECTION & TEXT HANDLING
   =================================== */

/* Prevent text overflow on all screen sizes */
.wp-block-acf-atax-service-box-two .service-box-two-main-title,
.wp-block-acf-atax-service-box-two .service-box-two-headline,
.wp-block-acf-atax-service-box-two .service-box-two-description,
.wp-block-acf-atax-service-box-two .service-box-two-block-title,
.wp-block-acf-atax-service-box-two .service-box-two-block-description {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    margin: 0px;
}

/* Ensure containers don't cause horizontal scroll */
.wp-block-acf-atax-service-box-two .service-box-two-section {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure grid containers don't overflow */
.wp-block-acf-atax-service-box-two .service-box-two-container {
    min-width: 0;
    overflow-x: hidden;
}

/* Ensure content doesn't overflow */
.wp-block-acf-atax-service-box-two .service-box-two-content {
    min-width: 0;
    overflow-x: hidden;
}