/* Nova Skin Event — paginastijl (handmatig toegevoegd, gebruikt de bestaande design-tokens) */

.nse {
  padding-block: calc(var(--space-3xl) + 3em) var(--spacing-section);
}

/* ---------- Hero ---------- */
.nse__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-3xl);
}

.nse__eyebrow {
  margin-bottom: var(--space-md);
}

.nse__title {
  font-size: clamp(2.1em, 4vw, 3.4em);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin-bottom: 0.35em;
}

.nse__subtitle {
  font-family: var(--font-heading);
  font-size: 1.15em;
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-lg);
}

.nse__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--color-border);
}

.nse__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.9375em;
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.nse__meta-item svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--color-accent-deep);
}

.nse__lead {
  font-size: 1.0625em;
  margin-bottom: var(--space-lg);
}

.nse__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.nse__seats {
  font-size: 0.875em;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.nse__hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.nse__hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Secties ---------- */
.nse__section {
  margin-top: var(--space-3xl);
}

.nse__section-title {
  font-size: clamp(1.5em, 2.4vw, 2em);
  margin-bottom: var(--space-md);
}

.nse__text {
  max-width: 46em;
  margin-bottom: var(--space-md);
}

.nse__text:last-child {
  margin-bottom: 0;
}

/* Potenza-blok */
.nse__split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-3xl);
  align-items: center;
}

.nse__split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-cream-soft);
  box-shadow: var(--shadow-sm);
}

.nse__split-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Wat je kunt verwachten */
.nse__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.nse__card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}

.nse__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.nse__card-icon {
  width: 2.75em;
  height: 2.75em;
  border-radius: var(--radius-full);
  background-color: var(--color-cream-soft);
  color: var(--color-accent-deep);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
}

.nse__card-icon svg {
  width: 1.35em;
  height: 1.35em;
}

.nse__card-title {
  font-size: 1.0625em;
  margin-bottom: 0.5em;
}

.nse__card-text {
  font-size: 0.9375em;
}

.nse__note {
  margin-top: var(--space-lg);
  font-size: 0.9375em;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------- Aanmeld-CTA ---------- */
.nse__cta {
  margin-top: var(--space-3xl);
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  padding: clamp(2em, 5vw, 3.5em);
  text-align: center;
}

.nse__cta-title {
  color: var(--color-text-white);
  font-size: clamp(1.5em, 2.6vw, 2.1em);
  margin-bottom: var(--space-sm);
}

.nse__cta-text {
  color: var(--color-text-on-dark-muted);
  max-width: 34em;
  margin: 0 auto var(--space-lg);
}

.nse__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.nse__cta-fine {
  margin-top: var(--space-md);
  font-size: 0.8125em;
  color: var(--color-text-on-dark-muted);
}

/* ---------- Afzender ---------- */
.nse__signature {
  margin-top: var(--space-2xl);
  text-align: center;
  color: var(--color-text-muted);
}

.nse__signature strong {
  display: block;
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  margin-top: 0.35em;
}

.nse__signature em {
  font-size: 0.9375em;
}

/* ---------- Aankondiging op de homepage ---------- */
.nse-promo {
  background-color: var(--color-cream-soft);
  padding-block: var(--space-3xl);
}

.nse-promo__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}

.nse-promo__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.nse-promo__media img {
  width: 100%;
  height: auto;
  display: block;
}

.nse-promo__label {
  margin-bottom: var(--space-md);
}

.nse-promo__title {
  font-size: clamp(1.6em, 2.8vw, 2.25em);
  margin-bottom: 0.3em;
}

.nse-promo__subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-accent-deep);
  margin-bottom: var(--space-md);
}

.nse-promo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  font-size: 0.9375em;
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.nse-promo__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.nse-promo__meta svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  color: var(--color-accent-deep);
}

.nse-promo__text {
  margin-bottom: var(--space-lg);
  max-width: 34em;
}

.nse-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (max-width: 1100px) {
  .nse-promo__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 640px) {
  .nse-promo__actions .btn {
    width: 100%;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nse__hero,
  .nse__split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .nse__hero-media {
    order: -1;
  }

  .nse__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nse {
    padding-block: calc(var(--space-2xl) + 3em) var(--space-3xl);
  }

  .nse__actions .btn,
  .nse__cta-actions .btn {
    width: 100%;
  }
}