/* =========================================================================
   MARIE ANN IT IS - hero met trage slider
   Vrijstaande producten en klanten op een zachte roze glow, met bladeren
   rondom. De uitsnedes in assets/img/hero/ zijn gemaakt met Apple Vision
   subject-lifting (hetzelfde als "Achtergrond verwijderen" in Voorvertoning).

   Wordt alleen ingeladen op de pagina die de hero gebruikt (zie
   includes/site-hero.php), dus de .mai-*-klassen zijn niet gescoped. De
   sectie-regels wel (.home = de front page, die class zet WP zelf), zodat een
   onbedoelde globale enqueue niet elke hero op de site overschrijft.
   ========================================================================= */
.home [data-sf-block="sf-hero"] .page-hero {
  /* Het blok zet model-foto + donkere gradient inline; inline verliest van !important. */
  background:
    radial-gradient(58% 66% at 71% 48%, rgba(255,255,255,.92), rgba(255,255,255,0) 60%),
    radial-gradient(44% 52% at 71% 54%, rgba(220,76,155,.34), rgba(220,76,155,0) 72%),
    linear-gradient(180deg, #fce0ed 0%, #f9d2e3 58%, #f6c7dc 100%) !important;
  display: block !important;
  position: relative;
  padding: 0 !important;
  min-height: 720px;
  isolation: isolate;
}

/* ---------- bladeren rondom de hele hero ----------
   Eén laag over de volle hero (achter tekst EN beeld), plukken in de vier
   hoeken zodat het beeld omlijst wordt. De crop heeft de roze achtergrond nog
   ingebakken, dus blenden op luminositeit (hue blijft die van de hero) +
   radiaal masker zodat de rechthoekige rand wegvalt. */
.mai-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mai-leaf {
  position: absolute;
  mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 52%, #000 38%, transparent 80%);
          mask-image: radial-gradient(72% 72% at 50% 52%, #000 38%, transparent 80%);
}
.mai-leaf img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Links rustiger, want daar staat de tekst over. */
.mai-leaf--tl { top: -14%; left: -9%;  width: 26%; height: 62%; opacity: .34; transform: scaleY(-1) rotate(6deg); }
.mai-leaf--bl { bottom: -16%; left: -11%; width: 30%; height: 68%; opacity: .40; }
.mai-leaf--tr { top: -16%; right: -8%; width: 30%; height: 66%; opacity: .52; transform: scaleX(-1) scaleY(-1) rotate(-4deg); }
.mai-leaf--br { bottom: -14%; right: -10%; width: 32%; height: 70%; opacity: .58; transform: scaleX(-1); }
.mai-leaf--bc { bottom: -26%; left: 34%; width: 26%; height: 52%; opacity: .30; transform: rotate(-8deg); }

/* ---------- slider ----------
   Slides liggen op elkaar en faden: 1,6s crossfade, 7s per slide. */
.mai-slider { position: relative; min-height: 720px; z-index: 2; }
.mai-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease-in-out, visibility 1.6s step-end;
}
.mai-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.6s ease-in-out, visibility 0s; }

.mai-slide__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 47%);
  align-items: center;
  column-gap: clamp(16px, 2vw, 36px);
  height: 100%;
  padding: clamp(40px, 4vw, 64px) clamp(24px, 5.5vw, 84px) clamp(72px, 6vw, 92px);
}

/* Trage drift: het beeld schaalt heel langzaam op zolang de slide actief is.
   Geeft rust/diepte zonder dat het als animatie opvalt. Duur volgt de slide:
   9s bij 7s hold, zodat de beweging nog loopt tijdens de crossfade. */
.mai-slide .mai-stage,
.mai-slide .mai-person { transform: scale(1); transition: transform 9s linear; }
.mai-slide.is-active .mai-stage,
.mai-slide.is-active .mai-person { transform: scale(1.045); }

/* ---------- podium ---------- */
.mai-stage { position: relative; aspect-ratio: 1 / 0.95; z-index: 2; }

/* De glow: geen harde rand, alleen licht dat naar buiten wegvalt. */
.mai-stage__glow {
  position: absolute;
  inset: 2% 0 6% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%,
      rgba(255,255,255,.96) 0%, rgba(255,255,255,.80) 22%, rgba(255,214,234,.62) 40%,
      rgba(232,120,175,.32) 58%, rgba(220,76,155,.10) 70%, rgba(220,76,155,0) 80%);
  filter: blur(6px);
}
.mai-stage__glow::after {
  content: "";
  position: absolute;
  inset: 22% 24% 30% 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 68%);
  filter: blur(14px);
}
/* Schaduw-ellips op de 'vloer' zodat niets zweeft. */
.mai-stage__floor {
  position: absolute;
  left: 14%; right: 14%; bottom: 12%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110,25,68,.26), rgba(110,25,68,0) 70%);
  filter: blur(7px);
  z-index: 1;
}

/* ---------- vrijstaande zakken ---------- */
.mai-prod { position: absolute; }
.mai-prod img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mai-prod--lead {
  width: 38%; height: 74%; left: 50%; bottom: 15%;
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(0 22px 22px rgba(110,25,68,.30)) drop-shadow(0 3px 8px rgba(110,25,68,.20));
}
.mai-prod--left, .mai-prod--right {
  width: 27%; height: 52%; bottom: 17%;
  z-index: 2;
  filter: drop-shadow(0 16px 18px rgba(110,25,68,.24));
}
.mai-prod--left  { left: 7%;  transform: rotate(-4deg); }
.mai-prod--right { right: 7%; transform: rotate(4deg); }

/* ---------- vrijstaande klant ----------
   Zij is het onderwerp op haar slide, dus groter dan een zak; het product
   staat er kleiner naast als bewijs. */
.mai-person {
  position: absolute;
  /* Onderkant gelijk met de onderrand van de hero. bottom:0 rekent vanaf de
     padding-box, dus dat IS de sectierand - geen correctie voor de padding. */
  /* De bronfoto's zijn aan de rechterkant al afgesneden (het model stond tegen
     de rand van de foto). Die rechte rand tegen de sectierand leggen, met een
     kleine bleed, zodat het als bewuste afsnijding leest i.p.v. een fout. */
  right: -1%;
  bottom: 0;
  width: 36%;
  height: 100%;
  transform-origin: 50% 100%;
  z-index: 3;
  filter: drop-shadow(0 26px 28px rgba(110,25,68,.22)) drop-shadow(0 4px 10px rgba(110,25,68,.14));
}
.mai-person img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

/* ---------- glas-labels ---------- */
.mai-chip {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(110,25,68,.14);
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #3a1f2e;
  white-space: nowrap;
}
.mai-chip b { font-size: 15px; color: #dc4c9b; }
.mai-chip--price { top: 14%; right: 1%; }
.mai-chip--natural { bottom: 14%; left: 0; }
.mai-chip--stars { top: 12%; left: 0; }
.mai-chip--stars b { letter-spacing: 1px; }

/* ---------- tekstblok ---------- */
.mai-proef-copy {
  max-width: 36rem;
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #dc4c9b;
}
.mai-eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, rgba(220,76,155,0), #dc4c9b);
}

.mai-proef-copy h1 {
  font-family: var(--sf-font-heading, "Cormorant Garamond", serif) !important;
  font-size: clamp(3.3rem, 5.4vw, 5.4rem) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -.01em !important;
  color: #22101a !important;
  margin: 0 0 20px !important;
  max-width: 15em;
}
/* Cursief accent in roze: echoot het script-logo in de header. */
.mai-proef-copy h1 em {
  font-style: italic;
  font-weight: 400;
  color: #dc4c9b;
  font-size: 1.06em;
  padding-right: .06em;
}

.mai-proef-copy .mai-lead {
  font-family: var(--sf-font-body, Figtree, sans-serif) !important;
  font-size: 1.1875rem !important;
  line-height: 1.7 !important;
  color: #5b4551 !important;
  max-width: 30rem !important;
  margin: 0 0 26px !important;
}

.mai-cta-row {
  display: flex;
  /* Onderkanten gelijk: de onderlijn van de link valt samen met de onderrand
     van de knop. ('center'/'baseline' lijnen de tekst uit, niet de onderkant.) */
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.mai-proef-copy .btn-primary {
  padding: 17px 40px !important;
  /* Geen border-radius hier: de reskin zet site-breed 5px !important op een
     specifiekere selector, en dat is de knopstijl van de hele site. */
  font-weight: 600 !important;
  letter-spacing: .01em;
  box-shadow: 0 12px 26px rgba(220,76,155,.32) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mai-proef-copy .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(220,76,155,.38) !important;
}
.mai-link {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: #22101a;
  text-decoration: none;
  border-bottom: 1px solid rgba(34,16,26,.25);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}
.mai-link:hover { color: #dc4c9b; border-color: #dc4c9b; }
.mai-link span { transition: transform .18s ease; display: inline-block; }
.mai-link:hover span { transform: translateX(3px); }

.mai-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(220,76,155,.22);
  width: 100%; max-width: 30rem;
}
.mai-tags span {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: #b0568a;
}

/* ---------- stipjes ---------- */
.mai-dots {
  position: absolute;
  left: clamp(24px, 5.5vw, 84px);
  bottom: clamp(30px, 3.4vw, 44px);
  display: flex;
  gap: 10px;
  z-index: 6;
}
.mai-dot {
  width: 26px; height: 4px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(220,76,155,.28);
  cursor: pointer;
  transition: background .6s ease, width .6s ease;
}
.mai-dot.is-active { background: #dc4c9b; width: 46px; }

/* Wie beweging uitzet, krijgt geen slider maar alleen de eerste slide. */
@media (prefers-reduced-motion: reduce) {
  .mai-slide { transition: none; }
  .mai-slide .mai-stage, .mai-slide.is-active .mai-stage { transition: none; transform: none; }
}

/* ---------- dames-slides ----------
   De glow is hier alleen nog achtergrondlicht (zij staat op de onderrand, niet
   in een cirkel), dus hoger geplaatst en zonder harde buitenrand. */
.mai-stage--person .mai-stage__glow {
  inset: -6% -4% 4% 16%;
  border-radius: 50%;
  background: radial-gradient(58% 62% at 52% 36%,
      rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 26%, rgba(255,214,234,.46) 48%,
      rgba(232,120,175,.18) 66%, rgba(220,76,155,0) 84%);
  filter: blur(16px);
}
.mai-stage--person .mai-stage__glow::after { display: none; }

/* ---------- labelslaag over de dames ----------
   De labels staan NIET meer in het podium: `.mai-stage` heeft z-index 2 en maakt
   daarmee een eigen stacking context, dus een z-index 5 op een chip daarbinnen
   komt nooit boven `.mai-person` (z-index 3) uit - de chip verdween achter haar.
   Deze laag staat in de markup na haar met een hogere z-index, dus het glas ligt
   echt over haar haar. Coordinaten zijn nu relatief aan de hele slide, en zij
   staat op `right: -1%` met `width: 36%`: haar linkerrand ligt dus rond 64%.
   Positioneer daarom vanaf rechts. */
.mai-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none; /* labels zijn geen knoppen; laat kliks door naar de tekst */
}

/* Tegen haar haar aan, met overlap. Per slide anders, want de ene draagt een
   bloemenkrans (linkerrand rond 72%) en de andere heeft volle krullen die veel
   verder naar links komen (rond 63%). */
.mai-overlay .mai-chip { left: auto; bottom: auto; }
.mai-overlay .mai-chip--stars   { top: 30%; right: 21%; }
.mai-overlay .mai-chip--natural { top: 26%; right: 27%; }

/* =========================================================================
   MOBIEL
   De slides blijven op elkaar gestapeld zodat de slider ook op een telefoon
   werkt; alleen de indeling per slide kantelt van twee kolommen naar tekst
   boven en beeld onder. Niet met `position: relative` op de slides werken:
   dan stapelen ze in de flow en wordt de hero drie keer zo hoog.
   ========================================================================= */
@media (max-width: 900px) {
  .home [data-sf-block="sf-hero"] .page-hero,
  .mai-slider { min-height: 660px; }

  .mai-slide__in {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 0;
    padding: clamp(28px, 6vw, 44px) clamp(20px, 6vw, 40px) clamp(56px, 9vw, 72px);
  }

  .mai-proef-copy { max-width: 30rem; }
  .mai-eyebrow { margin-bottom: 14px; }
  .mai-proef-copy h1 {
    font-size: clamp(2.3rem, 8.6vw, 3.4rem) !important;
    margin-bottom: 14px !important;
  }
  .mai-proef-copy .mai-lead {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    max-width: 26rem !important;
    margin-bottom: 20px !important;
  }
  .mai-cta-row { gap: 20px; margin-bottom: 18px; }
  .mai-proef-copy .btn-primary { padding: 15px 30px !important; }
  .mai-tags { padding-top: 16px; max-width: none; }

  /* Beeld onderaan, tekst erboven. Zij houdt haar rechterrand op de
     sectierand: de bronfoto's zijn rechts al afgesneden (het model stond tegen
     de rand van de foto), en tegen de paginarand valt die rechte snede samen
     met de rand. Schuif haar dus niet naar links, dan komt de snede midden in
     beeld te staan. */
  .mai-person {
    right: -2%;
    width: 64%;
    height: 54%;
  }
  /* Geen translateX gebruiken om te centreren: de trage drift zet zelf een
     transform op dit element en die zou de centrering overschrijven. */
  .mai-stage {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 3%;
    height: 50%;
    aspect-ratio: auto;
  }

  /* Labels: zij staat lager en smaller, dus de chips zakken mee. Ze moeten
     onder de tekstlink blijven, anders komt het glas over "Bekijk alle
     producten" te liggen; op haar haar is er ruimte. */
  .mai-chip { font-size: 12px; padding: 7px 13px; }
  .mai-chip b { font-size: 14px; }
  /* Op haar schouder, onder haar gezicht. Op 601-900px begint de foto op 43,6%
     van de slidehoogte en zit haar gezicht rond 61%: daar lag het label precies
     over haar oog. Boven de bloemen kan niet, want daar staat op 640px de
     CTA-regel nog. */
  .mai-overlay .mai-chip--stars   { top: 78%; right: 22%; }
  /* De tweede dame heeft volle krullen die veel verder naar links komen en haar
     hoofd zit lager in beeld: haar hals valt weg, dus haar label staat links
     tegen haar haar aan in plaats van erop. */
  .mai-overlay .mai-chip--natural { top: 70%; right: 42%; }

  /* Vier plukken blad in een smal beeld wordt rommelig: alleen de twee
     hoeken houden die het beeld omlijsten. */
  .mai-leaf--tl, .mai-leaf--bc { display: none; }
  .mai-leaf--bl { width: 46%; height: 42%; bottom: -8%; left: -16%; }
  .mai-leaf--tr { width: 52%; height: 40%; top: -10%; right: -14%; }
  .mai-leaf--br { width: 48%; height: 34%; bottom: -6%; right: -16%; opacity: .46; }

  .mai-dots { bottom: 22px; }
}

@media (max-width: 600px) {
  .home [data-sf-block="sf-hero"] .page-hero,
  .mai-slider { min-height: 620px; }

  /* De hashtags zijn decoratie; op een telefoon kost die regel ruimte die de
     kop en de knop beter gebruiken. */
  .mai-tags { display: none; }

  .mai-proef-copy .mai-lead { font-size: 1rem !important; }
  .mai-cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }

  .mai-person { width: 78%; height: 50%; }
  .mai-stage { left: 4%; right: 4%; height: 50%; bottom: 2%; }

  .mai-overlay .mai-chip--stars   { top: 58%; right: 36%; }
  .mai-overlay .mai-chip--natural { top: 58%; right: 42%; }
}