/* ===================================
   CHECKMARK LIST BLOCK STYLES
   =================================== */

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-checkmark-list.checkmark-list {
    width: 100%;
    padding: 48px 20px 48px 20px; /* Same padding as testimonials block - main container controls all side spacing */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Content container - 1280px wide as per design */
.checkmark-list-container {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px; /* Space between title, box, and button */
    padding: 0; /* No side padding - main container controls it */
}

/* Main title styling */
.checkmark-list-title {
    font-size: 48px; /* Large title as per design */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: #10A1DC; /* Accent blue color as per design */
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

/* Checklist box container */
.checkmark-list-box {
    width: 100%;
    background: white; /* White background as per design */
    border: 2px solid #e0e8f5; /* Light blue border as per design */
    border-radius: 8px; /* Slightly rounded corners */
    padding: 32px 40px; /* Internal spacing */
    display: flex;
    flex-direction: column;
    gap: 32px; /* Space between top text and checklist */
}

/* Top contact text */
.checkmark-list-top-text {
    font-size: 16px;
    font-weight: 400; /* Regular weight */
    line-height: 1.5;
    color: #333; /* Dark gray text */
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    padding: 0; /* No side padding - main container controls it */
}

/* Dynamic checklist grid - JavaScript will control column layout */
.checkmark-list-grid {
    display: grid;
    gap: 48px; /* Space between columns */
    align-items: start;
    padding: 0; /* No side padding - main container controls it */
}

/* Column layout classes - JavaScript will apply these */
.checkmark-list-grid.columns-3 {
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
}

.checkmark-list-grid.columns-2 {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
}

.checkmark-list-grid.columns-1 {
    grid-template-columns: 1fr; /* Single column */
}

/* Individual column */
.checkmark-list-column {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between checklist items */
    padding: 0; /* No side padding - main container controls it */
}

/* Individual checklist item */
.checkmark-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Space between icon and text */
    padding: 0; /* No side padding - main container controls it */
}

/* Checkmark icon */
.checkmark-list-icon {
    width: 20px; /* Icon size as per design */
    height: 20px;
    flex-shrink: 0; /* Don't shrink icon */
    display: block;
}

/* Checklist text */
.checkmark-list-text {
    font-size: 16px;
    font-weight: 400; /* Regular weight */
    line-height: 1.4;
    color: #333; /* Dark gray text */
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

/* CTA button container */
.checkmark-list-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* No side padding - main container controls it */
}

/* ===================================
   RESPONSIVE DESIGN - GLOBAL FRAMEWORK
   =================================== */
   
/* 🎯 JavaScript-Enhanced Responsive Strategy:
   CSS provides the framework, JavaScript handles dynamic column balancing:
   - Desktop (1600px+): 3 columns with balanced item distribution
   - Tablet (768px-1150px): 2 columns with balanced item distribution  
   - Mobile (0px-767px): 1 column with all items in single column
   
   JavaScript will:
   1. Detect screen size and apply appropriate column class
   2. Dynamically redistribute items for optimal balance
   3. Ensure equal column heights and visual balance
   =================================== */

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .wp-block-acf-atax-checkmark-list.checkmark-list {
        padding: 40px 20px 40px 20px; /* Reduced top/bottom padding */
        gap: 40px; /* Reduced gap */
    }
    .checkmark-list-container {
        gap: 40px; /* Reduced gap */
    }
    /* NO font size changes - same fonts as desktop */
}

/* Tablet (768px-1150px) - Layout optimization, 2 columns for better readability */
@media (max-width: 1150px) {
    .wp-block-acf-atax-checkmark-list.checkmark-list {
        padding: 40px 20px 40px 20px;
        gap: 35px;
    }
    .checkmark-list-container {
        gap: 35px; /* Reduced gap for tablet */
        padding: 0; /* No side padding - main container controls it */
    }
    .checkmark-list-box {
        padding: 28px 32px; /* Reduced internal padding for tablet */
    }
    .checkmark-list-grid {
        gap: 32px; /* Reduced column gap for tablet */
        padding: 0; /* No side padding - main container controls it */
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Stacked layout, mobile optimization */
@media (max-width: 767px) {
    .wp-block-acf-atax-checkmark-list.checkmark-list {
        padding: 40px 16px 30px 16px; /* Same mobile padding as testimonials block */
        gap: 30px;
    }
    .checkmark-list-container {
        gap: 30px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .checkmark-list-title {
        font-size: 36px; /* 48px → 36px for mobile readability (framework exception) */
    }
    .checkmark-list-box {
        padding: 24px 20px; /* Reduced internal padding for mobile */
    }
    /* Single column layout on mobile */
    .checkmark-list-grid {
        gap: 24px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .checkmark-list-column {
        gap: 12px; /* Reduced item gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .checkmark-list-item {
        gap: 10px; /* Reduced icon-text gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .checkmark-list-icon {
        width: 18px; /* Slightly smaller icon on mobile */
        height: 18px;
    }
    .checkmark-list-text {
        font-size: 15px; /* Slightly smaller text on mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    /* NO other font size changes - same fonts as desktop */
}