/* ==========================================================================
   Monal Group — Hero widget
   Converted from the static build (assets/css/style.css). Values are the
   original Figma-derived numbers: 1 unit of --monal-u == 1 Figma px / 10.
   ========================================================================== */

/* ==========================================================================
   HERO  (Figma 1:845 panel 1890×960 r30 · mobile 1:1784 352×776)
   ========================================================================== */
.monal-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: calc(var(--monal-u) * 1.2) var(--monal-inset) 0; min-height: calc(var(--monal-u) * 77.6);
  border-radius: calc(var(--monal-u) * 2.2); background: var(--monal-hero-panel, #1f1a17); color: #fff;
  display: flex; flex-direction: column;
}
.monal-hero__media { position: absolute; inset: 0; z-index: -1; }
.monal-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 4% 100%; } /* solved vs Figma 1:1784 (NCC) */
/* Optional background video. Same box and framing as the image, painted on top
   of it and under .monal-hero__media::after, so the overlay and every bit of
   hero content stay exactly where they were. */
.monal-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 4% 100%;
  border: 0; pointer-events: none;
}
.monal-hero__video.monal-is-failed { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* Fall back to the still image rather than a looping clip. */
  .monal-hero__video { display: none; }
}
.monal-hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* Black overlay alpha solved per row from the Figma render vs the source photo (1:847) */
  background: linear-gradient(to bottom,
    rgba(0,0,0,.4) 0%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.15) 19%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.05) 32%,
    rgba(0,0,0,.19) 40%, rgba(0,0,0,.36) 49%, rgba(0,0,0,.5) 57%, rgba(0,0,0,.67) 65%, rgba(0,0,0,.76) 80%, rgba(0,0,0,.8) 100%);
}
.monal-hero__inner {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--monal-u) * 9.6) calc(var(--monal-u) * 1.3) calc(var(--monal-u) * 3);
}
.monal-hero__title {
  font-weight: 500; font-size: calc(var(--monal-u) * 4.4); line-height: calc(var(--monal-u) * 4.35); letter-spacing: -.04em; text-align: center;
}
.monal-hero__title em { font-family: var(--monal-f-serif); font-weight: 600; letter-spacing: -.04em; }
.monal-hero__aside { display: flex; flex-direction: column; }
.monal-hero__lead { font-size: calc(var(--monal-u) * 1.6); line-height: calc(var(--monal-u) * 2.2); text-align: center; color: var(--monal-c-white-70); margin: 0 auto calc(var(--monal-u) * 2.2); max-width: calc(var(--monal-u) * 31); }
.monal-hero__ctas { display: grid; gap: calc(var(--monal-u) * 1.1); }
.monal-hero__ctas .monal-btn { width: 100%; border-radius: calc(var(--monal-u) * .3) calc(var(--monal-u) * .3) calc(var(--monal-u) * 2) calc(var(--monal-u) * .3); }
.monal-hero__ctas .monal-btn--primary { gap: calc(var(--monal-u) * 2.7); }
.monal-email-form { position: relative; display: flex; align-items: center; margin-top: calc(var(--monal-u) * 2); border-bottom: 1px solid #fff; }
/* Scoped to .monal-hero so it outranks Hello Elementor's
   input[type="email"] { border: 1px solid #666; padding: … } reset. */
.monal-hero .monal-email-form__input {
  flex: 1; min-width: 0; height: calc(var(--monal-u) * 4.6); padding: 0 calc(var(--monal-u) * 3.4) calc(var(--monal-u) * 1.6) calc(var(--monal-u) * 1); background: transparent; border: 0; outline: 0;
  font-size: calc(var(--monal-u) * 1.2); font-weight: 600; text-transform: uppercase; color: #fff;
}
.monal-email-form__input::placeholder { color: #fff; opacity: 1; }
.monal-email-form__input:focus::placeholder { opacity: .5; }
.monal-email-form:focus-within { border-color: var(--monal-c-orange); }
.monal-email-form__submit { position: absolute; right: calc(var(--monal-u) * .6); display: grid; place-items: center; width: calc(var(--monal-u) * 3.2); height: calc(var(--monal-u) * 3.2); color: rgba(255,255,255,.7); transition: color .25s, transform .3s var(--monal-ease-out); }
.monal-email-form__submit:hover { color: var(--monal-c-orange); transform: translateY(calc(var(--monal-u) * .2)); }
.monal-email-form__submit .monal-i { width: calc(var(--monal-u) * 2.4); height: calc(var(--monal-u) * 2.4); }
.monal-email-form__msg { position: absolute; top: 100%; left: 0; margin-top: calc(var(--monal-u) * .6); font-size: calc(var(--monal-u) * 1.2); color: #fff; }
.monal-email-form__msg.monal-is-error { color: #ffb48a; }

@media (min-width: 768px) {
  .monal-hero { min-height: calc(var(--monal-u) * 86); }
  .monal-hero__inner { padding: calc(var(--monal-u) * 14) calc(var(--monal-u) * 4) calc(var(--monal-u) * 5); }
  .monal-hero__title { font-size: calc(var(--monal-u) * 7.2); text-align: left; }
  .monal-hero__lead { text-align: left; margin-left: 0; max-width: calc(var(--monal-u) * 50); font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.6); }
  .monal-hero__ctas { grid-template-columns: auto auto; justify-content: start; gap: calc(var(--monal-u) * 2); }
  .monal-hero__aside { max-width: calc(var(--monal-u) * 56.5); }
}
@media (min-width: 1200px) {
  .monal-hero { margin-top: calc(var(--monal-u) * 1.5); height: calc(var(--monal-u) * 96); min-height: 0; border-radius: calc(var(--monal-u) * 3); }
  .monal-hero__media img,
  .monal-hero__video { object-position: 50% 98%; }
  .monal-hero__inner {
    display: grid; grid-template-columns: 1fr calc(var(--monal-u) * 56.5); align-items: end; gap: calc(var(--monal-u) * 4);
    padding: 0 calc(var(--monal-u) * 17.3) calc(var(--monal-u) * 7.5) calc(var(--monal-u) * 6.9);
  }
  .monal-hero__title { font-size: calc(var(--monal-u) * 11.2); line-height: calc(var(--monal-u) * 12.8); }
  .monal-hero__title .monal-line { height: calc(var(--monal-u) * 12.8); }
  .monal-hero__aside { padding-bottom: calc(var(--monal-u) * 1.7); }
  .monal-hero__lead { font-size: max(calc(var(--monal-u) * 1.8), 14px); line-height: calc(var(--monal-u) * 2.6); margin-bottom: calc(var(--monal-u) * 1.9); }
  .monal-hero__ctas { gap: calc(var(--monal-u) * 2); }
  .monal-hero__ctas .monal-btn { width: auto; height: calc(var(--monal-u) * 7.4); font-size: max(calc(var(--monal-u) * 1.8), 13px); border-radius: var(--monal-leaf); }
  .monal-hero__ctas .monal-btn--primary { width: calc(var(--monal-u) * 28.4); gap: calc(var(--monal-u) * 1.8); }
  .monal-hero__ctas .monal-btn--outline { width: calc(var(--monal-u) * 26.1); }
  /* Hero buttons only. Unscoped, this shrank the arrow on every .monal-btn
     on the page -- including the News CTA, where it left the glyph adrift
     from its label. */
  .monal-hero__ctas .monal-btn .monal-i--arrow-ne { width: calc(var(--monal-u) * 1.1); height: calc(var(--monal-u) * 1.1); }
  .monal-email-form { margin-top: calc(var(--monal-u) * 3.3); }
  .monal-hero .monal-email-form__input { height: calc(var(--monal-u) * 4.4); padding: 0 calc(var(--monal-u) * 4) calc(var(--monal-u) * 1.6) 0; font-size: max(calc(var(--monal-u) * 1.8), 13px); }
  .monal-email-form__submit { right: 0; top: 0; }
}

/* ---------- Mobile specifics (Figma 1:1784) ---------- */
@media (max-width: 767px) {
  .monal-hero__media::after {
    background: linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.47) 18%, rgba(0,0,0,.34) 26%, rgba(0,0,0,.24) 34%, rgba(0,0,0,.1) 40%,
      rgba(0,0,0,.05) 46%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.56) 61%, rgba(0,0,0,.78) 80%, rgba(0,0,0,.83) 100%);
  }
}