/* =============================================
       DESIGN TOKENS
       ============================================= */
 .ui-cards-grid {
   --color-ui-card-1: #455469;
   --color-ui-card-2: #ff6462;
   --color-ui-card-3: #21568c;
   --color-ui-card-4: #1fa29c;
   --color-ui-card-5: #f29b35;
   --color-text-on-ui-card: var(--clr-white);
   --icon-circle-size: 110px;
   --icon-circle-bg: var(--clr-white);
   --gap: 20px;
   --ui-card-padding: var(--sp10);
   --font-size-label: var(--fs-18);
   --font-lh-label: 1.3333;
   --font-color-label: var(--clr-white);
   --font-color-description: var(--clr-white);
   --radius-ui-card: var(--radius-54);
   --m-h-ui-card: 280px;
   --hover-overlay: rgba(0, 0, 0, 0.22);
   --hover-desc-size: var(--fs-18);
   --hover-desc-lh: 1.444444;
   --anim-duration: 0.44s;
   --anim-ease: cubic-bezier(0.34, 1.20, 0.64, 1);
   --ui-card-p-row: 3;
   z-index: 1;
   position: relative;
 }

 /* =============================================
       GRID
       ============================================= */
 .ui-cards-grid {
   display: grid;
   grid-template-columns: repeat(var(--ui-card-p-row), 1fr);
   gap: var(--gap);
   width: 100%;
 }

 /* =============================================
       BASE UI-CARD
       ============================================= */
 .ui-card {
   border-radius: var(--radius-ui-card);
   padding: var(--ui-card-padding);
   color: var(--color-text-on-ui-card);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   min-height: 230px;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   transition: box-shadow 0.3s ease, transform 0.22s ease;
   min-height: var(--m-h-ui-card);
   background: var(--card-bg, var(--color-ui-card-1));
 }

 .ui-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
 }

 .ui-card:nth-child(3n+1) {
   --card-bg: var(--color-ui-card-1);
 }

 .ui-card:nth-child(3n+2) {
   --card-bg: var(--color-ui-card-2);
 }

 .ui-card:nth-child(3n+3) {
   --card-bg: var(--color-ui-card-3);
 }

 .ui-card:nth-child(3n+4) {
   --card-bg: var(--color-ui-card-4);
 }

 .ui-card:nth-child(3n+5) {
   --card-bg: var(--color-ui-card-5);
 }

 /* =============================================
       DEFAULT CONTENT (icon + label)
       ============================================= */
 .ui-card__default {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   width: 100%;
   margin: auto 0;
   /* transitions */
   transition: transform var(--anim-duration) var(--anim-ease),
     opacity 0.30s ease;
 }

 .ui-card:hover .ui-card__default {
   transform: translateY(-22px);
   opacity: 0.10;
 }

 /* =============================================
       ICON CIRCLE
       ============================================= */
 .ui-card__icon-wrap {
   width: var(--icon-circle-size);
   height: var(--icon-circle-size);
   border-radius: 50%;
   background: var(--icon-circle-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: transform var(--anim-duration) var(--anim-ease);
 }

 .ui-card:hover .ui-card__icon-wrap {
   transform: scale(0.86);
 }

 /* =============================================
       LABEL
       ============================================= */
 .ui-card__label {
   font-size: var(--font-size-label);
   line-height: var(--font-lh-label);
   color: var(--font-color-label);
 }

 .ui-card__placeholder-link {
   font-size: 0;
   position: absolute;
   inset: 0;
 }

 /* =============================================
       HOVER PANEL  (slides up from bottom)
       ============================================= */
 .ui-card__hover {
   position: absolute;
   inset: 0;
   padding: var(--ui-card-padding);
   background: var(--card-bg, var(--color-ui-card-1));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: left;
   gap: 25px;
   pointer-events: none;

   /* hidden: shifted down */
   transform: translateY(100%);
   opacity: 0;
   transition: transform var(--anim-duration) var(--anim-ease),
     opacity 0.28s ease;
 }

 .ui-card:hover .ui-card__hover {
   transform: translateY(0);
   opacity: 1;
   pointer-events: auto;
 }

 .ui-card__link-btn {
   position: relative;
   z-index: 1;
 }

 /* Description text — staggered */
 .ui-card__hover-text {
   font-size: var(--hover-desc-size);
   line-height: var(--hover-desc-lh);
   color: var(--font-color-description);

   transform: translateY(20px);
   opacity: 0;
   transition: transform 0.38s var(--anim-ease) 0.06s,
     opacity 0.28s ease 0.06s;
 }

 .ui-card:hover .ui-card__hover-text {
   transform: translateY(0);
   opacity: 1;
 }


 @media (hover: none) and (pointer: coarse) {
   .ui-card__placeholder-link {
     display: none !important;
   }
 }