/* ==========================================================================
   feature-container.css
   Feature Container component: icon on the left, text filling the rest.

   01. Outer Container
   02. Text Feature Widget
   ========================================================================== */

/* ==== 01. Outer Container ==== */
.feature-container {
    margin: 0;
    padding: 20px 0;
    gap: 20px;
    display: flex; /* row layout */
    flex-direction: row;
    align-items: top; /* not a valid value, so browsers ignore it */
    flex-wrap: nowrap; /* prevent wrapping */
}

.feature-container .icon {
    margin: 0;
    padding: 0;
    flex: 0 0 auto !important; /* shrink-wrap content */
    width: auto !important; /* override Elementor's full width */
    max-width: none !important;
}

.feature-container .text {
    margin: 0;
    padding: 0;
    flex: 1 1 auto !important; /* take up remaining space */
    width: auto !important; /* let flexbox handle width */
}

/* ==== 02. Text Feature Widget ==== */
.text-feature {
    margin: 0;
    padding: 0;
}

/* Inverse variant (triggered by ancestor with .inverse) */
.inverse .feature-container {
}