/* =========================================================
   MIRACLE LIQUORS – FEATURE v1.0
   Universeel contentcomponent: media + verhaal + optionele module
   ========================================================= */

.ml-feature {
  position: relative;
  min-width: 0;
}

.ml-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--ml-grid-gap-split);
  min-width: 0;
}

.ml-feature__grid > * { min-width: 0; }

/* MEDIA */

.ml-feature__media {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  margin: 0;
  border-radius: var(--ml-radius-media);
  background: var(--ml-color-surface-muted);
}

.ml-feature__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: var(--ml-feature-image-position, center);
}

.ml-feature__caption {
  position: absolute;
  right: var(--ml-space-016);
  bottom: var(--ml-space-016);
  left: var(--ml-space-016);
  margin: 0;
  padding: var(--ml-space-008) var(--ml-space-012);
  border-radius: var(--ml-radius-subtle);
  background: rgba(24, 49, 41, .72);
  color: var(--ml-color-text-inverse);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  line-height: var(--ml-leading-ui);
}

.ml-feature__badge {
  position: absolute;
  right: var(--ml-space-020);
  bottom: var(--ml-space-020);
  z-index: 1;
  display: flex;
  min-width: 132px;
  flex-direction: column;
  gap: var(--ml-space-004);
  padding: var(--ml-space-016) var(--ml-space-020);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--ml-radius-card);
  background: rgba(31, 58, 50, .90);
  color: var(--ml-color-text-inverse);
  box-shadow: var(--ml-shadow-sm);
  backdrop-filter: blur(6px);
}

.ml-feature__badge strong {
  font-family: var(--ml-font-display);
  font-size: var(--ml-text-body-lg);
  font-weight: var(--ml-font-weight-regular);
}

.ml-feature__badge span {
  color: var(--ml-color-text-inverse-muted);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
}

/* CONTENT */

.ml-feature__content {
  display: flex;
  width: min(680px, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.ml-feature__content > * { margin-block: 0; }

.ml-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-012);
  color: var(--ml-color-primary);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-eyebrow);
  font-weight: var(--ml-font-weight-semibold);
  line-height: var(--ml-leading-ui);
  letter-spacing: var(--ml-tracking-eyebrow);
  text-transform: uppercase;
}

.ml-feature__eyebrow--line::before {
  width: 30px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--ml-color-accent);
  content: "";
}

.ml-feature__title {
  margin-top: var(--ml-space-016);
  color: var(--ml-color-heading);
  font-family: var(--ml-font-display);
  font-size: var(--ml-text-h2);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-leading-heading);
  letter-spacing: var(--ml-tracking-heading);
  text-wrap: balance;
}

.ml-feature__intro {
  max-width: 620px;
  margin-top: var(--ml-space-020);
  color: var(--ml-color-text-muted);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-lead);
  line-height: var(--ml-leading-body-relaxed);
}

.ml-feature__body {
  display: flex;
  max-width: 620px;
  flex-direction: column;
  gap: var(--ml-space-stack-md);
  margin-top: var(--ml-space-020);
  color: var(--ml-color-text);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body);
  line-height: var(--ml-leading-body-relaxed);
}

.ml-feature__body > * { margin-block: 0; }

.ml-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ml-space-inline-md);
  margin-top: var(--ml-space-032);
}

/* STRUCTURELE VARIANTEN */

.ml-feature--reverse .ml-feature__media { order: 2; }
.ml-feature--reverse .ml-feature__content { order: 1; }

.ml-feature--media-wide .ml-feature__grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
}

.ml-feature--content-wide .ml-feature__grid {
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
}

.ml-feature--media-focus .ml-feature__grid {
  grid-template-columns: 1fr;
  gap: var(--ml-space-048);
}

.ml-feature--media-focus .ml-feature__media {
  min-height: clamp(420px, 52vw, 680px);
}

.ml-feature--media-focus .ml-feature__content {
  width: min(760px, 100%);
}

.ml-feature--boxed {
  padding: var(--ml-space-040);
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-panel);
  background: var(--ml-color-surface);
  box-shadow: var(--ml-shadow-xs);
}

.ml-feature--dark {
  padding: var(--ml-space-040);
  border-radius: var(--ml-radius-panel);
  background: linear-gradient(135deg,
    var(--ml-color-surface-brand) 0%,
    var(--ml-color-surface-brand-strong) 100%);
  color: var(--ml-color-text-inverse);
}

.ml-feature--dark .ml-feature__eyebrow { color: var(--ml-color-accent); }
.ml-feature--dark .ml-feature__title { color: var(--ml-color-text-inverse); }
.ml-feature--dark .ml-feature__intro,
.ml-feature--dark .ml-feature__body { color: var(--ml-color-text-inverse-muted); }

@media (min-width: 981px) {
  .ml-feature--sticky .ml-feature__grid { align-items: start; }
  .ml-feature--sticky .ml-feature__media {
    position: sticky;
    top: var(--ml-feature-sticky-top, 110px);
  }
}

/* USP LIST */

.ml-feature__list {
  display: grid;
  width: 100%;
  gap: var(--ml-space-016);
  margin-top: var(--ml-space-024);
  padding: 0;
  list-style: none;
}

.ml-feature__list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ml-space-012);
}

.ml-feature__list-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-surface-tinted);
  color: var(--ml-color-primary);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  font-weight: var(--ml-font-weight-bold);
}

.ml-feature__list-title {
  display: block;
  color: var(--ml-color-heading);
  font-family: var(--ml-font-body);
  font-weight: var(--ml-font-weight-bold);
}

.ml-feature__list-text {
  display: block;
  margin-top: var(--ml-space-004);
  color: var(--ml-color-text-muted);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body-sm);
  line-height: var(--ml-leading-body);
}

/* PROCESS */

.ml-feature__steps {
  display: grid;
  width: 100%;
  gap: var(--ml-space-020);
  margin-top: var(--ml-space-032);
  padding: 0;
  list-style: none;
  counter-reset: ml-feature-step;
}

.ml-feature__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--ml-space-016);
  counter-increment: ml-feature-step;
}

.ml-feature__step::before {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-surface);
  color: var(--ml-color-primary);
  content: counter(ml-feature-step);
  font-family: var(--ml-font-ui);
  font-weight: var(--ml-font-weight-bold);
}

.ml-feature__step-title {
  display: block;
  color: var(--ml-color-heading);
  font-family: var(--ml-font-body);
  font-weight: var(--ml-font-weight-bold);
}

.ml-feature__step-text {
  display: block;
  margin-top: var(--ml-space-004);
  color: var(--ml-color-text-muted);
  font-size: var(--ml-text-body-sm);
  line-height: var(--ml-leading-body);
}

/* STATS */

.ml-feature__stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ml-space-016);
  margin-top: var(--ml-space-032);
}

.ml-feature__stat {
  padding-top: var(--ml-space-016);
  border-top: 1px solid var(--ml-color-border);
}

.ml-feature__stat-value {
  display: block;
  color: var(--ml-color-heading);
  font-family: var(--ml-font-display);
  font-size: var(--ml-text-h3);
  font-weight: var(--ml-font-weight-regular);
}

.ml-feature__stat-label {
  display: block;
  margin-top: var(--ml-space-004);
  color: var(--ml-color-text-muted);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
}

/* QUOTE */

.ml-feature__quote {
  margin: var(--ml-space-032) 0 0;
  padding-left: var(--ml-space-024);
  border-left: 2px solid var(--ml-color-accent);
}

.ml-feature__quote p {
  margin: 0;
  color: var(--ml-color-text);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-lead);
  line-height: var(--ml-leading-body-relaxed);
}

.ml-feature__quote footer {
  margin-top: var(--ml-space-012);
  color: var(--ml-color-text-muted);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
}

/* TIMELINE */

.ml-feature__timeline {
  display: grid;
  margin-top: var(--ml-space-032);
  padding: 0;
  list-style: none;
}

.ml-feature__timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--ml-space-016);
  padding-bottom: var(--ml-space-024);
}

.ml-feature__timeline-item::before {
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 35px;
  width: 1px;
  background: var(--ml-color-border);
  content: "";
}

.ml-feature__timeline-item:last-child::before { display: none; }

.ml-feature__timeline-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 72px;
  min-height: 48px;
  place-items: center;
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-surface);
  color: var(--ml-color-primary);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  font-weight: var(--ml-font-weight-bold);
}

.ml-feature__timeline-title {
  display: block;
  color: var(--ml-color-heading);
  font-family: var(--ml-font-body);
  font-weight: var(--ml-font-weight-bold);
}

.ml-feature__timeline-text {
  display: block;
  margin-top: var(--ml-space-004);
  color: var(--ml-color-text-muted);
  font-size: var(--ml-text-body-sm);
  line-height: var(--ml-leading-body);
}

/* RESPONSIVE */

@media (max-width: 980px) {
  .ml-feature__grid,
  .ml-feature--media-wide .ml-feature__grid,
  .ml-feature--content-wide .ml-feature__grid {
    grid-template-columns: 1fr;
    gap: var(--ml-space-048);
  }

  .ml-feature--reverse .ml-feature__media { order: initial; }
  .ml-feature__content { width: min(720px, 100%); }
  .ml-feature__media { min-height: 380px; }

  .ml-feature--boxed,
  .ml-feature--dark { padding: var(--ml-space-032); }
}

@media (max-width: 680px) {
  .ml-feature__grid { gap: var(--ml-space-032); }
  .ml-feature__media {
    min-height: 280px;
    border-radius: var(--ml-radius-card);
  }

  .ml-feature__badge {
    right: var(--ml-space-012);
    bottom: var(--ml-space-012);
    min-width: 116px;
    padding: var(--ml-space-012) var(--ml-space-016);
  }

  .ml-feature__title { margin-top: var(--ml-space-012); }
  .ml-feature__intro,
  .ml-feature__body { margin-top: var(--ml-space-016); }

  .ml-feature__intro {
    font-size: var(--ml-text-body);
    line-height: var(--ml-leading-body);
  }

  .ml-feature__actions {
    gap: var(--ml-space-012);
    margin-top: var(--ml-space-024);
  }

  .ml-feature--boxed,
  .ml-feature--dark { padding: var(--ml-space-024); }

  .ml-feature__stats { grid-template-columns: 1fr; }

  .ml-feature__timeline-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .ml-feature__timeline-item::before { left: 28px; }
  .ml-feature__timeline-marker { width: 58px; }
}

@media (max-width: 480px) {
  .ml-feature__actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .ml-feature__actions .ml-button { width: 100%; }
}