/* ==========================================================================
   Dark Icon Cards
   Full-bleed dark section — centered intro above a 2 or 3 col icon grid.
   rw-dark-section provides background, overlays, and base text color.
   ========================================================================== */

.rw-dark-full-wrapper {
    padding: 140px 20px;
    margin-top: var( --pad-top, 30px );
    margin-bottom: var( --pad-bottom, 30px );
    position:relative;
}

.rw-dark-icon-cards__inner {
    position: relative;
    z-index: 3;
    max-width: 1180px;
    margin: 0 auto;
}

/* ==========================================================================
   Intro — centered eyebrow + title + content
   ========================================================================== */

.rw-dark-icon-cards__intro {
    margin-bottom: 60px;
    text-align:    center;
}

/* ==========================================================================
   Icon Grid — 2 or 3 column
   ========================================================================== */

.rw-icon-grid {
    display: grid;
    gap:     60px;
}

.rw-icon-grid--2 {
    grid-template-columns: repeat( 2, minmax( 0, 487px ) );
    justify-content:       space-between;
}

.rw-icon-grid--3 {
    grid-template-columns: repeat( 3, 1fr );
}

/* ==========================================================================
   Icon Grid Card — row: icon box left, body right
   ========================================================================== */

.rw-icon-grid-card {
    display:     flex;
    align-items: flex-start;
    gap:         38px;
}

/* White icon box — 100×100px, 8px radius, centered content */
.rw-icon-grid-card__icon-box {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            100px;
    height:           100px;
    min-width:        100px;
    background:       #ffffff;
    border-radius:    8px;
    overflow:         hidden;
}

/* Font Awesome icon — 50px, brand primary color */
.rw-icon-grid-card__icon-box i {
    font-size: 50px;
    color:     var( --rw-primary );
    line-height: 1;
}

/* Uploaded image — max 75px, auto height */
.rw-icon-grid-card__icon-box img {
    max-width:  75px;
    max-height: 75px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
}

/* ==========================================================================
   Card Body
   ========================================================================== */

.rw-icon-grid-card__body {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.rw-icon-grid-card__title {
    margin:      0;
    font-weight: 700;
    color:       #ffffff;
}

.rw-icon-grid-card__content {
    margin:      0;
    color:       white;
    line-height: 1.6;
    letter-spacing: -.58px;
}

/* Text link with chevron */
.rw-icon-grid-card__link,
.rw-icon-grid-card__link:focus {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           #ffffff;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity 0.2s ease;
    margin-top:      4px;
}

.rw-icon-grid-card__link:hover {
    opacity:         0.75;
    text-decoration: none;
    color:           #ffffff;
}

.rw-icon-grid-card__link i {
    font-size: 14px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media ( max-width: 992px ) {
    .rw-dark-full-wrapper {
        padding: 80px 20px
    }
}
/* 3-col → 2-col at 1100px */
@media ( max-width: 1100px ) {
    .rw-icon-grid--3 {
        grid-template-columns: repeat( 2, minmax( 0, 487px ) );
        justify-content:       space-between;
    }
}

/* Both → 1-col at 750px */
@media ( max-width: 750px ) {
    .rw-icon-grid--2,
    .rw-icon-grid--3 {
        grid-template-columns: 1fr;
        justify-content:       initial;
    }

    .rw-dark-icon-cards__intro {
        margin-bottom: 40px;
    }
}

@media ( max-width: 640px ) {
    .rw-dark-full-wrapper {
        padding: 60px 20px;
        margin-top: calc( var( --pad-top, 20px ) / 2 );
        margin-bottom: calc( var( --pad-bottom, 20px ) / 2 );
    }
}