/* Van Den End Media — front-end & editor styling */

:root {
  --vde-transition: cubic-bezier(0.22, 1, 0.36, 1);
  --vde-shadow-glow: 0 0 60px -10px rgba(95, 201, 255, 0.5);
}

body {
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  -webkit-font-smoothing: antialiased;
}

/* Buttons */
.wp-block-button__link {
  transition: transform 0.3s var(--vde-transition), background 0.3s var(--vde-transition), color 0.3s var(--vde-transition);
  box-shadow: var(--vde-shadow-glow);
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* Cards */
.vde-card {
  border: 1px solid var(--wp--preset--color--border);
  background: rgba(18, 26, 38, 0.5);
  border-radius: 1rem;
  padding: 2rem;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s var(--vde-transition), transform 0.3s var(--vde-transition);
}
.vde-card:hover {
  border-color: rgba(95, 201, 255, 0.4);
  transform: translateY(-4px);
}

/* Eyebrow label */
.vde-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* Hero */
.vde-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.vde-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  animation: vde-zoom 18s ease-out infinite alternate;
}
.vde-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--wp--preset--gradient--hero);
}
@keyframes vde-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Portfolio grid */
.vde-portfolio-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vde-portfolio-item {
  position: relative; overflow: hidden; border-radius: 1rem;
  aspect-ratio: 4/5; border: 1px solid var(--wp--preset--color--border);
}
.vde-portfolio-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--vde-transition);
}
.vde-portfolio-item:hover img { transform: scale(1.05); }
.vde-portfolio-item__overlay {
  position: absolute; inset: 0; padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, transparent 40%, rgba(10,16,24,0.9) 100%);
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}
.vde-portfolio-item__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.25rem;
}
.vde-portfolio-item__cat {
  color: var(--wp--preset--color--primary);
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* Diensten */
.vde-dienst-card {
  border: 1px solid var(--wp--preset--color--border);
  background: rgba(18, 26, 38, 0.5);
  border-radius: 1rem; padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.3s var(--vde-transition);
}
.vde-dienst-card:hover { border-color: rgba(95, 201, 255, 0.4); }
.vde-dienst-card__price {
  margin-top: auto; color: var(--wp--preset--color--primary);
  font-weight: 600;
}

/* Site header */
.wp-block-template-part.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 16, 24, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Navigation */
.wp-block-navigation .wp-block-navigation-item__content {
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wp--preset--color--muted-foreground);
  transition: color 0.2s var(--vde-transition);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--foreground);
}

/* Inputs (Contact Form 7) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%; padding: 0.875rem 1rem;
  background: var(--wp--preset--color--muted);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
  color: var(--wp--preset--color--foreground);
  font-family: inherit;
}
.wpcf7 label { display: block; margin-bottom: 1rem; font-size: 0.875rem; color: var(--wp--preset--color--muted-foreground); }
.wpcf7 input[type="submit"] {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-foreground);
  border: none; border-radius: 999px;
  padding: 0.875rem 1.75rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--vde-shadow-glow);
}

/* Utility */
.has-text-align-center { text-align: center; }
.vde-section { padding-block: 6rem; }
@media (max-width: 768px) { .vde-section { padding-block: 4rem; } }