/* =========================================================
   MIRACLE LIQUORS – SECTION HEADER v2.0
   Component Library

   Varianten:
   - default
   - center
   - inverse
   - banner
   - banner-small
   - split

   Opties:
   - achtergrondfoto via --ml-section-header-image
   - overlay
   - optionele CTA's
   - width / spacing modifiers

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


/* =========================================================
   1. BASIS
   ========================================================= */

.ml-section-header {
  position: relative;
  display: flex;
  width: min(780px, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ml-space-stack-md);
  margin: 0 0 var(--ml-space-grid-lg);
}

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


/* =========================================================
   2. CONTENT
   Voor banner- en splitvarianten.
   ========================================================= */

.ml-section-header__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(780px, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ml-space-stack-md);
}

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


/* =========================================================
   3. EYEBROW
   ========================================================= */

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


/* =========================================================
   4. TITLE
   ========================================================= */

.ml-section-header__title {
  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;
}


/* =========================================================
   5. INTRO
   ========================================================= */

.ml-section-header__intro {
  max-width: 700px;
  color: var(--ml-color-text-muted);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-leading-body-relaxed);
}


/* =========================================================
   6. ACTIONS
   ========================================================= */

.ml-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ml-space-inline-md);
  padding-top: var(--ml-space-004);
}


/* =========================================================
   7. ALIGNMENT VARIANTS
   ========================================================= */

.ml-section-header--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.ml-section-header--center .ml-section-header__intro {
  margin-inline: auto;
}

.ml-section-header--center .ml-section-header__actions {
  justify-content: center;
}

.ml-section-header--right {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

.ml-section-header--right .ml-section-header__intro {
  margin-left: auto;
}

.ml-section-header--right .ml-section-header__actions {
  justify-content: flex-end;
}


/* =========================================================
   8. WIDTH VARIANTS
   ========================================================= */

.ml-section-header--narrow {
  width: min(680px, 100%);
}

.ml-section-header--wide {
  width: min(900px, 100%);
}


/* =========================================================
   9. SPACING VARIANTS
   ========================================================= */

.ml-section-header--compact {
  gap: var(--ml-space-stack-sm);
  margin-bottom: var(--ml-space-032);
}

.ml-section-header--spacious {
  gap: var(--ml-space-stack-lg);
  margin-bottom: var(--ml-space-064);
}

.ml-section-header--no-margin {
  margin-bottom: 0;
}


/* =========================================================
   10. INVERSE / DARK
   ========================================================= */

.ml-section-header--inverse .ml-section-header__eyebrow,
.ml-section-header--banner .ml-section-header__eyebrow,
.ml-section-header--split.ml-section-header--inverse .ml-section-header__eyebrow {
  color: var(--ml-color-accent);
}

.ml-section-header--inverse .ml-section-header__title,
.ml-section-header--banner .ml-section-header__title,
.ml-section-header--split.ml-section-header--inverse .ml-section-header__title {
  color: var(--ml-color-text-inverse);
}

.ml-section-header--inverse .ml-section-header__intro,
.ml-section-header--banner .ml-section-header__intro,
.ml-section-header--split.ml-section-header--inverse .ml-section-header__intro {
  color: var(--ml-color-text-inverse-muted);
}


/* =========================================================
   11. BANNER
   Volwaardige sectie-header met achtergrondfoto.
   Achtergrond via:
   style="--ml-section-header-image:url('...');"
   ========================================================= */

.ml-section-header--banner {
  width: 100%;
  min-height: clamp(360px, 42vw, 520px);
  margin: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: center;
  background-color: var(--ml-color-surface-brand-strong);
  background-image: var(--ml-section-header-image, none);
  background-position: var(--ml-section-header-position, center);
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}

.ml-section-header--banner .ml-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: inherit;
  align-items: center;
}

.ml-section-header--banner .ml-section-header__content {
  width: min(760px, 100%);
  padding-block: var(--ml-space-section-compact);
}

.ml-section-header--banner.ml-section-header--center .ml-section-header__content {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.ml-section-header--banner.ml-section-header--right .ml-section-header__content {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}


/* =========================================================
   12. BANNER OVERLAY
   ========================================================= */

.ml-section-header__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(24, 49, 41, 0.88) 0%,
      rgba(24, 49, 41, 0.72) 46%,
      rgba(24, 49, 41, 0.34) 100%
    );
  pointer-events: none;
}

.ml-section-header--center .ml-section-header__overlay {
  background:
    linear-gradient(
      0deg,
      rgba(24, 49, 41, 0.72),
      rgba(24, 49, 41, 0.54)
    );
}

.ml-section-header--overlay-strong .ml-section-header__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(24, 49, 41, 0.94) 0%,
      rgba(24, 49, 41, 0.82) 50%,
      rgba(24, 49, 41, 0.55) 100%
    );
}

.ml-section-header--overlay-soft .ml-section-header__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(24, 49, 41, 0.72) 0%,
      rgba(24, 49, 41, 0.54) 50%,
      rgba(24, 49, 41, 0.24) 100%
    );
}


/* =========================================================
   13. SMALL BANNER
   Voor categorieën / compacte pagina-intro's.
   ========================================================= */

.ml-section-header--banner-small {
  min-height: clamp(240px, 28vw, 340px);
}

.ml-section-header--banner-small .ml-section-header__content {
  width: min(720px, 100%);
  padding-block: var(--ml-space-048);
}

.ml-section-header--banner-small .ml-section-header__title {
  font-size: var(--ml-text-h2);
}


/* =========================================================
   14. SPLIT
   Tekst links/rechts en media aan de andere zijde.
   ========================================================= */

.ml-section-header--split {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--ml-grid-gap-split);
  margin-bottom: var(--ml-space-grid-lg);
}

.ml-section-header--split .ml-section-header__content {
  width: 100%;
}

.ml-section-header__media {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: var(--ml-radius-media);
  background: var(--ml-color-surface-muted);
}

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

.ml-section-header--split-reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.ml-section-header--split-reverse .ml-section-header__media {
  order: -1;
}


/* =========================================================
   15. BANNER TITLE SCALE
   Banner mag groter zijn dan gewone sectiekop, maar blijft
   kleiner dan de primaire Hero.
   ========================================================= */

.ml-section-header--banner:not(.ml-section-header--banner-small)
.ml-section-header__title {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: var(--ml-leading-display);
  letter-spacing: var(--ml-tracking-display);
}


/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

  .ml-section-header--split,
  .ml-section-header--split-reverse {
    grid-template-columns: 1fr;
    gap: var(--ml-space-048);
  }

  .ml-section-header--split-reverse .ml-section-header__media {
    order: initial;
  }

  .ml-section-header__media {
    min-height: 320px;
  }
}

@media (max-width: 680px) {

  .ml-section-header {
    gap: var(--ml-space-stack-sm);
    margin-bottom: var(--ml-space-032);
  }

  .ml-section-header__content {
    gap: var(--ml-space-stack-sm);
  }

  .ml-section-header__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
  }

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

  .ml-section-header--spacious {
    margin-bottom: var(--ml-space-048);
  }

  .ml-section-header--banner {
    min-height: 360px;
    background-position: var(--ml-section-header-position-mobile, 60% center);
  }

  .ml-section-header--banner .ml-section-header__content {
    padding-block: var(--ml-space-048);
  }

  .ml-section-header--banner:not(.ml-section-header--banner-small)
  .ml-section-header__title {
    font-size: clamp(2rem, 8.5vw, 3rem);
  }

  .ml-section-header--banner-small {
    min-height: 260px;
  }

  .ml-section-header__overlay {
    background:
      linear-gradient(
        0deg,
        rgba(24, 49, 41, 0.94) 0%,
        rgba(24, 49, 41, 0.76) 56%,
        rgba(24, 49, 41, 0.42) 100%
      );
  }

  .ml-section-header__media {
    min-height: 260px;
  }
}