/**
 * Custom Icon Repeater Box – default box style to match Figma (node 619-4382).
 * Border, radius; box-shadow forced to none so Elementor panel output doesn’t override.
 */

.elementor-widget-custom-icon-repeater-box .icon-box {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid var(--ies-light-purple, #A4A2E6);
    box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.08) !important;
}

/* Default left for every instance; Elementor Icon/Content Alignment can override. */
.elementor-widget-custom-icon-repeater-box .icon-box > .icon {
    align-self: flex-start;
}

.elementor-widget-custom-icon-repeater-box .icon-box > .content {
    text-align: left;
}

/*
 * Homepage SoT inset: 10px 30px 40px.
 * Many Tier B instances zero box padding in Elementor while only padding .content,
 * which leaves icons stuck to the card edge. Enforce the SoT padding on confined cards.
 */
.elementor-widget-custom-icon-repeater-box .icon-box:not(.icon-box--unconfined) {
    padding: 10px 30px 40px !important;
    box-sizing: border-box;
}

.elementor-widget-custom-icon-repeater-box .icon-box:not(.icon-box--unconfined) > .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-widget-custom-icon-repeater-box .icon-box:not(.icon-box--unconfined) > .icon {
    /*
     * Content Padding also writes margin-left/right on .icon. That inset the icon
     * while .content left/right padding is zeroed — kill all sides so icon aligns with text.
     */
    margin: 0 !important;
    padding: 0;
}

.elementor-widget-custom-icon-repeater-box .icon-box:hover {
    border-color: var(--ies-primary, #5D43DE);
    background-color: var(--ies-card-hover-bg, #EFECFC);
    box-shadow: none !important;
}

.elementor-widget-custom-icon-repeater-box .icon-box-bottom-image {
    margin-top: 33px;
}

.elementor-widget-custom-icon-repeater-box .icon-box-bottom-image img {
    border-radius: 10px;
    display: block;
    width: 100%;
}

/*
 * Responsive grid. Desktop honors Elementor "box in a row" (cm-col-*).
 * ≤1024 → 2-up, ≤767 → 1-up full width. Grid + !important on .icon-box
 * beats theme .cm-col-4 { max-width: 25% } and the 46% mobile-changed rule.
 */
.elementor-widget-custom-icon-repeater-box .icon-boxes-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ies-site-gutter, 30px);
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-1 {
    grid-template-columns: minmax(0, 1fr);
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container .icon-repeater-slide .icon-box {
    height: 100%;
}

.elementor-widget-custom-icon-repeater-box .icon-repeater-slide,
.elementor-widget-custom-icon-repeater-box .icon-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*
 * Theme style.css pins these cards at 46% + 5px side margins below 767/600.
 * Same selector, plus the widget class, so this wins on specificity.
 */
.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-4.mobile-changed:not(.post-with-bg) .icon-box.icon-box-image.link_disable {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-4.mobile-changed:not(.post-with-bg) .icon-box.icon-box-image.link_disable:not(.icon-box--unconfined) {
    padding: 10px 30px 40px !important;
}

@media (max-width: 1024px) {
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-1,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-2,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-3,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-4,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-5,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-1,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-2,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-3,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-4,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-5,
    .elementor-widget-custom-icon-repeater-box .icon-boxes-container.cm-col-6 {
        grid-template-columns: minmax(0, 1fr);
    }
}