/* Icon hover, site-wide (client feedback 2026-10: "every icon should have a hover effect").
   Loads last on every page (functions.php, end of pqm_page_assets()), so it adds to each design's own hover.
   - Icons in a tile: on hover/focus of their card the tile lifts, grows and tilts a little while the icon itself
     stays upright; each design keeps its own colour change (navy, magenta, sky…).
   - Components that had no icon hover get a colour fill (tiles) or a lift (plain icons).
   - Mouse devices only; nothing moves with reduced motion. */

@media (hover: hover) and (pointer: fine) {

  /* Motion on every tile icon (svg rotates back so it stays level). */
  .svp-step__ico,
  .abx-stat__ico,
  .abx-ico,
  .dlv-item__ico,
  .dlv-block__ico,
  .es-flow__ico,
  .es-eco__ico,
  .ind__icon,
  .abtnav__ico,
  .svcrow__ico,
  .abx-gitem__ico,
  .abx-role__ico,
  .cell__ico {
    transition: background-color 280ms var(--ease), border-color 280ms var(--ease), color 280ms var(--ease), box-shadow 280ms var(--ease), transform 280ms var(--ease);
  }

  .svp-step__ico svg, .svp-step__ico img,
  .abx-stat__ico svg,
  .abx-ico svg,
  .dlv-item__ico svg,
  .dlv-block__ico svg,
  .es-flow__ico svg,
  .es-eco__ico svg,
  .ind__icon svg,
  .abtnav__ico svg,
  .svcrow__ico svg,
  .abx-gitem__ico svg,
  .abx-role__ico svg,
  .cell__ico svg {
    transition: transform 280ms var(--ease);
  }

  .svp-step:hover .svp-step__ico,
  .abx-stat:hover .abx-stat__ico,
  .abx-card:hover .abx-ico,
  .abx-pillar:hover .abx-ico,
  .abx-goal:hover .abx-ico,
  .abx-tcard:hover .abx-ico,
  .abx-office:hover .abx-ico,
  .abx-cert:hover .abx-ico,
  .abx-prin__item:hover .abx-ico,
  .abx-acc__item:hover .abx-ico,
  .dlv-item:hover .dlv-item__ico,
  .dlv-block:not(.dlv-block--photo):hover .dlv-block__ico,
  .es-flow article:hover .es-flow__ico,
  .es-eco article:hover .es-eco__ico,
  .ind__card:hover .ind__icon,
  .abtnav__link:hover .abtnav__ico,
  .svcrow:hover .svcrow__ico,
  .svcrow:focus-visible .svcrow__ico,
  .abx-gitem:hover .abx-gitem__ico,
  .abx-role:hover .abx-role__ico,
  .cell:hover .cell__ico {
    transform: translateY(-2px) scale(1.06) rotate(-6deg);
  }

  .svp-step:hover .svp-step__ico svg, .svp-step:hover .svp-step__ico img,
  .abx-stat:hover .abx-stat__ico svg,
  .abx-card:hover .abx-ico svg,
  .abx-pillar:hover .abx-ico svg,
  .abx-goal:hover .abx-ico svg,
  .abx-tcard:hover .abx-ico svg,
  .abx-office:hover .abx-ico svg,
  .abx-cert:hover .abx-ico svg,
  .abx-prin__item:hover .abx-ico svg,
  .abx-acc__item:hover .abx-ico svg,
  .dlv-item:hover .dlv-item__ico svg,
  .dlv-block:not(.dlv-block--photo):hover .dlv-block__ico svg,
  .es-flow article:hover .es-flow__ico svg,
  .es-eco article:hover .es-eco__ico svg,
  .ind__card:hover .ind__icon svg,
  .abtnav__link:hover .abtnav__ico svg,
  .svcrow:hover .svcrow__ico svg,
  .svcrow:focus-visible .svcrow__ico svg,
  .abx-gitem:hover .abx-gitem__ico svg,
  .abx-role:hover .abx-role__ico svg,
  .cell:hover .cell__ico svg {
    transform: rotate(6deg);
  }

  /* No colour change before: Home bento cells, Careers roles. */
  .cell:hover .cell__ico {
    border-color: var(--magenta);
    background: var(--magenta);
    color: var(--white);
    box-shadow: 0 10px 20px -10px rgba(217, 53, 105, 0.7);
  }

  .abx-role:hover .abx-role__ico {
    background: var(--magenta);
    color: var(--white);
  }

  /* Plain icons (no tile): lift and grow. Home facts, automation benefits, industry "who we work with". */
  .fact__ico,
  .sp-icon,
  .bank-team img,
  .bank-team svg {
    transition: transform 280ms var(--ease), color 280ms var(--ease);
  }

  .fact:hover .fact__ico {
    color: var(--white);
    transform: translateY(-3px) scale(1.1);
  }

  .sp-benefit:hover .sp-icon,
  .sp-outcome:hover .sp-icon {
    transform: translateY(-3px) scale(1.1) rotate(-6deg);
  }

  .bank-team {
    transition: border-color 280ms var(--ease);
  }

  .bank-team:hover {
    border-top-color: var(--magenta);
  }

  .bank-team:hover img,
  .bank-team:hover svg {
    transform: translateY(-3px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svp-step__ico, .svp-step__ico svg, .svp-step__ico img,
  .abx-stat__ico, .abx-stat__ico svg,
  .abx-ico, .abx-ico svg,
  .dlv-item__ico, .dlv-item__ico svg,
  .dlv-block__ico, .dlv-block__ico svg,
  .es-flow__ico, .es-flow__ico svg,
  .es-eco__ico, .es-eco__ico svg,
  .ind__icon, .ind__icon svg,
  .abtnav__ico, .abtnav__ico svg,
  .svcrow__ico, .svcrow__ico svg,
  .abx-gitem__ico, .abx-gitem__ico svg,
  .abx-role__ico, .abx-role__ico svg,
  .cell__ico, .cell__ico svg,
  .fact__ico, .sp-icon, .bank-team img, .bank-team svg {
    transform: none !important;
  }
}