/* =========================================
   ICON BOX HOVER

   Applies to every icon-box card on the site:
   6 Technology cards on the homepage, 6
   platform cards, 8 capability cards on
   use-cases - 20 in all. Checked each one
   before generalising: titles are rgb(0,0,0)
   and descriptions rgb(51,51,51) throughout.

   The first version shifted the title #000 ->
   #2F086D and the description #333 -> #111.
   Both pairs are far too close to perceive,
   so the only thing that read was the icon
   moving. Replaced with a surface: on hover
   the card takes its own white ground and a
   soft shadow.

   That does two things at once. It makes the
   whole card respond rather than just the
   icon, and it guarantees the text is
   readable whatever sits behind it, whether
   the card happens to be over the light or
   the dark part of the section artwork.

   The surface is #ECE7FF, not white. White is
   the page background, so on the light
   sections a white surface vanished and only
   the shadow read. #ECE7FF is the site's own
   light-surface token - the same one the
   ghost buttons use - so it is distinct from
   the page at every point while staying well
   inside reading contrast: #000 on it is
   17.4:1 and #333 is 10.5:1.

   The padding is permanent and NOT cancelled
   by a negative margin. The first version
   bled the panel 22px outward for breathing
   room, which put the leftmost card's surface
   18px from the page edge - it read as
   running off the page. box-sizing is
   border-box here, so permanent padding
   shrinks the content area instead of growing
   the box: the panel lands exactly on the
   card's own footprint, symmetric and never
   closer to the edge than the container's own
   inset, and the text keeps its breathing
   room. The trade is that the copy sits ~22px
   in and wraps slightly earlier.

   120ms ease-out, which reads as immediate
   rather than animated.

   These cards are not links, so nothing here
   implies they are clickable - no underline,
   no pointer cursor.
   ========================================= */

@media (hover: hover) {

    .elementor .elementor-icon-box-wrapper {
        padding: 20px 22px;
        border-radius: 12px;
        transition: background-color .12s ease-out,
                    box-shadow .12s ease-out;
    }

    .elementor .elementor-icon-box-wrapper .elementor-icon {
        display: inline-block;
        transition: transform .12s ease-out;
    }

    .elementor .elementor-icon-box-wrapper:hover {
        background-color: #ECE7FF;
        box-shadow: 0 8px 28px rgba(47, 8, 109, .16);
    }

    .elementor .elementor-icon-box-wrapper:hover .elementor-icon {
        transform: translateY(-2px) scale(1.06);
    }

    /* Motion is the part to drop for anyone who asks for less of it. The
       surface stays: it is what makes the text readable, not decoration. */
    @media (prefers-reduced-motion: reduce) {
        .elementor .elementor-icon-box-wrapper,
        .elementor .elementor-icon-box-wrapper .elementor-icon {
            transition: none;
        }
        .elementor .elementor-icon-box-wrapper:hover .elementor-icon {
            transform: none;
        }
    }
}