/* ================================================================
   SERVICES SHOWCASE — Maven-style horizontal expand cards
   ================================================================ */
.services-showcase {
  padding: 5rem 0 5rem;
  background: var(--color-white);
}

.services-cards {
  display: flex;
  gap: 6px;
  height: 480px;
  margin-top: 3rem;
  overflow: hidden;
}

/* Each card: equal width by default */
.svc-card {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 56px;
}

/* ── Desktop hover expand ──
   Approach: .services-cards:hover shrinks all (0,3,0 specificity),
   then .services-cards:hover .svc-card:hover expands the hovered one (0,4,0).
   Higher specificity wins → expand rule always beats the shrink rule. */
.services-cards:hover .svc-card {
  flex: 0.6;
}
.services-cards:hover .svc-card:hover {
  flex: 2.4;
}

/* ── Click / tap expand (JS adds .has-active to container, .svc-card--active to card) ──
   Same specificity pattern: container class + card class beats container class alone. */
.services-cards.has-active .svc-card {
  flex: 0.6;
}
.services-cards.has-active .svc-card--active {
  flex: 2.4;
}

/* Background image */
.svc-card__bg {
  position: absolute;
  inset: 0;
  background-image: var(--svc-bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.65s ease;
}
.svc-card:hover .svc-card__bg,
.svc-card--active .svc-card__bg {
  transform: scale(1.06);
}

/* Gradient overlay */
.svc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 30, 80, 0.88) 0%,
    rgba(5, 30, 80, 0.35) 45%,
    transparent 100%
  );
  transition: background 0.4s ease;
}
.svc-card:hover .svc-card__overlay,
.svc-card--active .svc-card__overlay {
  background: linear-gradient(
    to top,
    rgba(5, 30, 80, 0.92) 0%,
    rgba(5, 30, 80, 0.5) 55%,
    rgba(5, 30, 80, 0.15) 100%
  );
}

/* Body text — always at the bottom */
.svc-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.75rem 1.5rem;
  color: #ffffff;
}

/* Override theme h3/p color rules */
.svc-card__name,
.svc-card__desc,
.svc-card__cta {
  color: #ffffff;
}

/* Service name — always visible, wraps on expand */
.svc-card__name {
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: white-space 0.3s ease;
}
.svc-card:hover .svc-card__name,
.svc-card--active .svc-card__name {
  white-space: normal;
}

/* Description — hidden until expanded */
.svc-card__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease 0.1s, opacity 0.3s ease 0.15s;
}
.svc-card:hover .svc-card__desc,
.svc-card--active .svc-card__desc {
  max-height: 120px;
  opacity: 0.9;
}

/* CTA — inherits .btn .btn--primary from global theme;
   .svc-card parent raises specificity to (0,2,0) so size overrides win */
.svc-card .svc-card__cta {
  display: inline-block;
  font-size: 0.82rem;
  padding: 0.4rem 1rem;
  /* animation: hidden until card expands */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: background 0.2s ease, border-color 0.2s ease,
              max-height 0.35s ease 0.2s, opacity 0.3s ease 0.25s;
}
.svc-card:hover .svc-card__cta,
.svc-card--active .svc-card__cta {
  max-height: 48px;
  opacity: 1;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 767px) {
  .services-cards {
    flex-direction: column;
    height: auto;
    gap: 4px;
  }
  .svc-card {
    flex: none;
    height: 200px;
    min-width: unset;
  }
  /* Disable flex expand on mobile — height expand instead */
  .services-cards:hover .svc-card,
  .services-cards.has-active .svc-card { flex: none; }
  .services-cards:hover .svc-card:hover,
  .services-cards.has-active .svc-card--active { flex: none; height: 300px; }
  /* Always show desc/cta on mobile */
  .svc-card__name { white-space: normal; }
  .svc-card__desc { max-height: 80px; opacity: 0.85; }
  .svc-card__cta { max-height: 40px; opacity: 1; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .services-cards { height: 360px; }
  .svc-card__name { font-size: 0.9rem; }
}