/* =================================================================== ICONBAND section css =================================================================== */
/* Row of cards with the icon in a top-right notch (no numbers). A card
   turns dark on hover. Column count comes from .iconband--2 … --5. */
.iconband {
    --cols: 3;
    --notch-space: 80px;   /* badge + notch padding */

    &.iconband--2 { --cols: 2; }
    &.iconband--4 { --cols: 4; }
    &.iconband--5 { --cols: 5; }

    & .iconband__panel {
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
        gap: var(--g30);
    }

    & .iconband__item {
        position: relative;
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp12);
        padding: var(--sp40) var(--sp35) var(--sp35);
        background: var(--white);
        border-radius: var(--r-lg);
        transition: var(--transition);

        &:hover { background: var(--ink); transform: translateY(-6px); }
        &:hover .iconband__title { color: var(--white); }
        &:hover .iconband__text { color: var(--white-muted); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .iconband__notch .notch-badge { width: 60px; height: 60px; color: var(--primary); }

    & .iconband__title {
        padding-right: var(--notch-space);
        font-size: var(--f25);
        transition: var(--transition);
    }

    & .iconband__text {
        padding-right: var(--notch-space);
        transition: var(--transition);
    }

    & .iconband__foot { margin-top: auto; padding-top: var(--sp10); }
}

/* =================================================================== ICONBAND responsive =================================================================== */
@media (max-width: 1199.98px) {
    .iconband {
        &.iconband--4,
        &.iconband--5 { --cols: 2; }
    }
}

@media (max-width: 991.98px) {
    .iconband {
        --cols: 2;
    }
}

@media (max-width: 575.98px) {
    .iconband {
        &,
        &.iconband--2,
        &.iconband--4,
        &.iconband--5 { --cols: 1; }
        --notch-space: 64px;

        & .iconband__item { padding: var(--sp35) var(--sp25) var(--sp30); }
        & .iconband__notch .notch-badge { width: 48px; height: 48px; }
    }
}