/* =========================================================
   MIRACLE LIQUORS – HERO v2.0
   Component Library / migration-safe

   OFFICIËLE VARIANTEN
   - default        : achtergrondfoto + overlay + content
   - home           : grotere merkhero
   - center         : gecentreerde compositie
   - split          : tekst + los beeld
   - minimal        : zonder fotografie, rustige brand surface

   OPTIONELE ONDERDELEN
   - actions
   - facts
   - scroll indicator

   BELANGRIJK
   - Een Banner Section Header blijft een apart component.
   - Hero gebruikt algemene .ml-button classes.
   - Oude .ml-hero__button classes blijven tijdelijk werken.

   Vereist:
   - variables.css
   - typography.css
   - buttons.css
   - links.css
   - containers.css
   - spacing.css
   ========================================================= */


/* =========================================================
   1. BASE
   ========================================================= */

.ml-hero {
  position: relative;
  display: flex;
  width: 100%;
  min-height: clamp(560px, 70vh, 700px);
  align-items: center;
  overflow: hidden;

  background-color: var(--ml-color-surface-brand-strong);
  background-image: var(--ml-hero-image, none);
  background-position: var(--ml-hero-position, center 45%);
  background-repeat: no-repeat;
  background-size: cover;

  color: var(--ml-color-text-inverse);
  isolation: isolate;
}


/* =========================================================
   2. OVERLAY
   ========================================================= */

.ml-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(18, 40, 33, 0.94) 0%,
      rgba(18, 40, 33, 0.82) 34%,
      rgba(18, 40, 33, 0.52) 62%,
      rgba(18, 40, 33, 0.20) 100%
    ),
    linear-gradient(
      0deg,
      rgba(17, 38, 31, 0.48) 0%,
      rgba(17, 38, 31, 0) 55%
    );

  pointer-events: none;
}

.ml-hero--overlay-strong .ml-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(18, 40, 33, 0.97) 0%,
      rgba(18, 40, 33, 0.90) 38%,
      rgba(18, 40, 33, 0.62) 70%,
      rgba(18, 40, 33, 0.35) 100%
    );
}

.ml-hero--overlay-soft .ml-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(18, 40, 33, 0.78) 0%,
      rgba(18, 40, 33, 0.62) 42%,
      rgba(18, 40, 33, 0.28) 100%
    );
}


/* =========================================================
   3. INNER / CONTENT
   Eén .ml-container per hero.
   ========================================================= */

.ml-hero__inner {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ml-hero__content {
  display: flex;
  width: min(720px, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;

  padding-block: var(--ml-space-section-spacious);
}

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


/* =========================================================
   4. EYEBROW
   ========================================================= */

.ml-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-012);

  color: var(--ml-color-accent);
  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-hero__eyebrow::before {
  width: 30px;
  height: var(--ml-border-width-thin);
  flex: 0 0 auto;
  background: var(--ml-color-accent);
  content: "";
}

.ml-hero__eyebrow--light {
  color: var(--ml-color-text-inverse);
}

.ml-hero__eyebrow--light::before {
  background: rgba(255, 255, 255, 0.72);
}

.ml-hero__eyebrow--no-line::before {
  display: none;
}


/* =========================================================
   5. TITLE
   ========================================================= */

.ml-hero__title {
  max-width: 760px;
  margin-top: var(--ml-space-016);

  color: var(--ml-color-text-inverse) !important;
  font-family: var(--ml-font-display);
  font-size: var(--ml-text-display-lg);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-leading-display);
  letter-spacing: var(--ml-tracking-display);
  text-wrap: balance;
}


/* =========================================================
   6. INTRO
   ========================================================= */

.ml-hero__intro {
  max-width: 650px;
  margin-top: var(--ml-space-024);

  color: var(--ml-color-text-inverse-muted);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-lead);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-leading-body-relaxed);
}


/* =========================================================
   7. ACTIONS
   Styling van buttons zelf staat in buttons.css.
   ========================================================= */

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


/* =========================================================
   8. FACTS / USP'S
   Optioneel, bij voorkeur maximaal 3.
   ========================================================= */

.ml-hero__facts {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0;

  margin-top: var(--ml-space-040);
  padding-top: var(--ml-space-024);

  border-top:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    var(--ml-color-border-inverse);
}

.ml-hero__fact {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  gap: var(--ml-space-004);

  margin-right: var(--ml-space-032);
  padding-right: var(--ml-space-032);

  border-right:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    var(--ml-color-border-inverse);
}

.ml-hero__fact:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

.ml-hero__fact strong {
  color: var(--ml-color-accent-soft);
  font-family: var(--ml-font-display);
  font-size: var(--ml-text-body-lg);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-leading-heading-small);
}

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


/* =========================================================
   9. HOME VARIANT
   Grootste merkhero; vooral homepage/campagne.
   ========================================================= */

.ml-hero--home {
  min-height: clamp(620px, 78vh, 800px);
}

.ml-hero--home .ml-hero__content {
  width: min(820px, 100%);
}

.ml-hero--home .ml-hero__title {
  max-width: 820px;
  font-size: var(--ml-text-display-xl);
}


/* =========================================================
   10. CENTER VARIANT
   ========================================================= */

.ml-hero--center {
  text-align: center;
}

.ml-hero--center .ml-hero__content {
  margin-inline: auto;
  align-items: center;
}

.ml-hero--center .ml-hero__intro {
  margin-inline: auto;
}

.ml-hero--center .ml-hero__actions,
.ml-hero--center .ml-hero__facts {
  justify-content: center;
}

.ml-hero--center .ml-hero__overlay {
  background:
    linear-gradient(
      0deg,
      rgba(18, 40, 33, 0.78),
      rgba(18, 40, 33, 0.56)
    );
}


/* =========================================================
   11. MINIMAL VARIANT
   Zonder achtergrondfoto. Voor rustige merkintro's.
   ========================================================= */

.ml-hero--minimal {
  min-height: auto;
  background-image: none;
  background:
    linear-gradient(
      135deg,
      var(--ml-color-surface-brand) 0%,
      var(--ml-color-surface-brand-strong) 100%
    );
}

.ml-hero--minimal .ml-hero__overlay {
  display: none;
}

.ml-hero--minimal .ml-hero__content {
  padding-block: var(--ml-space-section-spacious);
}


/* =========================================================
   12. SPLIT VARIANT
   Tekst + afzonderlijke afbeelding.
   Geen background-image nodig.
   ========================================================= */

.ml-hero--split {
  min-height: auto;
  background-image: none;
  background: var(--ml-color-surface-soft);
  color: var(--ml-color-text);
}

.ml-hero--split .ml-hero__overlay {
  display: none;
}

.ml-hero--split .ml-hero__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);
  align-items: center;
  gap: var(--ml-grid-gap-split);

  padding-block: var(--ml-space-section-spacious);
}

.ml-hero--split .ml-hero__content {
  width: 100%;
  padding-block: 0;
}

.ml-hero--split .ml-hero__eyebrow {
  color: var(--ml-color-primary);
}

.ml-hero--split .ml-hero__title {
  color: var(--ml-color-heading) !important;
  font-size: var(--ml-text-display-md);
}

.ml-hero--split .ml-hero__intro {
  color: var(--ml-color-text-muted);
}

.ml-hero__media {
  position: relative;
  overflow: hidden;
  min-height: 480px;

  border-radius: var(--ml-radius-media);
  background: var(--ml-color-surface-muted);
}

.ml-hero__media img,
.ml-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.ml-hero--split-reverse .ml-hero__media {
  order: -1;
}


/* =========================================================
   13. SCROLL INDICATOR
   Optioneel en puur ondersteunend.
   ========================================================= */

.ml-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-008);
  margin-top: var(--ml-space-032);

  color: var(--ml-color-text-inverse-muted);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  line-height: var(--ml-leading-ui);
  letter-spacing: var(--ml-tracking-ui);
  text-decoration: none;
}

.ml-hero--split .ml-hero__scroll {
  color: var(--ml-color-text-muted);
}


/* =========================================================
   14. LEGACY BUTTON COMPATIBILITY — DEPRECATED

   Nieuwe HTML:
   .ml-button .ml-button--primary / --inverse / --light

   Bestaande hero-HTML blijft voorlopig werken.
   ========================================================= */

.ml-hero__button {
  position: relative;
  display: inline-flex;
  min-height: var(--ml-control-height-md);
  padding: 12px var(--ml-space-024);
  align-items: center;
  justify-content: center;

  border:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    transparent;
  border-radius: var(--ml-radius-control);

  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-ui);
  font-weight: var(--ml-font-weight-semibold);
  line-height: var(--ml-leading-ui);
  letter-spacing: var(--ml-tracking-ui);
  text-decoration: none !important;

  transition:
    transform var(--ml-transition-interactive),
    background-color var(--ml-transition-interactive),
    border-color var(--ml-transition-interactive),
    color var(--ml-transition-interactive);
}

.ml-hero__button--primary {
  border-color: var(--ml-color-primary);
  background: var(--ml-color-primary);
  color: var(--ml-color-text-inverse) !important;
}

.ml-hero__button--primary:hover {
  border-color: var(--ml-color-primary-hover);
  background: var(--ml-color-primary-hover);
  color: var(--ml-color-text-inverse) !important;
  transform: translateY(-1px);
}

.ml-hero__button--secondary {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ml-color-text-inverse) !important;
}

.ml-hero__button--secondary:hover {
  border-color: var(--ml-white);
  background: var(--ml-white);
  color: var(--ml-color-primary-active) !important;
  transform: translateY(-1px);
}

.ml-hero__button:focus-visible {
  outline: var(--ml-border-width-medium) solid var(--ml-color-accent);
  outline-offset: var(--ml-space-004);
}


/* =========================================================
   15. TABLET
   ========================================================= */

@media (max-width: 980px) {

  .ml-hero {
    min-height: 580px;
    align-items: flex-end;
    background-position: var(--ml-hero-position-tablet, 58% center);
  }

  .ml-hero__content {
    width: min(680px, 100%);
    padding-block:
      var(--ml-space-080)
      var(--ml-space-064);
  }

  .ml-hero__title {
    max-width: 650px;
  }

  .ml-hero--split {
    min-height: auto;
    align-items: center;
  }

  .ml-hero--split .ml-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--ml-space-048);
    padding-block: var(--ml-space-section);
  }

  .ml-hero--split .ml-hero__media {
    min-height: 380px;
  }

  .ml-hero--split-reverse .ml-hero__media {
    order: initial;
  }
}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 680px) {

  .ml-hero {
    min-height: 520px;
	align-items: flex-end;
    background-position: var(--ml-hero-position-mobile, 60% center);
  }

  .ml-hero__overlay {
    background:
      linear-gradient(
        0deg,
        rgba(18, 40, 33, 0.97) 0%,
        rgba(18, 40, 33, 0.90) 48%,
        rgba(18, 40, 33, 0.56) 76%,
        rgba(18, 40, 33, 0.26) 100%
      );
  }

  .ml-hero__content {
    width: 100%;
	max-width: 560px;
    padding-block:
      var(--ml-space-064)
      var(--ml-space-040);
  }

  .ml-hero__eyebrow {
    gap: var(--ml-space-008);
    font-size: 0.6875rem;
	line-heigh: 1.3;
    letter-spacing: 0.13em;
  }

  .ml-hero__eyebrow::before {
    width: 20px;
  }

  .ml-hero__title {
    max-width: 11ch;
	margin-top: var(--ml-space-012);
    font-size: clamp(2rem, 8.5vw, 2.8rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance; 
  }

  .ml-hero--home .ml-hero__title {
    font-size: clamp(2.15rem, 9vw, 3rem);
  }

  .ml-hero__intro {
    max-width: 32rem;
    margin-top: var(--ml-space-016);
    font-size: var(--ml-text-body);
    line-height: 1.65;
  }

  .ml-hero__actions {
    display: grid;
	width: min(100%, 340px);
	grid-template-columns: 1fr;
	gap: var(--ml-space-012);
    margin-top: var(--ml-space-024);
  }

  .ml-hero__facts {
    gap: var(--ml-space-016);
    margin-top: var(--ml-space-032);
    padding-top: var(--ml-space-020);
  }

  .ml-hero__fact {
    min-width: calc(50% - var(--ml-space-008));
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }

  .ml-hero--split {
    min-height: auto;
  }

  .ml-hero--split .ml-hero__inner {
    gap: var(--ml-space-032);
    padding-block: var(--ml-space-section-compact);
  }

  .ml-hero--split .ml-hero__content {
    padding-block: 0;
  }

  .ml-hero--split .ml-hero__title {
    max-width: none;
	font-size: var(--ml-text-h1);
  }

  .ml-hero--split .ml-hero__media {
    min-height: 300px;
  }
}


/* =========================================================
   17. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .ml-hero {
    min-height: 500px;
  }

.ml-hero__content {
    padding-block:
      var(--ml-space-056)
      var(--ml-space-032);
  }

  .ml-hero__title {
    font-size: clamp(1.95rem, 9vw, 2.55rem);
  }

  .ml-hero__actions {
    display: grid;
    width: min(100%, 320px);
    grid-template-columns: 1fr;
  }

  .ml-hero__actions .ml-button,
  .ml-hero__button {
    width: 100%;
  }

  .ml-hero__fact {
    min-width: 100%;
  }
}


/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ml-hero__button {
    transition: none;
  }

  .ml-hero__button:hover {
    transform: none;
  }
}