/* ===================================
   ATAX SCHOOL GROUPS BLOCK STYLES
   =================================== */

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

/* School groups container - content only constrained to 1200px */
.atax-school-groups-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: 80px 40px 80px 40px; /* Top padding for hero overlap, bottom padding for content */
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    gap: 24px;
}

/* Gradient overlay container - positioned over the image area */
.atax-school-groups-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 but below text */
    pointer-events: none; /* Allow clicks to pass through */
}

/* Title section styling */
.atax-school-groups-title-section {
    text-align: left;
    position: relative;
    z-index: 3;
}

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

/* Grid container styling */
.atax-school-groups-grid-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 4;
    overflow-x: auto;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

/* Grid header styling */
.atax-school-groups-grid-header {
    display: flex;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-color, #354477);
}

/* Grid row styling */
.atax-school-groups-grid-row {
    display: flex;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.atax-school-groups-grid-row:hover {
    background-color: #f8f9fa;
}

/* Grid cell base styling */
.atax-school-groups-grid-cell {
    padding: 16px 12px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #495057;
    font-weight: 400;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Grid header cells */
.atax-school-groups-grid-header .atax-school-groups-grid-cell {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-color, #354477);
}

/* Column width distribution - Custom widths for better content fit */
.atax-school-groups-grid-group {
    flex: 0 0 9%; /* Group ID - narrow */
    min-width: 60px;
    padding-left: 24px;
}

.atax-school-groups-grid-date {
    flex: 0 0 21%; /* Start/End Date - wider for dates */
    min-width: 180px;
}

.atax-school-groups-grid-days {
    flex: 0 0 20%; /* Days of the Week - wider for day names */
    min-width: 160px;
}

.atax-school-groups-grid-time {
    flex: 0 0 18%; /* Time of Class - medium width */
    min-width: 140px;
}

.atax-school-groups-grid-language {
    flex: 0 0 18%; /* Language - wider width */
    min-width: 120px;
}

.atax-school-groups-grid-type {
    flex: 0 0 14%; /* Class Type - wider for modality */
    min-width: 100px;
}

/* Pricing section styling */
.atax-school-groups-pricing-section {
    margin-top: 40px;
    text-align: left;
    z-index: 4;
}

.atax-school-groups-pricing-title {
    color: white;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 40px 0;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 16px;
}

.atax-school-groups-pricing-container {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 24px;
    margin-bottom: 40px;
}

.atax-school-groups-price-box {
    background: white;
    border-radius: 16px;
    padding: 32px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: start;
}

.atax-school-groups-price-amount {
    font-size: 36px;
    font-weight: 700;
    color: #10A1DC;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.atax-school-groups-price-description {
    font-size: 16px;
    color: #495057;
    line-height: 1.4;
    font-family: 'Montserrat', sans-serif;
}

.atax-school-groups-price-or {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

/* Note section styling */
.atax-school-groups-note-section {
    text-align: left;
    margin: 0 auto;
}

.atax-school-groups-note-title {
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px 0;
    font-family: 'Montserrat', sans-serif;
}

.atax-school-groups-note-list {
    color: white;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    padding-left: 20px;
    font-family: 'Montserrat', sans-serif;
}

.atax-school-groups-note-list li {
    margin-bottom: 8px;
}

/* No data message styling */
.atax-school-groups-no-data {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 24px 0;
    position: relative;
    z-index: 4;
    text-align: center;
}

.atax-school-groups-no-data p {
    color: #6c757d;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}


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

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

}

/* Tablet (768px-1150px) - Adjust layout */
@media (max-width: 1150px) {
    .atax-school-groups-container {
        gap: 24px; /* Reduced gap for tablet */
        padding: 60px 20px 40px 20px; /* Container-first spacing */
        min-height: auto;
    }
    
    .atax-school-groups-title-section {
        padding: 40px 0 30px 0;
    }
    
    .atax-school-groups-grid-cell {
        font-size: 13px;
        padding: 12px 8px;
    }
    
    .atax-school-groups-grid-header .atax-school-groups-grid-cell {
        font-size: 14px;
    }
    
    .atax-school-groups-title {
        font-size: 42px; /* Maintain desktop size */
    }
    
    .atax-school-groups-pricing-title {
        font-size: 42px; /* Maintain desktop size */
    }
    
    .atax-school-groups-pricing-container {
        gap: 16px;
    }
    
    .atax-school-groups-price-box {
        flex: 0 0 240px;
        max-width: 240px;
        padding: 24px 16px;
    }
    
    .atax-school-groups-price-amount {
        font-size: 32px;
    }
}

/* Mobile (0px-767px) - Single column layout */
@media (max-width: 767px) {
    .atax-school-groups-container {
        gap: 30px; /* Reduced gap for mobile */
        padding: 50px 16px 50px 16px; /* Container-first spacing with mobile padding */
    }
    
    .atax-school-groups-title-section {
        padding: 30px 0 20px 0;
    }
    
    .atax-school-groups-grid-container {
        overflow-x: auto;
    }
    
    .atax-school-groups-grid-header,
    .atax-school-groups-grid-row {
        min-width: 600px; /* Ensure grid doesn't get too cramped */
    }
    
    .atax-school-groups-grid-cell {
        font-size: 11px;
        padding: 10px 6px;
    }
    
    .atax-school-groups-grid-header .atax-school-groups-grid-cell {
        font-size: 12px;
    }
    
    .atax-school-groups-title {
        font-size: 36px; /* 48px → 36px for mobile readability */
    }
    
    .atax-school-groups-pricing-title {
        font-size: 36px; /* 48px → 36px for mobile readability */
    }
    
    .atax-school-groups-pricing-container {
        flex-direction: column;
        gap: 16px;
    }
    
    .atax-school-groups-price-box {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    
    .atax-school-groups-price-or {
        font-size: 16px;
    }
    
    .atax-school-groups-note-section {
        text-align: center;
    }
    
    .atax-school-groups-note-list {
        font-size: 14px;
    }
}

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

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

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

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