/* ==========================================================================
   Icon Cards Section
   ========================================================================== */

.rw-icon-cards {
    padding-top: var( --pad-top, 30px );
    padding-bottom: var( --pad-bottom, 30px );
    padding-left: 20px;
    padding-right: 20px;
}

/* Cards are fixed at their design width (308px) and wrap to fewer columns
   rather than shrinking indefinitely. justify-content:center handles
   any remainder so partial rows are always centered. */
.rw-icon-cards__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var( --rw-gap, 20px );
}

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

.rw-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 25px 45px 25px;
    background: var(--rw-accent);
    border-radius: var(--rw-corners);
    flex: 0 1 308px;   /* design width; can shrink but never grow */
    max-width: 308px;  /* hard cap at design width */
    min-width: 240px;  /* wrap before cards get narrower than this */
    min-height: 305px;
}

/* ==========================================================================
   Icon
   ========================================================================== */

.rw-icon-card__icon {
    margin-bottom: 20px;
    color: var( --rw-primary );
    font-size: 40px;
    line-height: 1;
}

/* ==========================================================================
   Title
   ========================================================================== */

.rw-icon-card__title {
    margin: 0 0 10px;
    font-weight: 700;
}

/* ==========================================================================
   Content
   ========================================================================== */

.rw-icon-card__content {
    margin: 0;
    /*flex: 1; !* pushes bottom content to the card's floor when cards share row height *!*/
}

/* ==========================================================================
   Bottom — Link variant
   ========================================================================== */

.rw-icon-card__link {
    display: inline-flex;
    align-items: center;
    color: var(--rw-primary);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    gap: 5px;
    margin-top: 10px;
    word-break: break-all;
}

.rw-icon-card__link:hover {
    gap: 7px;
    color: var( --rw-secondary );
    text-decoration: none;
}

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

/* ==========================================================================
   Bottom — Text variant (phone, address, etc.)
   ========================================================================== */

.rw-icon-card__text {
    margin: 14px 0 0;
    color: var( --rw-primary );
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 992px ) {
    .rw-icon-cards {
        padding-top: calc( var( --pad-top, 40px ) / 2 );
        padding-bottom: calc( var( --pad-bottom, 40px ) / 2 );
    }
}


/* ==========================================================================
   Count-aware column switching
   PHP stamps --{n} on the grid div so we can switch to intentional layouts
   at defined breakpoints rather than letting cards orphan unpredictably.
   3 cards and under: natural min-width wrapping is fine at those counts.
   ========================================================================== */

/* 5 cards: 5-across → 3+2 at 1659px → 2-col at 640px → 1-col at 620px (global) */
@media ( max-width: 1659px ) {
    .rw-icon-cards__grid--5 .rw-icon-card {
        flex: 0 0 calc( ( 100% - 40px ) / 3 );
        max-width: calc( ( 100% - 40px ) / 3 );
        min-width: unset;
    }
}

@media ( max-width: 768px ) {
    .rw-icon-cards__grid--5 .rw-icon-card {
        flex: 0 0 calc( ( 100% - 20px ) / 2 );
        max-width: calc( ( 100% - 20px ) / 2 );
    }
}

/* 4 cards: 4-across → 2+2 at 1331px → 1-col at 620px (global) */
@media ( max-width: 1331px ) {
    .rw-icon-cards__grid--4 .rw-icon-card {
        flex: 0 0 calc( ( 100% - 20px ) / 2 );
        max-width: calc( ( 100% - 20px ) / 2 );
        min-width: unset;
    }
}

/* 1-column floor — must stay last in the file so it wins via cascade
   over the count-specific 2-column rules above, which share the same
   specificity (0,2,0) and would otherwise override it */
@media ( max-width: 675px ) {
    .rw-icon-card,
    .rw-icon-cards__grid--4 .rw-icon-card,
    .rw-icon-cards__grid--5 .rw-icon-card {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: unset;
        min-height: unset;
        padding: 30px 20px;
    }
}