/**
 * Voltina Team Grid Block
 *
 * Styling wordt centraal beheerd via het Voltina thema.
 * Dit bestand kan worden gebruikt voor blok-specifieke overrides indien nodig.
 */

/* Social links hover effect */
.voltina-team-grid a svg {
  transition: opacity 0.2s ease;
}

.voltina-team-grid a:hover svg {
  opacity: 0.7;
}


/* =========================
   VOLTINA — Team Grid UI
   (structure unchanged)
   ========================= */

/* Brand-ish tokens (safe defaults) */
.voltina-team-grid{
  --voltina-magenta: #e6007e;
  --voltina-orange: #f18700; /* enkel als onderdeel van verloop */
  --voltina-ink: #000000;

  --vt-bg: rgba(230, 0, 126, 0.04);
  --vt-card: #ffffff;
  --vt-border: rgba(230, 0, 126, 0.16);
  --vt-border-strong: rgba(230, 0, 126, 0.28);
  --vt-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

  /* block background */
  position: relative;
  overflow: hidden;
}

/* Subtle gradient glow + soft pattern vibe (no heavy code, copy-paste safe) */
.voltina-team-grid::before,
.voltina-team-grid::after{
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

.voltina-team-grid::before{
  width: 900px;
  height: 900px;
  top: -420px;
  right: -420px;

  filter: blur(6px);
}

.voltina-team-grid::after{
  width: 900px;
  height: 900px;
  bottom: -520px;
  left: -520px;

  filter: blur(10px);
}

/* Ensure content stays above the background layers */
.voltina-team-grid > .container{
  position: relative;
  z-index: 1;
}

/* Typography / headings */
.voltina-team-grid h2,
.voltina-team-grid h4,
.voltina-team-grid h5{
  color: var(--vt-ink);
  letter-spacing: -0.02em;
}

.voltina-team-grid p,
.voltina-team-grid h6{
  color: rgba(0, 0, 0, 0.78);
}

/* Tagline = Voltina accent */
.voltina-team-grid p.mb-3.font-semibold{
  color: var(--voltina-magenta);
}

/* TEAM CARD LOOK (targets each member wrapper) */
.voltina-team-grid .grid > div.flex.flex-col{
  background: var(--vt-card);
  border: 1px solid var(--vt-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--vt-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 768px){
  .voltina-team-grid .grid > div.flex.flex-col{
    padding: 18px;
    border-radius: 20px;
  }
}

.voltina-team-grid .grid > div.flex.flex-col:hover{
  transform: translateY(-2px);
  border-color: var(--vt-border-strong);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

/* Image styling */
.voltina-team-grid .grid > div.flex.flex-col .overflow-hidden{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}

.voltina-team-grid img{
  transition: transform 0.35s ease;
}

.voltina-team-grid .grid > div.flex.flex-col:hover img{
  transform: scale(1.02);
}

/* Name / job title styling */
.voltina-team-grid h5{
  color: var(--vt-ink);
}

.voltina-team-grid h6{
  color: rgba(0, 0, 0, 0.62);
}

/* Social icons: make them Voltina */
.voltina-team-grid a{
  color: rgba(0, 0, 0, 0.70);
}

.voltina-team-grid a svg{
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.voltina-team-grid a:hover{
  color: var(--voltina-magenta);
}

.voltina-team-grid a:hover svg{
  opacity: 1;
  transform: translateY(-1px);
}

/* Footer CTA button: single color (Voltina magenta) */
.voltina-team-grid a.bg-background-primary{
  background: var(--voltina-magenta) !important;
  border-color: rgba(230, 0, 126, 0.40) !important;
  color: #ffffff !important;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 10px 22px rgba(230, 0, 126, 0.20);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.voltina-team-grid a.bg-background-primary:hover{
  background: rgba(230, 0, 126, 0.92) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(230, 0, 126, 0.26);
}

/* Focus ring in Voltina */
.voltina-team-grid a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.25), 0 10px 22px rgba(230, 0, 126, 0.18);
}