/* ==========================================================================
   Case Studies page â€” card grid
   Scoped to .home_qlinks2--cases so it never affects the blogs page.
   ========================================================================== */

.home_qlinks2--cases .grid {
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}

.home_qlinks2--cases .grid a {
   min-height: 385px;
   border-radius: 10px;
   transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.home_qlinks2--cases .grid a>img {
   height: 385px;
   transition: transform 0.6s ease;
   border-radius: 10px;
}

/* Black overlay anchored to the bottom â€” keeps the image clear up top
   (no gray wash) while the white title stays readable */
.home_qlinks2--cases .grid a::before {
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
   z-index: 1;
   transition: opacity 0.4s ease;
}

/* Keep the text above the overlay */
.home_qlinks2--cases .hq2_grid_1_in {
   padding: 28px;
   width: 100%;
   z-index: 2;
   transition: transform 0.4s ease;
}

/* Hover effect â€” zoom image, darken overlay, lift the card and title */
.home_qlinks2--cases .grid a:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.home_qlinks2--cases .grid a:hover>img {
   transform: scale(1.06);
}

.home_qlinks2--cases .grid a:hover::before {
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0.12) 70%);
}

.home_qlinks2--cases .grid a:hover .hq2_grid_1_in {
   transform: translateY(-6px);
}

/* Bold title, like the reference card */
.home_qlinks2--cases .hq2_grid_1_in h2 {
   font-size: 24px;
   line-height: 1.25;
   font-weight: 700;
   margin: 0;
}

/* Muted category label below the title */
.home_qlinks2--cases .hq2_grid_1_in h3 {
   font-size: 16px;
   font-weight: 600;
   color: #9fb0c0;
   margin: 14px 0 0;
}

@media (max-width: 991px) {
   .home_qlinks2--cases .grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .home_qlinks2--cases .grid a {
      min-height: 420px;
   }

   .home_qlinks2--cases .grid a>img {
      height: 420px;
   }
}

@media (max-width: 600px) {
   .home_qlinks2--cases .grid {
      grid-template-columns: 1fr;
   }
}