/* ===================================
   SERVICE TEXT GRID BLOCK STYLES
   =================================== */

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-service-text-grid .service-text-grid-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 64px 20px 64px 20px; /* Main container controls all side spacing */
    display: flex;
    flex-direction: column;
    gap: 54px;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Main grid container - narrower width as requested */
.wp-block-acf-atax-service-text-grid .service-text-grid-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    row-gap: 24px;
    column-gap: 64px;
    padding: 0; /* No side padding - main container controls it */
    box-sizing: border-box;
}

/* Grid item styling */
.wp-block-acf-atax-service-text-grid .service-grid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-height: 180px;
}

/* Grid content container */
.wp-block-acf-atax-service-text-grid .service-grid-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100%;
}

/* Checkmark icon styling */
.wp-block-acf-atax-service-text-grid .service-grid-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.wp-block-acf-atax-service-text-grid .checkmark-icon {
    width: 27px;
    height: 27px;
    display: block;
    filter: brightness(0) saturate(100%) invert(77%) sepia(29%) saturate(2476%) hue-rotate(359deg) brightness(103%) contrast(107%);
}

/* Service title styling */
.wp-block-acf-atax-service-text-grid .service-grid-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color, #354477);
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    hyphens: auto;
}

/* Service description styling */
.wp-block-acf-atax-service-text-grid .service-grid-description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--primary-color, #354477);
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    flex-grow: 1;
}

/* CTA button styling */
.wp-block-acf-atax-service-text-grid .service-grid-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.wp-block-acf-atax-service-text-grid .service-grid-cta-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ===================================
   RESPONSIVE DESIGN - GOLDEN STANDARD FRAMEWORK
   =================================== */

/* ===================================
   BREAKPOINT STRATEGY:
   - 1600px+: Desktop default (3 columns, full layout)
   - 1151px-1600px: Laptop (3 columns, reduced gaps only, same fonts)
   - 768px-1150px: Tablet (2 columns, mobile layout)
   - 0px-767px: Mobile (1 column, stacked layout)
   =================================== */

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .wp-block-acf-atax-service-text-grid .service-text-grid-section {
        padding: 32px 20px 32px 20px; /* Reduced top padding */
        gap: 40px;
    }
    
    .wp-block-acf-atax-service-text-grid .service-text-grid-container {
        row-gap: 20px; /* Reduced from 24px */
        column-gap: 64px; /* Reduced from 64px */
    }
    
    /* NO font size changes - same fonts as desktop */
}

/* Tablet (768px-1150px) - 2 columns, layout transformation */
@media (max-width: 1150px) {
    .wp-block-acf-atax-service-text-grid .service-text-grid-section {
        padding: 32px 20px 0px 20px;
        gap: 64px;
    }
    
    .wp-block-acf-atax-service-text-grid .service-text-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        grid-template-rows: repeat(3, auto);
        row-gap: 18px;
        column-gap: 64px;
        padding: 0; /* No side padding - main container controls it */
        max-width: 900px;
    }
    
    .wp-block-acf-atax-service-text-grid .service-grid-item {
        min-height: 160px; /* Slightly reduced for tablet */
    }
    
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - 1 column, stacked layout */
@media (max-width: 767px) {
    .wp-block-acf-atax-service-text-grid .service-text-grid-section {
        padding: 32px 16px 32px 16px; /* Proper mobile padding with bottom */
        gap: 30px;
    }
    
    .wp-block-acf-atax-service-text-grid .service-text-grid-container {
        grid-template-columns: 1fr; /* 1 column on mobile */
        grid-template-rows: repeat(6, auto);
        row-gap: 48px;
        column-gap: 0; /* No column gap needed for single column */
        padding: 0; /* No side padding - main container controls it */
    }
    
    .wp-block-acf-atax-service-text-grid .service-grid-item {
        min-height: auto;
        text-align: center;
    }
    
    .wp-block-acf-atax-service-text-grid .service-grid-content {
        align-items: start;
        gap: 14px;
    }
    
    .wp-block-acf-atax-service-text-grid .service-grid-title {
        text-align: start;
    }
    
    .wp-block-acf-atax-service-text-grid .service-grid-description {
        text-align: start;
    }

    .wp-block-acf-atax-service-text-grid .service-grid-cta-button-wrapper {
        justify-content: center;
    }
    
    /* NO font size changes - same fonts as desktop */
}

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

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

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

/* ===================================
   ACCESSIBILITY & FOCUS STATES
   =================================== */

/* Button accessibility now handled by global .atax-button component */
/* No need for button-specific focus states in this block */

/* High contrast mode support now handled by global .atax-button component */

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

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

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

/* Handle very long words or URLs */
.wp-block-acf-atax-service-text-grid .service-grid-content {
    overflow-wrap: break-word;
    word-break: break-word;
}

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

/* Button overflow protection now handled by global .atax-button component */
/* No need for button-specific overflow handling in this block */