/* =========================================================
   AURWAVE PORTFOLIO CARD BUILDER
   ========================================================= */

.aurwave-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(var(--aurwave-columns, 3), minmax(0, 1fr));
  gap: var(--aurwave-gap, 28px);
  width: 100%;
}

.aurwave-portfolio-card,
.cases-grid-container .case-card-item {
  position: relative !important;
  overflow: visible !important;
  min-height: 340px;
  border-radius: 16px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  cursor: pointer;
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .65s cubic-bezier(.16,1,.3,1),
    filter .55s cubic-bezier(.16,1,.3,1) !important;
  backface-visibility: hidden !important;
  transform-origin: center !important;
  will-change: transform, opacity, filter !important;
}

.aurwave-portfolio-grid:hover .aurwave-portfolio-card,
.cases-grid-container:hover .case-card-item {
  opacity: .28 !important;
  filter: blur(.35px) !important;
  transform: scale(.985) !important;
}

.aurwave-portfolio-grid .aurwave-portfolio-card:hover,
.cases-grid-container .case-card-item:hover {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(-6px) scale(1.012) !important;
  z-index: 50 !important;
}

.aurwave-info-card,
.case-card-item .card-info-badge {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  box-sizing: border-box !important;
  padding: 18px 22px 20px !important;
  background: rgba(244,243,239,.97) !important;
  border: 1px solid rgba(20,20,20,.08) !important;
  border-radius: 16px !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.03),
    0 8px 18px rgba(0,0,0,.06),
    0 20px 45px rgba(0,0,0,.09) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) scale(.985) !important;
  transform-origin: top center !important;
  pointer-events: none !important;
  z-index: 999 !important;
  transition:
    opacity .4s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .5s !important;
}

.aurwave-info-card::before,
.case-card-item .card-info-badge::before {
  content: '' !important;
  position: absolute !important;
  top: -16px !important;
  left: 0 !important;
  right: 0 !important;
  height: 16px !important;
  background: transparent !important;
}

.aurwave-portfolio-card:hover .aurwave-info-card,
.case-card-item:hover .card-info-badge {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  transition:
    opacity .4s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1) !important;
}

.aurwave-info-card *,
.case-card-item .card-info-badge * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

.aurwave-info-title,
.case-card-item .card-info-badge h1,
.case-card-item .card-info-badge h2,
.case-card-item .card-info-badge h3,
.case-card-item .card-info-badge h4,
.case-card-item .card-info-badge .elementor-heading-title {
  color: #111 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: -.015em !important;
}

.aurwave-info-description,
.case-card-item .card-info-badge p,
.case-card-item .card-info-badge span {
  color: rgba(17,17,17,.62) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

@media (max-width: 1024px) {
  .aurwave-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .aurwave-portfolio-grid {
    grid-template-columns: 1fr;
  }

  .aurwave-portfolio-grid:hover .aurwave-portfolio-card,
  .cases-grid-container:hover .case-card-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .aurwave-portfolio-card,
  .case-card-item {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurwave-portfolio-card,
  .case-card-item,
  .aurwave-info-card,
  .case-card-item .card-info-badge {
    transition: none !important;
  }
}