/**
 * Styles for the ELE Standard List Addon (ele-standard-list-widget.php)
 */

/* -------------------------------------------
 * 1. Wrapper (Flexbox Parent for Content + Grid)
 * ------------------------------------------- */
.ele-standard-list-wrapper {
    /* Base for the two-column layout defined in PHP controls */
    display: flex;
    box-sizing: border-box;
    /* Default gap is set via PHP control: grid_gap */
}

/* -------------------------------------------
 * 2. Left Content Area (Title/Global Content)
 * ------------------------------------------- */
.ele-content-area {
    /* Ensures content area respects its width set in PHP */
    box-sizing: border-box;
}

.ele-list-title {
    /* Default title reset */
    margin-top: 0;
}

/* -------------------------------------------
 * 3. Right Grid Area (List Items Container)
 * ------------------------------------------- */
.ele-grid-area ul {
    /* Essential reset for the UL when used as a CSS Grid container */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Grid properties (display: grid; grid-template-columns) are set in PHP control: grid_columns */
}

/* -------------------------------------------
 * 4. List Item (Flexbox Parent for Icon + Content)
 * ------------------------------------------- */
.list-item {
    /* Default layout for icon and content (moved from 'enable_predefined_style' control) */
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* Default visual styling (moved from 'enable_predefined_style' control) */
    /*background-color: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 15px 20px;*/
}

/* -------------------------------------------
 * 5. Icon Styling
 * ------------------------------------------- */
.list-item-icon {
    /* Base for the icon container. Size, background, and rounding is set by PHP control: icon_size */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents icon container from shrinking */
}

.list-item-icon img {
    /* Ensures images are contained */
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------
 * 6. Link Content Styling
 * ------------------------------------------- */
.list-item-content {
    /* Ensures content area uses remaining space */
    flex-grow: 1;
}

.list-item-content a {
    /* Reset default link styling */
    text-decoration: none;
    /* Color is set by PHP control: link_color */
}

/* -------------------------------------------
 * 7. Responsiveness (Optional, for example)
 * ------------------------------------------- */
/* Example: Switch to column layout on mobile */
@media (max-width: 767px) {
    .ele-standard-list-wrapper {
        flex-direction: column;
    }
    
    .ele-content-area {
        /* Remove the fixed width/flex-basis on small screens */
        flex-basis: auto !important;
        width: 100%;
        padding-right: 0 !important;
        margin-bottom: 20px; /* Space between content and list */
    }
}