/* ==========================================================================
   MIEDEMA ASSISTANCE — HERO COMPONENT
   /assets/css/ma-hero.css

   Dependencies: ma-root.css (moet eerst geladen zijn).
   Gebruik in combinatie met bestaande .hp-hero class voor header-overlay.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO BODY
   --------------------------------------------------------------------------
   Background-image wordt per instance doorgegeven via een custom prop:
     <section class="ma-hero hp-hero"
              style="--ma-hero-img: url(...);">
   -------------------------------------------------------------------------- */

.ma-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* 75vh op desktop, getemperd met absolute min/max zodat het niet
     absurd wordt op 4K-schermen of heel kleine devices. svh voor
     mobiele browsers die UI-chrome laten zakken. */
  min-block-size: clamp(32rem, 75svh, 48rem);

  display: flex;
  align-items: flex-end;

  color: var(--ma-white);
  background-color: var(--ma-surface-inverse);  /* fallback terwijl img laadt */

  /* 3 lagen, van voor naar achter:
     1) Links-donker → rechts-helder. Creëert een virtueel tekstpaneel
        zonder dat we een echte kader of glaseffect hoeven te tekenen.
     2) Subtiele top→bottom voor zachte overgang naar de data-strip.
     3) De foto zelf.                                                   */
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--ma-surface-inverse) 78%, transparent) 0%,
      color-mix(in srgb, var(--ma-surface-inverse) 45%, transparent) 35%,
      color-mix(in srgb, var(--ma-surface-inverse)  5%, transparent) 65%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ma-surface-inverse) 15%, transparent) 0%,
      color-mix(in srgb, var(--ma-surface-inverse) 35%, transparent) 55%,
      color-mix(in srgb, var(--ma-surface-inverse) 80%, transparent) 100%
    ),
    var(--ma-hero-img, none);
  background-size: cover, cover, cover;
  background-position: center, center, center 25%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}


/* --------------------------------------------------------------------------
   2. HERO INNER — content wrapper
   -------------------------------------------------------------------------- */

.ma-hero-inner {
  inline-size: 100%;
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-inline: var(--ma-wrap-gutter);

  /* Houd rekening met overlay-header bovenin. --ma-header-h komt uit
     ma-root.css. Fallback op --header-h voor backward compat met style.css. */
  padding-block-start: calc(var(--ma-header-h, var(--header-h, 6rem)) + var(--ma-space-md));
  padding-block-end: var(--ma-space-lg);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ma-space-sm);
}


/* --------------------------------------------------------------------------
   3. HERO TYPOGRAPHY
   -------------------------------------------------------------------------- */

.ma-hero-kicker {
  margin: 0;
  color: var(--ma-green-400);
  font-size: var(--ma-text-2xs);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-widest);
  text-transform: uppercase;
  text-wrap: balance;
  max-inline-size: none;
}

.ma-hero-title {
  margin: 0;
  color: var(--ma-white);

  /* Grotere display-schaal dan de h1 uit ma-root; alleen hier */
  font-size: clamp(2rem, 1rem + 5vw, 4.5rem);
  font-weight: var(--ma-weight-bold);
  line-height: 1.04;
  letter-spacing: var(--ma-tracking-tight);
  text-wrap: balance;
  max-inline-size: 20ch;
}

.ma-hero-lead {
  margin: 0;
  color: var(--ma-off-white);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: var(--ma-leading-snug);
  letter-spacing: var(--ma-tracking-body);
  max-inline-size: var(--ma-measure-prose);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   4. HERO ACTIONS + BUTTONS
   --------------------------------------------------------------------------
   .ma-btn is bewust generiek gehouden — bruikbaar buiten de hero.
   .ma-btn-secondary gebruikt currentColor, dus hij adapteert zich aan
   de tekstkleur van de context (wit op donker, donker op licht).
   -------------------------------------------------------------------------- */

.ma-hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ma-space-xs);
  margin-block-start: var(--ma-space-2xs);
  inline-size: 100%;
  max-inline-size: 24rem;
  align-items: stretch;
}

@media (min-width: 32em) {
  .ma-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    inline-size: auto;
    max-inline-size: none;
    align-items: center;
  }
}

.ma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;

  padding-block: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
  padding-inline: clamp(1.25rem, 1rem + 1vw, 2rem);

  font-size: var(--ma-text-sm);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-body);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  background-color: transparent;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;

  transition:
    background-color var(--ma-duration-fast) var(--ma-ease),
    color            var(--ma-duration-fast) var(--ma-ease),
    border-color     var(--ma-duration-fast) var(--ma-ease);
}

/* Belangrijk: browsers geven <a> tags default blauwe/paarse :link en
   :visited kleuren. Die winnen van .ma-btn-primary { color: ... } als
   het een anchor is, omdat :link en :visited even-specifiek zijn maar
   later in de user-agent stylesheet komen. We moeten expliciet
   :link en :visited targeten om altijd te winnen. */
a.ma-btn,
a.ma-btn:link,
a.ma-btn:visited {
  text-decoration: none;
}

.ma-btn:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 3px;
}


/* PRIMARY BUTTON — alle states expliciet gedefinieerd zodat browser
   defaults (blauw/paars voor visited links) geen kans krijgen. */
.ma-btn-primary,
a.ma-btn-primary:link,
a.ma-btn-primary:visited {
  background-color: var(--ma-accent);
  color: var(--ma-accent-ink);
  border-color: var(--ma-accent);
}

.ma-btn-primary:is(:hover, :focus-visible),
a.ma-btn-primary:hover,
a.ma-btn-primary:focus-visible {
  background-color: var(--ma-accent-hover);
  border-color: var(--ma-accent-hover);
  color: var(--ma-accent-ink);
}


/* SECONDARY BUTTON — zelfde behandeling */
.ma-btn-secondary,
a.ma-btn-secondary:link,
a.ma-btn-secondary:visited {
  background-color: transparent;
  color: currentColor;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

.ma-btn-secondary:is(:hover, :focus-visible),
a.ma-btn-secondary:hover,
a.ma-btn-secondary:focus-visible {
  background-color: currentColor;
  color: var(--ma-surface-inverse);
  border-color: currentColor;
}

/* Binnen de hero: stevige donkere plaat + heldere witte rand en tekst.
   Expliciete --ma-white / --ma-black (i.p.v. currentColor) wint altijd
   van GenerateBlocks' default button-kleuren. */
.ma-hero .ma-btn-secondary,
.ma-hero a.ma-btn-secondary:link,
.ma-hero a.ma-btn-secondary:visited {
  background-color: color-mix(in srgb, var(--ma-black) 55%, transparent);
  color: var(--ma-white);
  border-color: color-mix(in srgb, var(--ma-white) 75%, transparent);
}

.ma-hero .ma-btn-secondary:is(:hover, :focus-visible),
.ma-hero a.ma-btn-secondary:hover,
.ma-hero a.ma-btn-secondary:focus-visible {
  background-color: var(--ma-white);
  color: var(--ma-black);
  border-color: var(--ma-white);
}


/* --------------------------------------------------------------------------
   5. HERO STRIP — data-band direct onder hero
   --------------------------------------------------------------------------
   Zelfde patroon als .ma-sgl-strip uit ma-vacature-styles, maar donker
   in plaats van licht. Intrinsic grid: 4 cellen desktop, 2 op tablet,
   1 op mobiel — geen media queries nodig.
   -------------------------------------------------------------------------- */

.ma-hero-strip {
  background-color: var(--ma-surface-inverse);
  color: var(--ma-white);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 14%, transparent);
}

.ma-hero-strip-inner {
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));

  /* 1px gap gevuld met een half-transparante witte lijn = divider-effect */
  gap: 1px;
  background-color: color-mix(in srgb, var(--ma-white) 14%, transparent);
}

.ma-hero-strip-cell {
  background-color: var(--ma-surface-inverse);
  padding:
    clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem)
    clamp(1rem,    0.8rem + 0.8vw, 1.5rem);
}

.ma-hero-strip-label {
  display: block;
  margin-block-end: 5px;
  color: color-mix(in srgb, var(--ma-white) 55%, transparent);
  font-size: var(--ma-text-3xs);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-wider);
  text-transform: uppercase;
}

.ma-hero-strip-value {
  display: block;
  color: var(--ma-white);
  font-size: var(--ma-text-sm);
  font-weight: var(--ma-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--ma-tracking-body);
}


/* --------------------------------------------------------------------------
   6. RESET — forceer scherpe hoeken binnen het hero-blok
   -------------------------------------------------------------------------- */

.ma-hero,
.ma-hero *,
.ma-hero-strip,
.ma-hero-strip * {
  border-radius: 0 !important;
}