/**
 * Card Grid (VX Toolkit) — structural styles + defaults.
 *
 * Defaults here mirror the original "Industry Cards" look so the widget is
 * presentable out of the box. Every visual property is also exposed as an
 * Elementor control, whose `selectors` output overrides these rules at higher
 * specificity ({{WRAPPER}} …). Layout/animation that Elementor can't express
 * cleanly (the carousel breakpoint, transitions, scroll-snap) lives here.
 *
 * CSS variables set by controls:
 *   --vx-cg-cols           grid columns (desktop)
 *   --vx-cg-accent         accent colour (top bar + hover border)
 *   --vx-cg-mobile-card-w  card width in the mobile carousel
 */

.vx-cardgrid {
  --vx-cg-cols: 5;
  --vx-cg-accent: #1a56db;
  --vx-cg-mobile-card-w: 160px;
}

/* ── Heading ── */
.vx-cardgrid-heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0 0 40px 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vx-cardgrid-heading.has-bar::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 2.2em;
  background: #635bff;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Grid (desktop) ── */
.vx-cardgrid-grid {
  display: grid;
  grid-template-columns: repeat(var(--vx-cg-cols), 1fr);
  gap: 10px;
}

/* ── Card ── */
.vx-cardgrid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px 28px;
  border-radius: 18px;
  background: #ffffff;
  border: 1.5px solid #e8ecf4;
  box-shadow: 0 2px 12px rgba(10, 20, 60, 0.06);
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(.25, .8, .25, 1),
              box-shadow 0.22s cubic-bezier(.25, .8, .25, 1),
              border-color 0.22s ease,
              background 0.22s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Hover overlay */
.vx-cardgrid-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--vx-cg-accent);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.vx-cardgrid-card:hover::after {
  opacity: 0.06;
}

/* Accent top bar on hover */
.vx-cardgrid-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vx-cg-accent);
  border-radius: 18px 18px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 2;
}

.vx-cardgrid-card:hover::before {
  transform: scaleX(1);
}

.vx-cardgrid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(10, 20, 60, 0.13);
  border-color: var(--vx-cg-accent);
}

/* ── Icon ── */
.vx-cardgrid-icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: #f0f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.vx-cardgrid-card:hover .vx-cardgrid-icon {
  background: #dde8ff;
}

.vx-cardgrid-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  fill: #635bff;
}

.vx-cardgrid-icon i {
  font-size: 34px;
  line-height: 1;
  color: #635bff;
}

.vx-cardgrid-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

/* ── Label ── */
.vx-cardgrid-label {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1a1a2e;
  text-align: center;
  line-height: 1.25;
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
}

.vx-cardgrid-card:hover .vx-cardgrid-label {
  color: var(--vx-cg-accent);
}

/* ── Arrow ── */
.vx-cardgrid-arrow {
  margin-top: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background 0.22s ease, transform 0.22s ease;
  flex-shrink: 0;
}

.vx-cardgrid-arrow svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #635bff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vx-cardgrid-card:hover .vx-cardgrid-arrow {
  background: var(--vx-cg-accent);
  transform: translate(2px, -2px);
}

.vx-cardgrid-card:hover .vx-cardgrid-arrow svg {
  stroke: #fff;
}

/* ── Highlighted card defaults ── */
.vx-cardgrid-card.is-highlight {
  background: linear-gradient(135deg, #1a56db 0%, #0e3fa3 100%);
  border-color: transparent;
}

.vx-cardgrid-card.is-highlight .vx-cardgrid-label { color: #fff; }
.vx-cardgrid-card.is-highlight .vx-cardgrid-icon { background: rgba(255, 255, 255, 0.18); }
.vx-cardgrid-card.is-highlight .vx-cardgrid-icon svg { fill: #fff; }
.vx-cardgrid-card.is-highlight .vx-cardgrid-icon i { color: #fff; }
.vx-cardgrid-card.is-highlight .vx-cardgrid-arrow { background: rgba(255, 255, 255, 0.2); }
.vx-cardgrid-card.is-highlight .vx-cardgrid-arrow svg { stroke: #fff; }

/* ═══════════════════════════════════════
   TABLET & MOBILE — horizontal carousel
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

  .vx-cardgrid-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Setting overflow-x: auto forces overflow-y to compute to auto too
       (CSS spec), so the scroller clips vertically. The hover lift + drop
       shadow then render outside the box and get cut off. Pad the scroller
       to give them room, then pull it back with negative margin so layout
       doesn't shift. Top clears the lift; bottom clears the shadow. */
    padding-top: 12px;
    padding-bottom: 30px;
    margin-top: -12px;
    margin-bottom: -30px;
  }

  .vx-cardgrid-grid::-webkit-scrollbar { display: none; }

  .vx-cardgrid-card {
    flex: 0 0 var(--vx-cg-mobile-card-w);
    min-width: var(--vx-cg-mobile-card-w);
    scroll-snap-align: start;
  }

  /* Scroll-hint fade on the right edge */
  .vx-cardgrid-wrapper {
    position: relative;
  }

  .vx-cardgrid-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 48px;
    /* Fades to the page/section background. Override --vx-cg-fade to match
       your background colour (default white). Set to `transparent` to hide. */
    background: linear-gradient(to right, transparent, var(--vx-cg-fade, rgba(255, 255, 255, 0.95)));
    pointer-events: none;
  }
}

/* ── Scroll dots (mobile only) ── */
.vx-cardgrid-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

@media (max-width: 1024px) {
  .vx-cardgrid-dots { display: flex; }
}

.vx-cardgrid-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0d8f0;
  transition: width 0.3s ease, background 0.3s ease;
}

.vx-cardgrid-dot.active {
  width: 22px;
  border-radius: 3px;
  background: var(--vx-cg-accent);
}