/* RDI Section Widget — Frontend Styles
   All typography, colors, padding controlled via Elementor Style tab.
   This file is structural/layout only — no hardcoded spacing/color values
   that Elementor style controls also manage. */

.rdiw-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ── Header ── */
.rdiw-header {
    width: 100%;
    text-align: center;
}

.rdiw-main-title {
    margin: 0;
    line-height: 1.1;
}

.rdiw-accent-line {
    display: inline-block;
}

.rdiw-subtitle {
    margin: 0;
}

/* ── Two columns ── */
.rdiw-columns {
    display: flex;
    align-items: center;
    width: 100%;
}

.rdiw-content-col {
    flex-shrink: 0;
    min-width: 0;
}

.rdiw-image-col {
    flex: 1;
    min-width: 0;
    display: flex;
}

/* ── Content elements ──
   Do NOT set margin/padding here — those are owned by Elementor
   spacing controls. Only set display and zero-reset margins so
   browser defaults (which vary wildly) don't create phantom space. */

.rdiw-paragraph {
    margin: 0;
}

/* Reset inner paragraph margins from WYSIWYG output.
   The bottom spacing Elementor control sets margin-bottom on
   .rdiw-paragraph itself, which is the outer container. */
.rdiw-paragraph > p {
    margin: 0;
}

.rdiw-paragraph > p + p {
    margin-top: 0.8em;
}

/* ── Divider ──
   Browsers and themes apply large margins to <hr> — reset them all
   so only the Elementor "Bottom Spacing" control (margin-bottom) adds
   space, and nothing else creates unexpected gaps. */
.rdiw-divider {
    border: none;
    border-top-style: solid;
    /* reset all margins; Elementor margin-bottom selector takes over */
    margin: 0 !important;
    padding: 0;
    display: block;
}

/* ── List ── */
.rdiw-list {
    list-style: none;
    /* reset browser/theme ul margins that add phantom space above list */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rdiw-list-item {
    display: flex;
    align-items: flex-start;
}

.rdiw-list-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

.rdiw-list-text {
    flex: 1;
    min-width: 0;
}

/* ── Image ── */
.rdiw-image {
    width: 100%;
}

.rdiw-image img {
    width: 100%;
    display: block;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 768px) {
    .rdiw-columns {
        flex-direction: column;
        gap: 32px !important;
    }

    .rdiw-content-col,
    .rdiw-image-col {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        order: unset !important;
    }
}