/* ==========================================================================
   Monal Group — Footer 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.
   ========================================================================== */

/* ==========================================================================
   FOOTER  (Figma 1:1618 panel 1890×445 r50)
   ========================================================================== */
.monal-footer { padding: calc(var(--monal-u) * 1) var(--monal-inset) calc(var(--monal-u) * 1.8); }
.monal-footer__panel { background: var(--monal-footer-panel, var(--monal-c-ink)); color: #fff; border-radius: var(--monal-radius-panel); padding: calc(var(--monal-u) * 3.6) calc(var(--monal-u) * 2.1) calc(var(--monal-u) * 3.6); }
.monal-footer__top { display: grid; gap: calc(var(--monal-u) * 4.6); }
.monal-footer__title { font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 7); line-height: calc(var(--monal-u) * 6.7); letter-spacing: -.02em; }
.monal-footer__title .monal-line__in { display: inline-block; }
.monal-footer__arrow {
  display: inline-block; width: calc(var(--monal-u) * 3.4); height: calc(var(--monal-u) * 3.4); margin-left: calc(var(--monal-u) * 3.4); vertical-align: .15em;
  background: var(--monal-c-orange);
  -webkit-mask: url(../../assets/monal/icons/arrow-curved.svg) center / contain no-repeat; mask: url(../../assets/monal/icons/arrow-curved.svg) center / contain no-repeat;
  transform: rotate(-45deg); transition: transform .5s var(--monal-ease-out);
}
.monal-footer__panel:hover .monal-footer__arrow { transform: rotate(-45deg) translateX(calc(var(--monal-u) * .4)); }
.monal-footer__h { font-family: var(--monal-f-sans-alt); font-weight: 400; font-size: calc(var(--monal-u) * 1.8); line-height: 1.3; }
.monal-footer__links ul { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--monal-link-rows, 5), auto); margin-top: calc(var(--monal-u) * 1.8); }
.monal-footer__links a, .monal-footer__contact, .monal-footer__contact a { font-size: calc(var(--monal-u) * 1.6); line-height: calc(var(--monal-u) * 3); color: var(--monal-c-white-50); transition: color .25s; }
.monal-footer a:hover { color: #fff; }
.monal-footer__contact { display: grid; gap: calc(var(--monal-u) * 2.4); margin-top: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.4); }
.monal-footer__contact li { display: flex; gap: calc(var(--monal-u) * 1.2); align-items: flex-start; }
.monal-footer__contact .monal-i { width: calc(var(--monal-u) * 2); height: calc(var(--monal-u) * 2); margin-top: calc(var(--monal-u) * .2); color: rgba(255,255,255,.8); }
.monal-footer__contact a { line-height: calc(var(--monal-u) * 2.4); }
.monal-social { display: flex; gap: calc(var(--monal-u) * 1.6); margin-top: calc(var(--monal-u) * 1.4); }
.monal-social a {
  display: grid; place-items: center; width: calc(var(--monal-u) * 5.2); height: calc(var(--monal-u) * 5.2); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--monal-ease-out);
}
.monal-social .monal-i { width: calc(var(--monal-u) * 2.8); height: calc(var(--monal-u) * 2.8); }
.monal-social a:hover { background: var(--monal-c-orange); border-color: var(--monal-c-orange); color: #fff; transform: translateY(calc(var(--monal-u) * -.3)); }
.monal-footer__h--app { margin-top: calc(var(--monal-u) * 5); }
.monal-app-soon {
  position: relative; display: flex; align-items: center; gap: calc(var(--monal-u) * 1.2); width: 100%; max-width: calc(var(--monal-u) * 31.2); height: calc(var(--monal-u) * 5.4); margin-top: calc(var(--monal-u) * 1.2); padding: calc(var(--monal-u) * .3);
  border-radius: calc(var(--monal-u) * 1); overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
}
/* The two badges are 159 and 140 wide, which with the gap and padding needs
   317 — more than the 312 strip, so the second one was cropped (and ran past
   the viewport at 320). Letting each take at most half the row scales them
   down together instead of cutting one off. */
.monal-app-soon img {
  height: calc(var(--monal-u) * 4.7); width: auto;
  min-width: 0; max-width: calc(50% - calc(var(--monal-u) * .6));
  object-fit: contain; object-position: center;
  filter: blur(3px); opacity: .5;
}
.monal-app-soon span {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(30,25,22,.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-family: var(--monal-f-sans-alt); font-size: calc(var(--monal-u) * 1.8); text-transform: uppercase; letter-spacing: .02em;
}
.monal-footer__bottom { display: flex; flex-direction: column-reverse; align-items: center; gap: calc(var(--monal-u) * 1.8); margin-top: calc(var(--monal-u) * 5); text-align: center; }
.monal-footer__bottom p { width: 100%; padding-top: calc(var(--monal-u) * 1.8); border-top: 1px solid rgba(255,255,255,.12); font-size: calc(var(--monal-u) * 1.1); color: rgba(255,255,255,.5); }
.monal-legal { display: flex; gap: calc(var(--monal-u) * 1.6); }
.monal-legal a { font-size: calc(var(--monal-u) * 1.2); color: rgba(255,255,255,.5); }

@media (min-width: 768px) {
  .monal-footer__top { grid-template-columns: 1fr 1fr; }
  .monal-footer__title { grid-column: 1 / -1; font-size: calc(var(--monal-u) * 8.4); line-height: calc(var(--monal-u) * 8); }
  .monal-footer__bottom { flex-direction: row; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); padding-top: calc(var(--monal-u) * 2); }
  .monal-footer__bottom p { width: auto; padding: 0; border: 0; text-align: left; }
}
@media (min-width: 1200px) {
  .monal-footer { padding: calc(var(--monal-u) * 2.4) var(--monal-inset) calc(var(--monal-u) * 1.5); }
  .monal-footer__panel { height: calc(var(--monal-u) * 44.5); padding: calc(var(--monal-u) * 7.7) calc(var(--monal-u) * 7.7) 0; }
  .monal-footer__top { grid-template-columns: calc(var(--monal-u) * 69.6) calc(var(--monal-u) * 38.7) calc(var(--monal-u) * 34.2) auto; gap: 0; }
  .monal-footer__title { grid-column: auto; font-size: calc(var(--monal-u) * 10.8); line-height: calc(var(--monal-u) * 10.2); margin-top: calc(var(--monal-u) * .6); }
  .monal-footer__arrow { width: calc(var(--monal-u) * 7.7); height: calc(var(--monal-u) * 7.7); margin-left: calc(var(--monal-u) * 1); vertical-align: calc(var(--monal-u) * -1.2); } /* glyph 52×52 at (333,8118) */
  .monal-footer__h { font-size: max(calc(var(--monal-u) * 2), 13px); line-height: calc(var(--monal-u) * 2.3); }
  .monal-footer__links ul { grid-template-columns: calc(var(--monal-u) * 20.1) auto; margin-top: calc(var(--monal-u) * 3.3); }
  .monal-footer__links a, .monal-footer__contact, .monal-footer__contact a { font-size: max(calc(var(--monal-u) * 1.6), 12px); line-height: calc(var(--monal-u) * 3); }
  .monal-footer__contact { margin-top: calc(var(--monal-u) * 3.3); gap: calc(var(--monal-u) * 2.4); line-height: calc(var(--monal-u) * 2.4); }
  .monal-footer__contact a { line-height: calc(var(--monal-u) * 2.4); }
  .monal-footer__contact li { gap: calc(var(--monal-u) * 1.2); }
  .monal-social { margin-top: calc(var(--monal-u) * 1.5); gap: calc(var(--monal-u) * 1.6); }
  .monal-social a { width: calc(var(--monal-u) * 5.3); height: calc(var(--monal-u) * 5.3); }
  .monal-footer__h--app { margin-top: calc(var(--monal-u) * 2.5); }
  .monal-social .monal-i { width: calc(var(--monal-u) * 2.4); height: calc(var(--monal-u) * 2.4); }
  .monal-app-soon { width: calc(var(--monal-u) * 31.2); margin-top: calc(var(--monal-u) * 2.1); }
  .monal-app-soon span { font-size: max(calc(var(--monal-u) * 2), 12px); }
  .monal-footer__bottom { margin-top: calc(var(--monal-u) * 6.3); padding-top: calc(var(--monal-u) * 3); }
  .monal-footer__bottom p, .monal-legal a { font-size: max(calc(var(--monal-u) * 1.6), 11px); }
  .monal-legal { gap: calc(var(--monal-u) * 3); }
}