/* =========================================================
   MIRACLE LIQUORS – SECTIONS v2.1
   Verantwoordelijkheid: sectieritme, surfaces en sectiemodifiers

   v2.1:
   Typografische eigenschappen van .ml-section-intro zijn
   verhuisd naar typography.css.
   ========================================================= */

.ml-section {
  position: relative;
  width: 100%;
  padding-block: var(--ml-space-section);
}

.ml-section--compact {
  padding-block: var(--ml-space-section-compact);
}

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

.ml-section--space-top {
  padding-top: var(--ml-space-section-spacious);
}

.ml-section--space-bottom {
  padding-bottom: var(--ml-space-section-spacious);
}

.ml-section--flush {
  padding-block: 0;
}

.ml-section--white {
  background: var(--ml-color-surface);
}

.ml-section--cream {
  background: var(--ml-color-surface-soft);
}

.ml-section--soft {
  background: var(--ml-color-surface-tinted);
}

.ml-section--grey {
  background: var(--ml-color-surface-muted);
}

.ml-section--green {
  background:
    linear-gradient(
      135deg,
      var(--ml-color-surface-brand) 0%,
      var(--ml-color-surface-brand-strong) 100%
    );
  color: var(--ml-color-text-inverse-muted);
}

.ml-section--green-solid {
  background: var(--ml-color-surface-brand);
  color: var(--ml-color-text-inverse-muted);
}

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

.ml-section--border-top {
  border-top:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    var(--ml-color-border);
}

.ml-section--border-bottom {
  border-bottom:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    var(--ml-color-border);
}


/* =========================================================
   LEGACY SECTION HEADING — DEPRECATED

   Layout only. Typografie staat in typography.css.
   Wordt later components/section-header.css.
   ========================================================= */

.ml-section-heading {
  width: min(780px, 100%);
  margin:
    0
    auto
    var(--ml-space-grid-lg);
  text-align: center;
}

.ml-section-heading--left {
  margin-inline: 0;
  text-align: left;
}

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

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

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

.ml-section-intro {
  max-width: 700px;
  margin:
    var(--ml-space-stack-md)
    auto
    0;
}

.ml-section-heading--left .ml-section-intro,
.ml-section-intro--left {
  margin-inline: 0;
}

.ml-section-intro--narrow {
  max-width: 600px;
}

@media (max-width: 680px) {
  .ml-section-heading {
    margin-bottom: var(--ml-space-032);
  }

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

  .ml-section-intro {
    margin-top: var(--ml-space-012);
  }
}